如果没有为该帖子设置特色图片，想要更改帖子<h1> 标题的颜色

Posted 2023-05-09

【中文标题】如果没有为该帖子设置特色图片，想要更改帖子<h1> 标题的颜色

【英文标题】：Want to change color of post<h1> title if it has no featured image set for that post

【发布时间】：2017-06-10 07:09:55

【问题描述】：

所以在我的 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 中引用没有特色图像的 POST？我愿意接受任何解决方案！

非常感谢您的帮助！

【问题讨论】：

最好在 php 的渲染时处理这个问题，并将一个类应用于标题，然后使用 css 设置样式，而不是尝试 JS 解决方案。您能否发布输出条目标题的 PHP 代码。

我真的很擅长破解 PHP 哈哈。所以我认为JS解决方案是最好的。我的主要问题是如何引用没有特色图像集的 POST。你知道那会是什么样子吗？即使在 php 中？

您可以拨打get_post_thumbnail_id($post->ID) 并检查它是否返回任何内容。如果您可以发布您拥有的代码，我很乐意提供帮助

非常感谢，谢谢！然而我的想法是。如果您必须调用帖子 ID，那么必须在功能正确之前发布帖子？因为帖子的 ID 还不存在。这不起作用，因为我正在尝试使其自动化。因此，如果最初发布的帖子没有特色图片并立即更新基于 h1 类的

好的，所以当该页面加载时，每个可见的帖子都会根据 Wordpress 在您的主题中调用的 the loop 进行渲染。我们可以在循环中创建h1 的位置进行检查，并根据缩略图/特色图像的存在对其应用一个类。然后在您的 css 文件中，您只需为相应的类创建一个样式声明，然后用它做您喜欢的事情。 PS他们真的不应该是h1s，因为页面上同时有超过 1 个

【参考方案1】：

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

首先我们将值默认为“has-thumbnail”(Line 18) 然后，如果帖子没有缩略图 (Line 33)，我们会将默认设置覆盖为“无缩略图” 最后，我们将类应用到h1 标签 (Line 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] ); ?>" >
                    </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' ); ?>" >
                    </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

【讨论】：

甜蜜。 leme 尝试应用它。谢谢！

它的工作，因为我看到开发工具中正确添加的类！ :D :D css 很有趣，但很快就会弄清楚。非常感谢！

像魅力一样工作！非常感谢！按我的需要工作。

【参考方案2】：

在您的 single.php 文件或用于显示单个博客帖子的页面上，您需要使用 if 语句检查帖子是否有缩略图，然后打印出样式，否则让默认样式将发生

<?php

if ( has_post_thumbnail() ) 
    the_post_thumbnail();

   echo "<style type=\"text/css\">";

    echo ".post-list h1.entry-title a

            color: red !important ; /*any color of your choice*/;
        
</style>";


else 

    // Default style will take place

?>

确保在 functions.php 文件中添加缩略图支持。

要为您的functions.php添加缩略图支持，只需添加add_theme_support( 'post-thumbnails' );

【讨论】：

如何在functions.php中添加缩略图支持？我将该 php 函数放入我的 content.php 中，其中包含我的帖子图像和标题信息。它将所有帖子 h1 标签变为红色。而不仅仅是那些没有特色图片的。您可以在上面 cmets 中引用的链接中实时查看。

感谢所有帮助！暂时竖起大拇指。

【参考方案3】：

替换这一行

<header class="entry-header">

与

<header class="entry-header <?= has_post_thumbnail() ? 'my-hasfeatured-img' : '' ?>">

然后在 style.css 中添加 CSS 规则，如：

.my-hasfeatured-img h1
    //your code

希望这会有所帮助！