WordPress投稿一覧画面にカスタムフィールドなどの独自の項目を追加する実装方法

みなさんこんにちは！エンジニアの高澤です！

今回はWordPress投稿一覧画面にカスタムフィールドなどの独自の項目を追加する実装方法について解説していきたいと思います。

例えば、普通に投稿一覧管理画面にカスタムフィールドなどの任意のデータを表示させることにより、データを確認したいときに、いちいち記事ごとに編集画面を開かなくて良いのでかなり見やすくなるかと思います。

また、プラグイン開発にも用いられることが多々ある実装にもなります。

そのため、今回の記事の内容はWordPressエンジニア的には割と需要のある内容になってくるのではないかなと思いますので、よろしければぜひ当記事をご活用いただけましたら幸いです。

今回実装する内容

それではまず今回実装する内容についてご説明いたします。

結論としてはタイトルにもある通り「投稿一覧画面にカスタムフィールドの表示項目を追加する実装」になります。

下図をご覧いただくとイメージしやすいかと思います。

当記事ではテキストのカスタムフィールドを記事ページに設定し、文字が設定されていればそれが投稿一覧管理画面に列を独自に追加して一覧表示できるようになります。

それでは実装する方法について解説していきます。

実装する方法

それでは早速、実装する方法について解説していきたいと思います。

まずは以下のコードをfunctions.phpにコピー＆ペーストしてください。

// 投稿一覧画面に項目追加
function add_posts_columns_element($columns) {
    // 新しい列「カスタムフィールド１」を追加する
    $columns['custom_field1'] = 'カスタムフィールド１';
    return $columns;
}
// manage_post_posts_columnsフィルターフックにadd_posts_columns_element関数を追加
add_filter( 'manage_post_posts_columns', 'add_posts_columns_element' );

function add_posts_columns_element_row($column_name, $post_id) {
    // 列名が「custom_field1」の場合
    if ( 'custom_field1' == $column_name ) {
        // 投稿のカスタムフィールド「custom_field1」の値を取得
        $element_value = get_post_meta($post_id, 'custom_field1', true);
        // カスタムフィールドの値が存在するかどうかをチェックし、表示する
        echo ( $element_value ) ? $element_value : '－';
    }
}
// manage_post_posts_custom_columnアクションフックにadd_posts_columns_element_row関数を追加
add_action( 'manage_post_posts_custom_column', 'add_posts_columns_element_row', 10, 2 );

上記コードをfunctions.phpにペーストしていただけましたら、次はご自身のサイトの状況に合わせてカスタマイズしていきます。

まずはカスタムフィールド自体を投稿ページに設定していきます。

カスタムフィールドのプラグインであるAdvanced Custom Fields (ACF) をインストールして有効化してください。（Smart Custom Fieldsなどでも大丈夫です）

そしたらプラグインによるカスタムフィールド設定ページにて以下の内容でカスタムフィールドをセッティングしましょう。

• グループ名：記事テスト（任意）
• タイプ：テキスト
• ラベル：カスタムフィールド1（任意）
• カスタムフィールド名：custom_field1

設定が完了したら適当な記事の編集管理画面を開いて、設定したカスタムフィールドのテキストボックスに文字を入力してください。

入力して保存したら、投稿一覧管理画面に戻ってください。

すると、下図のように先ほど実装した分の列が追加され、設定したカスタムフィールドの値のテキストが表示されております。

テキストを入力していないものに関しては「-」といった具合にデータなしの表示をしております。

これで実装は完了です。お疲れ様でした！

あとはご自身のサイトに適した形で、コード中のカスタムフィールド名を変更して表示を対応させたりすればカスタマイズが可能です。

まとめ

WordPress投稿一覧画面にカスタムフィールドなどの独自の項目を追加する実装方法についての解説は以上になります。

今回の実装は、例えば、投稿一覧管理画面にカスタムフィールドなどの任意のデータを表示させることにより、データを確認したいときにいちいち記事ごとに編集画面を開かなくて良いのでかなり見やすくなるなど、記事の運用管理が効率させることが可能となります。

また、プラグイン開発にも今回の実装は使うことになるので、WordPressエンジニアにとっては知っておくべき実装の内容になります。

よろしければぜひ当記事をお仕事などでお役立ていただけましたら幸いです。