WordPress管理者リストテーブル：クイック編集機能を拡張する

これまで、WordPressの管理テーブルに関する一連の記事では、新しい列を追加する方法など、WordPress管理テーブルのレイアウトをカスタマイズするさまざまな方法を見てきました。 シリーズのこの最後の記事では、検討したいもう1つのカスタマイズについて見ていきます…管理テーブルにある「クイック編集」機能を拡張します。

始めましょう！

クイック編集フィールドの拡張

このチュートリアルの例では、「ソース」として記述されるURLを表示するカスタムフィールドを追加します。このフィールドには、記事に関連するいくつかの追加情報にリンクするURLが入力されます。 投稿管理画面のクイック編集領域で追加する方法と、このフィールドに加えられた更新を保存する方法を確認します。

ステップ1：カスタムフィールドを追加する

記事「WordPressカスタムフィールド入門」で「ソース」フィールドを作成する方法を実行しました。 簡潔にするために、ここではこれらの手順を繰り返しません。 もちろん、好きなカスタムフィールドを作成できます。

「ソース」カスタムフィールドまたはその他のカスタムフィールドを追加する方法に慣れていない場合は、これに関する記事をご覧ください。 適切なカスタムフィールドを追加したら、次のステップに進みます。

ステップ2：カスタム列を追加する

管理テーブルにカスタム列を追加する必要があります。 これを行う方法については、WordPress管理テーブルのカスタマイズ：はじめにの記事で詳しく説明しました。 見て、手順に従ってください。

最終的には、アクティブなテーマのfunctions.phpに次のようなコードが含まれるようになるはずです。

 add_filter('manage_posts_columns','add_custom_columns'); function add_custom_columns( $columns ) { $columns['source'] = 'Source'; return $columns; } add_action( 'manage_posts_custom_column','custom_columns_content', 10, 2 ); function custom_columns_content ( $column_id, $post_id ) { switch( $column_id ) { case 'source': echo get_post_field('source', $post_id); break; } }

これで、PostsAdminテーブルに新しい列が表示されます。

カスタムクイック編集ボックスを追加する

投稿リストの表に移動して、投稿の1つの下にある[クイック編集]リンクをクリックしてみましょう。

ここに表示されるのは、WordPressがクイック編集画面で提供するデフォルトの利用可能なすべてのオプションです。 現時点では、新しい「ソース」フィールドは表示されません。

WordPressが提供するquick_edit_custom_boxフックを使用してこれを追加します。 このアクションは、カスタム列を含む各列に対して1回実行することにより、「クイック編集」モードのすべてのデフォルトアクションを解析します。

これは次のように構成されています： do_action( 'quick_edit_custom_box', $column_name, $post_type, $taxonomy ) 。 パラメータは、編集する列の名前である$column_name 、投稿タイプのスラッグである$post_type 、および必要に応じて分類名の$taxonomyです。

functions.phpファイルに、次の行を追加します。

 add_action( 'quick_edit_custom_box', 'source_custom_edit_box', 10, 2 ); function source_custom_edit_box( $column_name, $post_type ) { global $post; switch ( $post_type ) { case 'post': if( $column_name === 'source' ): ?> <fieldset class="inline-edit-col-right"> <div class="inline-edit-col"> <label> <span class="title">Source</span> <span class="input-text-wrap"><input type="text" name="source" value="<?php echo $post->source; ?>"></span> </label> </div> </fieldset> <?php endif; break; default: break; } }

$post->source;をエコーすることにより、PHPコードの「source」フィールド値を取得することに注意してください。 。

ここで、ページを更新して[クイック編集]をもう一度クリックすると、正しい値の[ソース]フィールドが表示されます。

ステップ3：インライン編集を保存する

カスタムフィールドに入力されたデータを保存するには、投稿が更新されたときにトリガーされるsave_postアクションを使用します。

クイック編集を行うこの例では、 save_postの実行後に投稿のデータが$_POSTに保存されます。

これを実現するために必要なコードは次のとおりであり、 functions.phpファイルに挿入する必要があります。

 add_action( 'save_post', 'update_source_custom_edit_box' ); function update_source_custom_edit_box() { if( isset( $_POST ) && isset( $_POST['source'] ) ) { update_post_meta($_POST['post_ID'], 'source', $_POST['source']); } return; }

これは行われていません。フィールドの入力値を「https://random.url」などに変更して、右下の更新ボタンを押してみましょう。

