目次

  1. トップページに任意のカテゴリーページのリンクを貼る
  2. テーマを作成する
  3. まとめ

 

この記事では、トップページにあなたが選んだカテゴリページを表示する専用テンプレートを作成します。

 

 

トップページに任意のカテゴリーページのリンクを貼る

ホームページの構成は↓のような感じです。

トップページにカテゴリページのリンクを貼る

投稿カテゴリーの中から、あなたがトップページに貼りたいものを選べるようにして、それぞれのカテゴリーについてサムネイル画像と 説明文を一緒に表示できるような構成にします。

 

出来上がりは、次のようなページになります。

トップページ_2x

 

 

テーマを作成する

具体的には次のような手順でテンプレートを作っていきます。

  1. カスタムページテンプレートを作成する
  2. プラグインCustomFieldTemplateを導入する
  3. トップページ用の固定ページを作成する
  4. カスタムフィールドを編集する
  5. カテゴリーの説明文を編集する

 

カスタムページテンプレートを作成する

固定ページ用のカスタムテンプレートを作成します。

 

frontpage4categories.php

 

カテゴリのボックスを表示する関数を定義

L12〜L30で、各カテゴリのボックスを表示する無名関数を定義しています。

 

引数として、カテゴリーオブジェクト、メディアID（画像）の２つを渡します。

