当サイトは災害多発時代に強く、危機管理対策を充実させたcolorfulboxを使用しています。

WordPressのテーマファイルを編集は子テーマで

この記事は約13分で読めます。
かわいい女性

 私がWordPressを使い始めたのは2008年です。そのきっかけとなったものは、「ホームページに新着記事一覧を自動的に表示したい!」「掲示板ではなく、記事に対してのコメントを受け付けたい!」といったところでした。でもブログやSNSじゃ物足りない。何とか自分のホームページに簡単にリンクを貼ることはできないのだろうか。そんなことを思っていた時に出会ったのがWordpressというシステムでした。

 あれから10年以上WordPressを使い続けていますが、何度もバージョンアップが繰り返され、今やElementorというプラグインを使えばほぼできないことはないくらいいろいろなことができます。

 しかし!ただ1つ不満が残るとすれば、どのページも同じデザインになってしまうこと。記事に合わせてヘッダーやサイドバーなどが変えられれば最高なのに。そう思って、今までいろいろなことを試してきました。このページは、その記録をまとめたものです。

 なお、結局どうしたらよいかは、他のページに書いていますので急いでいる方はトップページよりそちらの記事へお進みください。

custom-post-templates

 custom-post-templateというプラグインを使うと、友の会のページ、子育てのページ、クイズのページといったように、記事によってデザインを変えられます。記事の内容によってデザインが変わるので、メリハリがついていい感じなのです。ただし、2012年に更新がストップしてしまい、今からこれを使うというのはオススメできません。

 さて、当時、Wordpress2.9にバージョンアップした時に一度使えなくなり、プラグインのソースを書き換えました。

/* (修正前) */
$template_data = implode( ”, file( WP_CONTENT_DIR . $template ) );

* (修正後) */
$template_data = implode( ”, file($template ) );

 その後もこのプラグインを使いながら、記事によってサイトのデザインが変えられないものかと研究をしてきました。ずっと、上手くいっていたと思っていたのですが、実は携帯電話で見るとレイアウトがおかしくなっているということが後から分かりました。

 当時は、レスポンシブ対応のためにKtai Styleというプラグインを使っていましたので、これも研究しました。

 Ktai Styleのテーマファイルのshingle.phpやheader.phpを編集したこともありましたがそれも結局ダメ。WordPressのフォーラムで、「single.php内でカテゴリーを分岐させ、自己解決しました。」という書き込みを見つけたので、そこをもう少し詳しく教えていただきたいと投稿したのですが回答はもらえず。解決できそうでできない状態が続きかなり悩みましたが、結局はバージョンアップが止まったことと、携帯電話で見ると型崩れを起こしていることなどを考慮して、このプラグインを使用することをやめました。

▶ スポンサードリンク

テンプレートに合わせて複数のタイプのサイドバーを使い分ける

 テンプレートファイルを編集してデザインを変える方法を使う場合、サイドバーについてもそれに応じたものに変えることができます。

通常の sidebar.php の他に、オリジナルの sidebar-2.phpなどをつくる。

 あとは、それを表示するphpファイルを編集します。sidebar-2.phpというファイルを読み込む場合は、<?php get_sidebar(‘2’); ?>にします。このように、「-」(ハイフン)の後の数字を増やしていけば、何パターンでもできてしまいます。

所属するカテゴリによって投稿のshingle.phpを変える。

 Custom Post Templatesは、投稿時にテンプレートを自由に選べるというメリットがありますがいろいろな不具合がありました。次に紹介する方法は、カテゴリに応じて自動的にテンプレートを選んで表示してくれるというものです。

 投稿時に選ぶことはできませんが、子育て記事なら子育て記事用のテンプレートとだいたい決まっているので、カテゴリに応じてテンプレートが設定されるということでも支障はありません。さらにこの方法なら特別なプラグインは必要ありません。

まず、デフォルトのshingle.phpをshingle1.phpやshingle-sonota.phpなどにリネームして保存します。
そして、shingle.phpには下記のように記事を振り分けるコードのみを残します。

<?php
 $post = $wp_query->post;
 if ( in_category('8') ) {
 include(TEMPLATEPATH . '/single8.php');
 } elseif ( in_category('14') ) {
 include(TEMPLATEPATH . '/single14.php');
 } else {
 include(TEMPLATEPATH . '/single-sonota.php');
 }
 ?>

