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

调用方法：在body元素中直接调用 dynamicBodyID()便可。blog

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

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