作業を効率化！WordPressで独自のクイック編集機能を追加する実装方法(サンプルコード付き)
みなさんこんにちは！エンジニアの高澤です！
今回は作業を効率化！WordPressで独自のクイック編集機能を追加する実装方法を徹底解説していきたいと思います。
クイック編集とは、投稿や固定ページを編集画面を開かずにすばやく編集できる時短につながる便利な機能のことであり、WordPress標準で備わっている機能のことを言います。
このクイック編集では、通常ページタイトルやURL、カテゴリーなど決まった項目を編集できるようになっておりますが、当記事ではこのクイック編集に独自のカスタムフィールドの設定項目を追加することができる内容を解説しております。
内容的に、ブログやコーポレートサイトなどWordPressでサイト運営している場合に作業コストの削減など、様々なメリットをもたらしてくれる内容となっておりますので、よろしければぜひご活用ください。
目次
クイック編集とは
クイック編集とは、投稿や固定ページを編集画面を開かずにすばやく編集できる時短につながる便利な機能のことを言います。
使い方は簡単で、投稿・固定ページ一覧の「クイック編集」をクリックし、必要な項目を変更して「更新」ボタンをクリックするだけです。
下図のように「クイック編集」をクリックしていただくと…
下図のようにクイック編集の設定入力領域が開かれます。
開いたら、あとはご自身で編集したい項目の入力や設定を行い、最後に「更新」ボタンをクリックして設定を保存します。
このように、クイック編集は投稿や固定ページの一覧管理画面で、各ページごとにいちいち編集画面を開かなくてもタイトルやスラッグ（URL）、カテゴリー、タグ、公開状態、投稿者などをサクッと変更することができます。
編集画面を開かずに簡単な修正ができるため、作業の効率化と時短につながり記事の編集作業コストを抑えることができます。例えば、記事のタイトルを少し変更したいときや、カテゴリーを追加したいときに便利です。
クイック編集を独自に実装できるメリット
WordPressのクイック編集を独自に実装するメリットは、なんと言ってもページごとのデータの設定の手間がなくなり、それゆえの時短による作業コストを大幅に下げられることかと思います。
通常、投稿のカスタムフィールドを編集するには「投稿の編集」画面を開く必要があります。
ですが、クイック編集をカスタマイズすれば、投稿一覧画面から直接カスタムフィールドを編集できます。
これにより、複数の投稿をサクッと素早く更新できるため、作業の手間が減ります。さらに、カスタムチェックボックスやラジオボタンなど独自の入力項目を追加することで、用途に応じた柔軟なデータ管理が可能になります。
また、Ajaxを活用することでページ遷移を伴わずにデータを保存できるため、管理画面の動作もスムーズになります。このように、クイック編集の独自実装は、運用の効率化と利便性の向上につながる大きなメリットがあります。
これから当記事で解説する実装方法はカスタムフィールドを追加して実装しますが、すでにページにカスタムフィールドが実装・設定済みの場合でも、そのデータに合わせて調整していただければ当記事で解説する実装方法によってクイック編集に項目として追加できます。
当記事での実装ができると、ブログやサイト運営のコスト削減に大いに向上できる可能性があるかと思いますので、ぜひお仕事などでご活用いただければと思います。
クイック編集の独自の実装方法
それでは、クイック編集の独自の実装方法について解説いたします。
まずは今回実装するイメージを事前におさらいしておきます。
今回実装するのは、下図のようにクイック編集の設定領域に独自にカスタムフィールドとして「カスタムテキスト」「カスタムチェックボックス」「カスタムラジオ」という名称で、テキスト・チェックボックス・ラジオボタンの3つを追加したいと思います。
いずれもカスタムフィールドで追加しますが、以下のように一覧管理画面で1カラム追加して設定したデータを見えるようにもしていきたいと思います。
下図のようにいずれも入力・設定して「更新」ボタンをクリックしていただくことで、クイック編集から簡単にサクッと記事ページのデータを更新することができます。
今回実装する内容はこんな感じです。
実際のお仕事など実践で応用が効かせられるようにあえて「テキスト」「チェックボックス」「ラジオボタン」を網羅しておりますので、ぜひ実装してみて作り方を理解していただければと思います。
まず全体のコードとしては以下になります。
以下のコードをfunctions.phpにコピー＆ペーストしていただくと、すぐに実装することができます。
<?php
/* ------------------------------------------------------------------------------------------------------------
投稿一覧管理画面のクイック編集のカスタマイズ（サンプル）
------------------------------------------------------------------------------------------------------------ */
function my_posts_columns( $defaults ) {
$defaults['custom_text'] = 'カスタムテキスト';
$defaults['custom_checkbox'] = 'カスタムチェックボックス';
$defaults['custom_radio'] = 'カスタムラジオ';
return $defaults;
}
add_filter( 'manage_post_posts_columns', 'my_posts_columns' );
function my_posts_custom_column( $column, $post_id ) {
switch ( $column ) {
case 'custom_text':
$post_meta = get_post_meta( $post_id, 'custom_text', true );
echo esc_html( $post_meta );
break;
case 'custom_checkbox':
$post_meta = get_post_meta( $post_id, 'custom_checkbox', true );
$checked = $post_meta ? 'checked' : '';
echo "<input type='checkbox' disabled {$checked} />";
break;
case 'custom_radio':
$post_meta = get_post_meta( $post_id, 'custom_radio', true );
echo esc_html( $post_meta ? $post_meta : '未設定' );
break;
}
}
add_action( 'manage_post_posts_custom_column', 'my_posts_custom_column', 10, 2 );
function display_my_custom_quickedit( $column_name, $post_type ) {
static $print_nonce = TRUE;
if ( $print_nonce ) {
$print_nonce = FALSE;
wp_nonce_field( 'quick_edit_action', $post_type . '_edit_nonce' ); // CSRF対策
}
$post_id = get_the_ID();
?>
<fieldset class="inline-edit-col-right inline-custom-meta">
<div class="inline-edit-col column-<?php echo esc_attr( $column_name ); ?>">
<label class="inline-edit-group">
<?php
switch ( $column_name ) {
case 'custom_text':
$custom_text = get_post_meta( $post_id, 'custom_text', true );
?><span class="title">カスタムテキスト</span>
<input name="custom_text" value="<?php echo esc_attr( $custom_text ); ?>" /><?php
break;
case 'custom_checkbox':
$custom_checkbox = get_post_meta( $post_id, 'custom_checkbox', true );
$checked = $custom_checkbox ? 'checked' : '';
?><span class="title">カスタムチェックボックス</span>
<input name="custom_checkbox" type="checkbox" <?php echo esc_attr( $checked ); ?> /><?php
break;
case 'custom_radio':
$custom_radio = get_post_meta( $post_id, 'custom_radio', true );
?>
<div class="title">カスタムラジオ</div>
<label><input type="radio" name="custom_radio" value="option1" <?php checked( $custom_radio, 'option1' ); ?> /> オプション1</label>
<label><input type="radio" name="custom_radio" value="option2" <?php checked( $custom_radio, 'option2' ); ?> /> オプション2</label>
<?php
break;
}
?>
</label>
</div>
</fieldset>
<?php
}
add_action( 'quick_edit_custom_box', 'display_my_custom_quickedit', 10, 2 );
function my_admin_edit_foot() {
$current_screen = get_current_screen();
if ( $current_screen->post_type === 'post' && $current_screen->base === 'edit' ) :
?>
<script>
jQuery(document).ready(function($) {
var $wp_inline_edit = inlineEditPost.edit;
inlineEditPost.edit = function(id) {
$wp_inline_edit.apply(this, arguments);
var post_id = 0;
if (typeof(id) == 'object') {
post_id = parseInt(this.getId(id));
}
if (post_id > 0) {
var $edit_row = $('#edit-' + post_id);
var $post_row = $('#post-' + post_id);
var custom_text = $('.column-custom_text', $post_row).text().trim();
$(':input[name="custom_text"]', $edit_row).val(custom_text);
var custom_checkbox = !!$('.column-custom_checkbox > input', $post_row).prop('checked');
$(':input[name="custom_checkbox"]', $edit_row).prop('checked', custom_checkbox);
var custom_radio = $('.column-custom_radio', $post_row).text().trim();
$(':input[name="custom_radio"][value="' + custom_radio + '"]', $edit_row).prop('checked', true);
}
};
$(document).on('click', '.save', function(e) {
e.preventDefault();
var postId = $(this).closest('tr').attr('id').replace('post-', '');
var data = {
action: 'save_quick_edit_custom_fields',
post_id: postId,
custom_text: $(this).closest('tr').find(':input[name="custom_text"]').val(),
custom_checkbox: $(this).closest('tr').find(':input[name="custom_checkbox"]').prop('checked') ? 'on' : 'off',
custom_radio: $(this).closest('tr').find(':input[name="custom_radio"]:checked').val()
};
$.post(ajaxurl, data, function(response) {
console.log(response);
inlineEditPost.revert();
$('#post-' + postId + ' .column-custom_text').text(data.custom_text);
$('#post-' + postId + ' .column-custom_checkbox input').prop('checked', data.custom_checkbox === 'on');
$('#post-' + postId + ' .column-custom_radio').text(data.custom_radio);
});
});
});
</script>
<?php
endif;
}
add_action( 'admin_footer', 'my_admin_edit_foot' );
function save_custom_meta( $post_id ) {
$slug = 'post';
if ( $slug !== get_post_type( $post_id ) ) {
return;
}
if ( !current_user_can( 'edit_post', $post_id ) ) {
return;
}
$_POST += array("{$slug}_edit_nonce" => '');
if ( !wp_verify_nonce( $_POST["{$slug}_edit_nonce"], 'quick_edit_action' ) ) {
return;
}
if ( isset( $_REQUEST['custom_text'] ) ) {
update_post_meta( $post_id, 'custom_text', sanitize_text_field( $_REQUEST['custom_text'] ) );
}
$custom_checkbox = isset( $_REQUEST['custom_checkbox'] ) ? true : false;
update_post_meta( $post_id, 'custom_checkbox', $custom_checkbox );
if ( isset( $_REQUEST['custom_radio'] ) ) {
update_post_meta( $post_id, 'custom_radio', sanitize_text_field( $_REQUEST['custom_radio'] ) );
}
}
add_action( 'save_post', 'save_custom_meta' );ペーストが完了したら、WordPress管理画面「投稿」の「投稿一覧」をご確認ください。
そして、各投稿データの「クイック編集」をクリックして設定編集領域を開くと「カスタムテキスト」「カスタムチェックボックス」「カスタムラジオ」の3つが表示されているかと思います。
これで実装は完了です。お疲れ様でした！
ちなみに上記サンプルコードは、以下の手順で実装されております。
- 投稿一覧に独自のカラムの追加
- 投稿一覧に独自のカラムにデータを表示
- クイック編集フォームの追加
- クイック編集の値をフォームにセット
- データを保存
それぞれ解説いたします。
投稿一覧に独自のカラムの追加
投稿一覧に独自のカラムの追加する実装をします。
以下コードは、WordPressの管理画面にある「投稿一覧」にカスタムカラムを追加するためのものです。
add_filter( ‘manage_post_posts_columns’, ‘my_posts_columns’ );というフィルターフックを使い、my_posts_columns()関数を適用しています。
<?php
function my_posts_columns( $defaults ) {
$defaults['custom_text'] = 'カスタムテキスト';
$defaults['custom_checkbox'] = 'カスタムチェックボックス';
$defaults['custom_radio'] = 'カスタムラジオ';
return $defaults;
}
add_filter( 'manage_post_posts_columns', 'my_posts_columns' );my_posts_columns()関数は $defaultsという配列（もともとあるカラムの一覧）を受け取り、そこに custom_text（カスタムテキスト）、custom_checkbox（カスタムチェックボックス）、custom_radio（カスタムラジオ）という新しいカラムを追加して返します。
この処理により、下図のように投稿一覧画面にこれらのカラムが表示され、カスタムフィールドのデータを管理しやすくなります。
投稿一覧に独自のカラムにデータを表示
投稿一覧に独自のカラムにデータを表示する実装をします。
以下のコードは、WordPressの投稿一覧画面にカスタムフィールドの値を表示するためのものです。
add_action( ‘manage_post_posts_custom_column’, ‘my_posts_custom_column’, 10, 2 );というフックを使用し、独自のカラムの表示処理を追加しています。
<?php
function my_posts_custom_column( $column, $post_id ) {
switch ( $column ) {
case 'custom_text':
$post_meta = get_post_meta( $post_id, 'custom_text', true );
echo esc_html( $post_meta );
break;
case 'custom_checkbox':
$post_meta = get_post_meta( $post_id, 'custom_checkbox', true );
$checked = $post_meta ? 'checked' : '';
echo "<input type='checkbox' disabled {$checked} />";
break;
case 'custom_radio':
$post_meta = get_post_meta( $post_id, 'custom_radio', true );
echo esc_html( $post_meta ? $post_meta : '未設定' );
break;
}
}
add_action( 'manage_post_posts_custom_column', 'my_posts_custom_column', 10, 2 );独自に定義したmy_posts_custom_column()関数は、カラム名と投稿IDを受け取り、switch 文を使って処理を分岐させます。
カラムが「custom_text」の場合は、投稿のカスタムフィールド「custom_text」の値を取得し、HTMLとして安全に出力します。
「custom_checkbox」の場合は、チェックされているかどうかを判定し、チェック済みならばチェックボックスを表示します。
「custom_radio」の場合は、投稿のカスタムフィールド「custom_radio」の値を取得し、設定がなければ「未設定」と表示します。
このようにすることで、下図のように投稿一覧画面にカスタムデータを分かりやすく表示できるようになります。
クイック編集フォームの追加
クイック編集フォームの追加の実装をします。
以下のコードは、WordPressの「クイック編集」機能にカスタムフィールドを追加するためのものです。
add_action( ‘quick_edit_custom_box’, ‘display_my_custom_quickedit’, 10, 2 );というフックを使用し、display_my_custom_quickedit()関数を実行します。
<?php
function display_my_custom_quickedit( $column_name, $post_type ) {
static $print_nonce = TRUE;
if ( $print_nonce ) {
$print_nonce = FALSE;
wp_nonce_field( 'quick_edit_action', $post_type . '_edit_nonce' ); // CSRF対策
}
$post_id = get_the_ID();
?>
<fieldset class="inline-edit-col-right inline-custom-meta">
<div class="inline-edit-col column-<?php echo esc_attr( $column_name ); ?>">
<label class="inline-edit-group">
<?php
switch ( $column_name ) {
case 'custom_text':
$custom_text = get_post_meta( $post_id, 'custom_text', true );
?><span class="title">カスタムテキスト</span>
<input name="custom_text" value="<?php echo esc_attr( $custom_text ); ?>" /><?php
break;
case 'custom_checkbox':
$custom_checkbox = get_post_meta( $post_id, 'custom_checkbox', true );
$checked = $custom_checkbox ? 'checked' : '';
?><span class="title">カスタムチェックボックス</span>
<input name="custom_checkbox" type="checkbox" <?php echo esc_attr( $checked ); ?> /><?php
break;
case 'custom_radio':
$custom_radio = get_post_meta( $post_id, 'custom_radio', true );
?>
<div class="title">カスタムラジオ</div>
<label><input type="radio" name="custom_radio" value="option1" <?php checked( $custom_radio, 'option1' ); ?> /> オプション1</label>
<label><input type="radio" name="custom_radio" value="option2" <?php checked( $custom_radio, 'option2' ); ?> /> オプション2</label>
<?php
break;
}
?>
</label>
</div>
</fieldset>
<?php
}
add_action( 'quick_edit_custom_box', 'display_my_custom_quickedit', 10, 2 );独自に定義したdisplay_my_custom_quickedit()関数では、クイック編集のカラム名と投稿タイプを受け取り、該当するカラムごとに入力フォームを表示します。
最初にwp_nonce_fieldを使い、セキュリティ対策としてCSRF防止用のトークンを埋め込みます。その後、投稿IDを取得し、カラムが「custom_text」の場合はテキスト入力欄、「custom_checkbox」の場合はチェックボックス、「custom_radio」の場合はラジオボタンを表示します。
これにより、下図のように管理画面の投稿一覧からクイック編集で直接カスタムフィールドを編集できるようになります。
クイック編集の値をフォームにセット
クイック編集の値をフォームにセットする実装をします。
以下のコードは、WordPressの「クイック編集」でカスタムフィールドのデータを編集・保存できるようにするためのものです。
add_action( ‘admin_footer’, ‘my_admin_edit_foot’ );というフックを使用し、my_admin_edit_foot()関数を実行します。
<?php
function my_admin_edit_foot() {
$current_screen = get_current_screen();
if ( $current_screen->post_type === 'post' && $current_screen->base === 'edit' ) :
?>
<script>
jQuery(document).ready(function($) {
var $wp_inline_edit = inlineEditPost.edit;
inlineEditPost.edit = function(id) {
$wp_inline_edit.apply(this, arguments);
var post_id = 0;
if (typeof(id) == 'object') {
post_id = parseInt(this.getId(id));
}
if (post_id > 0) {
var $edit_row = $('#edit-' + post_id);
var $post_row = $('#post-' + post_id);
var custom_text = $('.column-custom_text', $post_row).text().trim();
$(':input[name="custom_text"]', $edit_row).val(custom_text);
var custom_checkbox = !!$('.column-custom_checkbox > input', $post_row).prop('checked');
$(':input[name="custom_checkbox"]', $edit_row).prop('checked', custom_checkbox);
var custom_radio = $('.column-custom_radio', $post_row).text().trim();
$(':input[name="custom_radio"][value="' + custom_radio + '"]', $edit_row).prop('checked', true);
}
};
$(document).on('click', '.save', function(e) {
e.preventDefault();
var postId = $(this).closest('tr').attr('id').replace('post-', '');
var data = {
action: 'save_quick_edit_custom_fields',
post_id: postId,
custom_text: $(this).closest('tr').find(':input[name="custom_text"]').val(),
custom_checkbox: $(this).closest('tr').find(':input[name="custom_checkbox"]').prop('checked') ? 'on' : 'off',
custom_radio: $(this).closest('tr').find(':input[name="custom_radio"]:checked').val()
};
$.post(ajaxurl, data, function(response) {
console.log(response);
inlineEditPost.revert();
$('#post-' + postId + ' .column-custom_text').text(data.custom_text);
$('#post-' + postId + ' .column-custom_checkbox input').prop('checked', data.custom_checkbox === 'on');
$('#post-' + postId + ' .column-custom_radio').text(data.custom_radio);
});
});
});
</script>
<?php
endif;
}
add_action( 'admin_footer', 'my_admin_edit_foot' );独自に定義したmy_admin_edit_foot()関数は、投稿一覧画面（post_type === ‘post’ かつ base === ‘edit’）のときにJavaScriptを追加します。
スクリプト内では、inlineEditPost.editを拡張し、クイック編集を開いた際に投稿のカスタムフィールドデータをフォームにセットします。また、「保存」ボタンがクリックされた際には、Ajaxを使ってデータをサーバーへ送信し、一覧画面のカラムの表示内容を更新します。
これにより、投稿一覧から直接カスタムフィールドを編集できるようになります。
データを保存
データを保存する処理を実装します。
以下のコードは、WordPressの「クイック編集」などで編集されたカスタムフィールドのデータを保存するためのものです。
add_action( ‘save_post’, ‘save_custom_meta’ );というフックを使用し、投稿が保存されるタイミングで save_custom_meta()関数が実行されます。
<?php
function save_custom_meta( $post_id ) {
$slug = 'post';
if ( $slug !== get_post_type( $post_id ) ) {
return;
}
if ( !current_user_can( 'edit_post', $post_id ) ) {
return;
}
$_POST += array("{$slug}_edit_nonce" => '');
if ( !wp_verify_nonce( $_POST["{$slug}_edit_nonce"], 'quick_edit_action' ) ) {
return;
}
if ( isset( $_REQUEST['custom_text'] ) ) {
update_post_meta( $post_id, 'custom_text', sanitize_text_field( $_REQUEST['custom_text'] ) );
}
$custom_checkbox = isset( $_REQUEST['custom_checkbox'] ) ? true : false;
update_post_meta( $post_id, 'custom_checkbox', $custom_checkbox );
if ( isset( $_REQUEST['custom_radio'] ) ) {
update_post_meta( $post_id, 'custom_radio', sanitize_text_field( $_REQUEST['custom_radio'] ) );
}
}
add_action( 'save_post', 'save_custom_meta' );最初に、対象の投稿タイプが「post」であるかを確認し、ユーザーが編集権限を持っているかをcurrent_user_canでチェックします。さらにwp_verify_nonceを用いて、CSRF（不正なリクエスト）対策を行います。
その後、$_REQUESTから送信されたデータを取得し、sanitize_text_field()関数を使って適切にサニタイズした上でupdate_post_meta()関数によってカスタムフィールドの値を保存します。
この処理により、下図のように投稿のカスタムフィールドが安全に更新されるようになります。
サンプルコードの内容を手順に沿っての解説は以上になります。
ここまでの内容は「投稿」のページ用の内容となってはおりますが、同じような形で固定ページやコメント機能のクイック編集にも実装することができるので、よろしければご確認いただければと思います。
まとめ
今回は、作業を効率化するためにWordPressで独自のクイック編集機能を追加する方法を徹底解説しました。
クイック編集は、投稿や固定ページを編集画面を開かずに素早く編集できる便利な機能で、標準で提供されている項目だけでなく、独自のカスタムフィールドを追加することも可能です。
ブログやコーポレートサイトなど、WordPressでサイト運営をしている方々にとって、この機能を活用することで作業コストの削減や業務効率化が実現できます。
ぜひ、この記事で紹介した方法を参考にして、より効率的で快適なサイト運営を実現してください。
UMENOKI編集部 高澤 翔汰
お気軽に皆さんのご要望をお聞かせください！
どんなに些細なことでも構いません！よろしければ記事や当サイトへの「こんな記事があったら仕事とかで役に立つな〜」や「こうだったらもっと役に立つのに！」といったようなご要望等をお気軽にお聞かせください！今後のサービス改善にお役立てさせていただきます！
例1）Reactの技術記事を書いてほしい！
例2）WordPressの使い方とかを初心者向けに解説してほしい！...など