WordPressで作成したサイトで一覧などに任意で簡単なページの概要を表示させるために利用されることが多い「抜粋」という項目。
結構使う機能だと思うのですが、クイック編集画面に「抜粋」項目の編集機能が何でないんだろう？と感じたことないですか？
本ページでは、クイック編集を使って「抜粋」項目の内容を編集できるようにする方法の一例を紹介します。
クイック編集で「抜粋」項目を編集できるようにする一連のコード
コードの流れと仕組みの概要
当初は巷で多数紹介されているカスタムフィールドの値をクイック編集で変更できるようにする仕組みを流用すれば簡単だろうと考えて取り組み始めましたが、「抜粋」はタイトルや本文などと同様にWordPressコアに組み込まれた情報だからなのか、カスタムフィールドのそれではクイック編集画面で保存をクリックすると永遠に更新が終了しない無限ループが発生して処理が完了しないという不具合が発生しました。
恐らく「抜粋」をクイック編集で変更できるようにしたいというニーズは高いとは思うものの、その方法やコード例が検索しても訪ね当たらないのは恐らくこの不具合の回避ができなかったからかと勝手に想像しました。
この不具合の原因はクイック編集画面を保存する段階で、コアの要素を書き換えるというアクションにあると考え、試行錯誤した結果、一旦クイック編集でカスタムフィールドとして保存した「抜粋と同じデータ」を保存させ、その処理が終わったら、改めてそのカスタムフィールドの値をコアの「抜粋」項目へコピーするという流れで実現させることができました。
以下から順に「抜粋」項目をクイック編集で変更できるようにしていくためのコードを掲載していきますが、あくまでも私の環境の場合にうまくいった方法であり、もっとスマートに更新できるようにする方法があるかも知れませんので、参考程度に試してもらえたらと思います。
「抜粋」に入力された情報を管理画面の一覧へ表示させる
クイック編集で情報を表示するには、管理画面の一覧の列に情報が表示できるようになっている必要がありますので、まずは「抜粋」のデータを一時的に保存させるカスタムフィールドの情報を表示させます。
管理画面へ列を追加
/*** 一覧に「抜粋（作業用）」の列を追加 ***/
/* カラムを追加 */
function pwcn_add_temp_excerpt_column_to_post_list($columns) {
$new_columns = array();
foreach ($columns as $key => $value) {
$new_columns[$key] = $value;
if ($key === 'title') {//指定した列の次（右）に列を追加
$new_columns['temp_excerpt'] = esc_html__('抜粋', '');
}
}
return $new_columns;
}
add_filter('manage_posts_columns', 'pwcn_add_temp_excerpt_column_to_post_list');追加した列へデータを表示する
/* データの呼び出し */
function pwcn_display_combined_excerpt_value($column_name, $post_id) {
if ($column_name === 'temp_excerpt') {
$temp_excerpt = get_post_meta($post_id, 'temp_excerpt', true);
$post_excerpt = get_the_excerpt($post_id);
if(!empty($temp_excerpt)){
echo esc_html($temp_excerpt);
}else if(has_excerpt($post_id)) {
echo esc_html($post_excerpt);
}else{
echo '';
}
}
}
add_action('manage_posts_custom_column', 'pwcn_display_combined_excerpt_value', 10, 2);追加した列のスタイル調整（幅の調整と一覧からはみ出ないようにする措置）
/* 管理画面上のスタイル */
function pwcn_admin_excerpt_column_style_init(){
?>
<style>
body.edit-php #temp_excerpt{width: 20%;}
</style>
<?php
}
add_action('admin_head','pwcn_admin_excerpt_column_style_init');ここまで追加したら、投稿の一覧を開き、「抜粋」という列が追加されるはずですので確認ください。
WordPressでは、「抜粋」の入力がなかった場合に、テーマでの抜粋出力時や、投稿コンテンツの「抜粋」ブロックを挿入した際に、本文の先頭から55文字を切り出して出力する機能が標準で備わっていますが、この列には「temp_excerpt」という抜粋の仮データ（カスタムフィールド）の値、または実際の「抜粋」に入力された値のみ表示するようにしています。
これは、「抜粋」欄に入力されているかどうかを判別するためですので、「抜粋」の内容がなかった時に自動生成される文章を表示させたい場合は、「echo ”;」の部分を「echo $post_excerpt;」に書き換えてください。
自動生成される抜粋文を表示させる時は色分けするして判別しやすいよう工夫したほうがいいかも知れません
ここまでで列が追加されていない場合はこの先のコードをいくら追加しても機能しませんのでご注意ください
「抜粋」列の情報をクイック編集画面へ表示させる
前項で表示させた「抜粋」の情報をクイック編集画面へ「抜粋」という項目でフォームを表示させるようにしていきます。
/* クイック編集にフィールド表示 */
function pwcn_add_temp_excerpt_field_to_quickedit($column_name, $post_type) {
if ($column_name === 'temp_excerpt') {
?>
<fieldset class="inline-edit-col-right inline-custom-meta">
<div class="inline-edit-col column-custom-meta">
<label class="inline-edit-group">
<span class="title"><?php esc_html_e('抜粋', ''); ?></span>
<textarea name="temp_excerpt" cols="50" rows="1"></textarea>
</label>
</div>
</fieldset>
<?php
}
}
add_action('quick_edit_custom_box', 'pwcn_add_temp_excerpt_field_to_quickedit', 10, 2);/* 既に入力済のカスタムフィールド値を表示 */
function pwcn_post_excerpt_admin_edit_foot($post_id , $post_type='' ) {
global $post_type;
if ( is_null( $post_type ) ) {return;}//PHP8.0の空判定
$slug = get_post_type( $post_id ); //他の一覧ページで動作しないように投稿タイプの指定をする
//データの呼び出し用スクリプトを読み込む（環境に合わせて変更）
if ( $post_type == $slug ) {
echo '<script type="text/javascript" src="' .esc_html(get_theme_file_uri('/quick-edit.js', '"></script>';
}
}
add_action('admin_footer-edit.php', 'pwcn_post_excerpt_admin_edit_foot');上記の「データの呼び出し用スクリプトを読み込む（環境に合わせて変更）」の部分のコードで、以下のスクリプトを読み込んで、データのやり取りをします。
上記コード例はテーマディレクトリ直下に「quick-edit.js」というファイルを作ってスクリプトを追加する場合の階層ですので適宜調整いただき、「quick-edit.js」へ以下のスクリプトを追加します。
(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), 10);
}
if ($post_id > 0) {
var $edit_row = $('#edit-' + $post_id);
var $post_row = $('#post-' + $post_id);
// 「抜粋（作業用）」列から値を取得し、フォームにセット
var temp_excerpt = $('.column-temp_excerpt', $post_row).text().trim();
$(':input[name="temp_excerpt"]', $edit_row).val(temp_excerpt);
}
};
})(jQuery);ここまで追加したら以下の手順でテストを行ってください。
任意の投稿の編集画面で「抜粋」項目を入力して保存
実際に「抜粋」の入力が完了している投稿を1つ用意します。既にある場合は割愛して構いません。
クイック編集でデータが表示されるかを確認する
管理画面の投稿一覧を表示させ、「抜粋」の列に実際の「抜粋」で設定した文字列が表示されているかを確認してください。
次に前項で確認した抜粋の入力がある投稿のクイック編集画面を開き、入力済の情報が表示されるかを確認してください。確認が終わったら「キャンセル」をクリックして、一旦クイック編集画面を閉じてください。
データが表示されない場合はキャッシュのクリア（「Ctrl」+「F5」）を行ってみてください
キャッシュクリアしてもデータが表示されない場合は、スクリプトの読み込みに失敗している可能性が高いです、デベロッパーツールの「コンソール」を確認し、スクリプトの読み込みでエラーが発生していないかを確認し修正してください
クイック編集の「抜粋」へ加えた編集を反映させる
ここまで順調に進んでいれば、クイック編集画面の抜粋項目には「投稿に実際に設定した抜粋の内容」または「前回クイック編集で抜粋項目に入力した内容」のいずれか（同期しているので基本的には同じ文章）が表示されているはずです。
が、この段階では「抜粋」にすべきデータを格納したカスタムフィールドのデータを編集しているにすぎませんので、最後にこの窓に入力したデータをカスタムフィールドの値として上書きし、同時に本物の抜粋へコピーをする措置を行います。
「抜粋」カスタムフィールドの更新
/* 新たに入力した値へ更新 */
function pwcn_save_temp_excerpt_from_quickedit($post_id) {
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
return;
}
if (!current_user_can('edit_post', $post_id)) {
return;
}
if (isset($_POST['temp_excerpt'])) {
update_post_meta($post_id, 'temp_excerpt', sanitize_text_field($_POST['temp_excerpt']));
}
}
add_action('save_post', 'pwcn_save_temp_excerpt_from_quickedit');一時データを抜粋へコピー
/* 保存したデータを同期させる */
function pwcn_sync_excerpt_on_save($post_id) {
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
return;
}
if ( wp_is_post_revision( $post_id ) ) {
return;
}
if ( ! current_user_can( 'edit_post', $post_id ) ) {
return;
}
// 無限ループを防ぐためのフラグ
if ( did_action('save_post') > 1 ) {
return;
}
// クイック編集のAjaxリクエストか確認
if ( defined('DOING_AJAX') && DOING_AJAX && isset($_POST['action']) && $_POST['action'] === 'inline-save' ) {
// temp_excerptが送信された場合
if ( isset($_POST['temp_excerpt']) ) {
$temp_excerpt = sanitize_text_field($_POST['temp_excerpt']);
// save_postフックを一時的に削除し、無限ループを回避
remove_action('save_post', 'pwcn_sync_excerpt_on_save');
// 空文字を明示的に更新
wp_update_post(array(
'ID' => $post_id,
'post_excerpt' => $temp_excerpt,
));
// save_postフックを再度追加
add_action('save_post', 'pwcn_sync_excerpt_on_save');
}
}
}
add_action('save_post', 'pwcn_sync_excerpt_on_save');上記2つのコードを追加したら、再度いずれかの投稿のクイック編集画面を開き（「抜粋」欄に値のない投稿でも、値のある投稿でも構いません）、「抜粋」窓に表示されている内容を変更して、クイック編集の更新ボタンをクリックしてみてください。
これまでのチェックポイントごとに確実に動作確認をしていれば、問題なくクイック編集が更新されて終了し、投稿一覧画面に戻り、データが反映されているはずです。
クイック編集の更新が終わらないときは
クイック編集の更新ボタンをクリックした際には、以下のような流れで処理が進みます。
- 「temp_excerpt」というフィールド名のカスタムフィールド値を保存
- 一旦クイック編集保存の処理を中断
- 「temp_excerpt」の文字列を本物の抜粋へコピー
- クイック編集保存の処理を再開
- 完了
もしもクイック編集の更新が処理待ちのまま終了しない場合にはこのプロセスのいずれかで処理が滞っていますので、以下のようにして順に確認してください。
処理待ちの状態を解除するため、一度画面をリロードします（投稿一覧へ戻るはずです）。
「抜粋」の変更を行った投稿の編集画面を開きます。
カスタムフィールドの「temp_excerpt」というフィールドに書き換えを行った文字列が格納されているかを確認します。
ブロックエディターでカスタムフィールドという項目が表示されない場合は、ブロックエディターの設定からカスタムフィールドの表示を有効にしてください
ここで書き換わっていない場合は上記1の処理がうまくいっていない証拠であり、これが進めば特に問題なく処理が完了するはずなので、今一度今まで追加したコードや各項での動作チェックを行ってください。
トラブルになるケースとしては、コードの追加途中に自身で都合の良い変数や定数、関数名に変更したことによる不具合が多いと思いますので、まずはコピペで完全に動作するかを確認した上で、それらのカスタマイズを行うようにしてください
以上、クイック編集で「抜粋」項目を変更できるようにする方法の一例でした。
冒頭でも触れたように、いろいろと試行錯誤しつつ、AIさんの力も借りながら作成したコードなので、もっと良い処理の仕方があったり、こんなことしなくても．．ということがあったりするかも知れません。
例えば今回は、試行錯誤する中で一旦カスタムフィールドに保存した値を抜粋へコピーするという処理をしていますが、クイック編集の更新の流れの中で、カスタムフィールドの値を保存後に一旦処理を停止し、フィールドの値を抜粋へコピーし、処理を再開させるという形なので、ひょっとすると一時停止させてそのまま抜粋に書き込んで再開しても通るのでは？などなど考えますが、この方法でうまくいったのでそれ以上は試していませんから、時間のある方はやってみるのも面白いかも知れません。