ソースフィールドの値が期待どおりに更新されていることに注意してください。 ただし、[クイック編集]ボタンをもう一度クリックしてカスタムフィールド（この場合は[ソース]）をもう一度見ると、編集ボックスの値が変更されていないことがわかります。

値を変更するたびに、管理テーブルの列セルに変更が表示されますが、この入力は[クイック編集]フィールドに反映されません。

それで、なぜこれが起こっているのですか？

$post->source;をエコーすることにより、「source」フィールド値を取得することを忘れないでください。 。 クイック編集コンテンツは、ユーザーが「編集」ボタンを押すと入力されます。つまり、動的に作成され、管理後画面が読み込まれたときに事前入力されません。 PHPコードを介してメタデータを取得しても、メタデータを正しく表示することはできません。新しい値ではなく、管理画面に入ったときに入力された値が常に表示されるためです。

代わりに、JavaScriptを使用して値を収集する必要があります。 したがって、先に進む前に、前のPHPコードに移動し、この行を置き換えてエコーされた値を削除します…

 <span class="input-text-wrap"><input type="text" name="source" value="<?php echo $post->source; ?>"></span>

…これで：

 <span class="input-text-wrap"><input type="text" name="source" value=""></span>

ステップ4：JSを使用して入力値を取得する

まず、 functions.phpファイルに次の行を追加してJSスクリプトを含める必要があります。

 // RETRIEVE FIELDS with JS add_action( 'admin_enqueue_scripts', 'enqueue_admin_scripts_and_styles' ); function enqueue_admin_scripts_and_styles(){ wp_enqueue_script('UNIQUE-SCRIPT-NAME', '/PATH-TO-YOUR-JS-FILE', array('jquery','inline-edit-post' )); }

したがって、たとえば、 extend-quick-edit.jsファイルを作成し、それをアクティブなテーマフォルダーの下に置く場合、上記のコードで「UNIQUE-SCRIPT-NAME」を「extend-quick-edit-script」のようなものに置き換える必要があります。 'および'/PATH-TO-YOUR-JS-FILE'とget_template_directory_uri() . '/extend-quick-edit.js' get_template_directory_uri() . '/extend-quick-edit.js'

 // RETRIEVE FIELDS with JS add_action( 'admin_enqueue_scripts', 'enqueue_admin_scripts_and_styles' ); function enqueue_admin_scripts_and_styles(){ wp_enqueue_script('extend-quick-edit-script', get_template_directory_uri() . '/extend-quick-edit.js', array('jquery','inline-edit-post' )); }

array('jquery','inline-edit-post' )では、スクリプトがjQueryを使用しているため、jQueryを追加し、元のinline-edit-post関数が変更されることを定義しました。

extend-quick-edit.js 、コンテンツは次のようになります。

 jQuery(document).ready(function($){ var $inline_editor = inlineEditPost.edit; inlineEditPost.edit = function(id){ $inline_editor.apply( this, arguments); var post_id = 0; if( typeof(id) == 'object'){ post_id = parseInt(this.getId(id)); } if(post_id != 0){ $post_modified_col_value = $('#post-' + post_id).find('.source').text(); $('#edit-' + post_id + ' input[name=source]').val($post_modified_col_value); } } });

ここで行ったことを少し詳しく見ていきましょう。

最初に、 inlineEditPost.editオブジェクトを取得します。これは、さらに詳しく調べたい場合は、 /wp-admin/js/inline-edit-post.jsコアファイルに導入されています。 これで、 $inline_editor変数にオブジェクトのコピーができました。

その後、 $inline_editor.apply( this, arguments);に既存の機能を適用して、 inlineEditPost.edit機能を変更します。 直後に必要な機能を追加します。

したがって、JSコードの次の行で、最終的に行うことは、クイック編集領域の「ソース」入力フィールドの値を「ソース」列セルの値に置き換えることです。

これで、すべてが期待どおりに機能するはずです。 値を保存してクイック編集領域を再度開くと、ソース入力も変更する必要があります。

カスタムフィールドがそのカスタム列とともにすでに登録されている場合、ワークフローは次のようになります。

結論

管理者リストテーブルのクイック編集モジュールにカスタムフィールドを追加するのは簡単ではありません。 ただし、定期的に更新されるフィールドを追加する場合は、長期的には明らかに多くの時間を節約できます。 いつものように、WordPressで達成できることはかなり無限です。 すぐに使用できるので、大規模なカスタマイズが可能ですが、コーディングを追加することで、できないことはほとんどありません。