在我们设计网站的时候,在不同的页面中为元素设置相应的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(); ?>>