fbpx

Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Cores de célula de tabela personalizadas no painel de administração do WordPress

Você está em:

Cores de célula de tabela personalizadas no painel de administração do WordPress

Sempre achei que seria interessante poder alterar a cor de fundo das linhas dos posts de acordo com diferentes critérios na administração do WordPress. Então, dei uma olhada e encontrei alguns tutoriais para fazer isso. Mas o ruim é que todo tutorial tinha o mesmo código, provavelmente um simples copiar e colar. E além disso, depois de alguns testes, vi que todos esses posts estavam incompletos. É por isso que decidi ir um pouco mais fundo na explicação de como adicionar cores de fundo específicas à linha de postagens. E para isso, vamos criar um novo plugin!

Etapa 1: o plug-in

Ok, então para começar precisamos criar um plugin, como vimos nos meus posts anteriores, essa é a parte mais simples. Crie uma nova pasta em wp-content/plugins e nomeie-a como “color-my-posts”. Dentro dele, crie um novo arquivo e chame-o…. “color-my-posts.php” (por favor, não pense que não tenho imaginação!). Abra este arquivo e adicione este código:

<?php

/*

Plugin Name: Color My Posts

Plugin URL: http://remicorson.com/color-my-posts

Description: A little plugin to color post rows depending on the posts’ status in the administration

Version: 0.1

Author: Remi Corson

Author URI: http://remicorson.com

Contributors: corsonr

tags: color, customization, administration, corsonr, remi corson

*/

O que isso faz é simplesmente dizer ao WordPress que há um novo plugin chamado “Color My Posts” dentro de sua pasta de plugins. Agora seu plugin, mesmo que esteja vazio, deve ser listado na lista de plugins no menu “Plugins”. No próximo passo vamos criar uma classe simples para instanciar o plugin.

Etapa 2: A classe principal

Como criamos uma classe no meu tutorial sobre como adicionar atributos personalizados aos menus do WordPress, precisamos fazer o mesmo e criar uma classe, veja como fazer:

class rc_color_my_posts {

/*——————————————–*

* Constructor

*——————————————–*/

/**

* Initializes the plugin

*/

function __construct() {

add_action(‘admin_footer’, array( &$this,’rc_color_my_admin_posts’) );

} // end constructor

function rc_color_my_admin_posts(){

/* Be patient ! */

}

}

// instantiate plugin’s class

$GLOBALS[‘color_my_posts’] = new rc_color_my_posts();

Aqui estamos criando uma classe chamada “rc_color_my_posts que contém um construtor e uma função chamada rc_color_my_admin_posts(). No construtor estamos conectando a função rc_color_my_admin_posts() ao admin_footer. Isso significa que nossa função será considerada durante o carregamento do rodapé de administração. Agora tudo o que temos a fazer é adicionar o código CSS à nossa função. Este código será impresso diretamente no código-fonte das páginas de administração do WordPress.

Etapa 3: estilizar postagens

Como eu disse antes, todos os tutoriais falando sobre estilo de linha de postagem na administração do WordPress que eu vi, lidamos apenas com o status da postagem. Isso é verdade, você pode estilizar linha de postagens por status de postagem, mas não apenas. Para aqueles que estão interessados, há uma função chamada get_post_class() no  arquivo principal /wp-includes/post-template.php . Apenas no caso – Não modifique o código deste arquivo (pelo menos nem por enquanto)!

Bem, esta função get_post_class() é ótima porque é a responsável por determinar as classes de um post. Esta função é usada na administração e no frontend. Veja como adicionar código CSS personalizado para cada classe gerada por get_post_class:

function rc_color_my_admin_posts(){

 ?>

 <style>

 /* Color by post Status */

 .status-draft { background: #ffffe0 !important;}

 .status-future { background: #E9F2D3 !important;}

 .status-publish {}

 .status-pending { background: #D3E4ED !important;}

 .status-private { background: #FFECE6 !important;}

 .post-password-required { background: #ff9894 !important;}

/* Color by author data */

 .author-self {}

 .author-other {}

/* Color by post format */

 .format-aside {}

 .format-gallery {}

 .format-link {}

 .format-image {}

 .format-quote {}

 .format-status {}

 .format-video {}

 .format-audio {}

 .format-chat {}

 .format-standard {}

/* Color by post category (change blog by the category slug) */

 .category-blog {}

/* Color by custom post type (change xxxxx by the custom post type slug) */

 .xxxxx {}

 .type-xxxxx {}

/* Color by post ID (change xxxxx by the post ID) */

 .post-xxxxx {}

/* Color by post tag (change xxxxx by the tag slug) */

 .tag-xxxxx {}

/* Color hAtom compliance */

 .hentry {}

</style>

 <?php

 }

Como esse código não é complicado, adicionei comentários no próprio código. Então, basicamente, para estilizar linhas por:

  • Status da postagem , use .status-xxx onde xxx é o status da postagem
  • Author , use .author-self para segmentar as postagens que você escreveu e .author-other para postagens escritas por outros autores
  • Formato de postagem , use .format-xxx onde xxx é o formato de postagem
  • Categoria de postagem , use .category-xxx onde xxx é o slug de categoria, você pode segmentar quantas categorias quiser
  • Tipo de postagem , use .xxx ou .type-xxx em que xxx é o slug do tipo de postagem, você pode segmentar quantos CPTs desejar
  • Post ID , use .post-xxx onde xxx é o post ID, você pode segmentar quantas postagens quiser
  • Post tag , use .tag-xxx, onde xxx é o slug da tag, você pode segmentar quantas tags quiser
  • .hentry é usado para atingir a conformidade com o hAtom

Eu não defini as cores para todas as classes, mas você pode fazer isso sozinho e personalizar o plugin para torná-lo parecido com o que você realmente deseja.

E quanto a Posts Fixos?

Quando eu estava trabalhando neste pequeno plugin, notei que não havia nenhuma classe adicionada a posts fixos. Bem, pelo menos na administração. Então eu fui novamente no arquivo post-template.php e vi que há uma classe .sticky adicionada ao post fixo, mas apenas se is_home() && !is_paged()… por quê? Isso é muito estranho. Essa é a razão pela qual criei um ticket na trilha principal do WordPress para mencioná-lo. Para aqueles que realmente querem estilizar posts fixos no admin, basta adicionar este código à função get_post_class() mesmo se eu recomendar nunca modificar os arquivos principais do WordPress:

// sticky for Sticky Posts in administration

if ( is_sticky($post->ID) && is_admin() )

$classes[] = ‘post-sticky’;

Baixe o Plugin

Para aqueles que querem usar o plugin diretamente da 

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

Meu carrinho
🎁 Faltam R$100,00 para liberar a Black da FULL
Seu carrinho está vazio.

Parece que você não adicionou nada ao seu carrinho =(