アイキャッチ画像の表示位置を本文上に変更する方法

はじめに

Cocoonのアイキャッチ画像は、通常、投稿タイトルの下に表示されます（図1参照）。
Cocoon設定には、アイキャッチの表示位置を変更する項目がありません。

以下の記事では、テンプレートを直接編集する方法を紹介しています。

Cocoonの本文上のアイキャッチの位置を変更するカスタマイズ

WordPressテーマのCocoonの本文上に表示されるアイキャッチのサムネイル画像の位置を変更するカスタマイズの解説です。

mycus-tom.com

そこで、ファイルを直接書き換えない「テンプレートフック」を活用した方法に変更します。

この記事では、この方法について説明します

完成イメージ

実装手順

PHPで実装する場合

以下のコードをfunctions.phpに追加します。

// 元の位置のアイキャッチを削除
add_filter('cocoon_part__tmp/eye-catch', '__return_empty_string');


// 本文前にアイキャッチを追加
add_action('singular_entry_content_before', function () {
  get_template_part('tmp/eye-catch');
});

補足

テンプレートの表示位置を変更する際に、フックを用いる典型的なカスタマイズ方法です。

カルーセルの表示位置を変更する方法

「Cocoonのカルーセルの表示位置を変更する方法」を解説。テンプレートフックを使ってカルーセルをアピールエリアの後ろやフッター直前へ移動する方法や、親テーマを直接編集せずに表示位置を変更する仕組み、アピールエリアへの応用方法を分かりやすく紹介します。

chuya.s239.xrea.com

JavaScriptで実装する場合

以下のコードをjavascript.jsに追加します。

jQuery(function ($) {
  $('.entry-content').before($('.eye-catch-wrap'));
});

CSSで実装する場合

以下のコードをstyle.cssに追加します。

.article-header {
  display: flex;
  flex-direction: column;

  .entry-title {
    order: 1;
  }

  .sns-share {
    order: 2;
  }

  .date-tags {
    order: 3;
  }

  .read-time {
    order: 4;
  }

  .eye-catch-wrap {
    order: 5;
  }
}

補足

orderを活用すれば、各項目の順番を自由に変更することが可能です。

さいごに

今回紹介した方法を使えば、テーマのテンプレートファイルを直接変更することなく、本文の上にアイキャッチ画像を表示させることができます。