【テーマ別】WordPressのアイキャッチの位置を変更する方法

この記事では、WordPressブログでアイキャッチを表示する位置を変更する方法を紹介します。


タイトル上、タイトル下など、ちょっと位置を変えるだけでも印象は結構変わりますので、他サイトとの差別化にも使えます。ぜひ好みの配置を試してみてくださいね～。

アイキャッチの位置を変えたらこんな感じです

テスト環境

スマホでの表示

パソコンでの表示

WordPressのアイキャッチの位置を変更する際の注意

WordPressのアイキャッチの位置を変更するには、PHPファイルを編集する必要があります。

あまり難しいことはしませんが、万が一間違えて編集した場合、サイトの表示が崩れる可能性があります。
そのため、事前に編集するPHPファイルのバックアップをとっておきましょう。仮にミスしても、バックアップしたPHPファイルをアップロードし直せばもとに戻ります。全て自己責任でお願いします。


PHPの知識がなくてもアイキャッチの位置を変更することは可能ですが、WordPressでサイトをカスタマイズするならPHPをはじめとする言語（HTML&CSS、JavaScriptなど）を知っておくに越したことはありません。少なくとも、書いてあるコードの意味がなんとなく理解できるレベルはあると、ブログ運営を有利に進められます。

具体的には、入門書を1冊読んでみる、Udemyで入門向け動画講座を1つ受講してみるなど。以下におすすめの入門書とUdemyの講座を紹介しておきます。どちらも1つでHTML、CSS、JavaScript、PHPの基礎を身につけることができます。

【入門書】これ1冊でゼロから学べる Webプログラミング超入門　ーHTML,CSS,JavaScript,PHPをまるごとマスター（Amazon Kindle Unlimitedで無料で読めます）

【Udemy動画講座】【HTML,CSS,JS,PHP,Git,Docker】プログラミング初心者OK！ ゼロからわかるWebシステム開発

PHPファイルの編集方法

PHPファイルは、

のいずれかから編集します。今回は手軽にできる3のWordPressのテーマファイルエディターから編集します。

【テーマ共通】アイキャッチの位置に関するPHP

WordPressの左メニューから「外観 → テーマファイルエディター」と進みます。

「編集するテーマを選択」から使用中の親テーマを選択します。（2つある場合は「Child」がついていない方を選ぶ）

テーマファイル欄内の下の方にある個別投稿（single.php）が、投稿ページに関するPHPファイルです。このsingle.phpや関連ファイルを編集することでアイキャッチの位置を変えることができます。

【SSHやレンタルサーバーのファイルマネージャから編集する場合】
/（ドメイン名）/public_html/（WordPressインストール先）/wp-content/themes/（テーマ名）/single.phpが該当ファイルです。

【テーマ別】アイキャッチの位置を変更するPHP

ここからはテーマに応じて編集内容が若干異なりますので、自分のテーマファイルと見比べながら編集していってください。

今回は、アイキャッチをタイトル上に移動する方法を紹介します。この仕組みが理解できれば、タイトル上以外の場所にも移動できます。

single.phpに直接記述がある場合

該当テーマ：SWELLなど

まずはsingle.php内にアイキャッチに関する記述がある場合です。
この場合はsingle.php内を編集すればOKです。編集する前に全文をコピーしてテキストエディタなどにペーストしておくと、万が一ミスしてもすぐ修正できます。


基本的には記述された内容に沿って上から順にページが生成されるので、アイキャッチに関する記述を、タイトルに関する記述の上に移動すればOK。多くの場合はコメントアウトで説明が入っていますので、どこがアイキャッチに関する記述であるかは見れば分かります。


例えばSWELLの場合、single.phpの24行目から28行目の

//アイキャッチ画像
--省略--
}

の部分をCtrl + Xでカットして、19行目の

//タイトル周り

の上にペーストすれば、タイトル上にアイキャッチを表示できるようになります。

single.phpに直接記述がない場合

該当テーマ：Cocoonなど

single.php内に直接アイキャッチの記述がなく、他ファイルに記述がある場合があります。この場合でもsingle.phpを見ればどのファイルを編集すればよいか分かります。ここでは編集するファイルの探し方の流れを紹介します。


例えばCocoonの場合、17行目～18行目の

<?php //投稿ページ内容
get_template_part('tmp/single-contents'); ?>

を見れば、ページ内容に関する記述はtmp/single-contents.php内にあるとわかりますので、該当ファイルを開きます。


single-contents.phpを見てみると、どうやらアイキャッチに関する記述が無さそうです。そこで、18行目～19行目の

<?php //本文テンプレート
get_template_part('tmp/content') ?>

に注目すると、tmp/content.php内に本文に関する記述がありそうです。そちらを開いてみます。


すると、ありました。70行目～74行目の

<?php //アイキャッチ挿入
get_template_part('tmp/eye-catch');

do_action('singular_eye_catch_after');
?>

これがアイキャッチに関する記述です。これをタイトルに関する記述の上に移動することで、アイキャッチの表示をタイトル上に移動できます。


この場合は36行目の

<header class="article-header entry-header">

以降がタイトルに関する記述ですので、この上に先ほどのアイキャッチに関する記述を移動すればOKです。編集する前に全文をコピーしてテキストエディタなどにペーストしておくと万が一ミスしてもすぐ修正できます。



このように、single.phpに直接アイキャッチに関する記述がない場合は、多少コードを読む必要があります。やはりPHPを始めとする言語を読めるくらいの力は持っておいて損はないですね。特にWordPressをカスマタイズするくらいなら、1からコードを書ける必要はありませんので、軽く知識を持っておく程度でも他と差をつけることができます。

まとめ：PHPを編集してWordPressをどんどんカスタマイズ！

多少PHPを編集する必要がありましたが、割と簡単にアイキャッチの位置を変更することが出来ました。

PHPを編集してWordPressをカスタマイズする人は少数なので、ちょっといじるだけでも他と差別化出来ます。どんどんオリジナリティあふれるサイトを作りたいという方は、ぜひこの機会にPHPを始めとするHTML&CSS、JavaScriptなどの言語に触れてみてくださいね～。

【入門書】これ1冊でゼロから学べる Webプログラミング超入門　ーHTML,CSS,JavaScript,PHPをまるごとマスター（Amazon Kindle Unlimitedで無料で読めます）

【Udemy動画講座】【HTML,CSS,JS,PHP,Git,Docker】プログラミング初心者OK！ ゼロからわかるWebシステム開発