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

Question

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

如果您向下滚动到粉色条之外，您将看到“我们的作品”部分。这是一个投资组合自定义帖子类型。

目前实现这些的代码是这样的：

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

投资组合项目显示为类实现的两个连续：'item--two'

我希望通过将每个项目的类更改为“item--three”来以 3 行显示这些项目，这在我在浏览器中编辑它时会起作用...

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

我检查了 .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

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

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

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

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

...这意味着如果 $twocol 为真，则将 $cols 设置为“二”，如果 $twocol 为假，则设置为“三”。

希望这会有所帮助。

Answer 2

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

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

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

}

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%;
    }
}