web-dev-qa-db-fra.com

Style des colonnes personnalisées dans les panneaux d'administration (en particulier pour ajuster la largeur des cellules de colonne)

J'utilise Wordpress en tant que système de gestion de contenu pour un projet qui utilise beaucoup les types d'articles personnalisés. J'ai besoin d'afficher les colonnes dans les panneaux d'administration pour chaque type d'article personnalisé d'une manière différente.

J'ai déjà créé et rempli les colonnes nécessaires. Ce que je dois faire, c'est ajuster un peu le CSS. Plus important encore, j'essaie de modifier la largeur de certaines colonnes. Par exemple, je n'ai pas besoin d'une colonne répertoriant l'ID de l'article pour qu'il soit aussi large que son nom.

J'ai mis en file d'attente une feuille de style dans les panneaux d'administration pour mes types d'articles personnalisés, mais je ne parviens pas à définir correctement la largeur des colonnes.

J'ai essayé d'ajuster la largeur maximale des éléments th ou td, mais c'est inefficace. De firebug je peux voir que le style css est là, mais ça ne fait rien.

Bien que je puisse trouver de nombreux tutoriels pour ajouter/modifier des colonnes personnalisées, je n'ai pas vraiment rassemblé beaucoup d'informations sur la manière de styliser de telles colonnes. Un indice?

Je vous remercie!

custom-post-typescsscmscolumnswp-enqueue-style
14
unfulvio

J'ai trouvé une solution qui fonctionne pour moi!

J'ai laissé tomber ce code dans 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

Merci Nicusor: Fonctionne très bien. J'ai pu modifier la largeur des colonnes sélectionnées dans le panneau Messages (par exemple, Titre, Auteur, Catégories) avec votre solution, comme suit:

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

Vous pouvez essayer cela résolu vos problèmes: 

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

Vous devriez pouvoir définir la largeur de la colonne en utilisant CSS assez facilement. Vous pouvez utiliser la classe .column-{name} pour appliquer des styles aux cellules de colonne (th et td). Par exemple:

.column-mycolumn { width:20%; }

Assurez-vous qu'aucun autre style ne remplace la largeur de votre colonne à cause de spécificité CSS règles. De plus, des mots longs sans espaces ni grandes images peuvent forcer la colonne à être plus large que celle spécifiée par certains navigateurs.

4
Geert