管理画面の一覧で列を増やすと一部の列が欄外に表示されてしまうようになる時の対処

公開日:2024(令和6)年3月31日/最終更新日:

WordPress Trouble Shooting and Repair | Personal WP Customization Notes (PWCN)

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



WordPressの管理画面で列を増やしていくと、下図赤枠のような形で欄外に表示されてしまうことがあります。

管理画面の列があふれた状態の画像

これ、以下の方法で結構簡単に解消できるので、メモとして公開しておきます。

管理画面の列があふれるのを防ぐ方法

列があふれてしまう原因

管理画面の列があふれてしまうのは、あふれてしまう列のスタイル設定(スタイルコード)が欠落していることが大きな原因で、スタイルが欠落している列の右(後)に表示される列がない場合にのみ発生します。

従って、ある時から突然そうなってしまうという印象を受けるかも知れません。

あふれてしまう列にスタイルを与えて解消

まずは、あふれてしまった列が表示されている状態で、コンソール(デベロッパーツール -「F12」で開ける)その列のCSSクラスを調べます。

上記画像の例では、こんな風になっています。

管理画面の列に設定されているCSSクラスを調べる

この列のスタイルコードはこのようになっています。

.widefat tfoot tr td, .widefat tfoot tr th, .widefat thead tr td, .widefat thead tr th {
    color: #2c3338;
}

特別この列に対するスタイルは指定されていません(これがあふれる原因です)。

解消するために、以下のスタイルを追加します。

.column-imsanity {
    width: 10%;
}

ただ、管理画面側にスタイルを適用させる必要があり、テーマの追加CSSなどにコードを追加しても反映されません。それ用のスタイルシートがテーマに備わっていればそこへ追加し、そうでない場合は以下のコードを有効化しているテーマのfunctions.phpへ追加します。

function pwcn_admin_column_style_init(){
?>
<style>
.column-imsanity {
    width: 10%;
}
</style>
<?php
}
add_action('admin_footer','pwcn_admin_column_style_init');

今回の例では「Imsanity」というプラグインが出力する列がたまたまあふれたのに対処したのですが、特定の列に対するCSSクラスは、都度デベロッパーツールで調べるようにしてください。

.column-カラムの名前



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Trouble Shooting and Repair | Personal WP Customization Notes (PWCN)
「PHP Notice: ob_end_flush(): Failed to send buffer of zlib output compression (0) in…」の対処(メモ)