Question

WordPress |店面| woo-commerce。我试图在桌面视图上显示页眉，并在移动设备上响应特定页面ID 1的页脚，但即使使用特定页面ID，两个类也都显示在页面ID 1页眉，页脚上。尝试了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
    }
}

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

1 个答案: