Cocoonの記事の日付やタイトル等の位置を変更する方法

記事のヘッダーの日付の位置を変えたので、その方法を備忘録。

日付以外のアイキャッチやタイトルの配置も簡単に変更できます。

既存のphpの記述を切り貼りするだけなので割と簡単です。

変更方法

ある程度分かる方向けというか自分用に箇条書きにしてみました。
わからない方は、下の「実際にやってみた」で画像付きで説明していますのでそちらをご覧ください。

  <header class="article-header entry-header">
   /* ここが記事のヘッダーの内容 */
  </header>

上記の記述が記事のヘッダー部分になりますので、アイキャッチの位置や日付の位置を変更する場合は<header>~</header>の範囲で編集しましょう。

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

　 /* 記事タイトル部分 */
   <h1 class="entry-title" itemprop="headline">
    <?php
     if (is_wpforo_plugin_page()) {
       echo wp_get_document_title();
     } else {
       the_title();
     }
      ?>
    </h1>
　　 
    /* 日付部分 */
    <?php //投稿日と更新日テンプレート
    get_template_part('tmp/date-tags'); ?>  

  </header>

実際にやってみる

今回は例として記事タイトルの上にアイキャッチ画像を配置したいと思います。

まずは、Cocoonのcontent.php を開きましょう。

content.php の開き方

配置を変更する

今回は記事タイトルの上にアイキャッチ画像を配置したいので、まずは「content.php」の中から記事タイトルとアイキャッチ画像の記述を探しましょう。

　　<h1 class="entry-title" itemprop="headline">
    <?php
     if (is_wpforo_plugin_page()) {
       echo wp_get_document_title();
     } else {
       the_title();
     }
      ?>
    </h1>

記事タイトルは、エディター画面の36番目の<header class=”article-header entry-header”> の真下の部分です。

このタイトル部分の記述の上にアイキャッチ画像の記述をもってくれば、記事タイトルの上にアイキャッチが表示されるようになります。

ですので、次はアイキャッチ画像の記述を見つけましょう。

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

    do_action('singular_eye_catch_after');
    ?>

「//アイキャッチ挿入」とコメントが書かれている記述がアイキャッチ画像の記述になります。

アイキャッチ画像の記述が見つかったので、その記述を切り取ってタイトルの記述の上に張り付けます。

何度も言いますが、メモ帳でもいいので必ず切り取る前にcontent.php内の全記述のバックアップを取りましょう。

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

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

    do_action('singular_eye_catch_after');
    ?>

    <h1 class="entry-title" itemprop="headline">
      <?php
      if (is_wpforo_plugin_page()) {
        echo wp_get_document_title();
      } else {
        the_title();
      }
       ?>
    </h1>

こんな記述になっていれば大丈夫です。
コピペした記述の前後は、分かりやすいように改行して隙間を開けておきましょう。

今回はアイキャッチ画像の位置を変更しましたが、日付なども変更できるのでコメントをよく読んで変更してみて下さい。

ちなみに日付なら「//投稿日と更新日テンプレート」とコメントされています。

確認する

変更したので確認してみます。

しっかり記事タイトルの上に、アイキャッチ画像が表示されていますね。

あとは必要な方はCSSで調整しましょう。

調べてみると意外と簡単だったので備忘録として記事にしてみました。

同じような要領で記事のフッター部分の日付や記事内の広告の位置なども変更できるので試してみて下さい。