ワードプレスで特定の記事を特定の場所に表示させる方法

更新日: 2019/08/07

ワードプレスで特定の記事を特定の場所に表示させたいと思ってる方も多いはず。
例えば自分のブログだとPICK UPエリアがそこに該当する。ここの記事は管理画面で選択したものが必ず一番上にPICK UPとして表示されるように作っている。

ピックアップ機能

kredoブログでいうとこの箇所も同じ仕様だ。

クレド特集記事

こういった動きを便利に実現してくれるワードプレスのプラグインがAdvance Custom Field (ACF)だ。

今回はワードプレスをより詳細に制御できるAdvance Custom Fieldを使って特定の記事を特定の場所に表示する方法をレクチャーしたいと思う。
ちなみにインストールの方法や細かいAdvance Custom Field自体の使い方については書かないので、全く触ったことないって人はまず基礎部分が書いてあるブログを読んでから、この記事を読んでもらえるとよりわかりやすいんじゃないかな。

So let’s get started…



初期設定

まず最初に必要なのがフィールドグループの設定だ。
サンプルを作成したので画像のように進んで欲しい。
WPの管理画面からAdvance Custom Fieldの設定ボタンをクリックして、フィールドグループに進む。

Advance Custom Field

画面にあるAdd Newボタンをクリックして新しいフィールドグループを作ろう。

Advance Custom Field

今回はサンプルとして「Pick Up」というタイトルをつけて進めていく。
次にフィールドグループの中の設定を見ていこうと思う。
今回はTrue / Falseフィールドタイプの作成に焦点を当てる。
簡単に説明するとTrueが表示させて、Falseは表示させないという理解で大丈夫。

フィールドグループ

まずは [Field Label]に任意のテキストを入れよう。
今回はPick UPという名前を着けて進めていく、 [Field Label]に入力したものと同じテキストが[Field Name]にも自動で入るがもし変更したければこちらは好きに変更が可能。
ただこの[Field Label]と[Field Name]のテキストは後に使うので何を設定したか覚えておこう。

次に設定するのがField Locationだ。
カスタムポストを使うのか通常の投稿機能だけなのかで設定が色々と違うんだけど、今回は投稿機能だけなので画像と同じように設定しよう。
‘Post Type’ > ‘is equal to’ > ‘Post’

フィールドグループ

最後に設定の微調整をしよう。
投稿画面のどこにチェックボックスを入れるかをここで設定できる。
自分は毎回見やすいので投稿画面の左側のTagsパートの下に表示されるように設定している。

管理画面

以上でCustom Field側の設定は完了だ。
投稿ページに移動して新規投稿画面を開いて見て欲しい。
下の画像のようにTagsの下に「Pick Up」というチェックボックスが出来ているのがわかると思う。

ここのチェックボックスにチェックを入れた記事が特定の場所に表示されて、消したい時はチェックを外せばいい。

表示したい箇所にコードを埋め込む

Custom Field側の設定が完了したら記事を表示させたい場所に呼び込むコードを埋め込む必要がある。
以下サンプルのコード入れておくがこんな感じ。


<section class="post-lists pickup">
  <?php
  $args = array(
    'post_type' => 'post',
    'meta_query' => array(
    array(
        'key'=>'pick_up', // name
        'posts_per_page'=>4, // limit post x
        'value'=>'1', // true「1」、no「0」
    )
  ));
  $pickup = get_posts($args);

  if(($pickup)){ // ピックアップの記事が存在するか確認
    $i = 0; // how many
    $post_numbers = 9999; // how many show up
    foreach($pickup as $post):setup_postdata($post); {
        if($i < $post_numbers){
  ?>
  <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'full') );  ?>
  <?php
  $categories = get_the_category();
  $cat_name = $categories[0]->cat_name;
  ?>
  <article class="post-lists--item pickup">
  <a href="<?php echo esc_url( get_permalink() );?>">
     <figure class="post-cover">
       <img src="<?php echo $url ?>" alt="<?php the_title(); ?>">
     </figure>
     <span class="post-category"><?php echo $cat_name; ?></span>
     <span class="post-date"><?php the_time('Y/m/d')?></span>
    <h2 class="post-title"><?php the_title(); ?></h2>
  </a>
 </article>
 <?php
       $i++;
       }
   }
   endforeach;
 }
 ?>
</section>

このコードは、「pick up」にした記事をすべて表示するコードになってるんで条件変えたい人は色々触ってみてね。(コード内でpick upになってる箇所は設定した [Field Label]の名前に変更してね)

あとは呼び出したい部分をCSSで調整すれば綺麗に選んだ記事だけがコードを入れた部分に表示されるようになる。
複数同じフィールドを入れることも出来るし、フィールドグループを別に作れば別グループで特定の記事を管理することも出来る。
メディア運営する人には凄い便利な機能なので是非使ってみて欲しい。



まとめ

今回はAdvance Custom Fieldを使って特定の記事を表示させる方法を書いてみたが、Advance Custom Fieldってめちゃくちゃ便利なプラグインでこれ以外にも色々便利な使い方がある。

特に決まったフォーマットで投稿を量産するサイトだと非常に力になってくれるプラグインだと思う。
例えばうちが作った不動産管理サイトなんかだと

管理画面

こんな感じで設定を詰めれば、WEBの知識がない人でも簡単に更新が出来きて追加が出来るように作ることも可能だ。
WPでのサイト制作に幅を持たせてくれる便利なプラグインなので是非まだ触ったことない人は勉強してみてね。

WEB制作、オフショア開発のご相談はこちらから

WEB制作をご検討の方、制作パートナーを募集している企業さまはお気軽にご相談下さい。Good.Hackerでは設計からデザイン、構築、マーケティングまで幅広く対応しています。 お問い合わせはこちら