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


14

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

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

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

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

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

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

回答:


25

私に合った解決策を見つけました!

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>';
}

7

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>';
}

4

CSSを使用して簡単に列幅を設定できるはずです。あなたは使用することができ.column-{name}、列のセル(両方にスタイルを適用するために、クラスをthしてtd)。例えば:

.column-mycolumn { width:20%; }

CSS固有の規則により、列幅を上書きする他のスタイルがないことを確認してください。また、スペースや大きな画像のない長い単語は、一部のブラウザで指定されているよりも幅を強制的に広げることがあります。


動いた!どうもありがとうございます!私は明らかに私のCSSを過度に複雑ました
unfulvio

「clicks」という名前の列があり、このコードをchildtheme styles.cssファイルに配置しても、管理投稿リストには影響しません!.column-clicks {width:60px; }
Nicusor Dumbrava

4

これを試して問題を解決できます:

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;
}

各CSS行にセミコロンはありません。
ノースツリー16

これはとても役に立ちました。追加するだけで、Wordpressは一部のエディターユーザーによって大画面のモバイルでも使用されるため、!important上記のルールがWPの管理者リストのデフォルトデザインを破るため、メディアクエリを追加しました。ただし、これは非常に便利な提案です。ありがとうございました!
PKHunter

デフォルトでは、一部の列にはクラスが.fixedあり、結果はになりwidth: 15%; ます。これにより、これらの列に他の列よりも多くのスペースが割り当てられます(複数の行を分割する可能性があります)。しかし、実際には、列に必要以上のスペースが確保される可能性があります。上記のGaurangの関数を適用して、重要度の低い列に余分なスペースを与えないようにすることができます。例:.column-tags { width: initial !important; }
ファビアンスナウワート
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.