【WordPress】CSSで簡単！投稿一覧の無駄な空白のためにタイトルが何行にもなるのを改善する方法

以前テーマのfunctions.phpに追記して解決する方法を紹介しました

【備忘録】WordPressの管理画面にある投稿一覧で項目の幅を調整する方法

これはこれで簡単なのですが、その後管理画面のいろいろな部分をカスタマイズしたくなった時にも使えるように、今回はもっと簡単にできる方法を紹介したいと思います。

CSSと言えば、テーマカスタマイザーの末尾にも枠がありますし、子テーマにも追加CSSが記述できるようになっています。が、WordPressのテーマのCSSは管理画面側のデザインには効きません。これは適用されるファイルが全く別物だからで、実際はここで躓く人も多いでしょう。

今回はそれも踏まえ、管理画面のデザインを変更できる環境の作り方と投稿一覧の列幅の調整方法を紹介したいと思います

管理画面用にCSSファイルを作り、テーマに読み込ませる方法

まずは管理画面側で適用されるCSSファイルと環境を作ります。手順は以下の２つです

管理画面側用のCSSファイルを作る

メモ帳でもなんでもいいので空のテキストファイルを作り、名前を「admin-styles」拡張子を「.css」に変更します。そしてできたファイルを現在有効化しているテーマ（または子テーマ）内に転送します。

管理画面用のCSSファイルを読み込ませる（適用させる）ようにする

以下のコードを有効化しているテーマ（子テーマ）のfunctions.phpへ追記します

//管理画面のCSS(admin-styles.css)を読み込む
function load_custom_wp_admin_style() {
wp_register_style( 'custom_wp_admin_css', get_stylesheet_directory_uri() . '/admin-style.css', false, '1.0.0' );
wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

・・・たったこれだけで環境作りは完了です。びっくりするほど簡単です。

投稿一覧の列幅調整のしかた

一番上にあるリンク先記事と重複する部分が多いですが、こちらでも紹介しておきます。

投稿一覧ではすべての列（要素）を表示して残った幅が投稿タイトルの表示に使われていますので、投稿タイトル以外の列すべてを設定する必要があります。

WordPressの標準で表示されるのは以下の通り

1. author／作成者
2. tags／タグ
3. categories／カテゴリー
4. date／日付
5. post_thumb／アイキャッチ画像
6. comments／コメント

これに対して基本となるCSSコードを使って先ほど作成した「admin-styles.css」へ追記していくだけです

th#幅の名前{
width:110px;
}

複数の列をまとめて設定する場合には

 th#author,
th#tags,
th#categories{
width:100px;
}

といった感じにすればすっきりします。

カスタムフィールドなどの幅は「th#カスタムフィールドのスラグ」で設定できますし、ブラウザのデベロッパーツールを使えば要素の名前は分かると思います。

もしも変更したのに適用されないという場合は、デベロッパーツールを起動した状態（投稿一覧のどこかで「右クリック」→「検証」）で画面のリロードを行うアイコンを右クリックし、「キャッシュを消去してハード再読み込み」をクリックすれば適用されると思います。

これでWordPress管理画面の投稿一覧にある余分な余白が調整され、すっきりした一覧になると思いますよ。

また今回作った「admin-styles.css」では管理画面側のいろいろな場所に対するCSSの編集ができますから、その他の項目の色などの調整も簡単にできるようになりますね。