[WordPress]カスタムフィールドをクイック編集で保存する方法について

カスタムフィールドをクイック編集で保存する方法について。後々実装しようとしたときに調べ直しそうな流れなのでカスタマイズ内容をメモしておきます。

大まかに5つのステップで実装できます。

カスタムフィールドをクイック編集で保存する

quickedit_custom_column00

分かりやすいように、作業に入る前に予め記事へカスタムフィールドを追加しておきましょう。

投稿の編集ページ右上にある「表示オプション」をクリックし、「カスタムフィールド」にチェックを入れてカスタムフィールドの編集ボックスを表示します。

今回私は名前を「weather」にして天気情報を保存するカスタムフィールドを作成しました。

(以降のソースコードはjQuery以外、functions.phpに記述します。)

 

2014年9月30日追記:

カスタムフィールドをチェックボックスで保存するソースコードも追加してみました。

 

1.投稿一覧に項目を追加する

まず始めに、投稿一覧に「今日の天気」を表示するための項目を追加します。項目の追加にはmanage_posts_columnsフックを使用します。

今回は項目を1つだけ追加していますが、もし複数追加したい場合は上のように$defaultsのキーに追加したいID名を、値に表示するラベルをさらに記述しましょう。

2.投稿一覧に追加した項目に値を表示する

次に、追加した項目に記事毎の天気情報(カスタムフィールド)を表示してみましょう。これにはmanage_posts_custom_columnフックを使用します。

第一引数には追加した項目のIDが渡されるので、これで処理を分岐させます。第二引数で渡される記事のIDを使ってget_post_meta()でカスタムフィールドの値を表示します。

3.クイック編集にカスタムフィールド用の入力フォームを表示する

それではクイック編集でカスタムフィールドに値を設定できるよう、入力フォームを表示しましょう。これにはquick_edit_custom_boxフックを使います。

項目に値を表示したときと同じように、第一引数で渡ってくる項目のID名で分岐させます。これでクイック編集にカスタムフィールド用の項目が表示できます。

quickedit_custom_column01

しかし値の表示ができていません。ここで使ったフックには記事のIDが渡ってこないのでget_post_meta()を使った値の表示は難しいです。

なので、これにはjQueryを使います

4.jQueryで動的にクイック編集の値を書き換える

まず、値を操作するJavascriptファイルを読み込むコードを書きます。admin_footer-(hookname)フックを使って管理ページのフッターで関数を実行させ、その中でファイルを読み込むタグをechoしましょう。”hookname”に関数を実行したいページの名前(ファイル名)を指定します。

投稿一覧の名前は”edit.php“なので、「admin_footer-edit.php」というフック名にします。

この例ではテーマフォルダに「admin/js」というフォルダを作成し、その中の「admin_edit.js」ファイルを読み込むパスになっています。同じようにテーマフォルダ内にフォルダとJavascriptファイルを作成して下さい。(「wp-content/themes/テーマ名/」の中に作成します)

スクリプトファイル(admin_edit.js)の中身は以下です。

任意のカスタムフィールド名を指定するときに修正が必要なのは15行目と17行目です。15行目には項目のID名を、17行目にはカスタムフィールドの名前を指定すると値が表示されるようになります。

5.カスタムフィールドの保存処理をする

これまでのソースコードでクイック編集に値の表示までできました。最後に値の保存処理をします

記事の保存処理時にはsave_postというフックが用意されているのでコレを使います。

17行目でカスタムフィールドの値を保存しています。じゃあこれより上のソースコードは何かというと、以下の判定をしています。

  • 4行目で投稿タイプの判定
  • 7行目でユーザーに編集権限があるかの判定
  • 12行目でノンス判定によるセキュリティ対策

これでクイック編集によるカスタムフィールドの操作ができるようになりました。

おまけ: 固定ページやカスタム投稿タイプはどうするの?

固定ページやカスタム投稿タイプで、同じようにクイック編集でカスタムフィールドを弄るには以下の様に対応します。

1と2のフック名を固定ページ、カスタム投稿タイプ用に変更する

1(投稿一覧に項目追加)と2(項目に値表示)で使っているフックには固定ページ用、投稿タイプ用のフックがあります。それぞれ以下のフックを使っていますが、

  • manage_posts_columns
  • manage_posts_custom_column

これらは固定ページで使うなら

  • manage_pages_columns
  • manage_pages_custom_column

とし、カスタム投稿タイプなら

  • manage_投稿タイプ名_posts_columns
  • manage_投稿タイプ名_posts_custom_column

として使います。例えば投稿タイプ名が”news”だとしたら、1のソースコードで使ったフック名は「manage_news_posts_columns」になります。

3のソースコードは1で使ったフック名の投稿タイプで自動的に実行される

3(クイック編集にフィールド表示)で使ったフックquick_edit_custom_box特に弄る必要はないようです。実際に動かして調べた所、1で使うフック名を固定ページ用、投稿タイプ用に変更すると自動的にクイック編集にフィールドが表示されました

4と5はソースコード内の投稿タイプ判定でOK

4(スクリプトの読み込み)と5(保存処理)それぞれには予め投稿タイプを判定して処理しています。

