WordPress:投稿一覧にサムネイル・ID・スラッグ・文字数の項目を追加する方法

WordPress:投稿一覧にサムネイル・ID・スラッグ・文字数の項目を追加する方法

WordPressの管理画面カスタマイズについて何度かこのブログでまとめていますが、その中のひとつ「投稿一覧に項目を追加」というカスタマイズの続編みたいな感じです。
以前書いたのはサムネイルを投稿一覧に追加・表示させるというものでしたが、更にID・スラッグ・文字数の項目も追加・表示させる方法です。

デフォルトの投稿一覧

画像が小さくて見難いですが、上記画像はデフォルトの投稿一覧をキャプチャしたものです。
表示オプションで何もいじっていなければこの画像のように「タイトル」「作成者」「カテゴリー」「タグ」「コメント」「日時」の6項目が表示されていると思いますが、ここに個人的によく使うことがあるのではと思う「サムネイル」「ID」「スラッグ」「文字数」の4項目を新たに追加・表示させます。
実装にはfunctions.phpを使用するので、テーマ内にない場合は作成して下記をそれぞれ記述してください。

WordPress:投稿一覧にサムネイル・ID・スラッグ・文字数の項目を追加する方法 目次

  1. 「サムネイル」を追加する
  2. 「ID」を追加する
  3. 「スラッグ」を追加する
  4. 「文字数」を追加する
  5. 全てをまとめて追加する

1.「サムネイル」を追加する

投稿一覧に「サムネイル」を追加する方法で、実装には下記をfunctions.phpに記述します。

functions.php

// 投稿一覧にサムネイル追加
function add_posts_columns_thumbnail( $columns ) {
  $columns['thumbnail'] = 'サムネイル';
  return $columns;
}
function custom_posts_column_thumbnail( $column_name, $post_id ) {
  if ( $column_name == 'thumbnail' ) {
    $thumb = get_the_post_thumbnail( $post_id, array( 100, 100 ), 'thumbnail' );
    echo ( $thumb ) ? $thumb : '-';
  }
}
add_filter( 'manage_posts_columns', 'add_posts_columns_thumbnail' );
add_action( 'manage_posts_custom_column', 'custom_posts_column_thumbnail', 10, 2 );

表示させるサムネイルの大きさを変更したい時はget_the_post_thumbnail部分のarray(100, 100)の部分を任意で変更してください。
また、上記ソースではサムネイルがない場合は「-」を表示させるようにしていますが、こちらも他のものに変更したい場合は任意で変更してください。

目次へ

2.「ID」を追加する

投稿一覧に「ID」を追加する方法で、実装には下記をfunctions.phpに記述します。

functions.php

// 投稿一覧にID追加
function add_posts_columns_postid( $columns ) {
  $columns['postid'] = 'ID';
  return $columns;
}
function custom_posts_column_postid( $column_name, $post_id ) {
  if ( $column_name == 'postid' ) {
    echo $post_id;
  }
}
add_filter( 'manage_posts_columns', 'add_posts_columns_postid' );
add_action( 'manage_posts_custom_column', 'custom_posts_column_postid', 10, 2 );

目次へ

3.「スラッグ」を追加する

投稿一覧に「スラッグ」を追加する方法で、実装には下記をfunctions.phpに記述します。

functions.php

// 投稿一覧にスラッグ追加
function add_posts_columns_slug( $columns ) {
  $columns['slug'] = 'スラッグ';
  return $columns;
}
function custom_posts_column_slug( $column_name, $post_id ) {
  if ( $column_name == 'slug' ) {
    $slug = get_post( $post_id ) -> post_name;
    echo $slug;
  }
}
add_filter( 'manage_posts_columns', 'add_posts_columns_slug' );
add_action( 'manage_posts_custom_column', 'custom_posts_column_slug', 10, 2 );

目次へ

4.「文字数」を追加する

投稿一覧に「文字数」を追加する方法で、実装には下記をfunctions.phpに記述します。

functions.php

// 投稿一覧に文字数追加
function add_posts_columns_count( $columns ) {
  $columns['count'] = '文字数';
  return $columns;
}
function custom_posts_column_count( $column_name, $post_id ) {
  if ( $column_name == 'count' ) {
    $count = mb_strlen( strip_tags( get_post_field( 'post_content', $post_id ) ) );
    echo $count;
  }
}
add_filter( 'manage_posts_columns', 'add_posts_columns_count' );
add_action( 'manage_posts_custom_column', 'custom_posts_column_count', 10, 2 );

目次へ

5. 全てをまとめて追加する

上記はそれぞれの項目をひとつずつ追加していくものでしたが、4項目全てをまとめて追加したい場合は下記をfunctions.phpに記述することで実装できます。

functions.php

// 投稿一覧に「サムネイル」「ID」「スラッグ」「文字数」の4項目を追加
function add_posts_columns( $columns ) {
  $columns['thumbnail'] = 'サムネイル';
  $columns['postid'] = 'ID';
  $columns['slug'] = 'スラッグ';
  $columns['count'] = '文字数';

  echo '<style type="text/css">
  .fixed .column-thumbnail {width: 120px;}
  .fixed .column-postid {width: 2%;}
  .fixed .column-slug, .fixed .column-count {width: 5%;}
  </style>';

  return $columns;
}
function custom_posts_column( $column_name, $post_id ) {
  if ( $column_name == 'thumbnail' ) {
    $thumb = get_the_post_thumbnail( $post_id, array( 100, 100 ), 'thumbnail' );
    echo ( $thumb ) ? $thumb : '-';
  } elseif ( $column_name == 'postid' ) {
    echo $post_id;
  } elseif ( $column_name == 'slug' ) {
    $slug = get_post( $post_id ) -> post_name;
    echo $slug;
  } elseif ( $column_name == 'count' ) {
    $count = mb_strlen( strip_tags( get_post_field( 'post_content', $post_id ) ) );
    echo $count;
  }
}
add_filter( 'manage_posts_columns', 'add_posts_columns' );
add_action( 'manage_posts_custom_column', 'custom_posts_column', 10, 2 );
カスタマイズ後の投稿一覧

こちらも画像が小さくて見難いと思いますが、上記を記述後に表示を確認するとこのように投稿一覧画面に「サムネイル」「ID」「スラッグ」「文字数」の4項目が新たに追加されているのを確認できます。
ソース内で.fixed .column-thumbnailなどを指定しているCSSは見栄えを整えるために簡易的に記述しているものなので、必要なければ消してもらって問題ないです。

目次へ


今回は投稿一覧を使用しましたが、manage_posts_columnsmanage_posts_custom_column部分を変更すれば、固定ページやカスタム投稿の一覧などでも使えますし、追加する項目も特定のカスタムフィールドの値を追加ということもできます。

Close the search window,
please press close button or esc key.