Let's create! WordPressサイト制作とメンテ/エラー対応から、PHP/CSS/javascriptプログラミング、動画・音・イラスト等制作まで扱うコラム

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

更新: 2024/02/12 2417文字

【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の値で絞り込み検索する』というのもやってみたいと思います(カテゴリ・タグ・カスタムフィールドを使って記事を取得するのはお仕事でやったので、たぶん大丈夫でしょう)。


【カテゴリ】- 雑談/ニュース/ブログ
【タグ】-

関連記事