4なら3行目で、5なら2行目に投稿タイプを各々指定したらOKです。


参考ページ:

Plugin API/Filter Reference/manage posts columns « WordPress Codex

Plugin API/Action Reference/manage posts custom column « WordPress Codex

Plugin API/Action Reference/quick edit custom box « WordPress Codex

最終更新日:2014年9月30日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

  • ゲン

    こちらの記事一覧ページで編集する方法を探していたので非常に参考になりました!ありがとうございます!!

    ちなみに記事一覧ページで、上記記事のようにテキストフォームではなく、ラジオボタンやチェックボタンで切り替える方法をご教授頂けないでしょうか・・・。(在庫あり、なしの切り替えをクイック編集で簡単にしたく、ラジオボタンを設置しようと試行錯誤しています)

    記事の方法を参考に、クイック編集画面にラジオボタンを表示させるところまでは出来た(?)のですが、当方初心者なもので、入力した値が反映されず。。jqueryのところだと思うのですが、よろしければお手すきの際にご教授頂けましたら幸いです。初心者質問ですいません・・・。ご迷惑なようでしたらコメント削除してください!

  • sioichi

    コメントありがとうございます。

    ラジオボタンで保存したカスタムフィールドの値は「0」か「1」なのでしょうか?
    在庫あり、なしの判定であればチェックボックスでも行けるかなと思ったので、チェックボックス版のソースコードも追加してみました。

    こちらの場合、チェックボックスをチェックすると「1」が、外すと「0」がカスタムフィールドに保存されるようになります。

    • ゲン

      >sioichiさん

      まさに思い描いていた通りの動作をこんなにも早く頂きまして、、、感動です。。感謝致します。。

      ありがとうございます!ブログ拝見させていただきますので今後共よろしくお願いいたします◎

    • ゲン

      度々申し訳ございません。。

      こちらクイック編集画面(edit.php)での挙動は上手くいったのですが、
      今度は本家の投稿画面(post.php)でカスタムフィールドのチェックが出来なくなってしまいました・・・。

      1(売り切れ(チェックされた状態))→0(在庫あり(デフォルトのチェック外した状態))は出来るのですが、、0(在庫あり(チェック外した状態))→1(売り切れ(チェックされた状態))にしようと記事投稿画面でチェックボックスをチェックし、保存しても、反映されません。

      色々とテストしてみた結果(おそらくなのですが、、)
      add_action( ‘save_post’, ‘save_custom_meta’ );
      のアクションで本文投稿をした際に、クイック編集画面で入力したカスタムフィールドの値が上書きされてしまう?感じなのですが、こちら解決策など思い当たるものございますでしょうか?

      何かsioichi様の中で思い当たるところがあれば(コードなど自分で調べますので)ご教授頂けましたら幸いです。すいません・・・よろしくお願いいたします。

      • shioichi

        もしかすると、プラグイン or 独自のソースコードでメタボックスを追加して、投稿ページにチェックボックスを表示しているのでしょうか?(WordPressデフォルトだとカスタムフィールドをチェックボックスで操作する機能は無かったと思うので。デフォルトのカスタムフィールド編集では保存できることが確認できました)

        その場合、仰るとおりもしかすると”save_post”アクションに別の関数がフックされているのかもしれません。もしもう一つ、save_postアクションにフックしている関数が見つかれば、その関数の中で条件分岐をする必要があると思います。

        フックしている関数の中で$_POST[“action”]で条件分岐してみてはいかがでしょうか。

        if ( $_POST[“action”] == “inline-save” ) { //クイック編集時(edit.php) }

        if ( $_POST[“action”] == “editpost” ) { //投稿編集時(post.php) }

        色々と憶測ですが、参考になったら嬉しいです。

        • ゲン

          >shioichi様

          ご返信ありがとうございます。本当にありがたいです・・・。
          >プラグイン or 独自のソースコードでメタボックスを追加して、投稿ページにチェックボックスを表示しているのでしょうか?

          作用です!advanced custom fieldを使っております。説明不足で恐縮です。

          仰るとおり、別途save_postアクションで条件分岐を行ってみたところ、おかげ様でようやく望み通りの挙動を実現することが出来ました(無理矢理なのかもしれませんが)!!本当にありがとうございます・・・。

          今後共ブログのほう楽しみにしております。本当にありがとうございました!

          • shioichi

            いえいえ、問題が解決したようでなによりです^^

            WordPress以外のことも書いてしまいますが、よろしくお願いします~m(__)m

  • 本記事のお陰でスムーズに実装できました。誠に御礼申し上げますm(__)m

  • mori_ichi_

    はじめまして。

    こちらの記事を参考にさせて頂き、クイック編集で値が入力できるようになりました。
    ところが、再度クイック編集を押すと、前に入力した値が消去されてしまいます…。

    カスタム投稿で運用しているのですが、その影響などが考えられるのでしょうか。
    改善策など、何か分かりましたらご指導頂けますと幸いです。
    どうぞよろしくお願いいたします。

トラックバック

    Trackback: https://increment-log.com/quickedit-custom-field/trackback/