web-dev-qa-db-ja.com

管理パネルでカスタム列のスタイルを設定する（特に列のセル幅を調整するため）

私はカスタム投稿タイプを広く利用するプロジェクトのCMSとしてWordpressを使用しています。カスタム投稿タイプごとに管理パネルに列を別の方法で表示する必要があります。

私はすでに必要な列を作成し、それらを埋めました。私がする必要があるのはCSSを少し調整することです。最も重要なことは、特定の列の幅を調整することです。たとえば、投稿名と同じ幅の投稿IDをリストする列は必要ありません。

カスタム投稿タイプ用の管理パネルでスタイルシートをエンキューしましたが、列幅のスタイルを正しく設定できません。

Thまたはtd要素の最大幅を調整しようとしましたが、効果がありません。 FirebugからはCSSスタイルがあることがわかりますが、何もしていません。

カスタム列を追加/編集するためのチュートリアルはたくさんありますが、そのような列のスタイルを設定する方法についてはあまり多くの情報を収集していませんでした。どんなヒント？

ありがとうございました！

custom-post-typescsscmscolumnswp-enqueue-style
14
unfulvio

私は私のために働く解決策を見つけました！

私はfunctions.phpにこのコードを落としました：

add_action('admin_head', 'my_column_width');

function my_column_width() {
    echo '<style type="text/css">';
    echo '.column-mycolumn { text-align: center; width:60px !important; overflow:hidden }';
    echo '</style>';
}
25
Nicusor Dumbrava

ありがとうNicusor：素晴らしい作品。次のようにあなたの解決策で投稿パネル上の選択された列（例えばタイトル、作者、カテゴリー）の幅を変更することができました：

add_action('admin_head', 'my_admin_column_width');
function my_admin_column_width() {
    echo '<style type="text/css">
        .column-title { text-align: left; width:200px !important; overflow:hidden }
        .column-author { text-align: left; width:100px !important; overflow:hidden }
        .column-categories { text-align: left; width:100px !important; overflow:hidden }
    </style>';
}
7
Charles Borden

あなたはこれを試してあなたの問題を解決することができます： 

add_action('admin_head', 'my_admin_custom_styles');
function my_admin_custom_styles() {
    $output_css = '<style type="text/css">
        .column-date { display: none }
        .column-tags { display: none }
        .column-author { width:30px !important; overflow:hidden }
        .column-categories { width:30px !important; overflow:hidden }
        .column-title a { font-size:30px !important }
    </style>';
    echo $output_css;
}
4
Gaurang P

CSSを使って列幅を簡単に設定できるはずです。 .column-{name}クラスを使用して、列セルにスタイルを適用できます（thとtdの両方）。例えば：

.column-mycolumn { width:20%; }

CSSの特殊性 rulesのために、他のスタイルで列幅を超えないようにしてください。また、スペースのない長い単語や大きな画像では、一部のブラウザで指定されている幅よりも幅が広くなります。

4
Geert