あとは、shingle1.phpなどを好きなようにアレンジしてしまえばOKです。

 上のコードでは、カテゴリ8の記事はshingle8.phpを表示し、カテゴリ14はshingle14.phpを表示、その他はshingle-sonota.phpを表示するという命令です。elseifで条件を増やせばなんぼでもできます。これで携帯電話からの閲覧でも型崩れすることなくできるので、さらにサイト作りの幅が広がります。先ほどのサイドバーの考え方と組み合わせることによって、カテゴリごとにオリジナリティあるサイトを作成することができます。

「日付・タイトル」の全記事一覧を作りたい

 WordPressの全ての記事をプラグインを使わずに「日付」「タイトル」で発行日順に一覧表示する方法です。これが、ありそうでなかなか無かったので全記事リストのページをつくる方法を紹介します。

WordPressの固定ページには、カスタムテンプレートという機能があります。これを利用して、過去記事一覧用のテンプレートを作るという作戦です。

 複製した固定ページの最初に下記のような文を追加します。

<?php /* Template Name: バックナンバー */ ?>

 すると、ページ属性で「バックナンバー」のテンプレートが呼び出せるようになっています。これを応用すると、他のページと違うデザインのページやコンテンツを作ることができるのでサイト制作の幅はグンと広がります。

<li><?php the_time(‘Y/m/d’); ?> : <a href=”<?php the_permalink(); ?>”><?php the_title_attribute(); ?></a></li>

 記事一覧をリスト表示したいので、固定ページのコンテンツを表示する部分にこれを追記したファイルを作成します。最近のテーマは複雑に入り組んでいて、どこに追記するとよいか迷います。でも、必ず記事を表示する部分がありますのでそこに入れ込めば一覧表示を作成することは可能です。

カテゴリーごとにページのデザインを変える

 WordPressのカテゴリーごとにページのデザインを変える方法です。究極な話をすると、特定のカテゴリーのみ別サイトのようにすることも可能です。

基本的な考え方として、WordPressにはカテゴリにIDというものがあります。ダッシュボードのカテゴリから、編集を選ぶ時のアドレスを見ると分かります。そのIDを応用したら何でもできるし、物によっては量産ができるということです。

特定のカテゴリー「一覧ページ」のデザインを変える場合

 category.phpを複製し、category-8.phpのように、ハイフンとカテゴリIDの数字をつけて保存するという方法です。 この場合、ID8の一覧ページはこのファイルを読み込みます。

各ページ、見出し画像と解説だけ変えたいんだけど…

 カテゴリーのページをアレンジするといっても、結局一部の画像や文を差し替えるだけだったりします。category-××.phpというファイルをつくって対応するだけのことですが、この方法で大量生産するのは面倒です。もし、画像や文章が自動的に差し替わればどんなに便利かといろいろと解決策を探っていました。

カテゴリには説明を入力することができるので、それを表示させよう。あとは、画像の名前とカテゴリIDやスラッグをうまく関連付けられないかな。やってみよう!

 私が試行錯誤した結果一番うまくいった方法は次の作戦でした。

<?php $cat_info = get_category( $cat );   ↑カテゴリIDを使って呼び出したいスラッグを指定する ?>

<IMG src=”https://n-hokkaido.com/tetudou/image/<?php echo wp_specialchars( $cat_info->slug ); ?>.png” >

 カテゴリーで入力したスラッグがhokkaidoであれば、”https://n-hokkaido.com/tetudou/image/hokkaido.png”というようになりますので、そこにhokkaido.pngというファイルがあれば画像が表示されるわけです。2つめの画像を使いたい場合は、hokkaido2.pngなどの画像にしたいですよね。呼び出す場合も同様ですので次のようにしてみます。

<IMG src=”https://n-hokkaido.com/tetudou/image/<?php echo wp_specialchars( $cat_info->slug ); ?>2.png” >

どうです?WordPressって面白いでしょ。ちなみに、カテゴリIDの部分ですが呼び出したいスラッグを指定するときに必要なんです。分からないかもしれない解説でごめんなさい。

カテゴリー表示の場合は、グローバル変数$catに表示しているカテゴリーのIDが入っているようです。これをget_categoryの引数として指定することで、特定のカテゴリーの情報を取得することが可能になるのです。

<?php $cat_info = get_category( $cat ); ?> でカテゴリIDを呼び出したあとに <?php echo wp_specialchars( $cat_info->slug ); ?> とするとslugの部分がそのカテゴリになるのです。

私のサイトの場合ですが、JR北海道のカテゴリーでは「hokkaido」普通列車では「local」711系では「711」と出力されるようになりました。ここまで来たら勝ったようなものですね。

親カテゴリ・子カテゴリの問題

 今紹介した方法であれば問題なくできます。似たような方法で、次のような命令もあります。

