自定义功能显示在所有页面上

Question

WordPress|店面|woo-commerce。 我正在尝试在桌面视图上显示页眉并在移动响应上显示特定页面 id 1 的页脚。但即使使用特定的页面 id 两个类都显示在页面 id 1 页眉、页脚上。尝试了具有层次结构级联规则的 id 和类。这里 id abc 显示在页面 id 1 桌面视图和 abcd 页面 id 1 移动。 我的子 function.php 代码是

      add_action( 'storefront_header', 'header_content1', 30 );
  function header_content1() { ?>
    <div id/class="abc" > my text with css</div><?php
  }
  add_action( 'storefront_after_footer', 'header_content2', 10 );
  function header_content2() { ?>
    <div id/class="abcd" > my text with css</div><?php

    }

CSS 子主题。

     .page-id-1 .abc {
     text-align: right;
    padding-top: 0.02em;
    color: #0000ff;
 }
 .abc{
    display:none!important;

 }
 .abcd{
    display:none!important;
 }

 .page-id-1 .abcd{
    display:none!important;
 visibility:hidden; 
 }

 @media only screen and (max-width: 599px){

 .abc{
    display:none!important;

 }
 .abcd{
    display:none!important;
 }
 .page-id-1 .abc{
    display:none !important;
 visibility:hidden; 
 }
 .page-id-1 .abcd {
    display:block !important;
     text-align: center;
    padding-top: 0.02em;
    color: #0000ff;
 }

}

Answer 1

更好的方法是只在需要的页面上加载你的函数，而不是在除一个页面之外的所有页面中隐藏你的 HTML...

您可以在运行函数之前检查页面 ID，如下所示：

if (is_page('1') {
    add_action( 'storefront_header', 'header_content1', 30 );
    function header_content1() { ?>
        <div id/class="abc" > my text with css</div><?php
    }
}