在不同WP页面的Body标记中添加不同的CSS类

时间：2019-10-10 作者：The Chewy

我正在将一个20页的静态HTML站点转换为自定义Wordpress主题。在静态站点的每个页面上body 标签有一个自定义CSS类，即“银行页面”。

我知道WP在body标记中生成页面id类来表示各个页面（即page-id-27），但就可读性（和可传输性）而言，是否可以在每个页面上添加一点php，从而将特定类插入到该特定页面的body标记CSS中？使用body_class() 函数不会这样做，因为它会显示在每个页面上。

提前感谢

艾米丽。

4 个回复

最合适的回答,由SO网友:KGreene 整理而成

在您的功能中。php：

function my_body_class($classes) {

    if(is_page()){
      global $page;
      $title = get_the_title(  $page );
      $classes[] = $title;

    }
    return $classes;
}

add_filter(\'body_class\', \'my_body_class\');

这将把页面标题作为类添加到每个页面。

SO网友:Faye

你有几个选择。

Option 1: Use the body_class() function to add the page slug to the class.

function add_slug_body_class( $classes ) {
     global $post;
  if ( isset( $post ) ) {
     $classes[] = $post->post_name;
  }
  return $classes;
}

add_filter( \'body_class\', \'add_slug_body_class\' );

然后，不管url是什么，只要说“yourdomainpage.com/banking-page”，它就会将“banking-page”作为主体的一个类。这意味着您的URL需要与您的类对齐，因此这可能不是理想的解决方案。

Option 2: Add a body class meta box to your pages. 我更喜欢使用ACF 为此，也可以使用add_meta_box()function.

填写完后，使用选项1中列出的相同功能，除了替换$post->post_name; 使用元框/ACF field value.

SO网友:Vantiya

您想在不同的页面上添加不同的CSS类。你可以通过页面或页面id来检查它。这对你来说会有点长。然而，您可以通过两种方式来实现。（可能还有更多的方法，但我建议您选择这两种）

对于这两种情况，您应该将以下代码添加到活动主题的头文件中，在其中渲染body标记

<body <?php body_class( \'class-name\' ); ?>>

<使用body\\u类过滤器（挂钩）中的代码检查页面：

add_filter( \'body_class\', \'add_custom_class\', 10, 1);
function add_custom_class( $classes ) {
    if ( is_page( 57 ) ) { 
        // 57 is your desire page id for example
        // if ( is_page ( \'home\' ) ) { // the slug of page
        array_merge( $classes, array( \'home-class\' ) );
    } elseif( is_page( 58 ) ) { 
        // elseif ( is_page(\'about-us\') ) {
        array_merge( $classes, array( \'about-class\' ) );
    } elseif ( is_page( 60 ) ) { 
        // elseif( is_page(\'contact-us\') )
        array_merge( $classes, array( \'contact-class\' ) );
    } 
    // until all your pages are finished.
    return $classes;
}

另一种方法是在wp admin中的每个页面上添加元框或自定义字段，并添加该页面的类，然后修改上述代码，如下所示：

    add_filter( \'body_class\', \'add_custom_class\', 10, 1);
    function add_custom_class( $classes ) {
        // If you\'re using custom-field or meta that should be shaved in postmeta table
        global $post;
        $page_class = get_post_meta( $post->ID, \'meta_key\', true );
        // You can use Advance custom field plugins to add fields into your posts/pages
        // If you use ACF plugin you can use get_field( \'selector\', $post->ID ) instead of get_post_meta(...);
        if ( is_page() ) {
            if( \'\' != $page_class ) {
                array_merge( $classes, array( $page_class ) );
            }
        } 
        return $classes;
    }

SO网友:test1gddg

// add body class for that.
add_filter( \'body_class\', \'custom_class\' );
function custom_class( $classes ) {
    if ( is_single() && \'post\' == get_post_type() ) {
        $classes[] = \'article-page\';
    }

    else{
      if(!is_page(\'library\'))  $classes[] = \'home\';
    }
    if(is_page(\'contact-page\')){
       $classes[] = \'contact-page\';
    }   
    if(is_page(\'banking-page\')){
      $classes[] = \'banking-page\';
    }
  return $classes;
}

小码农CODE

在不同WP页面的Body标记中添加不同的CSS类

相关推荐

在single.php中显示作者的角色和姓名