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

时间:2017-01-25 07:39:18

标签: javascript php jquery wordpress function

因此,在我的wordpress博客和大多数其他wordpress博客上,您可以设置精选图片。如果您没有设置精选图片,我会将其默认为背景图片,其中显示&#34; new update&#34;但是我设置的默认背景图像比为帖子制作的自定义背景图像要少得多。

要解决使用自定义特色图片的帖子越来越受到关注那些拥有默认图片的帖子的问题 - 我想这样做所有博客帖子标题都有帖子没有特色图片来改变他们的颜色代码。

例如..

我的伪代码: - 我不太了解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 ?我愿意接受任何解决方案!

非常感谢您的帮助!

3 个答案:

答案 0 :(得分: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' );

即可

答案 1 :(得分:2)

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

  1. 首先我们将值默认为&#34; has-thumbnail&#34; (Line 18
  2. 然后我们将默认值覆盖为&#34; no-thumbnail&#34;如果帖子没有缩略图(Line 33
  3. 最后,我们将该课程应用于h1代码(Line 72
  4. 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

答案 2 :(得分:1)

替换此行

<header class="entry-header">

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

然后在 style.css 中添加CSS规则,如:

.my-hasfeatured-img h1{
    //your code
}

希望这有帮助!