【WordPress管理画面】タイトルが縦に伸びた時にカラムの幅を変更する方法

WordPressでプラグインをいろいろ入れているとWordpress管理画面の投稿一覧ページ(投稿管理画面)のタイトルなどのカラム幅表示がおかしくなる時があります。

特に他の表示に押されてタイトルとかが、ほぼ縦書きになってしまった時は、めちゃくちゃ見にくくて嫌な感じです(笑)

プラグインを外せば元通りになりますが、入れておきたいものもあるはず。ということで、管理画面のカラム(列)の幅の変更しちゃいましょう。

タイトルが見にくい！
WordPress管理画面の幅を変更する方法

ワードプレスの投稿の管理画面で、一覧に影響するプラグインって結構数多くあります。

例えば、

• 文字数を表示したり
• アクセス数(PV)を表示したり
• 統計情報を表示したり

いろいろな情報を投稿一覧画面から見れたりします。

でも、あまり入れ過ぎると元々あった、タイトル、カテゴリ、タグなどの幅が狭くなって非常に見にくくなったりします。

幅が狭くなる時はいつもまず最初に一番左にあるタイトルが大変なことになる気がします。

こんな感じに^^;

他のものは縦書きみたいになっても良いですが、タイトルがこんなじゃなんか嫌ですよね。。。　けど、プラグインの情報も表示したい。

ということで、項目は消さずにカラム(列)の幅を調整する方法をご紹介します。

管理画面(投稿一覧)タイトルの幅を変更する方法

管理画面のオプションから変更する方法

この方法が一番簡単です。

投稿管理画面の右上に「表示オプション」とめちゃくちゃさりげなくプルダウンボタンがありますので、そのボタンをクリックします。

すると上からぴろぴろーっとメニューが表示されます。

管理画面のカラム項目が表示されます。

必要のない項目のチェックを外してあげると、タイトル幅の余裕が出てくるので正常に表示されます。いろいろチェックを外したり試してみましょう。

functions.phpから編集する方法

functions.phpに以下のコードを追記します。編集する前にfuncsions.phpは元のコードはどこかに保存しておきましょう！

add_action('admin_head', 'column_width');
function column_width() {
　echo '<style type="text/css">
        .column-title {
                 text-align: left;
                 width:250px !important;
　　　　　　　　　 overflow:hidden
        }
}

このコードは、タイトルを250px幅に変更して左寄せ表示するという内容になります。

250px幅以上のタイトルの場合は折り返されるので心配いりません。この数字を200pxにしたり300pxにしたりして調整してみてください。

簡単ですね！

カテゴリやタグのタイトル以外の幅を変更する方法

ワードプレスの投稿一覧管理画面には標準で、「作成者」「カテゴリ」「タグ」などが表示されていると思います。こちらも変更可能です。

それぞれ以下のようなクラスになっていますので、title部分を変えてあげれば大丈夫です。

• .column-author
• .column-categories
• .column-tags

すべて指定することももちろん可能です。その場合は、以下のようになります。

add_action('admin_head', 'column_width');
function column_width() {
    echo '<style type="text/css"> 
           .column-title { text-align: left; width:250px !important; overflow:hidden }
           .column-author { text-align: left; width:80px !important; overflow:hidden }       
           .column-categories { text-align: left; width:80px !important; overflow:hidden }        
           .column-tags { text-align: left; width:70px !important; overflow:hidden }    
          </style>';
}

幅変更ではなく、項目を消したい場合はこちらを記事がおすすめです。
⇒　 wordpress 投稿一覧をカスタマイズ(項目削除消す方法)

プラグインで追加されちゃう項目は
どうやって変更できる？

標準装備されている項目以外にも、プラグインを追加すると勝手に表示する項目があります。

タイトルが崩れる場合などはプラグインを追加するケースがほとんどですね。このプラグインのカラム幅も同様の方法で変更することができます。

ただ、プラグインそれぞれ指定してるCSSクラスが違うので確認する必要があります。

やり方は難しくありません。

ここではGoogle Chromeのブラウザを使用して説明します。

投稿画面一覧で、【右クリック⇒検証】を選びます。WindowsだったらCtrl+Shift+iでもOKです。

検証がクリックされると、右側にHTMLコードやCSSが表示されます。これが表示された状態で、調べたい項目の上にカーソルを置いて、【右クリック⇒検証】をまた選びます。

すると、その項目のHTMLが右側にブルー表示されますので、ここでどんなCSSが設定されているか調べることができます。

ブルーに反転されているところへカーソルを持っていくと、元の画面の方の項目の上にクラスやIDが表示されます。こちらを参考にしてもらっても良いでしょう。

ほとんどのクラスは、
.column-
で始まるようになっています。

画像のものは、th#td_post_views.manage-column.column-td_post_viewsととても長くなっていますよね。

この部分を後ろから見て行き、後ろから.column-までを抽出すればOKです。
つまり、【.column-td_post_views】になります。

タイトルとページビュー(表示数)の幅を変えたいときは以下のようにします。

add_action('admin_head', 'column_width');
function column_width() {
    echo '<style type="text/css">
      .column-title { text-align: left; width:250px !important; overflow:hidden }
      .column-views.sortable.desc{ text-align: left; width:50px !important; overflow:hidden }        
   　　  </style>';
}

このような感じにとても見やすくなりましたね^^ このサイトの管理画面ですが(笑)

まとめ：

・Functions.phpに2-3行追加で簡単にできる！
・クラスを探ればどんな項目も編集できる！

これで、タイトルが読みづらいまま使う必要もありませんし、プラグインを外す必要もなくなりましたね。

個人的に全然必要のない項目は消しちゃってもいいと思いますけどね。特に個人1人で運営しているサイトなら作成者などはいらないですよね。

リンク　⇒　wordpress 投稿一覧をカスタマイズ(項目削除消す方法)