webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

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

      2021/02/23

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


【カテゴリ】 - webメディア制作運用
【タグ】 - , ,

  関連記事

WordPressで車販売サイトが作れる『Car Dealer, Classifieds & Listing』・英語なのでネックも

今回は、もはや何でもある感じのWordPressプラグインで、『 ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

WPカスタムフィールドを使って、soundcloudみたいに記事一覧でオーディオ再生できるサイトを作る方法

今回は、管理人が持っている著作権フリー曲サイトに、『カスタムフィ ...

【CSSエディット】『 』みたいな空白スペース・改行タグでレイアウト調整が良くない理由

今回は、管理人がこのサイト(よんどけコラム)のCSSを調整してい ...

【WordPressテーマ改造】カスタマイザープレビューが表示されなくなった件の対応(ファンクション名変更・twenty seventeen)

WordPress・twenty seventeenテーマ改造で、ファンクション名変更と整理・ファイル削減などを行っていたら出たエラー(カスタマイザープレビューが表示されなくなった)に対処。

【WordPress2019公式テーマ】Twenty Nineteenってどう?→文字デカすぎ&PCも1カラムは難点・ブロックエディタとの親和性はok

今回は、WordPressバージョン5以上に更新したら勝手につい ...

【おすすめWordPressテーマ】Maxwell~シンプル・洗練されたブログメディア向きテーマ・スライダーやレイアウト変更も簡単

今回は、管理人も別サイトで使ってみた、無料WordPressテー ...