>wordpressの・・・

wordpressの管理画面をカスタマイズする方法

wordpressは標準だと、管理画面の投稿一覧にIDやスラッグ、文字数、アイキャッチ画像などを表示しません。文字数はGutenbergだと隠れていますが、Classic Editorでは入力欄下部にリアルタイムで文字数を変化させる表示になっています。それはそれで便利なのですが、管理画面の投稿一覧でも確認できれば尚良いです。この記事では管理画面にこれらを追加する方法を述べていきたいとおもいます。

[ 目次 ]

wordpressの管理画面をカスタマイズ
マルチサイトの場合はプラグイン化した方が便利
まとめ

wordpressの管理画面をカスタマイズ

いきなりですが、下のほうにあるコードを利用中のwordpressテーマの「functions.php」に張付けるとそのまま動き出します。カスタマイズに特別な設定は必要ありません。ただし、「functions.php」は誤記入があるとwordpress自体がおかしくなることもあるため、バックアップをとっていつでもサーバに直接アップロードできる状態にしてから編集して下さい。

管理画面の投稿一覧での表示のされ方

フックのコールバック関数内にある「$management_screen_wordpress」は、管理画面の投稿一覧のテーブル最上部に表示される項目です。この変数に好きな項目名をつけて配列として代入するとwordpressの管理画面上でもその名称に置き換えられます。また、フック内関数にある「$management_screen_wordpress」の配列代入式の順番を縦に並び替えると、wordpressの管理画面上ではそれに対して横に並び変わります。色々試してください。

アイキャッチとサムネイル

アイキャッチは画像のことで、投稿記事内に張付けている画像とは異なります。投稿画面でアイキャッチ画像として過去に登録しているものが管理画面の一覧でも表示されることになります。関連記事やカテゴリー、最新記事などで表示される画像はサムネイルと呼ばれていますが、こういったサムネイルはプログラムで記事内から抽出したものがほとんどで、ここでいうアイキャッチ画像とは違います。そのため、以下のコードではアイキャッチ画像がなければ表示されません。この画像を使っていない場合は、フック内関数でコメントアウトして下さい。そうすると表示されません。

wordpressの管理画面で使うアイキャッチの大きさは、get_the_post_thumbnail関数で変更できます。初期値で[100, 50]と配列指定していますが、この部分をカスタマイズして下さい。

cssでカスタマイズ

コード内で直接echoしているcssのclassやidは、wordpressの管理画面のソースコードを調べることで分かります。必要に応じてカスタマイズして下さい。また、get_the_post_thumbnail関数でthumbanail_imgというclassを追加しているため、この部分をカスタマイズすることでimgタグの装飾を変えられます。column-thumbnailのclassと併せてご利用ください。

文字数の変更

文字数は$item_name_wordpressのslugで処理しています。スラッグはwordpressのパーマリンク設定で数字などにしていると日本語タイトルをURLエンコードしてデータベースへ記録されるため、非常に長くなります。長いとワードプレスの管理画面が崩れてカスタマイズどころではありません。そのため、phpのmb_substr関数を使って$num_slug変数で指定しています。管理画面が崩れる場合は、この数値を変更してカスタマイズして下さい。

add_action( 'manage_posts_columns', function ($management_screen){

$management_screen['count'] = '文字数';

$management_screen['postid'] = 'ID';

$management_screen['slug'] = 'スラッグ';

$management_screen['thumbnail'] = 'アイキャッチ';

echo <<< EOT

<style>

table #title {width: 30%;}

table #author {width: 5%;}

table #categories {width: 25%;}

table #date {width: 10%;}

table .column-count {width: 5%;}

table .column-thumbnail {width: 120px;}

.thumbanail_img{width: 100px;}

table .column-postid {width: 2%;}

table .column-slug{width: 15%;}

</style>

EOT;

// print_r($management_screen);

return $management_screen;

});

add_action( 'manage_posts_custom_column', function ($item_name, $id_wordpress){

switch ($item_name){

case '':break;

case 'thumbnail':

$thumb = get_the_post_thumbnail( $id_wordpress , [100, 50], ['class' => 'thumbanail_img'] );

echo ( $thumb ) ? $thumb : '－';

break;

case 'postid':

echo $id_wordpress;

break;

case 'slug':

$slug = get_post( $id_wordpress ) -> post_name;

$num_slug=30;

$count_slug = mb_strlen(strip_tags($slug));

if($count_slug > $num_slug){$continued='...';}else{$continued="";}

$slug=mb_substr($slug, 0, $num_slug, 'utf-8').$continued;

echo $slug;

break;

case 'count':

$count = mb_strlen( strip_tags( get_post_field( 'post_content', $id_wordpress ) ) );

echo $count;

break;

}

}, '', 2);

マルチサイトの場合はプラグイン化した方が便利

ワードプレスでシングルではなく、マルチサイトで構築している場合、このコードをプラグイン化したほうが管理が楽かも知れません。というのは、親サイトや各子サイトでワードプレスのテーマを変えて利用されているケースも考えられるからです。

上記の「functions.php」へ張付けるやり方は、そのテーマを利用している場合にしか使えません。ワードプレスのシングルサイトでも言えますが、他のテーマに変えたらその時点で動きませんので注意して下さい。

プラグイン化は簡単で、以下のように「Plugin Name:」に対して適当な名前をつけます。ここでは「AA」。自分で使うだけなら、AuthorやDescriptionなどは必要ありません。他にも色々ありますが。この領域はコメントアウトになっていますが、ワードプレスは「Plugin Name:」でプラグインだということを認識します。そして、上記コードはこのコメントアウトしている部分の下側に追記します。

出来上がったphpファイルを他のプラグインと被らない名前をつけたフォルダに入れて、それをFTPなどで「wp-content/plugins/」ディレクトリにアップロードします。そしてワープレのプラグイン管理画面から有効化すると、その時点で動作するようになります。書式は以下の通り。

<?php

Plugin Name: AA

Author: GAROP

Description: 投稿一覧で文字数、ID、スラッグ、アイキャッチ画像を出力

まとめ

ワープレの管理画面をカスタマイズする方法って、意外に簡単です。ワープレにはアクションフックなどの仕組みがあって、これを使えば色々なことができたりします。この記事では割愛しますが、管理画面に自分用のメニューを追加することも意外に簡単にできます。「functions.php」に記入する場合は一つしか追加できないようですが、プラグインを使えばいくらでも付け加えることができます。画面からはみ出すほど追加したことはありませんが。ただその場合は、ある程度phpなどの知識が必要となりますけれど、それでも様々なカスタマイズができるところが、ワープレの良いところです。