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

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

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

ケケンタ

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

ケケンタ

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

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

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

をご紹介します。

ケケンタ

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




ケケンタ

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


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

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

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

ケケンタ

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

タイマースタート

3:00

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


目次

【結論】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を押すと以下の画像のようにカーソルを当てた部分の表示が変化します。

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

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

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

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

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

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

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

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

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

表示項目増えて投稿一覧が見づらくなったら列幅を調整してみよう

WordPressを使用していると投稿一覧で表示項目を増やす必要性が出てくる場合があります。

そのようなとき、何かしら非表示にしても問題無い項目があればいいのですが、そうでないときには今回ご紹介した「列幅を調整する方法」が有効です。

ケケンタ

この記事がお役に立ったなら何よりです!

WordPress管理画面の投稿一覧の項目に関連する記事

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

この記事が気に入ったら
フォローしてね!

この記事が良いと思ったらシェアしてね!

コメント

コメントする

CAPTCHA


目次