Question

我的网站上有此页面（我从其他开发者那里继承） - http://ideedev.co.uk/newseed/brand/

如果向下滚过粉红色条带，您将看到“我们的工作”。部分。这是一个投资组合Custom Post类型。

目前，实现这些目标的代码是：

    <section id="scroll-target" class="wrapper">

        <?php
        $portfolio_args = array(
            'post_type' => 'portfolio',
            'portfolio-category' => get_field('category_to_show'),
            'posts_per_page' => -1
        );

        $portfolio = new WP_Query($portfolio_args);

        while($portfolio->have_posts()) {
            $portfolio->the_post();
            $post = new SeedPost(get_the_ID());
            $post->display(true);
        }
        wp_reset_query();
        ?>



    </section>

投资组合项目显示为班级连续两个：＆＃39; item - two＆＃39;

我希望通过将每个项目的类别更改为＆＃39; item - 3＆＃39;来显示这些项目的行数为3。这在我在浏览器中编辑时有效...

问题是，我无法找到我的代码中已分配此类的位置！我在浏览器中看到它，但正如您从顶部的代码中看到的那样 - 那里没有课程。

我是checke .js文件，看看我是否可以看到它被动态分配，但我无法看到它在哪里......有人会有任何想法吗？

更新......

我认为它可能来自这里，但我不确定在哪里改变以改变投资组合以显示在三列......

<?php

class SeedPost {

    public $post_id;
    public $post_type;

    function __construct($post_id) {
        $this->post_id = $post_id;
        $this->post_type = get_post_type($this->post_id);
    }

    function display($twocol = false) {
        global $post;

        $post = get_post($this->post_id);

        $cols = $twocol ? 'two' : 'three';

        setup_postdata($post);

        if($this->post_type == 'portfolio') {
            $overlay_class = 'item__overlay--portfolio';
        } else {
            $overlay_class = 'item--cat-' . SeedHelpers::first_category();
        }
        ?>
        <div class="item item--<?php echo $cols; ?>">
            <?php
            if(has_post_thumbnail()) {
                the_post_thumbnail('news-archive', array('class' => 'item--three__child'));
            }
            ?>
            <a href="<?php the_permalink(); ?>">
                <div class="item__overlay <?php echo $overlay_class; ?>">
                    <span class="item__cat-title item__cat-title--overlay"><?php echo SeedHelpers::first_category($this->post_type); ?></span>
                    <h4 class="item__title"><?php the_title(); ?></h4>
                    <div class="item__brief">
                        <?php the_excerpt(); ?>
                    </div>

                    <p class="item__link"> Read </p>
                </div>
            </a>
        </div>
        <?php
        wp_reset_postdata();
    }

    static function load_more() {
        if(!isset($_GET['load_more_posts'])) {
            return;
        }

        check_ajax_referer('load_more_posts', 'load_more_posts');

        $offset = sanitize_text_field($_GET['offset']);
        $posts_per_page = get_option('posts_per_page');

        $query_args = array(
            'post_type' => 'post',
            'offset'    => $offset
        );

        $posts = new WP_Query($query_args);

        ob_start();

        while($posts->have_posts()) {
            $posts->the_post();
            $post = new SeedPost(get_the_ID());
            $post->display();
        }

        $output = ob_get_contents();
        ob_end_clean();

        $posts_used = (int)$offset + (int)$posts_per_page;
        $remaining = $posts->found_posts > $posts_used ? $posts->found_posts - $posts_used : 0;

        $response = array(
            'posts_remaining' => $remaining,
            'html'            => $output
        );

        echo json_encode($response);
        die();
    }

}

Answer 1

也许这个类是动态构造的，所以搜索“item”，“item--”，“three”，还搜索SeedPost php类，在那里生成项目。

另一个（不推荐的解决方案......）是覆盖项目 - 容器类中的两个属性，并将该类添加到您的案例中的项目的父项以滚动目标部分。

.custom-container .item--two{
width:33.3% !important;

}

Answer 2

在你的区块中修改传递给$post->display()的参数：

while($portfolio->have_posts()) {
    $portfolio->the_post();
    $post = new SeedPost(get_the_ID());
    // Pass in false!
    $post->display(false);
}

display()类上的SeedPost方法将构建您需要的标记。这是在SeedPost()类中的以下行中设置的：

$cols = $twocol ? 'two' : 'three';

...这意味着如果$ twocol为真，则将$ cols设置为'two'，如果$ twocol为false，则设置为'3'。

希望这有帮助。

Answer 3

您可以添加自己的新

.item--three {
    width: 33.3%;
    float: left;
}

Answer 4

@media (min-width: 780px) {
    .item--three {
        width: 50%;
        float: left;
    }
}
@media (min-width: 1060px) {
    .item--three {
        width: 33.333%;
    }
}

我的网站如何为div分配特定的类？

4 个答案: