この記事にはプロモーションが含まれています。

WordPress管理画面の投稿一覧でカテゴリーやタグなど任意の列幅を調整する

2024-05-292024-08-15

ケケンタ

管理画面の投稿一覧で表示項目増やしたら列幅が狭くなっちゃった……

ケケンタ

カテゴリーとかタグの列幅が広いから、もう少し狭くしたいな……

今回はこのようなお悩みをお持ちの方に向けて

WordPress管理画面の投稿一覧で
カテゴリーやタグなど任意の列の幅を調整する方法

をご紹介します。

ケケンタ

誰でも簡単にできるのでぜひご活用ください！

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

【結論】functions.phpに列幅調整用のCSSを記述する

早速結論ですが、以下のソースコードをfunctions.phpに追加することで調整することが可能です。

以下は「カテゴリー」や「タグ」の列幅を調整する例です。

function my_admin_style() {
	echo '
	<style>
		th#tags, 
		th#categories {
    		width: 10%;
		}
	</style>'
	.PHP_EOL;
  }
  add_action('admin_print_styles', 'my_admin_style');

ハイライトされている行で列幅を指定しています。

僕が使用しているSWELLというテーマでは初期状態だと列幅が15％に指定されていたため、上記のコードは元々の列幅よりも5％狭くする指定という意味になります。

任意の列幅を調整する方法

「カテゴリー」や「タグ」以外の列の幅を調整したい場合は、CSSセレクターのID（#tagsや#categories）の部分をその列のものに変更するだけでOKです。

ケケンタ

以下は各列のIDを確認し、実際にソースコードに当てはめるまでの手順です。

STEP

Ctrl + Shift + Cを押して、任意の列名の部分をクリックする

管理画面の投稿一覧ページでCtrl + Shift + Cを押すと以下の画像のようにカーソルを当てた部分の表示が変化します。

その状態でクリックすると、STEP２のような画面が出てきます。

STEP

表示された画面内から「id=”○○”」の部分を読み取る

以下のような表示が現れたら、「id=”○○”」の部分を読み取ります。

例えばタグ列なら「tags」、カテゴリー列なら「categories」というidが表示されています。

STEP

読み取ったidを先ほどのソースコードに当てはめる

STEP２でidの確認ができたら、続いて先ほどのソースコードにそれを当てはめます。

例えばアイキャッチ列の幅を調整したいとしたら以下のようなソースコードになります。

アイキャッチ列の幅を調整する場合のソースコード

function my_admin_style() {
	echo '
	<style>
		th#thumbnail {
    		width: 10%;
		}
	</style>'
	.PHP_EOL;
  }
  add_action('admin_print_styles', 'my_admin_style');