Question

我在Jquery需要一些帮助。我列出了特定类别的所有帖子标题。

但是当页面加载时，我希望当前的帖子标题显示在中间（并为这个元素添加一个类）。像这样：

enter image description here

我的php代码如下：

    <div class="opacity cat">
        <div class="inner-home">
            <?php
            $category = new WP_Query( 'cat=12' ); ?>
            <p><?php echo get_cat_name(12) ?></p>

            <ul>

                <?php while($category->have_posts()) : $category->the_post(); ?>

                    <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
                <?php endwhile;
                    wp_reset_postdata();
                ?>
            </ul>
        </div>
    </div>

我认为我们可以使用Jquery来做到这一点，但我不知道如何。

Answer 1

虽然Jquery可以实现很多东西，但我不相信你的问题与此有些相关。

据我所知，从你的问题和评论中你需要做的是创建一系列静态帖子：

$posts_array = array(197,199,201); //Just change with the ID's of your static posts

从数组中删除当前帖子，以便我们可以隔离其他帖子。

if (($key = array_search($post->ID, $posts_array)) !== false) {
    unset($posts_array[$key]);
}
$posts_array = array_values($posts_array); // Start from zero index.

调用其他帖子，这些帖子不是当前的帖子：

$post_prev =  get_post($posts_array[0]);
$post_next =  get_post($posts_array[1]);

最后，把它们放到各自的位置：

<div class="opacity cat">
        <div class="inner-home">
            <ul class="post_links_container">
                <li class="other-post-class">
                    <a href="<?=$post_prev->guid;?>"><?=$post_prev->post_title;?></a>
                </li>
                <li class="current-post-class">
                    <a href="<?=$post->guid;?>"><?=$post->post_title;?></a>
                </li>
                <li class="other-post-class">
                    <a href="<?=$post_next->guid;?>"><?=$post_next->post_title;?></a>
                </li>
            </ul>
        </div>
    </div>

当然，您需要使用css设置样式：

ul.post_links_container {
    display: flex;
    margin: 0 auto;
    width: 200px;
    list-style-type: none;
    padding: 0px;
}
ul.post_links_container li {
    padding: 20px;
}
li.other-post-class {
    font-size: 14px;
}
li.current-post-class {
    font-size: 24px;
    padding-top: 0px !important;
}

希望它有效，你可以随心所欲地用css来做。这仅适用于初学者。

重要提示：此解决方案仅适用于3个帖子静态的。最适合这个问题，但可能不适用于其他情况。

使用Jquery的订单列表和当前页面

1 个答案: