php - 将类添加到基于帖子类别的自定义帖子类型包裹的 div

标签 php jquery html css wordpress

我正在寻找一种方法,根据帖子归属的类别,将类注入(inject)到围绕自定义帖子类型的 div 中。将分为三个类别;

电子书(类名cat1)
信息图(类名cat2)
案例研究(类名cat3)

到目前为止,这是我调用自定义帖子类型的代码。目前,该页面将所有帖子显示为最后一个类别 - 案例研究 (cat3)。

        <?php $loop = new WP_Query( array( 'post_type' => 'resources', 'posts_per_page' => -1 ) ); ?>
        <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

            <?php
            $post = $wp_query->post;

            if ( in_category('ebook', $post->ID) ) { ?>
                <div <?php body_class('tile scale-anm cat1 all end'); ?>>
                    <section class="small-12 medium-4 large-3 columns end">
                        <section class="grid">
                            <figure class="effect-sarah">
                                <img src="<?php the_field('img'); ?>" alt="img13"/>
                                <figcaption>
                                    <h2>Resource</h2>
                                    <p class="signika"><?php the_field('desc'); ?></p>
                                    <p class="bold"><?php the_field('btnText'); ?></p>
                                    <a href="<?php echo esc_url( get_permalink() ); ?>" target="_blank"><?php the_field('btnText'); ?></a>
                                </figcaption>           
                            </figure>
                        </section>
                    </section>
                </div> 
            <?php
            } 


            elseif ( in_category('infographic', $post->ID) ) { ?>
                <div <?php body_class('tile scale-anm cat2 all end'); ?>>
                    <section class="small-12 medium-4 large-3 columns end">
                        <section class="grid">
                            <figure class="effect-sarah">
                                <img src="<?php the_field('img'); ?>" alt="img13"/>
                                <figcaption>
                                    <h2>Resource</h2>
                                    <p class="signika"><?php the_field('desc'); ?></p>
                                    <p class="bold"><?php the_field('btnText'); ?></p>
                                    <a href="<?php echo esc_url( get_permalink() ); ?>" target="_blank"><?php the_field('btnText'); ?></a>
                                </figcaption>           
                            </figure>
                        </section>
                    </section>
                </div> 
            <?php
            } 


            elseif ( in_category('casestudy', $post->ID) ) { ?>
                <div <?php body_class('tile scale-anm cat3 all end'); ?>>
                    <section class="small-12 medium-4 large-3 columns end">
                        <section class="grid">
                            <figure class="effect-sarah">
                                <img src="<?php the_field('img'); ?>" alt="img13"/>
                                <figcaption>
                                    <h2>Resource</h2>
                                    <p class="signika"><?php the_field('desc'); ?></p>
                                    <p class="bold"><?php the_field('btnText'); ?></p>
                                    <a href="<?php echo esc_url( get_permalink() ); ?>" target="_blank"><?php the_field('btnText'); ?></a>
                                </figcaption>           
                            </figure>
                        </section>
                    </section>
                </div> 
            <?php
            }

            ?>          

        <?php endwhile; wp_reset_query(); ?>

最佳答案

DRY,不要重复自己。你的循环也有一些问题。

使用 WP_Query 后,使用 wp_reset_postdata() 而不是 wp_reset_query()

摆脱$post = $wp_query->post;,使用get_the_ID()在循环中获取id

然后我们检查类别并将类名分配给变量$catclass,我们将其插入到body_class()的参数中,注意使用" 而不是 '

试试这个:

<?php $loop = new WP_Query( array( 'post_type' => 'resources', 'posts_per_page' => -1 ) ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php
    $catclass = "";
    if (in_category('ebook', get_the_ID())) {
        $catclass="cat1";
    } else if(in_category('infographic', get_the_ID())) {
        $catclass="cat2";
    } else if(in_category('casestudy', get_the_ID())){
        $catclass="cat3";
    }
?>

    <div <?php body_class("tile scale-anm {$catclass} all end"); ?>>
        <section class="small-12 medium-4 large-3 columns end">
            <section class="grid">
                <figure class="effect-sarah">
                    <img src="<?php the_field('img'); ?>" alt="img13"/>
                    <figcaption>
                        <h2>Resource</h2>
                        <p class="signika"><?php the_field('desc'); ?></p>
                        <p class="bold"><?php the_field('btnText'); ?></p>
                        <a href="<?php echo esc_url( get_permalink() ); ?>" target="_blank"><?php the_field('btnText'); ?></a>
                    </figcaption>           
                </figure>
            </section>
        </section>
    </div> 
<?php
endwhile; 
wp_reset_postdata(); ?>

如果你真的觉得活泼,你可以将 if/else 语句替换为:

switch(true){
    case in_category('ebook', get_the_ID()):
    $catclass = "cat1";
    break;
    case in_category('infographic', get_the_ID()):
    $catclass = "cat2";
    break;
    case in_category('casestudy', get_the_ID()):
    $catclass = "cat3";
    break;
    default:
    $catclass = "";
}

关于php - 将类添加到基于帖子类别的自定义帖子类型包裹的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45334031/

相关文章:

javascript - 跟随响应式背景图像的位置图标

php - 我的 html 页面中的事件元素出现问题

php - 将 mySQL 数据透视表转换为字符串以进行谷歌可视化

c# - 在 ASP.Net 中使用 AJAX PageMethods 从数据库实现 jQuery AutoComplete TextBox

javascript - 将焦点设置到下一个输入

html - 在中间对齐 Font Awesome 图标

php - 重新排序多维数组,以便每 4 行出现具有特定列值的行

php - 使用 FPDF 显示波兰语字符时出现问题?

jquery - 使用 jQuery 将变量解析为 JSON

jquery - 从左侧滑入切换