【WordPress】投稿一覧のクイック編集にメタディスクリプションの項目を追加する

3.サイト作り

2025.02.09

ワードプレスの投稿一覧のクイック編集に、メタディスクリプション欄があったら便利だなぁ。

と、思って色々調べたところ、以下の記事を発見しました。

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

こちらの記事は、任意のカスタムフィールドをクイック編集に追加するやり方なのですが、Cocoonの場合、メタディスクリプションには「the_page_meta_description」というフィールド名が割り当てられているので（※）名前の部分を「the_page_meta_description」と書き換えればいけるのではと。

※他テーマについては分かりません。フィールド名は要確認です。

やってみたらできたので、備忘録として残します。

※本記事はただの作業内容の記録で、一切解説はありません。何故そのコードを書くのか？という説明は参照元の記事をじっくりご覧いただき、自己責任の上でカスタマイズを行ってください。

functions.phpにコードを追加

子テーマのfunctions.phpに以下のコードを貼り付けて保存します。

//メタディスクリプションをクイック編集に追加

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

function my_posts_columns( $defaults ) {
    $defaults['the_page_meta_description'] = 'メタディスクリプション';

    return $defaults;
}
add_filter( 'manage_posts_columns', 'my_posts_columns' );

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

function my_posts_custom_column( $column, $post_id ) {
    switch ( $column ) {
        case 'the_page_meta_description':
            $post_meta = get_post_meta( $post_id, 'the_page_meta_description', true );
            if ( $post_meta ) {
                echo $post_meta;
            } else {
                echo ''; //値が無い場合の表示
            }
            break;
    }
}
add_action( 'manage_posts_custom_column' , 'my_posts_custom_column', 10, 2 );

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

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対策
    }

    ?>
    <fieldset class="inline-edit-col-right inline-custom-meta">
        <div class="inline-edit-col column-<?php echo $column_name ?>">
            <label class="inline-edit-group">
                <?php
                switch ( $column_name ) {
                    case 'the_page_meta_description':
				?><span class="title">メタディスクリプション</span><textarea name="the_page_meta_description" ></textarea><?php
                        break;
                }
                ?>
            </label>
        </div>
    </fieldset>
<?php
}
add_action( 'quick_edit_custom_box', 'display_my_custom_quickedit', 10, 2 );

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

function my_admin_edit_foot() {
    global $post_type;
    $slug = 'post'; //他の一覧ページで動作しないように投稿タイプの指定をする

    if ( $post_type == $slug ) {
        echo '<script type="text/javascript" src="', get_stylesheet_directory_uri() .'/admin/js/admin_edit.js', '"></script>';
    }
}
add_action('admin_footer-edit.php', 'my_admin_edit_foot');

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

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['the_page_meta_description'] ) ) {
        update_post_meta( $post_id, 'the_page_meta_description', $_REQUEST['the_page_meta_description'] );
    }

}
add_action( 'save_post', 'save_custom_meta' );

上記は、参考記事（[WordPress]カスタムフィールドをクイック編集で保存する方法について）に記載されているfunctions.phpに追加すべきコードをひとまとめにしたものです。

1～5のコメントは参考記事の見出しに沿っています。
参考記事でフィールド情報「weather/今日の天気」となっている部分を、「the_page_meta_description/メタディスクリプション」に変更してあります。
参考記事にあるチェックボックスは、今回不要だったので外しています。
参考記事のクイック編集入力欄は<input>タグでしたが、メタディスクリプションだと枠が小さすぎるため<textarea>タグに変更しました。

「admin/js」フォルダを作成し「admin_edit.js」ファイルを作って保存

参考記事にある通りにフォルダを作成し、「admin_edit.js」という名前でファイルを作って保存します。

FTPにログインし、wp-content/themes/cocoon-child-masterにまずは「admin」フォルダを作成。

adminフォルダ内に更に「js」フォルダを作成。

「js」フォルダ内に「admin_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 ) );

        if ( $post_id > 0 ) {
            var $edit_row = $( '#edit-' + $post_id );
            var $post_row = $( '#post-' + $post_id );

            //メタディスクリプション
            var $the_page_meta_description = $( '.column-the_page_meta_description', $post_row ).html();
            $( ':input[name="the_page_meta_description"]', $edit_row ).val( $the_page_meta_description );

        }
    };

})(jQuery);