【WPカスタムフィールド】音楽サイトにBPM(数値)のフィールド作成&管理画面記事一覧に表示

                    更新: 2021/02/23   2415文字

【WPカスタムフィールド】音楽サイトにBPM(数値)のフィールド作成&管理画面記事一覧に表示
今回は、WPのカスタムフィールドを、実践的に取り扱ってみます。まず第一弾として、『管理人の行っているフリーBGMサイト、にBPM(数値)のフィールド作成&管理画面記事一覧に表示』というのを行ってみます。さっそく、フィールド設定方法や、functions.phpでの管理画面一覧表示方法をみていきましょう。

今回つけたい&将来的に実装したい機能(BGM配布サイトにBPMのフィールドつけて一覧管理・将来的に検索)


今回もまた、管理人のWP改造実験の場となっている、『BGM配布サイト』を使います。
WPカスタムフィールド(タイトル・本文以外に追加で情報を載せられるフィールド・車や不動産・ネットショップでは便利)については、他に詳しいサイトがあるので説明は省きます。

現在のところ『タグ(雰囲気・小ジャンル)やカテゴリ(大ジャンル)などの絞り込み機能』・『コーポレートっぽいトップページ&一覧取得ページ』といった機能は実装しましたが、『将来的にBPM(Beats Per Minute/テンポの速さ)でも絞り込み検索できるようにしたい』という希望があります。

(例えば、変数$bpm1, $bpm2にフォームで数値入れて
『$arg[‘meta_query’][] = array(
array(‘key’=>’bpm’,’value’=>array($bpm1, $bpm2),’compare’=>’BETWEEN’,’type’=>’numeric’),
‘relation’=>’and’);』みたいにして絞り込むイメージ)

そのため、今回は第一弾として『BPMのフィールドつけて記事一覧に表示して管理する』というのをやってみます。
(あと、BPMで絞り込めるとプロっぽい笑)

WPカスタムフィールドで、『BPM』の項目を用意(プラグインACFなどは不使用)


まずは、WPカスタムフィールドで『BPM』をつけてみましょう。個別記事内にはオーディオデータリンクがのっています。それに合わせた数値を入力する感じで。
表示されていないときは、『表示オプション』タブを開いて、『カスタムフィールドにチェック』すると、個別記事本文編集フィールドの下に、カスタムフィールド入力欄がでます。


初期状態ではこんな風に空になっています。プラグインなどのインストール状況によっては、『そのプラグイン由来のフィールド』が入ってることがあるかもしれません(データベース内にメタデータを入れるテーブルを作っちゃうプラグインはよくあります。)。


『新規追加』をおして、名前のところに『bpm』を。値は、この記事に載せていたオーディオデータのBPM数値に合わせて『106』を入れ、追加ボタンを押します。
これで新しくカスタムフィールドができました。

WPカスタムフィールドで作った『BPM』を、管理画面記事一覧で見られるようにする(functions.php)

次に、一覧で見たときに値を確認しやすいように(空があるかとかも)『管理画面記事一覧にBPMのフィールドを表示できるように』したいと思います。

通常では、カスタムフィールドの値は、この画像のように、記事一覧にはでてきません。調査したところ『manage_posts_columns』『manage_posts_custom_column』(たぶんWPの管理画面用の組み込み関数)などにアクションフックをかけて対応するというのがわかりました。


こちらが、functions.phpに書いた内容です。最初のファンクション名は『function add_bpm_column(好きな名前にしてください)』で、まず記事一覧に列&見出しを作ります。manage_posts_columnsにアクションフックをかけて起動します。
次の『custom_posts_column』では、WP関数の『get_post_meta』を使って内容を取得・$field_bpmという変数に格納してエコーという流れです。


やってみたところ、管理画面内に、無事に『bpm一覧』が表示されました。数値なので、ソートかけても使いやすくなりますね。これで、入力していない記事とかもわかりやすくなりました。

管理画面記事一覧で、カスタムフィールドの値を見られるようにするコード(github.gist)

上の画像にはいろいろ書き込んだので、見やすくするためにgithub.gistにも載せました。こちらもご覧ください。

あとがき・まとめ

  • カスタムフィールドをプラグイン無しで使うときは『表示オプション』タブを開いて、『カスタムフィールドにチェック』
  • 管理画面でフィールド値が一覧表示できると、値が空の記事などがわかりやすい
  • manage_posts_columns・manage_posts_custom_columnにアクションフックをかけて、フィールド表示列を管理画面に追加できる

まとめるとこんなところでしょうか。今回はBGMサイトだったためBPM数値を入れましたが、『値段・スペック・広さetc』など、カテゴリ・タグのほかに共通で使いまわしたい項目があるときは、カスタムフィールドがあると便利です。
次回のこのシリーズでは、『カスタムフィールドBPMの値で絞り込み検索する』というのもやってみたいと思います(カテゴリ・タグ・カスタムフィールドを使って記事を取得するのはお仕事でやったので、たぶん大丈夫でしょう)。

WordPressサイト制作&リニューアル・機能開発サービス | アトリエSS


【カテゴリ】 - webサイト制作関連
【タグ】 - , ,

  関連記事

【おすすめWordPressテーマ】Maxwell~シンプル・洗練されたブログメディア向きテーマ・スライダーやレイアウト変更も簡単
【WordPress2019公式テーマ】Twenty Nineteenってどう?→文字デカすぎ&PCも1カラムは難点・ブロックエディタとの親和性はok
WordPressのアーカイブって、記事が増えると長くてたいへん!CSSで短くして使いやすくするには?
【ページ遷移がないページネーション】jquery・paginathing.js実装方法と、便利/微妙なポイント
【WordPress更新情報表示】php/wp組み込みファンクション(fetch_feed)で取得と、プラグインで表示どちらが良い?
【WordPressフィールド画像取得】array_push&foreachループ、代替テキストをクラス出力、表示/非表示を切り替える方法
【WP/contact form 7】$_POST変数の中身で判定して、『メール送信ありがとうページ』に遷移させる方法
cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)
【WPカスタムフィールド】音楽サイトにBPM(数値)のフィールド作成&管理画面記事一覧に表示
【WordPressテーマ改造】カスタマイザープレビューが表示されなくなった件の対応(ファンクション名変更・twenty seventeen)
【CSSエディット】『 』みたいな空白スペース・改行タグでレイアウト調整が良くない理由
WPカスタムフィールド~記事にthe_metaでフィールド出力&評価つける・get_post_metaとの違い