首页 > 其他 > 详细

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

时间:2014-03-02 00:40:43      阅读:432      评论:0      收藏:0      [点我收藏+]

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

例如我们常见的

bubuko.com,布布扣
<body id="about"> 
bubuko.com,布布扣

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

bubuko.com,布布扣
<body id="archive">
 
<body id="contact">
 
<body id="subscribe">
 
<body id="portfolio">
bubuko.com,布布扣

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

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

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

该方法利用了wordpress的条件标签对body元素设置对应的id标识

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

动态设置body ID的第二种方法:
该方法与第一种方法类似,但更加简洁通用,只需在body标签中添加一次调用即可,我们先将以下代码添加到function.php文件中。

bubuko.com,布布扣
<?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"‘;
    }
}
?>
bubuko.com,布布扣

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

bubuko.com,布布扣
<body<?php dynamicBodyID(); ?>>
bubuko.com,布布扣

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

两种在wordperss中动态设置body ID的方法,布布扣,bubuko.com

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!