WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

管理画面の投稿一覧で投稿タイトルが縦長になってしまう原因と幅を広げる方法

公開日:2022(令和4)年3月23日/最終更新日:

,
WordPressのトラブルシューティング



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

WordPressで過去の投稿を確認しようとして、投稿一覧を開いてみたらこんな現象にびっくりしたことありませんか?

  • タイトルが何行にも渡って表示されてて見づらい
  • タイトルが1文字ずつ何行にも渡って表示されてて非常に見づらい

これは、WordPressのバグではなく、きちんとした原因(要因)があり、このページで紹介する2つの方法のいずれかを行えば簡単に解決します。

自身のスキルに合った方法でさくっと解決しましょう。

投稿一覧でタイトルが縦長になってしまう原因

この不都合(不具合)は、表示させる列(項目)数が多いか、幅を大きく指定している列があることが原因ですから、以下の方法を使って調整しましょう。

投稿一覧でタイトルが縦長にならないようにする方法

簡易的に対処するなら「表示オプション」で調整

投稿一覧の右上にある、「表示オプション」というタブ(ボタン)をクリックします。

現在表示されている列にはチェックが入っていますので、普段見ていない列のチェックを外していきます。

すると、リアルタイムで列の幅が変わって見やすくなっていくのが確認できますから、ちょうどいい感じになるようにして終了です。

きちんと対処するなら、幅を指定するコードを追加

簡易対応で対処すると、本当は見たい(列に表示させておきたい)項目なのに非表示にしないといけないケースが出てくるかも知れません。

そんな時には以下のコードを有効化しているテーマのfunctions.phpへ追記して調整します。

/***** 投稿一覧のタイトル幅を400pxにする *****/
/* 固定ページの場合は「.pages」を付与する */
function admin_title_width(){
echo '<style>
	.posts .column-title {
	width: 400px;
}</style>';
	
}
add_action('admin_head','admin_title_width');

上記コードは投稿一覧のタイトルの列だけ幅を指定するためのものです。コード中の400pxという幅指定を任意の値に変更していい感じになるよう調整してください(幅には相対値「〇%」も使えます)。

これにより、他の列が縦長になってしまうこともありますが、そのあたりはサイトごとに違うので、簡易策と併用しながら調整してください。

..とあまりにも簡単に対処できてしまうので、もう少しコード解説をしておきます。

まず、管理画面側のデザイン要素(CSS)は、フロントエンド(訪問者に表示される画面)のデザイン要素と分離されているため、テーマカスタマイザーの追加CSSや子テーマ(親テーマ)のstyle.cssへ追記しても基本反映されません。

そこで、きちんと管理画面側のみのデザインとして反映されるよう(逆にフロントエンドには一切影響を与えないよう)、admin_head関数を使って管理画面側のソースへ出力、反映されるようにしています。

また、上記コードでは「posts」と限定し、「投稿またはカスタム投稿タイプの一覧」にのみ影響を与えるようにしていますので、固定ページの一覧でも同じ幅にしたい時は、「.posts 」の記述を消すか、「.posts .column-title」の部分を「.posts .column-title , .pages .column-title」へ変更するか、以下の固定ページ用のコードをするとよいでしょう。

/***** 固定ページ一覧のタイトル幅を400pxにする *****/
function admin_page_title_width(){
echo '<style>
	.pages .column-title {
	width: 400px;
}</style>';
	
}
add_action('admin_head','admin_page_title_width');