【WordPress】カスタム投稿・カスタムフィールドでオプション項目を作り、管理画面から操作する方法

      2116文字

今回は、WordPressで『カスタム投稿・カスタムフィールドでオプション項目を作り、管理画面から操作』というのをやってみます。ちょっとした新着項目の更新をするときに、(特に構造が複雑な場合とか)テーマ編集を毎回開いていると面倒です。さっそく、方法を確認してみましょう。

検討した理由~新着項目の更新のとき、毎回テーマ編集を開くのが面倒


たびたび出ている、管理人運営の著作権フリー曲サイトSSFです。このサイトでは、トップページで新コンテンツのyoutubeや一言コメントなどを記載しています。
しかし、表示しているのが固定ページ部分ではなく、テーマ組み込みのセクションパーツなので、更新がやや面倒でした。


更新するときは、こんな感じで、テーマ編集です。しかも階層が深い(子テーマ→親テーマ→セクションフォルダ→街灯のセクション)ので、移動がかなり面倒でした。管理画面のすぐアクセスできるところから、更新できたりするとラクなのですが・・・

カスタム投稿・カスタムフィールドでオプション項目作成~下準備

というわけなので、管理画面のすぐアクセスできる部分に、上記のyoutube情報を更新できるオプション項目を作ってみます。まずは下準備から。

register_post_typeで、オプション用のカスタム投稿タイプを設定


まずは、オプション用のカスタム投稿タイプを設定します(テーマfunctions.php)。後述のフィールドを設定するものですが、メインループに出ないようにしたいため、カスタム投稿にしました。なお、入力欄はプラグインのフィールドを使うため、supportsパラメータはタイトルがあればokです(通常はサムネなどの設定をする)。

また、『フィールド表示条件をAdministratorユーザーページに表示』としてもいいんですけど、管理人が実装したのを忘れてしまいそうだったので(笑)、管理画面メニューに独立した項目が出てくる、カスタム投稿にしました。

カスタムフィールド(プラグイン使用)


もともとsmart custom fieldはインストールされていましたが、ない場合はカスタムフィールドプラグインを使用します。デフォルトのフィールドに比べて、『真偽値やラジオボタン・テキストフィールド』などがあるので、使い勝手が良いと思います。


オプション用のフィールドは『youtube_id(動画のid入れる/テキスト),youtube_comment(一言コメントを入れる/テキストエリア),new_song(新曲アイコン出すか/真偽値)』の3つを設定しました。そして、『オプションという投稿タイプ(さっき作った)で表示するように条件設定』をします。

カスタム投稿・カスタムフィールドでオプション項目作成~実装

フィールド入力し、その投稿idを押さえておく


あとは、先ほど作ったフィールドに、表示させたい内容を入力していきます。特定投稿タイプ内の記事のため、投稿idが発生しますので、投稿idを押さえておきます。
これを押さえておくと、後から『get_post_meta()』のファンクションで、フィールド内容取得が簡単にできるからです

テーマファイルでフィールド取得&出力できるようにする


そして、テーマのトップページセクションファイルにフィールド取得&出力機能をつけます。基本的には『get_post_meta(’〇〇(投稿id)’ , ’◆◆(キー名)’, true);』の形で取っていきます。最後のパラメータがtrueなのは、文字列出力です( falseで配列が返る)。真偽値のフィールドはif判定して『はい:1』のとき出力するようにします。

また、この状態ではyoutube動画は埋め込みタイプなので、urlの形式が変わっているので注意します(embedが入る)。

表示例(フロント)


そんなわけで、フロントも確認します。『動画・コメント・新コンテンツアイコン』が出力できました。テーマの深い階層まで入らなくてよいので、今後は作業がラクになりそうです。

あとがき・まとめ

  • ちょっとした新着項目の更新で、テーマファイルの深い階層まで入るのは面倒
  • カスタムフィールド,カスタム投稿を組み合わせて、オプションページを作り、そこで設定できる
  • 特定の投稿にすろと、id指定してget_post_metaで簡単に取れる

まとめると、こんなところでしょうか。このアイデアは、いくつかのお仕事でも利用しています(テーマをお客さんが直接操作して、不具合発生はなるべく避けたい)。ちょっとした項目であれば、テーマカスタマイザーより簡単に実装できるかと思います。

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


【カテゴリ】 - wpサイト制作事例
【タグ】 - , ,

  関連記事

【WordPress】複数、任意のフィールド取得、記事出力する方法(foreach回し/get_post_custom/記事内出力)
WPカスタムフィールド~記事にthe_metaでフィールド出力&評価つける・get_post_metaとの違い
サイト制作事例~バンド・音楽情報サイト・ブログをオウンドメディアサイトに(ミュージックサロンp+luckさま)
【静的HTML→WordPressリニューアル】同じデザインでWPにするときの注意ポイント
WordPressのカスタムフィールド値で記事を絞り込み・検索するサイトの作り方・一部始終を徹底解説
WPログアウト機能『wp-login.php?action=logout』と『wp_logout_url』の違い~後者はwpnonceで一発ログアウト
WordPressのログイン・ログアウト・権限システムを理解・カスタマイズして、『会員がコンテンツ読めるサイト』を作ろう
【WordPressテーマ改造】カスタマイザープレビューが表示されなくなった件の対応(ファンクション名変更・twenty seventeen)
【WordPress】プラグイン無し、カンタンページネーション作成・パラメータ指定例も紹介(paginate_links)
アンテナサイト風?WordPress『fetch_feed』&配列要素指定で、複数サイトRSS取得とパラメーターでサイトを切り替える方法
【WordPress】人気記事表示のしかた~PVカウント・フィールド格納&ソート(ログイン者カウントなし)
別ディレクトリでの記事の管理・表示を、1つのWordPressを使いまわして対応する方法(プラグイン無しカスタム投稿・wp-blog-header.php)