かわいくて人気のあるテーマchocolatをカスタマイズ ヘッダ画像をアイキャッチ画像に

名称未設定-6

先日から細々と趣味サイト うさぎクラフト というページを始めました。木工について書いていこうと思っていますので、今までとはちょっと違った可愛らしい感じのテーマを選びたいと思いました。

色々なテーマを眺めたり入れたりしてみた結果、chocolatというテーマにしようと思いました。

Image

色も茶色で木工の雰囲気に合うし、なによりかわいいです!

トップの画像をアイキャッチ画像があったときはアイキャッチ画像にしたい

トップの画像なのですが、

Image

こんな感じで結構目立つので、投稿ページを表示するときはその投稿にまつわる画像を表示したいと思いました。
そこで、アイキャッチ画像を表示することにしました。

ロジックとしては

・投稿ページで

かつ

・アイキャッチ画像が指定されていれば

header画像をアイキャッチ画像(大)で置き換える、ということをしたいと思います。

いつものように子テーマを作って、そちらで手を入れたいと思います。

ついでに子テーマの作り方

もちろんご存じの方が多いと思いますので、その場合はず数行下にお願いします(^^)/。

今回の場合だと、こんな感じで子テーマを作りました。

wp-contents\themes\

フォルダに chocolate-ryus (名前は任意ですが元テーマ名が分かり、かつ元テーマとは違う名前を付ける) を作ります。

そのフォルダの中に、style.css というファイルを作り、

と記述しました。

Theme Name は任意の子テーマの名前
Template は元のテーマ名
import url のところには元のテーマのCSSファイル名

を記述します。そしてダッシュボード>外観 で今作った子テーマを有効化します。

headerにアイキャッチ画像を表示するカスタマイズ

chocolatフォルダから header.php を子テーマのフォルダにコピーします。header.phpの52行目

の下に、

を挿入します。ここでは

投稿の単独表示ページで、アイキャッチ画像が指定されていたら、アイキャッチ画像(大)を表示、それ以外は

と記述しています。そして

のあとに、

を追加します。全体としては、

こんな感じですね。

これで表示すると アイキャッチ画像が指定されている投稿の単独表示ページでは、

Image

このように表示され、指定されていないページでは

Image

従来通り、指定したヘッダ画像が表示されています。

もちょっとカスタマイズ。投稿単独ページにアイキャッチは表示しない

私の場合は、アイキャッチ画像は記事中で使っている画像を使うことになるのでアイキャッチ画像が単独ページに表示されると、

Image

このように同じ画像が3個も表示されてしまいます(^_^;

これはちょっとしつこい…と思いましたので、単独記事中にアイキャッチ画像を表示しないようにしました。

先ほどと同じくchocolatフォルダの中から、content-single.php というファイルを子テーマのchocolat-ryusにコピーします。

そして、25行目の、

この記述がアイキャッチ画像を表示しているところなので、削除するかもしくは

このようにコメントアウトします。これで、

Image

このように、単独ページの記事中にアイキャッチ画像が表示されなくなりました。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

259人の購読者に加わりましょう

コメント

  1. mebaegakuin より:

    とても参考になりました。固定ページでも同じことがしたいのですが、このテーマの固定ページはどうやってカスタマイズするのでしょうか?

    • 兎本 美佳 より:

      あ、固定ページだと出ちゃいますか?ええと、ちょっとみてみます。

    • 兎本 美佳 より:

      あ、勘違いしていたみたい。固定ページでもアイキャッチを上部に出す、ということだったら、header.php のif文を

      < ?php if (((is_single()) OR (is_page())) AND (has_post_thumbnail())) : ?>

      このようにすれば同じように動くのでは無いかと思います。お試しください。

  2. mebaegakuin より:

    ご回答ありがとうございます。

    すみません。言葉足らずでした。ヘッダー画像はトップページと同じで変更の必要はありません。

    固定ページにアイキャッチ画像を設定したときに記事タイトル下に出るアイキャッチ画像を非表示にしたいです。

    固定ページに子ページ一覧を表示するのにchild pages shortcodeというプラグインを使用しています。親ページに表示される一覧ページの見出し画像は子ページのアイキャッチ画像を設定しないと空白となってしまいますので困っています。

    • 兎本 美佳 より:

      なるほどわかりました!

      親テーマの content.php を子テーマにコピー

      32行目~36行目の

      ” title=”< ?php the_title_attribute(); ?>“>
      < ?php the_post_thumbnail( $thumbnail_name ); ?>

      を削除。

      これで表示しないようにできると思います。いかがでしょうか~

  3. mebaegakuin4 より:

    出来ました!ありがとうございます。

    ちょこっとでもカスタマイズできると、テーマに愛着がでますね。

    ワードプレスのこと、自分でも少しづつ勉強したいと思います。

    ありがとうございました。

  4. mebaegakuin4 より:

    お久しぶりです。兎本さんに教えてもらいながらchocolat 愛着を持って使い続けています。

    さて、このテンプレートを使うとjetpackのタイルギャラリ―が正しく表示されないのですが、どうすればよいかお分かりでしょうか?

    よろしくお願いします。

    • 兎本 美佳 より:

      mebaegakuin4さん、おはようございます。Jetpackのタイルギャラリーは使ったことがないのですが、ちょっと時間のあるときに試してみますね、連休中にでも!解決できたらまたblogかこちらに書きますー

トップへ戻る