この記事では、投稿した記事の本文上にアイキャッチを出力するように設定している場合に、アイキャッチの位置を変更するカスタマイズを紹介する。
Cocoonの設定を変更する方法とphpファイルを編集する方法の二通りがあるので、どちらの方法も解説したい。
Cocoonのアイキャッチのおさらい
ほとんどのWebサイトやブログには、投稿リストの一覧の記事に画像のサムネイルが表示されている。また、ブログカード・TwitterカードにもそのWebサイトの記事を表す画像が表示されているものがほとんどだろう。これらの画像のことをアイキャッチと呼んでいる。
そして、このアイキャッチはもちろんCocoonでも使うことができる。
アイキャッチの設定方法
記事の編集画面の右側のサイドバーにある「アイキャッチ画像」の「アイキャッチ画像を設定」をクリックして画像をアップロードするだけで、アイキャッチ画像を設定することができる。
このようにして、アイキャッチは簡単に設定することが可能だ。
この記事で解説するカスタマイズの概要
それでは、今回行うカスタマイズの概要について説明したい。
Cocoonのアイキャッチは、投稿記事の本文上にも出力されて表示されるようになっている。そして、そのときのアイキャッチの位置はこの場所に表示される。
今回は、本文上に出力されているアイキャッチのサムネイル画像を「この記事は約〇分で読めます」の下の位置に移動するカスタマイズを行っていきたい。
本文上のアイキャッチの位置を変えるカスタマイズ
それでは、カスタマイズを行っていこう。
このカスタマイズには二通りの方法があるので、どちらも紹介する。どっちもあまり複雑な方法ではないが、カスタマイズを行う前は念のためバックアップなどを取っておいたほうがよい。
1：Cocoon設定を変更する方法
アイキャッチの本文上の表示をCocoonの設定で変える方法。一番簡単な方法でもあるが、アイキャッチ画像が重複するという問題が存在する。
設定
まずは左側のサイドバーから「Cocoon 設定」をクリックして、Cocoonの設定ページを開く。
そしてCocoonの設定ページに入ったら「画像」を選んでクリックし、「本文画像設定」を見てみよう。
さて、上記の説明の通りに本文画像設定の画面を開けただろうか。
そうしたら、まずは「アイキャッチ自動設定を有効にする」にチェックマークを入れてから「本文上にアイキャッチを表示する」のチェックを外して、「変更をまとめて保存」を押そう。
上の画像のようにして変更を保存すると、Cocoon設定の画像の設定画面はこのようになる。
「本文上にアイキャッチを表示する」からチェックを外して保存すると、このようにプレビューから画像の表示が無くなり、またアイキャッチの表示の子のチェックボックスも半透明で非表示状態になる。
そして新しく記事を執筆する際に、このようにタイトルのすぐ下に画像をアップロードして下書きを保存する。
そして、下書きを保存すると
このように自動的にアイキャッチ画像が出力される。
本文上での表示
上記の設定をすることで、本文上ではこのように表示される。
上記の画像のように、記事に初めてアップロードした画像がアイキャッチとしても表示される設定にすることで、アイキャッチのサムネイルを「記事を読む時間」の下に表示させることができた。
ただし、この方法は欠点もあるので注意したい。
注意点
この方法は、本文上に出力されるアイキャッチの位置を変更しているわけではないということに注意してもらいたい。
本来のCocoonの仕組み上、アイキャッチは如何なる時も投稿した記事上に表示されるようになっており、この設定ではアイキャッチの要素を「display: none;」で非表示にしているだけなのだ。
もし確認したければ、Cocoonの子テーマのstyle.cssに「.eye-catch-wrap{display:flex}」のCSSコードをコピペして保存したのち、投稿した記事ページを更新すると、上の画像のようになっているはずだ。
つまり、この方法では「アイキャッチの画像」と「アイキャッチとしても設定した本文中に最初にアップロードした画像」の2つが二重に存在している状態になってしまうのだ。
なので、例えば50KBの画像をアイキャッチとして出力するようにも設定していた場合、投稿記事上では画像が二重に存在しているため2つ合わせて100KBになっており、記事が50KB分無駄に重くなってしまう。
また、投稿記事本文の画像を使用するため、アイキャッチのカテゴリラベルが表示されない。そのため、一見すると開いた記事が何のカテゴリの記事なのかわかりにくくなってしまう。
よって、Cocoonの設定を変更する方法は簡単だが少々問題も発生してしまうのだ。
2：content.phpを書き換える方法
content.php内に存在している、本文上にアイキャッチ画像を出力するコードの順序を入れ替えることで、本文上のアイキャッチ画像の位置を変更する方法。
この方法は、PHPファイル内を直接書き換えるだけなので、投稿記事上でアイキャッチが重複することがない。
ただし、PHPファイルを書き換えるということは、万が一失敗した場合はWebサイトが真っ白になってしまうので必ずWebサイトのバックアップを取っておこう。
設定
まずphpファイルを編集する前に、Cocoonの画像の設定を開き「本文上にアイキャッチを表示する」にチェックが入っているか確認して、入ってない場合はチェックを入れよう。また、「アイキャッチの中央寄せ」にもチェックを入れておこう。これにチェックを入れると自動で中央に寄せてくれる。
そして、「アイキャッチ自動設定を有効にする」は必ずチェックを外した状態にしておこう。
上記の画像のようにチェックを入れてから「変更をまとめて保存」を押すことで、ファイルを編集する前の下ごしらえは完了する。なお、「アイキャッチをカラム幅に引き伸ばす」と「アイキャッチにキャプションがある場合は表示する」にはチェックを入れる必要はあまりない。
Cocoon側の設定を変更して保存したら、次は自分のPC上でフォルダ名を「tmp」としたフォルダを作り、FTPソフトかレンタルサーバーのファイルマネージャーを使ってそのフォルダを「cocoon-child-master（Cocoonの子テーマ）」にアップロードする。
それから、自分のパソコンのローカルフォルダ上にあるCocoonの親テーマのtmpフォルダのcontent.phpファイルを、先ほど作成した子テーマのtmpフォルダにアップロードする。もしCocoonの親テーマを紛失しているか削除している場合は公式サイトからもう一度ダウンロードしよう。
さて、それからWordPressの左サイドバーの「外観」にある「テーマエディター」をクリックして、「テーマの編集画面」に入ろう。そして子テーマが選択されていることを確認したら、右側に「tmp」と表記されたフォルダが表示されているはずなのでそれを押し、「content.php」を押してコードの編集画面に入ろう。
上記のような画面に入ることができただろうか。
それでは、content.phpをスクロールして見ていこう。下にスクロールしながらPHPファイル内のコードを見ていくと、このようなコードが存在しているはずだ。
<?php //アイキャッチ挿入
get_template_part('tmp/eye-catch');
do_action('singular_eye_catch_after');
?>これが、アイキャッチに設定した画像を、投稿した記事の本文上に出力するPHPコードである。
つまり、このコードをコピーしてから削除し、違う位置にペーストすることでコードの位置を変更すると、本文上に表示されるアイキャッチのサムネイル画像の位置も同じように変更されるのだ。
編集する前のデフォルトの状態では、「アイキャッチ挿入」のコードは下記のように「固定ページタイトル下ウイジェット」と「SNSトップシェアボタンの表示」の間に挟まれている。
<?php //固定ページタイトル下ウイジェット
if ( is_page() && is_active_sidebar( 'below-page-content-title' ) ): ?>
<?php dynamic_sidebar( 'below-page-content-title' ); ?>
<?php endif; ?>
<?php //アイキャッチ挿入
get_template_part('tmp/eye-catch');
do_action('singular_eye_catch_after');
?>
<?php //SNSトップシェアボタンの表示
if (is_sns_top_share_buttons_visible() &&
(
//投稿ページトップシェアボタンの表示
(is_single() && is_sns_single_top_share_buttons_visible()) ||
//固定するページトップシェアボタンの表示
(is_page() && is_sns_page_top_share_buttons_visible())
)
){
get_template_part_with_option('tmp/sns-share-buttons', SS_TOP);
} ?>これを、下記のように記事を読む時間を出力するコードと「本文上の広告表示」のコードの間の位置に持っていこう。
<?php if (is_content_read_time_visible() && is_the_page_read_time_visible() && !is_plugin_fourm_page()): ?>
<div class="read-time"><?php echo '<span class="fa fa-hourglass-half" aria-hidden="true"></span>
'.sprintf(__( 'この記事は<span class="bold">約%s分</span>で読めます。', THEME_NAME ), get_time_to_content_read(get_the_content())); ?></div>
<?php endif; ?>
<?php //アイキャッチ挿入
get_template_part('tmp/eye-catch');
do_action('singular_eye_catch_after');
?>
<?php //本文上の広告表示
if (is_ad_pos_content_top_visible() && is_all_adsenses_visible()){
get_template_part_with_ad_format(get_ad_pos_content_top_format(), 'ad-content-top', is_ad_pos_content_top_label_visible());
}; ?>上記のような順序のコードになるように、アイキャッチ挿入のコードをコピーして削除しペーストすることで位置を移動してから、「ファイルを更新」ボタンを押してcontent.phpファイルの変更を保存すると、本文上に表示されるアイキャッチ画像の位置を変更することができる。
本文上での表示
本文上ではアイキャッチ画像はこのように表示されているはずだ。
記事を読む時間とアイキャッチの画像の間隔がピッタリとくっつきすぎていて気になる場合は、子テーマのstyle.cssにこのコードをコピペして保存しよう。
/*記事を読む目安時間のカスタマイズ*/
/*ここから*/
.read-time {
margin-bottom: 2em;
}
/*ここまで*/
このように「記事を読む目安の時間」の要素の下のmargin:を文字ふたつぶん空けることで、ちょうどいい間隔が生まれて圧迫感が薄れた。
この方法では欠点が無いように感じるが、少し注意しておきたい部分がある。
注意点
このカスタマイズは、子テーマに親テーマと同じフォルダを作り、親テーマからコピーしてきたファイルを編集する方法になる。
ただし、Cocoonは定期的にアップデートしている。現在はスキンのバリエーションを追加するアップデートが主だが、もしこの先、投稿記事の各種コンテンツや出力などをとても大幅に仕様を変更するアップデートが入った際、子テーマに複製したcontent.phpが古いままだとエラーが起きてしまいWebサイトが表示されなくなる場合がある。
そのため、Cocoonのアップデートが来た際はちゃんとPHPファイルの中身を確認し、もし大幅な変更が加えられている際は、それを元にまたカスタマイズを行おう。
最後に
今回このようなカスタマイズを行おうと思った経緯は、アイキャッチ画像はタイトル周りの一番下にアップロードして、投稿記事の本文と調和させた方がスマートに見えると思ったからである。
また、投稿日と更新日よりも上にアイキャッチが表示されていることに、私としては違和感を覚えたということも大きい。
そういうわけで、このようなカスタマイズを行った。
前々から行っていた、記事に表示されるアイキャッチの位置の変更を紹介した。
もし、今後Cocoonのアップデートでcontent.phpの大幅な変更が行われ、本文上にアイキャッチを出力するコードが変わっていたりしたら、この記事もまたアップデートするつもりだ。
