企業サイトなどを作成する場合、トップページに任意の投稿をいくつか載せておきたいこと、ありますよね。
例えば、「ようこそ」みたいな挨拶文や、「イベントの告知」などでしょうか？
一番簡単に実装するには、なにか任意の（例えば「トップページに表示するコンテンツ」といった）カテゴリを用意し、そのカテゴリのみを３件なり５件なり表示するためのループを WP_Query などで作るといった方法でしょうか？
たとえばこんなかんじ
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php $args = array( 'posts_per_page' => 5, 'post_type' => 'post', 'order' => 'ASC', 'category_name' => 'show_index_page' ); $the_Query = new WP_Query($args); if ($the_Query->have_posts()):while ($the_Query->have_posts()):$the_Query->the_post(); ?> ここに記事を表示するコード（the_contentとか）を書く <?php endwhile; endif; wp_reset_postdata(); ?> |
でも、この方法だと、たとえば「イベント２よりもイベント３のほうがアピールしたいから上にあげたい」なんて場合に、投稿日ソートにセットしておいて、投稿日をいじることで移動させるしかありませんでした。
でも、日付をいじって順番を上下させるのはなかなかに気持ちが悪いですので、他の方法を考えてみました。
やり方
- テーマカスタマイザを使用し、投稿IDをカンマ区切りで指定して保存しておく
- １で保存したデータを元に配列を作成し、WP_Query用のクエリをつくる
- posts_orderbyにフックして２の配列の順番に出力するようにする
ということで早速１から料理していきます。
カスタマイザ関連の設定
はじめに、カスタマイザをいじれるようになっていない場合は、いじれるようにします。
functions.php に以下のように書きます。
|
1 2 3 4 |
add_action( 'customize_register', 'mytheme_customize_register' ); function mytheme_customize_register($wp_customize) { require_once('theme_customizer.php'); } |
theme_customizer.phpがカスタマイザを拡張するファイルです。好きな名前でいいですが、次に作成するファイル名と、ここで指定するファイル名はおなじになるようにして下さい。
そして、theme_customizer.phpを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php // 不要なデフォルト要素の削除 $wp_customize->remove_section('static_front_page'); $wp_customize->remove_section('nav'); // セクションの登録 $wp_customize->add_section('MyTheme_Custom_IndexContent', array( 'title' => 'TOPページコンテンツ設定', 'priority' => 35 )); $wp_customize->add_setting('MyTheme_Custom_Show_Index', array( 'default' => '', 'type' => 'option' )); $wp_customize->add_control('MyTheme_Custom_Show_Index', array( 'label' => '表示領域１（複数設定不可）', 'section' => 'MyTheme_Custom_IndexContent', 'type' => 'text', 'setting' => 'MyTheme_Custom_Show_Index', 'priority' => 10 )); ?> |
※不要なデフォルト要素の削除という部分は、別に書かなくても大丈夫です。この項目について詳しくはこちらの記事で書いてますので、興味があったらどうぞ。
とりあえずこれでテーマのカスタマイズに項目を追加できました。
早速カスタマイザに入って見てみましょう。
カスタマイザに入るには、
- ログインしてからサイトの表画面を表示する
- アドミンバー（黒いバー）の左の方のサイト名が書いてあるところにマウスを乗せると出てくるメニューから「カスタマイズ」を選択する
または、
- 管理画面から外観→テーマをクリック
- 現在のテーマの情報が書かれているあたりにある「カスタマイズ」をクリック
でもOKです。
どうですか？項目が増えていますか？？
ちゃんと増えていれば成功です。早速今作ったこの項目に、表示したい投稿のIDをカンマ区切りで入力し、保存しておきましょう。
ここで保存した値はあとで、
get_option(‘MyTheme_Custom_Show_Index’,false );
といった形で取り出せるようになります。（参考：関数リファレンス/get option）
表示するページの設定
表示したいページ（例えばindex.phpやhome.phpなど）の表示させたい（ループを作りたい）場所でこのように WP_Query を書きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php $target_pid = get_option('MyTheme_Custom_Show_Index',false ); $target_pid_arr = explode(',',$target_pid); function post_ids_orderby ($orderby) { global $target_pid_arr; return 'FIELD(ID,'.join(",",$target_pid_arr).')'; } add_filter('posts_orderby','post_ids_orderby'); $args = array( 'posts_per_page' => -1, 'post_type' => 'post', 'order' => 'ASC', 'orderby' => 'post_ids_orderby', 'post__in' => $target_pid_arr ); $the_Query = new WP_Query($args); if ($the_Query->have_posts()):while ($the_Query->have_posts()):$the_Query->the_post(); ?> |
2行目は、先ほど書いた、カスタマイザで保存したオプション値のロードですね。
これはただカンマ区切りで入力してあるだけなので、3行目で配列に変換してあげています。
次に、ID順でソートするためのフィルターフックを作成します（5-9行目）。
今回はこの部分でしか使わないので直接書いてますが，functions.phpに書いておけば何処からでも呼べるようになるので複数個所で指定順表示を行いたい場合はそちらのほうがいいでしょう。
あとは普通にWP_Queryを使用して投稿を取得するのと殆ど同じですが、3つポイントがあります。
ポイント１：orderby に今フックして作成した post_ids_orderby を指定
ポイント２：post__in に、さっき変換した配列を指定
ポイント３：posts_per_page は -1 にする
post_ids_orderbyについて
post_ids_orderbyについては、以下の記事で紹介されている方法をそのまま利用させて頂きました。詳しい仕組みや何をしているのかが知りたい場合は一度通して読んでみることをおすすめします。
WordPress：記事IDの配列からループを作成して記事一覧を表示する方法 | 情報科学屋さんを目指す人のメモ
post__inについて
post__in は、WP_Queryで指定する際に、このIDとこのIDとこのIDを読み込んでね、っていう指定です。配列で指定します。
関数リファレンス/WP_Query #投稿＆固定ページパラメータ
これでカスタマイザ画面で指定したとおりに投稿が表示されるようになるはずです。
posts_per_pageについて
posts_per_page を -1 にする理由ですが、これはループで表示する投稿数です。指定した数以下の場合はその数までしか出ませんので、最大数ともとれますね。
ここに-1を指定すると、条件にマッチした全ての投稿を取得します。
今回は、カスタマイザでカンマ区切りに指定した全ての投稿を出したいので、
たとえば仮に 3 を指定してたとすると、カスタマイザでIDを５つ指定しても３つまでしか表示されなくなってしまいます。
なので、ここでは上限を設定しない -1 を指定しておくわけです。
逆に、運用ルールなどでトップページには３件まで任意の投稿を表示できるけれど、それ以上は表示させたくないなどという場合は、 posts_per_page に 3 を指定しておけば運用担当者がルールを無視して「５件出しちゃえ！」といった事態を未然に防ぐことができますので、敢えて数値を指定しておくのも１つの方法ですね。
因みに、orderをASCにすればカンマ区切りに入力したIDの左から順に、
DESCなら右から順に上から表示されるはずです。
テストする
さて。ここまで設定が終わればひと通り準備は完了ですので、ちゃんと狙ったとおりに表示できるかテストしてみましょう。
先ほどと同じ方法でカスタマイザに入って、入力されている投稿IDの並び順を入れ替えたり、他のIDを追加したりしてみましょう。
入力してフォームからフォーカスを外す（どこか入力エリア以外をクリックする等）とすぐに横のプレビューエリアに反映されるはずですので、ちゃんと入力した順番に表示されているかいろいろと試してみて下さい。
問題がなければ完成です。おつかれさまでした。
コメントする