ワードプレスでカテゴリーページを作るとき、カスタムフィールドを活用すると、一覧としてカテゴリー(アーカイブ)ページに自動的に表示できるので、とても便利です。
そして、利用するユーザーにとってもわかりやすいサイトとなります。
カスタムフィールドを利用し、必要な項目を入力するだけにすると、コピペするだけで済み、迷うことがなくなるので効率化に繋がります。
カスタムフィールドの入力方法
例えば、ショッピングサイトを作る場合、画像、商品名、価格が一覧表示されていると、カテゴリーにどんな商品が揃っているのかがわかりやすくなります。
カスタムフィールドを使って、画像、商品名、価格を設定し、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」は消す方が良いです。
ちなみに、、、カテゴリーページを作成するとき、投稿ページの編集画面で、カテゴリーを新規追加することは忘れないでください。
スポンサードリンク