NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

WordPressでページごとに異なるビジュアルを表示する

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1258日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

企業サイトとかやってると、ページごと、あるいは投稿のカテゴリごとに専用のビジュアルを出したくなりますよね。
それをなるべく自動でやる方法をコピペを駆使して考えてみました。

その時の覚書というかメモというか…落書きです。

仕様を考えてみる

いろいろ方法はあると思いますが、今回はスラッグを利用することにしました。
固定ページなら今いるページのスラッグを取得して「スラッグ名.jpg」とかを表示するようにすれば狙ったことができそうです。
投稿ならカテゴリーでよさそうですので、こちらもカテゴリスラッグで同じようにできると思います。

他にもカスタムフィールドを使うとか、アイキャッチを利用するなんてのも考えましたが、
いずれの場合もカテゴリーリストの時にうまく表示できない可能性がありますので今回は却下で。

スラッグの取得

固定ページは楽勝です。

これでスラッグが取れます。

固定ページは日本語でタイトルをつけるとスラッグも日本語かつエンコードされた状態で保存されるので、
パーマリンク設定を変えているならパーマリンクの部分で英語表記に、デフォルトの場合は「表示オプション」から 「スラッグ」を選択してスラッグのフィールドを出してあげてそこに英語でスラッグを登録しておきましょう。

次に投稿ですが、これも

こんなかんじで行けそうですね。

ですが、これだとカテゴリーを階層化してる場合、子カテゴリにいるときはうまく取れません。

なので、この記事にならってfunctions.phpにこう書いてみました。

こうすると、小カテゴリの記事にいてもちゃんと親カテゴリのスラッグを取れます。

これで記事は解決できそうですが、これだと子カテゴリの一覧にいるときうまくいきません。

小カテゴリごとに画像を変える場合は更に細かい分岐を書くしか無いのですが、
それのやり方についてはフォーラムとかにヒントがありそうです

今回は子カテゴリのときも親と同じテンプレートでいきますので、
WordPress私的マニュアルさんが紹介しているこの方法でいけそうです。

これをfunctions.phpに書くだけで、子カテゴリテンプレがないときは親を、親もなければ共通のカテゴリテンプレートをという風になるみたいです。

これでだいたい準備はできました。

実際にテーマに表示させる

最後にメインビジュアルのエリアをこんなかんじに書き換えます。

PATH/TO/KEYVISUAL の部分は、トップページ用のメインビジュアル画像のパスに書き帰るなり、
header_image();にするなりしてください。

これでトップページの時はメインビジュアルを、
下層のときはテンプレートフォルダ以下の「img/headers」フォルダを参照し、
「カテゴリ・投稿」の場合は「カテゴリスラッグ.jpg」を、
「固定ページ」の場合は「固定ページのスラッグ.jpg」を自動で表示するようになります。

9行目及び14行目の「get_bloginfo(‘stylesheet_directory’).’/img/headers/’」を適切に書き換えることで、参照する画像フォルダを変更することもできます。

さいごに

一応これで表示はできるようになりましたが、画像の参照先的に、これだとFTPで画像を予めまとめてアップしておく必要があります。

通常はそれでも平気かもしれませんが、テンプレートフォルダは結構WPの深いところにありますので、場所がわかりにくくなる場合は、別の場所にフォルダを作ってそちらを参照してもいいかもしれませんね。

WP附属のメディアライブラリやアップローダを利用する場合は、デフォルトのままだと月ごとにフォルダを分けていくためにそのままだとアップロードしたタイミングによっては表示ができなくなってしまいます。

これについては「設定」の「メディア」にある「アップロードしたファイルを年月ベースのフォルダに整理」を外せば解決できそうですが、あとで手動でライブラリを整理するときとかは面倒くさそうですね。そんな機会がどれほどあるかはわかりませんが。

また、いずれの場合でも、ファイル名を自動設定させるために、ファイル名とスラッグを揃えておく必要があるので、予め命名規則などのルールぎめが必要です。

このへんは構成時にサイトマップを引くときとかに一緒に決めてしまってもいいと思います。

また、今回はjpgで決め打ちしちゃってますので、他のファイル形式(PNGとかGIF)だとやっぱり表示できません。
もっと柔軟にやりたい場合はこのへんも考えなくてはなりませんね…。

イマイチまとまってませんが、とりあえずこのへんで。。

TAGS