兩種在wordperss中動態設置body ID的方法

時間 2019-12-09

標籤兩種 wordperss 動態設置 body 方法简体版

原文原文鏈接

在咱們設計網站的時候，在不一樣的頁面中爲元素設置相應的id是有很是大的好處的，這很是有利於識別建立獨特的css樣式。今天向你們分享四種在wordperss中動態設置body ID 的方法。php

例如咱們常見的css

<body id="about">

在這種狀況下，about 這個id就能夠清楚的告訴咱們它對應的是一個 About 的頁面，或者是一個名字爲about.php的文件，相似其它的頁面咱們也能夠對其添加相應的id標識。wordpress

<body id="archive">
 
<body id="contact">
 
<body id="subscribe">
 
<body id="portfolio">

這樣咱們就能夠很清楚的識別出所對應的頁面了，爲body添加id標識有能夠有如下好處：post

1. 咱們能夠很明確的經過css的特殊性控制頁面的元素，而沒必要擔憂樣式衝突等問題。
2. 利用頁面的惟一性使用JavaScript操做DOM元素。
3. 經過頁面的惟一性，id標識全控制導航欄的表現方式，如標識出當前等等。
4. 利用頁面的惟一性,使用一些php的條件語句 if() 來判斷將更加方便快捷。網站

動態設置body ID的第一種方法：spa

該方法利用了wordpress的條件標籤對body元素設置對應的id標識設計

<?php if (is_home()) { ?>
 
    <body id="home">
 
<?php } elseif (is_archive) { ?>
 
    <body id="archive">
 
<?php } else { ?>
 
    <body class="<?php echo $post->post_name; ?>">
 
<?php } ?>

動態設置body ID的第二種方法：
該方法與第一種方法相似，但更加簡潔通用,只需在body標籤中添加一次調用便可，咱們先將如下代碼添加到function.php文件中。code

<?php // 動態設置body id
 
function dynamicBodyID() {
 
    if (is_home()) {
 
        echo ' id="home"';
 
    } elseif (is_single()) {
 
        echo ' id="single"';
 
    } elseif (is_search()) {
 
        echo ' id="search"';
 
    } elseif (is_archive()) {
 
        echo ' id="archive"';
    }
}
?>