$the_box_content = function ($cat, $img_id = false) {

 

カテゴリーページのリンクを$linkに入れておきます。

$link = get_category_link($cat->term_id);

 

メディアIDが指定されいる場合はメディアの情報を入手して、imgタグを作成します。

if (!empty($img_id)) {
  $img = wp_get_attachment_image_src($img_id, array(240, 240));
  $width = $img[1]/2;
  $height = $img[2]/2;
  echo '<a href="'.$link.'"><img src="'.$img[0].'" width="'.$width.'" hight="'.$height.'" /></a>', PHP_EOL;

 

ここで表示する画像サイズは120×120ですが、高解像度Displayに対応するために倍サイズ240×240の画像を用意しておきます。また、functions.phpの中で

set_post_thumbnail_size(240, 240, true);

 

メディアIDが引数で指定されていない場合は、代替画像を表示するimgタグを出力します。

echo '<a href="'.$link.'"><img src="'.get_template_directory_uri().'/img/no_image_2x.png" width="120" height="120"/></a>', PHP_EOL;

 

 

カスタムフィールドの値を確認して関数を呼び出す

カスタムフィールドの値を入手して、先ほどの関数を呼び出します。

 

準備としてL34で投稿オブジェクトを$top_postに保存しておきます。

if ( have_posts() ): $top_post = get_post();

直接$postを使っても問題無いのですが、今回は明示的に$top_postに代入しました。

 

L45-56で、カスタムフィールドの値を入手、先ほどの無名関数を呼び出します。

 

まずは１つめのカテゴリーslug名をゲット。

$box_cat = get_category_by_slug(get_post_meta($top_post->ID, "cat1_name", true));

get_post_meta()は、カスタムフィールドの値を入手するWordPress関数です。第1引数で投稿ID、第2引数でフィールド名を指定します。

後ほど、投稿編集画面から”cat1_name”というフィールドに対する値（カテゴリーslug名）を指定します。

 

続いて１つめのカテゴリーと合わせて表示する画像IDをゲット。

$box_img = get_post_meta($top_post->ID, "cat1_image", true);

 

get_category_by_slugが成功していたら、先ほどの無名関数を呼び出します。

if ( isset($box_cat) ) $the_box_content($box_cat, $box_img);

 

以上の３行の処理を、４つのカテゴリーそれぞれについて行っています。

 

 

プラグインCustomFieldTemplateを導入する

CustomFieldTemplateは、WordPressのカスタムフィールドを編集しやすくするためのプラグインです。

https://wordpress.org/plugins/custom-field-template/

このプラグインは便利で汎用的に使えるので、オススメです。

補足：有名なプラグインであちこちで紹介されているので、詳しい使い方は他のサイトをご参照くださいね^^

 

プラグイン設定画面から、カスタムフィールドのフィールド名を予め指定することが出来ます。また、それらの入力画面を表示する投稿タイプを限定する、メディアピッカーで画像IDを指定することなどができます。

 

プラグインをインストールしましたら、

ダッシュボード＞設定＞カスタムフィールドテンプレートを開きます。

 

次の３項目を指定します。

  • テンプレートタイトル：任意
  • ページテンプレートファイル名：frontpage4categories.php
  • テンプレートコンテンツ：下記の通り
[cat1_name]
label =Category1
type = textfield
size = 35
hideKey = true

[cat1_image]
type=file
hideKey = true
mediaLibrary = true
mediaPicker = true

[cat2_name]
label =Category2
type = textfield
size = 35
hideKey = true

[cat2_image]
type=file
hideKey = true
mediaLibrary = true
mediaPicker = true

[cat3_name]
label =Category3
type = textfield
size = 35
hideKey = true

[cat3_image]
type=file
hideKey = true
mediaLibrary = true
mediaPicker = true

[cat4_name]
label =Category4
type = textfield
size = 35
hideKey = true

[cat4_image]
type=file
hideKey = true
mediaLibrary = true
mediaPicker = true

 

括弧[]の中がフィールド名になりますので、冒頭で作成したページテンプレートのフィールド名と一致するように指定します。

４つのカテゴリ×２種類（カテゴリーslug名, 画像ID）の計８つのフィールドを定義しています。

 

これらを入力したら、下のほうにある「オプションを更新する」ボタンを押します。

 

 

トップページ用の固定ページを作成する

次は、トップページに表示する固定ページを作成します。

トップページ用固定ページの編集_2x

 

ページ属性のテンプレートを、デフォルトテンプレートから”Front Page with 4 categories”（先ほど作成したページテンプレートのコト）に変更します。もしページ属性のメニューBoxが見当たらない場合は、画面右上の表示オプション “ページ属性”にチェックを入れてくださいね。

 

ここで一度下書き保存してください。

 

カスタムフィールドを編集する

引き続き投稿編集画面において、カスタムフィールドを編集します。先ほどCustomFieldTemplateを設定しましたので、「カスタムフィールドテンンプレート」というメニューが新たに表示されます。もしメニューが見当たらない場合は、画面右上の表示オプションでチェックを入れてください。

カスタムフィールドテンプレート_2x

４つのカテゴリーそれぞれについて、カテゴリーのslug名と画像を選択します。ファイル選択ボタンを押せばローカルPC上のファイルをアップロードできますし、すでにメディアライブラリにある画像を選択する場合は”メディアピッカーで選択”のリンクを押せばOKです。

 

カテゴリーslug名は、投稿＞カテゴリー画面で確認できます。動作トラブル防止のために、slug名は半角英数字で構成することをオススメします。

 

内容を確認したら公開します。

設定＞表示設定を開いて、フロントページの表示項目に固定ページをチェックして、今作成した固定ページを選択します。

 

 

カテゴリーの説明文を編集する

最後に、トップページに表示する各カテゴリーの文章を入力します。今回はカテゴリーの”説明”項目を利用します。

カテゴリーの編集_2x

 

 

まとめ

色々なモノを組み合わせて使っているためイマイチ関連が分かりづらいと思います。投稿の編集画面を中心とした関連図は次のようになります。

投稿編集時の関連図_2x

 

固定ページの編集画面を中心に考えると

  • プラグインCustomFieldTemplateによって、フィールド名や入力方法を規定する。また、ページテンプレートfrontpage4categories.phpを選択することで、このルールが適用される
  • 表示したいカテゴリーのslug名を自分で確認して、フィールドcat1_nameの値として入力する
  • 表示したい画像をメディアPickerで選択する。カスタムフィールドの為にメディアPickerを呼び出す仕組みは、プラグインに用意されており、プラグイン設定画面で利用する旨を指定する。

 

それでも複雑ですね・・・。試行錯誤すると慣れるかと思います。（スミマセン）

 

以上で、トップページにカテゴリーページのリンクを表示できました。お疲れ様でした！

 

「実践的テーマの作成」の記事