WordPressでカスタムフィールドを使ってカテゴリーに表示するには

ワードプレスでカテゴリーページを作るとき、カスタムフィールドを活用すると、一覧としてカテゴリー（アーカイブ）ページに自動的に表示できるので、とても便利です。
　
そして、利用するユーザーにとってもわかりやすいサイトとなります。
　
カスタムフィールドを利用し、必要な項目を入力するだけにすると、コピペするだけで済み、迷うことがなくなるので効率化に繋がります。

カスタムフィールドの入力方法

例えば、ショッピングサイトを作る場合、画像、商品名、価格が一覧表示されていると、カテゴリーにどんな商品が揃っているのかがわかりやすくなります。

カスタムフィールドを使って、画像、商品名、価格を設定し、category.phpでそれぞれのデータを取得すると、カテゴリーページに自動的に反映させることができます。
　
　
まず、カスタムフィールドの新規追加をクリックして、名前に管理しやすい単語、例えば画像を表示させるなら、「img」を入力します。そして、値には画像のURLを入力します。
　
①

　
②

　
次に、入力した名前「img」を使用してcategory.phpで取得します。
　
　

カスタムフィールドの値を取得、表示する

カテゴリーページで、追加したカスタムフィールドの値を表示させるには

<?php echo get_post_meta( $post->ID, 'img', true ); ?>

といった記述をし、htmlタグと組み合わせます。
　
　
htmlタグと組み合わせる一つの方法として、リスト表示を使います。

<ul>
  <li>
    <p><img src="<?php echo get_post_meta( $post->ID, 'img', true ); ?>" /></p>
  </li>
</ul>

　
　
投稿ページを新規追加するたびに、自動的に追加表示させたいので、

<?php while (have_posts()) : the_post(); ?>
<?php endwhile; ?>

　
whileというのは、その間、という意味なので、have_posts：the_post（ページが投稿されていれば、ページがある間繰り返す。）といったところでしょうか。

このループ処理をこのように追加します。↓

<ul>
  <?php while (have_posts()) : the_post(); ?>
    <li>
      <p><img src="<?php echo get_post_meta( $post->ID, 'img', true ); ?>" /></p>
    </li>
  <?php endwhile; ?>
</ul>

　
<li>から</li>まで、投稿ページを追加するたびに追加されていくので、カスタムフィールドの値を自動的にカテゴリーページに表示させることができます。
　

　
あとは、ulとliにそれぞれclass=”○○○”とつけてcssでスタイルを整えるだけでOKです。
　

スラッグ /category/ を消すには

パーマリンク設定でドメイン直下に記事の投稿を表示させる場合、カスタム構造で /%category%/ を作成しなければ、カテゴリーを表示させると
　
https://○○○.net/category/カテゴリー名
　
というようなスラッグができてしまいます。
　
　
真ん中のスラッグ category は、正直必要のないものだと思っています。これを消すには、パーマリンク設定でカスタム構造を選択し
　
/%category%/%○○○% と設定します。（○○○には好きなものを）
　
　
そして、下のカテゴリーベースにドット「.」を入力しておきましょう。
　

　
　
そうすると、
https://○○○.net/category/カテゴリー名　
ではなく、
https://○○○.net/カテゴリー名/
というスラッグになり、「category」が表示されなくなります。
　
　
実際にhttps://○○○.net/category/の部分のページを見てみると、中身が存在しないページが表示されます。存在しないページができてしまうと、SEO的にマイナス評価を受けるので、「category」は消す方が良いです。
　
　
ちなみに、、、カテゴリーページを作成するとき、投稿ページの編集画面で、カテゴリーを新規追加することは忘れないでください。
　
　
スポンサードリンク