WordPress

カテゴリーページのタイトルを画像にする方法【JIN】

記事内に商品プロモーションを含む場合があります。
フォ吉
フォ吉
JINを使ってブログを作っているのだが、カテゴリーページのタイトルに画像を入れることってできないのだろうか
はしこ
はしこ
JINの場合は画面からの操作ではできないみたい。カテゴリーページの子テーマを作ってカスタマイズする必要があるよ

こんにちは、梯はしこです。

JINのデフォルトでは、カテゴリータイトルがこちらの画像のように表示されます。

今回はこのカテゴリータイトルを…

このように、任意の画像の変更する手順を解説します。

はしこ
はしこ
応用すればJIN以外でも使えるはず
フォ吉
フォ吉
ソースを触るので、事前にバックアップを取っておくことを強くおすすめする!

今回実施した環境

  • テーマ:JIN
  • サーバ:mixhost

 

梯はしこのプロフィール

子テーマをダウンロードしてテーマを変更

フォ吉
フォ吉
この手順はすでに子テーマを使っている方は飛ばしてOKだ

ソースの修正は子テーマを用意しておこなっていきます。JINの公式サイトで子テーマを配布してくれているので、ダウンロードしましょう。

ダウンロードしたらWordPressのテーマを子テーマに変更して第1ステップ完了です。

親テーマのカテゴリーページを直接修正することもできます。ただしテーマの更新があった場合、親テーマに施した修正は消えてしまうため、できるだけ子テーマを使うことをおすすめします。

フォ吉
フォ吉
いちいち修正しなおすのは面倒くさいな

ただし、親テーマの更新があった場合。この場合もまた、親の更新は子テーマに反映されません。テンプレートを子テーマで上書きしている場合は、親と子の修正を比較して、必要であれば親の修正箇所を子テーマに入れ込む必要があります。

フォ吉
フォ吉
それも大変そうだな…
はしこ
はしこ
あくまでも自分が上書きしているテンプレートが更新されたときだけの対応だから、個人(狼)的には子テーマに修正したほうが楽であると感じるぞい

カテゴリーテンプレートのダウンロード&アップロード

次に親テーマのカテゴリーテンプレートをダウンロードしてきて、それを子テーマのディレクトリにアップロードしましょう。

ここではmixhostでのやり方を記載しています。

ファイルマネージャーを開く

まずはmixhostにログインし、cPanelに進みます。cPanelの中にファイルマネージャーがあるので、そちらに進みましょう。

はしこ
はしこ
mixhostは特別なソフトがなくてもファイルのアップロード&ダウンロードが簡単にできるのが良き

wp-content/themes/jin/category.phpをダウンロード

ファイルを選択している状態でダウンロードボタンをクリックすると、ファイルがローカルにダウンロードされます。

wp-content/themes/jin-childにcategory.phpをインストール

子テーマのディレクトリに移動して先ほどダウンロードしたcategory.phpをアップロードします。

画像を子テーマのディレクトリにアップロード

次も子テーマのディレクトリ内の作業になります。子テーマの中にカテゴリーのタイトルとして表示したい画像をアップロードしましょう。

画像ファイル用ディレクトリを作成

子テーマの中に画像ファイル格納用のディレクトリを作成します。

フォ吉
フォ吉
ディレクトリは絶対に作る必要があるのか?
はしこ
はしこ
なくてもできないことはないけど、後で管理が大変になるから、作ったほうがいいと思いますぜ

フォルダボタンを押下するとディレクトリ作成ダイアログが表示され、そこで任意の名前でディレクトリ(フォルダ)を作ることができます。

はしこ
はしこ
ちなみに上の画像にはすでにimagesディレクトリがありますが、これは私が作成したので存在しています

画像をアップロード

アップロードする画像のファイル名は、カテゴリータイトル用としてわかりやすいものが良いかと思います。

私はキャラクターカテゴリー用のタイトル画像として「category-title-chara.png」という名前を付けました。この、「chara」というのがカテゴリースラッグ名です。

フォ吉
フォ吉
スラッグ名とは
はしこ
はしこ
カテゴリーの名前のようなもので、管理画面の投稿→カテゴリーページで確認できるよ

子テーマのカテゴリーテンプレートを編集

フォ吉
フォ吉
いよいよPHPの修正だな

子テーマのcategory.phpを開きましょう。このまま編集してもOKですが、テキストエディタに張り付けるとわかりやすくなります。

はしこ
はしこ
ファイルの中を検索してみると、<h1>タグが3つあるね

この<h1>タグでカテゴリーを表示しているので、この中に<img>タグを入れることで画像が表示されます。

フォ吉
フォ吉
それだけであれば簡単そうだな
はしこ
はしこ
具体的には次のコードを記載します
<h1><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/category-title-<?php echo get_query_var('category_name'); ?>.png"></h1>

 

フォ吉
フォ吉
むむむ?

画像をパスから指定する書き方が複雑ですね。順番に解説します。

子ページまでのディレクトリパスを取得

画像を表示するためには画像ファイルまでのパスを取得する必要があります。

サーバ内の子ページまでのディレクトリパスはget_stylesheet_directory_uri()関数で取得することができます。

なお、親テーマまでのディレクトリパスを取得するには、get_template_directory_uri()関数を使用します。

フォ吉
フォ吉
スタイルシートが子テーマで、テンプレートが親テーマか…なんだかピンと来ないが、覚えておくぞ
  1. 親テーマのパス:get_template_directory_uri()
  2. 子テーマのパス:get_stylesheet_directory_uri()

タイトルスラッグ名を取得

get_stylesheet_directory_uri()関数で、子テーマのパスまでは指定できました。さらにその下の階層まで画像を取得しにいきます。

私は先ほどimagesディレクトリを作成し、画像ファイル名を「category-title-chara.png」として格納しました。

そのため「/images/category-title-」まではべた書きで。そのあとの「chara」。これはキャラクターカテゴリーのスラッグ名を取得します。

get_query_var(‘category_name’);

get_query_var()関数から、現在のカテゴリーページ(今回の例であれば「キャラクターカテゴリー」)の情報を取得することができます。

フォ吉
フォ吉
get_query_var()関数に「category_name」を引数として渡すことで、スラッグ名を返してくれるというわけだな

まとめ

今回はJINでカテゴリーページのタイトルを画像にする方法を解説しました。

子テーマのcategory.phpを開き、下記の要領で<h1>タグの中を書き換えれば、任意の画像をカテゴリーページのタイトルにすることができます。

<h1><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/category-title-<?php echo get_query_var('category_name'); ?>.png"></h1>

 

子テーマのパスを取得
get_stylesheet_directory_uri()

カテゴリースラッグ名を取得
get_query_var(‘category_name’);

フォ吉
フォ吉
お洒落なタイトル画像の力を借りて、素敵なカテゴリーページにできるな
はしこ
はしこ
うむ。ただし複数のカテゴリーに所属する記事があるときはうまくスラッグ名を取れないので、そこだけ注意が必要ね…
フォ吉
フォ吉
今回のカスタマイズをするにあたり、こちらの記事を参考にさせていただきました!
はしこ
はしこ
終わります!ありがとうございました!
狐小路フォ吉LINEスタンプ発売中
フォ吉
フォ吉
狐小路フォ吉である

突然だが 僕のLINEスタンプが好評(?)発売中である。

万が一にもこの僕に愛着らしき感情を抱いてくれている方がいらしたら、ぜひ下の画像をクリックしてスタンプをチェックしてみていただきたい。

そして願わくば、あなたのLINEを彩ることができたならば…これほど幸いなことはない。

 

フォ吉
フォ吉
よろしくお願い申し上げる