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

最新推荐文章于 2022-11-15 10:41:22 发布

weixin_30848775

最新推荐文章于 2022-11-15 10:41:22 发布

阅读量150

点赞数

原文链接：http://www.cnblogs.com/dglives/p/3574736.html

版权

在我们设计网站的时候，在不同的页面中为元素设置相应的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的方法

转载于:https://www.cnblogs.com/dglives/p/3574736.html

weixin_30848775

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两种在wordperss中动态设置body ID的方法

在我们设计网站的时候，在不同的页面中为元素设置相应的id是有非常大的好处的，这非常有利于识别创建独特的css样式。今天向大家分享四种在wordperss中动态设置body ID 的方法。例如我们常见的<body id="about"> 在这种情况下，about 这个id就可以清楚的告诉我们它对应的是一个 About 的页面，或者是一个名字为about.php...
复制链接

扫一扫