wordpressでのスマホ対応webサイト制作・wpプラグイン・PHPプログラム・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

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

   

こんにちは、管理人@SS_mshpです。

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

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

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

  関連記事

MySQLデータベースからWordPressテーマ変更・プラグイン停止を行う方法【エラー・管理画面に入れないときに】

今回のお題は、WordPressエラー復旧などに使えるかもしれな ...

【お洒落1ページ型無料WPテーマ】onepressを使ってみてレビュー・特徴やカスタマイズ時のポイント

今回は、WPテーマを調査していて見つけた、良い感じの1ページ型テ ...

別ディレクトリでの記事の管理・表示を、1つのWordPressを使いまわして対応する方法(プラグイン無しカスタム投稿・wp-blog-header.php)

今回は、別ディレクトリのコーポレート・お仕事サイトの記事管理も、 ...

【ユーザーデータ取得】WordPress定義済み関数の『get_userdata()』『wp_get_current_user()』ってどのように違うの?

今回は、WPシステムのwebサイト制作などでちょくちょくお目にか ...

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

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

【METAタグで新サイトに転送】meta http-equiv="refresh"で転送・WPサイトでの活用・301リダイレクトとの使い分けとは?

今回は、管理人がネットサーフィンしていて見つけた、サイトの転送& ...

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

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