<?php echo $cat->category_nicename; ?>

 これもカテゴリのスラッグ(アルファベット)を取得するタグですが、残念なことに、そのカテゴリに所属する最初の記事のカテゴリまで取得してしまい思うようにいきませんでした。なんか、親とか親戚とかいろいろついちゃったんです。なので、使えませんでした。この試行錯誤がプログラミング的思考を育てます。WordPressって面白いよね。

ブログカードをつくりたい

ブログカードははてなブログで導入された、サイト内リンクをかっこよく見せる方法です。アイキャッチ画像とタイトル。そして簡単な記事の抜粋を表示してくれます。それを、URLを打ち込むだけで表示できるというのですから相当使い勝手はいいものなんです。

 私が最初に使ったのは、Simplicityのテーマを使っている時でした。現在は賢威のテンプレートを使っていますが、賢威でも同様の機能がついています。賢威で表示した場合、下のようになります。(これはキャプチャですので、実際にリンクはしていません。)

ブログカード表示にならない!

 ところが、ブログカードを表示したいと思って記事にURLを打ち込んでアップロードしても、そのままURLが表示されるだけで思うようにブログカードが表示されないという状況が続いていました。いろいろと試行錯誤した結果、意外なところに問題があることに気付き、簡単に解決しました。

URLだけのつもりが、癖で「スペース」や「・」を頭に付けていた。

 つまり、URLのみ入力しているつもりが、レイアウトを整えようとスペースを入れたり、頭に・をつけたりしていました。無意識なのでこれに気付かずあれやこれや悩んでいたのです。ブログカードが表示されないことがある場合、URLの他に何か文字やスペースが入っていないか確かめましょう。

その他、以下のようなケースも考えられます。

URLだけのつもりが、リンクタグで貼っていた。

 必要なのはURLだけで、そこにリンクをつける必要はありません(賢威テンプレートの場合)。これも、上手くいかない時の原因のひとつです。

キャッシュ系のプラグインなどが原因。

 高速化を意識していろいろなプラグインを入れていると、それが原因でうまく表示されないという場合があります。本当にリンクの貼り方に問題がない場合はこちらも確認してみてください。

WordPressのバージョンが古い。

 WordPressはバージョンアップの連絡が充実しているので、こまめにアップデードしていると思いますが、稀にバージョンが古いことがあるかもしれません。一応、WordPress4.4で実装された機能になりますので、WordPressのバージョンが4.4より古い場合は動作しません。

 以上のように、上手くいかないときの原因の多くはリンクの貼り方です。上手くいかないときは、余計なスペースやタグが付いていないか、テキストモードで確認してみるとよいと思います。

404エラーページのサイドバーを除去

 今ではテーマそのものの機能で広告が除去できたり、JetPackのウィジェットの設定を変えたりするなど、対応の方法にも数多くの選択肢があります。WordPress初期のころはそうはいきませんでしたので、どのように対応したか紹介します。

ページが見つかりません 404エラー

 長くサイトを運営していると、自分のページにアクセスしてもらったにもかかわらず、そのページを変更したり削除したりした影響でこんな表示が出ることがあります。なまら北海道だべさは2019年にパーマリンクの設定を変えたのでかなりの数が表示されています。

<?php get_sidebar(); ?> を削除すると完了

 WordPressは組み立てブロックのようにページを表示しています。サイドバーを表示する際もサイドバーを表示する命令があるから出てくるわけで、404ページを表示するファイルにある <?php get_sidebar(); ?> を削除するとそれで解決します。

SEOを意識してテーマファイルも複雑化してくると、 <?php get_sidebar(); ?> が簡単に見つからなくなりました。過去にはこんなこともあったので記録しておきます。

404.phpには<?php get_footer(); ?>のみがあり、サイドバーを読み込む命令がありませんでした。仕方がないのでfooter.phpを見ると、そこに<?php get_sidebar(); ?>があります。

 さて問題です。フッターのサイドバーを削除してしまうとどうなるでしょうか。

 当然、すべてのページのサイドバーが表示されなくなります。ではどうしたか…。

404.phpで読み込むフッターファイルだけ、サイドバーを読み込まないものにしました。どのようにしたのかというと…

① footer-2.phpというファイルを作成し、 <?php get_sidebar(); ?> を無くします。

② 404.phpのフッター読み込みの部分を次のようにします

<?php get_footer(2); ?>

これで、2を読み込むんですよ。WordPressって面白いでしょ?

 これで404エラーの時にはサイドバーの無いフッターを読み込むことになり、サイドバーが表示されなくなります。こんなアレンジも過去にはやっていたというお話でした。

タイトルとURLをコピーしました