ワードプレスを使用していると、アイキャッチ画像を設定されている方は多いと思います。
アイキャッチ画像は記事一覧などで表示される画像なのですが、COCOONではデフォルトのカスタマイズで”記事タイトル下に表示することが出来る”んですよね。
これ、とてもありがたいのですが、個人的には「アイキャッチ画像をワンポイントで表示したい」と思っていたので、ちょっとカスタマイズ方法を考えてみました。
ちなみに、今回ご紹介するカスタマイズは当サイトMishellyの記事内に表示されている
この部分のアイキャッチと記事タイトルのカスタマイズです。
スマホで見ると以下のようなレスポンシブ仕様です(笑)
需要があるかわかりませんが、カスタマイズ手順をまとめておくので、良ければ試してみてください！
COCOONの記事タイトル横にアイキャッチ画像を表示される前に確認すること
まず、COCOONのカスタマイズを行うときに、
- 親テーマ
- 子テーマ
を用意していると思います。
子テーマを編集することで、カスタマイズを残したままバージョンアップができたり、万が一白紙化してしまっても戻すことができるようになります。
ただ、今回ご紹介する方法は、親テーマ自体に手を加えるカスタマイズ方法ですので、ご了承ください。
COCOONでアイキャッチ画像を呼び出すコード
今回のカスタマイズでアイキャッチを呼び出しているコードはこちらです。
<?php the_post_thumbnail('150_thumbnail'); ?>このコードをアイキャッチを表示させたい場所に埋め込みます。
COCOONの記事タイトル横にアイキャッチ画像を表示させるカスタマイズ手順
では実際に変更していきましょう。
まず、テーマの編集画面に行きます。
編集するテーマは、子テーマではなく「COCOON」です。
こちらの「tmp」の中にある「content.php」を編集していきます。
<header class=”article-header entry-header”>
これの下あたりに、以下のコードを入力します。
<table class="titletable">
<tr><Td><?php the_post_thumbnail('150_thumbnail'); ?></Td>
<td width="70%"><h1 class="entry-title" itemprop="headline">
<?php
if (is_wpforo_plugin_page()) {
echo wp_get_document_title();
} else {
the_title();
}
?>
</h1></td></tr></table>これでアイキャッチ画像と記事タイトルを横並びに表示する設定ができました。
後はCSSでカスタマイズを行います。
ただ、このままでは最初から表示されていた記事タイトルが表示されたままなので、入力したコードの下にある下記のコードを削除しましょう。
<h1 class=”entry-title” itemprop=”headline”>
<?php
if (is_wpforo_plugin_page()) {
echo wp_get_document_title();
} else {
the_title();
}
?>
</h1>
では、次のページでCSSについてまとめていきます。
…こんなまとめ方で参考になってるのかな？(´・ω・｀)
掲示板