Twentyseventeen カスタマイズ(フロントページ パネル 記事の下に背景画像)

Twenty Seventeen テーマでは、数枚の固定ページ(パネル)を、フロントページに表示することができます。

それぞれの固定ページ(パネル)に、アイキャッチ画像があれば、上部にアイキャッチ画像、その下にコンテンツが表示されるように設定されています。

この記事では、画像と、記事コンテンツを重ねて表示するようにカスタマイズしてみましたのでご報告します。(当サイトトップページでご確認いただけます。)

MENU

  • カスタマイズ コンセプトと方法
  • カスタムフィールドの項目と設定内容
  • 修正するテンプレートファイル
  • ご注意事項

カスタマイズ コンセプトと方法

コンテンツ下に画像を入れるだけなので、テンプレートファイルに、タグを直打ちすれば済む話ですが、できるだけ汎用性を保つため、「カスタムフィールド」を利用することとしました。

それぞれの固定ページ(パネル)毎で異なってくるようなスタイルの設定を、「カスタムフィールド」でおこなっています。

別の方法として、アイキャッチ画像上にコンテンツを表示する方法もあるとは思いますが、アイキャッチ画像のサイズが、スクリーンサイズに基いて変化するため、コンテンツとのサイズ調整が複雑になります。よって、今回は、その手法を取っていません。

カスタムフィールドの項目と設定内容

名前
値(例)
設定内容
front-panel-img
https://
example.com/
image1.jpg
背景のイメージの url
front-panel-color
rgba(0,0,0,0.5)
イメージ上部のコンテンツを読みやすくするために、文字と反対色のパネルを重ね合わせる
front-panel-title-color
#fff
投稿タイトルの色を指定して、タイトルを読みやすくするため

修正するテンプレートファイル

修正するテンプレートファイルは、一つだけ。

content-front-page-panels.php

  • wp-content
    • themes
      • twentyseventeen-child
        • template-parts
          • page
            • content-front-page-panels.php

    ファイル内の構文は次のとおり。

    <?php
    
    global $twentyseventeencounter;
    
    $frontpaneltitlecolor = get_post_meta(get_the_ID(), "front-panel-title-color",true ); /* inserted to set entry-title color in custom field */
    
    ?>
    
    <article id="panel<?php echo $twentyseventeencounter; ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >
    
    <?php if ( has_post_thumbnail() ) :
      $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );
    
      // Calculate aspect ratio: h / w * 100%.
      $ratio = $thumbnail[2] / $thumbnail[1] * 100;
    ?>
    
      <div class="panel-image" style="background-image: url(<?php echo esc_url( $thumbnail[0] ); ?>);">
        <div class="panel-image-prop" style="padding-top: <?php echo esc_attr( $ratio ); ?>%"></div>
      </div><!-- .panel-image -->
    
    <?php endif; ?>
    
      <div style="background: url(<?php echo get_post_meta(get_the_ID(), "front-panel-img",true ); /* inserted for back image to set in custom field */ ?>); background-size: contain;">
        <div style="background-color: <?php echo get_post_meta(get_the_ID(), "front-panel-color",true ); /* inserted for back color to set in custom fiel */ ?>;">
    
          <div class="panel-content">
            <div class="wrap">
              <header class="entry-header">
                <?php the_title( '<h2 class="entry-title" style="color:'. $frontpaneltitlecolor .';">' , '</h2>' ); /* amended to entry-title color in custom field */ ?>
    	
                <?php twentyseventeen_edit_link( get_the_ID() ); ?>
    	
              </header><!-- .entry-header -->
    	
              <div class="entry-content">
                <?php
                  /* translators: %s: Name of current post */
                  the_content( sprintf(
                  __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),get_the_title() ) );
                ?>
              </div><!-- .entry-content -->
    	
    <?php
    // Show recent blog posts if is blog posts page (Note that get_option returns a string, so we're casting the result as an int).
    if ( get_the_ID() === (int) get_option( 'page_for_posts' )  ) : ?>
    	
                <?php // Show four most recent posts.
                  $recent_posts = new WP_Query( array(
                    'posts_per_page'      => 3,
                    'post_status'         => 'publish',
                    'ignore_sticky_posts' => true,
                    'no_found_rows'       => true,
                  ) );
                ?>
    	
      <?php if ( $recent_posts->have_posts() ) : ?>
    	
              <div class="recent-posts">
    	
                <?php
                  while ( $recent_posts->have_posts() ) : $recent_posts->the_post();
                    get_template_part( 'template-parts/post/content', 'excerpt' );
                  endwhile;
                  wp_reset_postdata();
                ?>
    
              </div><!-- .recent-posts -->
    
      <?php endif; ?>
    <?php endif; ?>
    	
            </div><!-- .wrap -->
          </div><!-- .panel-content -->
        </div><! -- inserted -->
      </div><! -- inserted -->
    </article><!-- #post-## -->
    

    ご注意事項

    • 投稿記事の文字色設定は、投稿記事内で設定していただきます。
    • コンテンツ全体の表示位置は、オリジナルのままです。必要に応じて修正をお願いします。
    • アイキャッチ画像を設定すると、アイキャッチ画像の下段に、今回の背景画像がある記事が表示されます。
    • 背景画像を設定しないで、背景色のみを設定することができます。
    • 当サイトでは、不具合なく動作していますが、他の条件下では、正しく動作しない可能性もありますので、ご自身の責任においてご利用ください。
    • 不具合、もしくは、ご質問等は、お気軽にお問い合わせください。わかる範囲でお答えさせていただきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です