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的方法

  • 相关阅读:
    es6 数组的扩展
    面向对象的7大原则及其实例
    flex 布局
    一、创建vue
    箭头函数
    destructuring
    spreed&rest
    变量新声明之let、const
    jQuery之遍历索引相关方法
    jQuery之位置坐标图形相关方法
  • 原文地址:https://www.cnblogs.com/dglives/p/3574736.html
Copyright © 2011-2022 走看看