javascript - 如果没有为该帖子设置特色图像，想要更改帖子

Question

因此，在我的 WordPress 博客和大多数其他 WordPress 博客上，您可以设置特色图像。如果您没有设置特色图像，我会将其默认设置为显示“新更新”的背景图像，但是我设置的默认背景图像比为帖子制作的自定义背景图像要少得多。

为了解决带有自定义特色图像的帖子比那些具有默认图像的帖子获得更多关注的问题 - 我想让所有带有没有特色图像的帖子的博客帖子标题都可以更改其颜色代码。

例如像..

我的伪代码: - 我不太了解 jquery/javascript，但我可能可以找出基本的 javascript 来使其工作。

IF 
('post > featured-image') = 'NONE'; 

THEN ('.post-list h1.entry-title a') = 'RED';

ELSE ('.post-list h1.entry-title a') = 'DEFAULT';

但是话虽这么说，我该如何通过jquery或某些函数引用在wordpress中没有特色图像的帖子呢？我愿意接受任何解决方案!

非常感谢您的帮助!

Answer 1

根据您提供的代码，您的主题已经使用 WordPress 函数 has_post_thumbnail 检查您的帖子上是否存在缩略图。我们可以利用现有的 if:else 语句来更改将应用​​于 h1 标记的字符串值。您可以在变量 $header_class_name 下找到该字符串值。

1. 首先，我们将值默认为“has-thumbnail”(第 18 行)
2. 然后，如果帖子没有缩略图，我们会将默认设置覆盖为“无缩略图”(第 33 行)
3. 最后，我们将该类应用于 h1 标记(第 72 行)

PHP 代码

<?php
/**
 * The template part for displaying content.
 *
 * @package azera-shop
 */
?>

<article id="post-<?php the_ID(); ?>" <?php post_class( apply_filters( 'azera_shop_content_post_class_filter','border-bottom-hover' ) ); ?> itemtype="http://schema.org/BlogPosting" itemtype="http://schema.org/BlogPosting">

    <header class="entry-header">

            <div class="post-img-wrap">
                <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >

                    <?php
                    // default the $header_class_name to 'has-thumbnail'
                    $header_class_name = 'has-thumbnail';
                    if ( has_post_thumbnail() ) {
                    ?>
                    <?php
                    $image_id = get_post_thumbnail_id();
                    $image_url_big = wp_get_attachment_image_src( $image_id,'azera-shop-post-thumbnail-big', true );
                    $image_url_mobile = wp_get_attachment_image_src( $image_id,'azera-shop-post-thumbnail-mobile', true );
                    ?>
                    <picture itemscope itemprop="image">
                    <source media="(max-width: 600px)" srcset="<?php echo esc_url( $image_url_mobile[0] ); ?>">
                    <img src="<?php echo esc_url( $image_url_big[0] ); ?>" alt="<?php the_title_attribute(); ?>">
                    </picture>
                    <?php
                    } else {
                    // override the default $header_class_name in the case that there is no thumbnail
                    $header_class_name = 'no-thumbnail';
                    ?>
                    <picture itemscope itemprop="image">
                    <source media="(max-width: 600px)" srcset="<?php echo azera_shop_get_file( '/images/no-thumbnail-mobile.jpg' );?> ">
                    <img src="<?php echo azera_shop_get_file( '/images/no-thumbnail.jpg' ); ?>" alt="<?php the_title_attribute(); ?>">
                    </picture>
                    <?php } ?>

                </a>
                <?php azera_shop_post_date_index_box_trigger(); ?>
            </div>

            <div class="entry-meta list-post-entry-meta">
                <?php azera_shop_content_entry_meta_top_trigger(); ?>
                <span itemscope itemprop="author" itemtype="http://schema.org/Person" class="entry-author post-author">
                    <span  itemprop="name" class="entry-author author vcard">
                    <i class="fa fa-user" aria-hidden="true"></i><a itemprop="url" class="url fn n" href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" rel="author"><?php the_author(); ?> </a>
                    </span>
                </span>
                <span class="posted-in entry-terms-categories">
                    <i class="fa fa-folder-open-o" aria-hidden="true"></i><?php _e( 'Posted in','azera-shop' ); ?> 
                    <?php
                        /* translators: used between list items, there is a space after the comma */
                        $categories_list = get_the_category_list( esc_html__( ', ', 'azera-shop' ) );
                        $pos = strpos( $categories_list, ',' );
                    if ( $pos ) {
                        echo substr( $categories_list, 0, $pos );
                    } else {
                        echo $categories_list;
                    }
                    ?>
                </span>
                <a href="<?php comments_link(); ?>" class="post-comments">
                    <i class="fa fa-comment-o" aria-hidden="true"></i><?php comments_number( esc_html__( 'No comments','azera-shop' ), esc_html__( 'One comment','azera-shop' ), esc_html__( '% comments','azera-shop' ) ); ?>
                </a>
            </div><!-- .entry-meta -->

        <?php 
            // add the $header_class_name value to the h1 (PS consider using a similarly styled h2)
            the_title( sprintf( '<h1 class="entry-title '.$header_class_name.'" itemprop="headline"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h1>' ); ?>
        <?php echo apply_filters( 'azera_shop_header_underline','<div class="colored-line-left"></div><div class="clearfix"></div>' ); ?>

    </header><!-- .entry-header -->
    <div itemprop="description" class="entry-content entry-summary">
        <?php
            $ismore = strpos( $post->post_content, '<!--more-->' );
        if ( $ismore ) : the_content( sprintf( esc_html__( 'Read more %s &#8230;','azera-shop' ), '<span class="screen-reader-text">' . esc_html__( 'about ', 'azera-shop' ) . esc_html( get_the_title() ) . '</span>' ) );
            else : the_excerpt();
            endif;
        ?>

        <?php
            wp_link_pages( array(
                'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'azera-shop' ),
                'after'  => '</div>',
            ) );
        ?>
    </div><!-- .entry-content -->

</article><!-- #post-## -->

CSS

article header h1.no-thumbnail{
    color:red;
}

然后您可以通过引用任一类名称来应用 CSS