zoukankan      html  css  js  c++  java
  • 两种在wordperss中动态设置body ID的方法

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

  • 相关阅读:
    English,The Da Vinci Code, Chapter 23
    python,meatobject
    English,The Da Vinci Code, Chapter 22
    English,The Da Vinci Code, Chapter 21
    English,The Da Vinci Code, Chapter 20
    English,The Da Vinci Code, Chapter 19
    python,xml,ELement Tree
    English,The Da Vinci Code, Chapter 18
    English,The Da Vinci Code, Chapter 17
    English,The Da Vinci Code, Chapter 16
  • 原文地址:https://www.cnblogs.com/dglives/p/3574736.html
Copyright © 2011-2022 走看看