TwentySeventeenでアイキャッチ配置場所が違うテンプレートを作る

2018/02/07[公開] 2018/02/08[最終更新]

51a0b45f5d92c7ded0f02f564b7dcc2a_s

 WordPressのデフォルトテーマTwentySeventeenを利用しています。2018年もこのテーマでいくつもりなので、今回はアイキャッチ画像をタイトル下に配置するテンプレートを作成するカスタマイズをしました。アイキャッチの重要度によりテンプレートを選択して、投稿記事のアイキャッチの配置を変更できるようになりました。

このページの目次

スポンサー リンク

複数テンプレートを使えるようにしたい

 このテーマは2000×1200pxのどでかいアイキャッチ画像を設定することができるのがひとつの特徴です。最初はありえないと思っていましたが、だんだんアップロードするアイキャッチの画像サイズが大きくなっていくようになりました。ついには自分で撮った写真を使う記事で、マックスサイズの2000×1200ピクセルのアイキャッチを出すようにまでなりました。例えばこの記事

 旅行カテゴリーの記事など、ドーンと真っ先にアイキャッチが大画面ディスプレイで目いっぱい表示されるインパクトは、このテーマの特徴を生かしていると自己満足に浸ることができて気に入っています。別のテーマの時に作成した記事も、アイキャッチだけ大きいサイズの画像に入れ替えたくらいです。

 それでも、アイキャッチが重要じゃないカテゴリーの記事もありまして、その場合はページを開いたときにタイトルが先に出たほうがいいかなと思うこともあります。かといってアイキャッチなしだとサイドバーのサムネイル表示で困ることもあり、そういう記事ではフリー素材のサイトから頂いたのをとりあえず入れているだけの場合もあります。(まさにこの記事のアイキャッチがそうです。)

 記事の内容により、アイキャッチの配置場所の違うテンプレートを選択できるようにすれば、アイキャッチ画像で悩むことも減りそうです。

子テーマにファイルを複製

 子テーマにファイルを3つ作成します。親テーマから(既に子テーマにカスタマイズ済みのファイルがある場合は、子テーマから)下記の3つのファイルをコピーしてファイル名を変更します。

  • single.phpをコピーして、ファイル名をtemplate001.php
  • header.phpをコピーして、ファイル名をheader-002.php
  • template-parts/post/content.phpをコピーして、ファイル名をtemplate-parts/post/content-003.php

 ファイル名は一例です。template001.phpは任意のファイル名で大丈夫です。header-002.phpheader-〇〇〇.php、content-003.phpcontent-〇〇〇.phpというふうに、ハイフン〇〇〇の部分だけ任意に名前を付けられます。

 また、content-003.phpは、下図のようにtemplate-parts/postというディレクトリ階層(フォルダ構成)ごと子テーマに配置します。

feature-image-custom02
子テーマにコピーしたファイルを設置する

header-〇〇〇.phpを編集

 テーマTwentySeventeenでは、header.phpファイルにアイキャッチ画像の表示設定のコードが入っています。

 header-002.phpファイルが親テーマのheader.phpのコピーであれば、43行目から54行目をすべて削除します。twentyseventeen-featured-imageの記述が入っているPHPコードの部分全てです。これで元の位置にアイキャッチが表示されなくなります。

 header-002.phpファイルの編集は以上です。

feature-image-custom03
43-54行目を削除

content-〇〇〇.phpファイルを編集

 実はTwentySeventeen親テーマのcontent.phpには、タイトルと記事本文の間にアイキャッチ画像を表示させるコードが最初から入っています。条件分岐で投稿ページはそこのアイキャッチを非表示にする設定になっています。この条件分岐を変更することで、アイキャッチをタイトル下に表示させます。

 content-003.phpが親テーマのcontent.phpファイルのコピーであれば、44行目の && ! is_single() の部分を削除します。

 content-003.phpファイルの変更は以上です。

変更前の44行目

<?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>

 ↓ ↓ ↓

変更後の44行目

<?php if ( '' !== get_the_post_thumbnail() ) : ?>

テンプレートファイルの編集

 最後にテンプレート用ファイルであるtemplate001.phpを編集します。テンプレート用のヘッダーを記述して、上で作ったheader-002.phpcontent-003.phpを参照するように変更します。

2-11行目

 template001.phpが親テーマのsingle.phpのコピーであれば、2行目から11行目までのヘッダー部分の記述をテンプレート用に変更します。

変更前の2-11行目

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>

 ↓ ↓ ↓

変更後の2-11行目。

<?php



/*
Template Name: template001
Template Post Type: post, page
*/



get_header(); ?>

 実際には4行で大丈夫ですが、このあとの説明の便宜上、行数を変えたくないので空白行を入れています。Template Name:には投稿の編集画面でプルダウンで選択するテンプレート名を設定します。

13行目

 header-002.phpをヘッダーとして読み込むように変更します。header-〇〇〇.phpの’〇〇〇’を括弧内に追加します。

変更前

get_header(); ?>

 ↓ ↓ ↓

変更後

get_header('002'); ?>

23行目

 content-003.phpを読み込むように変更します。get_post_format() の部分をcontent-〇〇〇.phpの’〇〇〇’に入れ替えます。

変更前

get_template_part( 'template-parts/post/content', get_post_format() );

 ↓ ↓ ↓

変更後

get_template_part( 'template-parts/post/content', '003' );

 

 template001.phpの編集は以上です。今回のカスタマイズの設定も以上です。あとは動作確認ができれば、設定完了です。

テンプレートを選択する方法

 WordPressの管理画面で、投稿の編集画面の右側のおそらく一番下に投稿の属性の項目が増えていて、テンプレートがプルダウンメニューで選択できるようになっているはずです。

feature-image-custom04
テンプレートをプルダウンで選択できる項目が増えている

 このプルダウンメニューで、デフォルトテンプレートが元のTwentySeventeenのままの表示で、template01を選べばアイキャッチがタイトル下になっている表示になっていれば成功です。

 さらにテンプレートは複数作成できるので、投稿ページではアイキャッチ非表示だけど、サイドバーや投稿一覧表示のときだけ設定しているアイキャッチを出すというテンプレートも作れます。

(参考サイト)

https://debug-life.net/entry/1885

https://digital-life.club/hp/wordpress/twenty-seventeen%EF%BD%B0i%EF%BD%B0image%EF%BD%B0position

https://webshufu.com/get_template_part-content-get_post_format-includes-content-php/

スポンサー リンク

コメントを残す

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