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 ?>

如何让项目仅在移动主页上显示（wordpress）

5 个答案: