如何让项目仅出现在移动主页上(wordpress)

Question

前几天我在这里问了一个关于在我的移动主页上获取类别的问题。我得到了这个代码，它有效：

<?php
// Feed PHP with the information you want to show, in our case: a certain category = use of the id, number = amount of posts to show
$catquery = new WP_Query( 'cat=3&posts_per_page=1' );
// Let WordPress run the loop for you
while($catquery->have_posts()) : $catquery->the_post();
?>
<!--Inside the loop, you can use the WP template tags to show the stuff you         want, like author, exerpt of the post etc. -->
<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<p><?php the_excerpt(); ?></p>
<?php endwhile; ?>
<?php // Don't forget to reset the query (clean the data after it is     finished) ?>
<?php wp_reset_query(); ?>

我目前通过自定义 css 将其设置为仅在移动设备上显示，但我正在尝试弄清楚如何让该项目仅显示在移动主页上，而不是后续页面上。

谢谢！！非常感谢您的帮助！

Answer 1

编写你的css，让元素出现在移动设备上

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
/* you css for element*/
}

Answer 2

使用 CSS 将其隐藏在移动设备以外的设备上。

要阻止在每个页面上执行此代码，请将其包装到 if_front_page（） 中。https://developer.wordpress.org/reference/functions/is_front_page/

if (is_front_page()) {
    // your code only on front page
}

Answer 3

如果你

在主页上，Wordpress会自动在你的身体标签中添加一类home。

将控制该代码的 CSS 设置为一般display: none;并执行.home *element class or id* { display: block;}

Answer 4

WordPress

具有内置的is_mobile函数。

if ( wp_is_mobile() && is_front_page() ) {
      /* Display and echo mobile specific stuff here */
}

Answer 5

如果其他人遇到这种情况，将 php 代码移动到单独的 php 文件并将其包含在索引中会更容易 - 如下所示：

<?php if ( is_home() || is_front_page() ) : ?> <?php include ('News.php'); ?> <?php endif ?>