如何添加類到Wordpress的身體元素與時間日期條件？

我搞清楚如何類添加到WordPress的主體元素隨時間日期條件，有一個例子：如何添加類到Wordpress的身體元素與時間日期條件？

jQuery(document).ready(function() { 



function applyclass() 
{ 
var d = new Date(); 
var n = d.getHours(); 





if (n > 20 && n < 06) 
jQuery('body').addClass('night'); 

else if (n > 16 && n < 19) 
jQuery('body').addClass('sunset'); 

else 
jQuery('body').addClass('day'); 
} 
window.onload = applyclass; 


});

我檢查過了，包括文件夾的位置並沒有控制檯錯誤，但問題是這個腳本是不是執行。

謝謝！

來源

2012-10-13 Ivan

您的if語句正在測試錯誤的條件。

if (n > 20 && n < 06) 
    jQuery('body').addClass('night');

n不能超過20，但大於6（你也不需要在數字前面的零，我不認爲這是錯誤的但這是不必要的）

你也不需要window.onload部分，因爲整個代碼塊只會在文檔加載後執行。相反，您可以在document.ready中調用applyclass()並將該功能移出該塊。

但除此之外，代碼沒有問題，邏輯錯誤。找出你想要它做什麼，並改變if語句的條件，它應該工作。

來源

2012-10-13 02:21:15 sachleen

我編輯如果（n = 21） jQuery（'body'） .addClass（ '夜間'）;以及它不起作用 – Ivan

http://jsbin.com/econuh/1 - 你的代碼，因爲它在原來的問題工作得很好。如果它在你的實現中不起作用，那麼其他的東西就會導致這個問題，我們需要更多的信息。 – sachleen

我認爲Wordpress正在拖動我...我不確定它是如何工作的，你可以用檢查www.powerupware.com時間來試試它。js和style.css的第一行 – Ivan

嘗試刪除window.onload語句。這是多餘的。與你的函數的調用替換：

applyclass();

的第一行：

jQuery(document).ready(function() {

已經可以確保這不會運行，直到DOM被加載。

來源

2012-10-13 02:21:38 manishie

我刪除了window.onload，並替換爲applyclass（）;沒有發生：/ – Ivan

你好得多添加類身體機能與

<body <?php body_class($class); ?>>

比用jQuery改寫它。見

http://codex.wordpress.org/Function_Reference/body_class#Add_Classes_By_Filters

如何掛鉤到體類在你的主題的functions.php文件

。

來源

2012-10-13 02:51:41 markratledge

你會舉一個例子用jQuery來重寫它嗎？我不知道它如何與PHP一起工作 – Ivan

我發現了一個解決方案，我刪除了jQuery（document）.ready（function（）{}和一些修改過的語句，它現在可以工作了。回答我的問題！

function applyclass() 
{ 
var d = new Date(); 
var n = d.getHours(); 


if (n == 5) 
jQuery('body').addClass('night'); 
if (n == 4) 
jQuery('body').addClass('night'); 
if (n == 3) 
jQuery('body').addClass('night'); 
if (n == 2) 
jQuery('body').addClass('night'); 
if (n == 1) 
jQuery('body').addClass('night'); 
if (n == 0) 
jQuery('body').addClass('night'); 
if (n == 23) 
jQuery('body').addClass('night'); 
if (n == 22) 
jQuery('body').addClass('night'); 
if (n == 21) 
jQuery('body').addClass('night'); 
if (n == 20) 
jQuery('body').addClass('night'); 


else if (n == 6) 
jQuery('body').addClass('sunset'); 
else if (n == 7) 
jQuery('body').addClass('sunset'); 
else if (n == 8) 
jQuery('body').addClass('sunset'); 
else if (n == 18) 
jQuery('body').addClass('sunset'); 
else if (n == 19) 
jQuery('body').addClass('sunset'); 

else if (n == 9) 
jQuery('body').addClass('day'); 
else if (n == 10) 
jQuery('body').addClass('day'); 
else if (n == 11) 
jQuery('body').addClass('day'); 
else if (n == 12) 
jQuery('body').addClass('day'); 
else if (n == 13) 
jQuery('body').addClass('day'); 
else if (n == 14) 
jQuery('body').addClass('day'); 
else if (n == 15) 
jQuery('body').addClass('day'); 
else if (n == 16) 
jQuery('body').addClass('day'); 
else if (n == 17) 
jQuery('body').addClass('day'); 

} 
window.onload = applyclass;

來源

2012-10-13 04:12:04 Ivan

我知道你很可能不會找一個PHP函數，但這裏是我做了什麼，這可以被添加到的functions.php https://gist.github.com/Garconis/11e7e4c316b4f5c4e5dfcbe7d916f5c3

<?php 
// Add the times and days to the body classes 
// e.g., date-day-wednesday date-ymd-20170614 date-month-june time-military-1317 time-pm time-early-afternoon 
add_filter('body_class', 'add_date_info_to_class_names'); 
function add_date_info_to_class_names($classes) { 
    // current day of week name 
    $classes[] = 'date-day-' . strtolower(date_i18n('l')); 
    // current full date YYYYMMDD 
    $classes[] = 'date-ymd-' . strtolower(date_i18n('Ymd')); 
    // current month name 
    $classes[] = 'date-month-' . strtolower(date_i18n('F')); 
    // current military time HHMM 
    $classes[] = 'time-military-' . strtolower(date_i18n('Hi')); 
    // check hour and add am or pm class 
    if (date_i18n('H') >= 12){ 
     $classes[] = 'time-pm'; 
    } else { 
     $classes[] = 'time-am'; 
    } 
    // check hour and add time of day descriptor 
    if (preg_match("/(00|01|02)/i", date_i18n('H'))){ 
     $classes[] = 'time-early-night'; 
    } 
    elseif (preg_match("/(03|04|05)/i", date_i18n('H'))){ 
     $classes[] = 'time-late-night'; 
    } 
    elseif (preg_match("/(06|07|08)/i", date_i18n('H'))){ 
     $classes[] = 'time-early-morning'; 
    } 
    elseif (preg_match("/(09|10|11)/i", date_i18n('H'))){ 
     $classes[] = 'time-late-morning'; 
    } 
    elseif (preg_match("/(12|13|14)/i", date_i18n('H'))){ 
     $classes[] = 'time-early-afternoon'; 
    } 
    elseif (preg_match("/(15|16|17)/i", date_i18n('H'))){ 
     $classes[] = 'time-late-afternoon'; 
    } 
    elseif (preg_match("/(18|19|20)/i", date_i18n('H'))){ 
     $classes[] = 'time-early-evening'; 
    } 
    elseif (preg_match("/(21|22|23)/i", date_i18n('H'))){ 
     $classes[] = 'time-late-evening'; 
    } 
    return $classes; 
}

來源

2017-07-26 16:20:41 Garconis

如何添加類到Wordpress的身體元素與時間日期條件？

回答

相關問題