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

WordPressでいろいろな機能を使っているとだんだん見にくくなってくるのが管理画面の「固定ページ一覧」や「投稿一覧」といった一覧。列が追加されるたびにどんどんタイトルが狭くなって、隙間がいっぱいあるのになぜかタイトルだけが何行にも表示されるなんてことありませんか？？

もちろん表示させる列を管理画面上の「表示オプション」を開いて限定すればそれなりにはなるものの、やっぱり無駄な隙間が多いままですよね？その分をタイトルの幅にできたら見やすくなるのに・・・。

これを完全に制御できる方法はないの？？と調べていたら紹介されているページを発見しました。そのページは

WordPress管理画面の記事一覧の無駄に幅が広い列って何とかならない？

です。やっぱり調べれば何でも載ってるインターネット、最高ですね！！

今回はここで紹介されているコードを基本にして、実際に私が設定したときのことを紹介したいと思います。

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

まずはコードが失われてしまうといけないのでコピーさせていただき、以下に表示します

function colwidth_css(){
?><style>
th#author,
th#tags,
th#categories{
width:100px;
}
th#date{
width:110px;
}
th#post_thumb{
width:60px;
}
td.column-post_thumb img{
max-height:32px!important;
}
</style><?php
}
add_action('admin_head','colwidth_css');

こんな簡単なコードで・・・とびっくりする位ですが本当に調整できるんです。

使い方は参考ページにある通り、このコードをテーマのfunctions.phpへ追記するだけです。

コードを少し解説すると

function colwidth_css(){
?><style>
ここに幅の設定をしていく
</style><?php
}
add_action('admin_head','colwidth_css');

というのが管理画面の一覧の幅をここで設定したものにしなさいっていうコードで、その中に幅を設定したいものの要素を追加していくんですね。

まず前提となるのが、WordPressの一覧の設定がいろいろな項目を表示した余りの部分がタイトルに割り当てられるようになっているということ。絶対に表示されるものの何かの幅が自動で変わるようにしておかないと全体の幅が崩れてしまいますからね。タイトルのないものは一覧には絶対表示されませんからそういう設定になっているのでしょう（勝手な憶測ですけど）。

したがって、タイトルの幅をここで調整するのは避けた方がいいと思います。

それでは上の基本となるコードの「ここに幅の設定をしていく」というコードを追加していきましょう。

基本となるコードは

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

です。幅の名前の部分の代表的なものは

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

ですからそれぞれに対して幅の設定をしていきます。

一番上のサンプルコードでは

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

と複数行になっているところがありますが、これはCSSの基本で、上のコードだとauthor／tags／categoriesの３つの要素をすべて110ピクセルにしなさいという意味なんですね（最後のcategoriesの後ろにだけ「,」がないのはこれで複数指定の終了ですよという意味です）。

そして最後の行にある

td.column-post_thumb img{
max-height:32px!important;
}

で、アイキャッチ画像が縦向きなどで高さが大きい場合にはこの高さを最大値にしなさいという意味の設定です。こうしておくことで縦にも無駄な余白ができないようにしてあるんですね。

他の列がある場合にはデベロッパーツールで列名（id=〇〇の〇〇の部分）を指定して調整すればOKです。

興味のある方はぜひやってみてくださいね！

最後に「結局タイトルの幅がおかしいじゃん・・」と思った方、前述したように全体の幅の中で余ったものがタイトルの幅になるわけですから、一覧に表示している要素すべてを調整しないとタイトルが狭く、どこかに大きな余白ができることになるので気を付けてくださいね。

※phpタグの書き方にちょっと疑問が残りますけど（同じこと思った方もいるかと思います）これで動作したのでまあいいか・・・って感じです。

WordPressって面白い！！そしてこの情報を公開してくれてる参考サイトの作者に感謝！！です。

また管理画面用のCSSを作ってそこに追記して適用させる方法もありますので

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

を参考にどちらかの方法で一覧をすっきりさせましょう！！