两种在wordperss中动态设置body ID的方法

时间:2022-02-10 21:52:24

    在我们设计网站的时候,在不同的页面中为元素设置相应的id是有非常大的好处的,这非常有利于识别创建独特的css样式。今天向大家分享四种在wordperss中动态设置body ID 的方法。

例如我们常见的

<body id="about"> 

在这种情况下,about 这个id就可以清楚的告诉我们它对应的是一个 About 的页面,或者是一个名字为about.php的文件,类似其它的页面我们也可以对其添加相应的id标识。

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

这样我们就可以很清楚的识别出所对应的页面了,为body添加id标识有可以有以下好处:

1. 我们可以很明确的通过css的特殊性控制页面的元素,而不必担心样式冲突等问题。
2. 利用页面的唯一性使用JavaScript操作DOM元素。
3. 通过页面的唯一性,id标识全控制导航栏的表现方式,如标识出当前等等。
4. 利用页面的唯一性,使用一些php的条件语句 if() 来判断将更加方便快捷。

动态设置body ID的第一种方法:

该方法利用了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文件中。

<?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"';
    }
}
?>

调用方法:在body元素中直接调用 dynamicBodyID()即可。

<body<?php dynamicBodyID(); ?>>

 文章来源:两种在wordperss中动态设置body ID的方法