Estilo de colunas personalizadas nos painéis do administrador (especialmente para ajustar a largura das células da coluna)


14

Estou usando o Wordpress como um CMS para um projeto que faz uso extensivo de tipos de postagem personalizados. Preciso exibir colunas nos painéis de administração para cada tipo de postagem personalizada de uma maneira diferente.

Eu já criei as colunas necessárias e as preenchi. O que preciso fazer é ajustar um pouco o CSS. Mais importante ainda, estou tentando ajustar a largura de certas colunas. Por exemplo, não preciso de uma coluna listando o ID da postagem para ser tão largo quanto o nome da postagem.

Enfileirei uma folha de estilo nos painéis de administração para meus tipos de postagem personalizados, mas não consigo acertar o estilo das larguras das colunas.

Tentei ajustar a largura máxima dos elementos th ou td, mas é ineficaz. No firebug, posso ver que o estilo css está lá, mas não está fazendo nada.

Embora eu tenha encontrado muitos tutoriais para adicionar / editar colunas personalizadas, não coletei muita informação sobre como estilizar essas colunas. Alguma dica?

Obrigado!

Respostas:


25

Encontrei uma solução que funciona para mim!

Larguei esse código em 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

Obrigado Nicusor: funciona muito bem. Consegui alterar a largura das colunas selecionadas no painel Postagens (por exemplo, Título, Autor, Categorias) com sua solução da seguinte maneira:

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

Você deve poder definir a largura da coluna usando CSS com bastante facilidade. Você pode usar a .column-{name}classe para aplicar estilos às células da coluna (ambas the td). Por exemplo:

.column-mycolumn { width:20%; }

Verifique se você não tem outros estilos substituindo a largura da coluna devido às regras de especificidade do CSS . Além disso, palavras longas sem espaços ou imagens grandes podem forçar a coluna a ser mais larga do que a especificada em alguns navegadores.


funcionou! muito obrigado! Eu estava complicar minha css evidentemente
unfulvio

Eu tenho uma coluna chamada "cliques" e esse código colocado no meu arquivo childtheme styles.css não tem efeito na lista de postagens de administrador! cliques em colunas {width: 60px; }
Nicusor Dumbrava 14/04

4

Você pode tentar isso resolveu seus problemas:

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

sem ponto e vírgula em cada linha CSS.
northtree

Isso foi muito útil. Apenas para adicionar, o Wordpress também é usado em celulares de tela grande por alguns de nossos usuários editores, por isso adicionamos consultas de mídia, pois as !importantregras acima quebravam o design padrão da lista de administradores do WP. Esta é uma sugestão muito útil. Obrigado!
PKHunter

Por padrão, algumas colunas têm classes nas .fixedquais resulta width: 15%; . Isso garante que essas colunas tenham mais espaço alocado a elas do que outras (que provavelmente quebrarão várias linhas). Mas, na prática, isso pode resultar em colunas recebendo mais espaço do que precisam! Você pode adaptar a função de Gaurang acima para evitar dar espaço extra às suas colunas menos importantes. por exemplo: .column-tags { width: initial !important; }.
Fabien Snauwaert
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.