Tipos de postagem personalizados do WordPress – Levando mais longe

Em nossa série sobre tipos de postagem personalizada do WordPress, analisamos até agora a criação de um tipo de postagem personalizada usando um plug-in e como criar um tipo de postagem personalizada manualmente escrevendo seus próprios trechos de código personalizados. Também analisamos como você pode aplicar algumas configurações básicas aos seus tipos de postagem para que você possa lidar com eles mais facilmente no seu administrador do WordPress. Se você ainda não conferiu esses artigos, não deixe de dar uma olhada!

Neste artigo, vamos dar um passo adiante, desenvolvendo nossos Tipos de postagem personalizados criados anteriormente para estender sua funcionalidade e usabilidade em nosso site. Se você quiser acompanhar, precisará criar os tipos de postagem personalizados que construímos em nosso artigo 'Criar tipos de postagem personalizados do WordPress manualmente', portanto, certifique-se de ter feito isso primeiro para que as informações a seguir façam sentido.

Vamos começar!

Exibindo tipos de postagem personalizados em qualquer lugar

Como você deve ter visto, criamos anteriormente um tipo de postagem personalizada para exibir receitas em nosso site. Este é um exemplo perfeito de uma situação em que os tipos de postagem personalizados são uma maneira incrivelmente útil de estender a funcionalidade do nosso site.

Em nosso exemplo, conseguimos exibir nossas postagens de Receitas adicionando-as ao menu principal do nosso site. Também configuramos uma visualização de arquivo que listava todas as nossas postagens relacionadas à receita. Essas são ótimas opções para exibir nossos novos tipos de postagem personalizados, mas o que acontece quando queremos exibir esse conteúdo em outro lugar em nosso site?

Usando a função WP_Query para exibir tipos de postagem personalizados

Para exibir nossos novos posts de receitas em locais de nossa escolha em nosso site, usaremos a função WP_Query . Em seus argumentos podemos encontrar post_types que serão usados ​​nesta instância, pois define quais tipos de posts queremos consultar. Junto com ele usaremos os parâmetros publish e orderby pois queremos mostrar as postagens de Receitas que estão com status de publicadas e ordená-las por data decrescente para exibir primeiro as mais recentes.

Vamos imaginar que queremos exibir uma lista de nossas postagens de Receita no rodapé do nosso site acima das informações de direitos autorais. Para isso usaremos um trecho de código que, no nosso caso, precisa ser inserido no arquivo singular.php abaixo do início do elemento <footer> .

 <?php $args = array( 'post_type' => 'recipes', 'post_status' => 'publish', 'orderby' => array( 'date' => 'DESC' ), ); $recipes = new WP_Query( $args ); if( $recipes->have_posts() ) { ?> <div class="recent-recipes"> <?php while( $recipes->have_posts() ) : $recipes->the_post(); ?> <div class="recipe"> <a href=""><?php get_post_permalink(); ?><h3><?php the_title(); ?></h3> <?php the_post_thumbnail( 'thumbnail' ) ; ?> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php } else { esc_html_e( 'No recipes found' ); } ?>

Estamos usando o tema padrão atual do WordPress Twenty Twenty neste exemplo. Se você usar um tema diferente do Twenty Twenty, você deve editar o arquivo que contém o conteúdo do rodapé do seu tema.

Com o código adicionado, podemos abrir nosso site e devemos ver nossas postagens de receitas listadas em nosso rodapé.

O layout e a aparência dessas postagens em seu rodapé podem ser estilizados para parecerem como você deseja usando CSS. O melhor lugar para adicionar qualquer CSS é no arquivo style.css que está localizado na pasta principal do seu tema. Temos alguns CSS possíveis que você pode querer usar abaixo.

 .recent-recipes h3 { font-size: 18px; margin: 15px 0; } .recipe { float: left; margin: 15px; } .recent-recipes { height: 240px; margin: 0 auto; width: 1190px; }

Depois que este CSS for salvo e a página atualizada, você deverá ver o layout de suas postagens de receita no rodapé alterado para ficar assim:

A importância de redefinir o loop

Você deve ter notado que após definir os argumentos necessários no código, um loop de postagem inicia e termina com a função wp_reset_postdata() . O uso desta função é muito importante e aqui está o porquê.

Quando o WordPress cria um layout de página, ele usa uma variável global $post que funciona bem se houver apenas um loop na página. Agora que adicionamos nosso loop personalizado, basicamente sobrescrevemos a variável global $post e, a menos que digamos ao WordPress que o loop é redefinido, ele será retomado a partir daí usando o tipo de postagem personalizado que definimos em nosso loop.

Vamos ver como isso funciona na prática, ecoando o título do post no código acima assim:

 <?php $args = array( 'post_type' => 'recipes', 'post_status' => 'publish', 'orderby' => array( 'date' => 'DESC' ), ); $recipes = new WP_Query( $args ); if( $recipes->have_posts() ) { ?> <div class="recent-recipes"> <?php while( $recipes->have_posts() ) : $recipes->the_post(); ?> <div class="recipe"> <a href=""><?php get_post_permalink(); ?><h3><?php the_title(); ?></h3> <?php the_post_thumbnail( 'thumbnail' ) ; ?> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php } else { esc_html_e( 'No recipes found' ); } ?> <?php the_title(); ?>

Agora, se atualizarmos nossa página no frontend de nosso site, veremos o título 'Post 1' sob nossas receitas recentes.

Isso faz sentido porque redefinimos o loop original com wp_reset_postdata(); função.

Agora, comente o wp_reset_postdata(); do seu código. Você notará que the_title(); código irá ecoar o título 'Receita 1' em vez de 'Post 1'.

Tipos de postagem personalizados - gerenciamento adicional

Para personalizar ainda mais o comportamento e a aparência de nossas postagens personalizadas, veremos algumas opções que podem ser adicionadas como uma extensão ao código que usamos em nosso artigo anterior para registrar nosso tipo de postagem 'receitas'.

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, ) ); } add_action( 'init', 'recipes_post_type' );

Vamos adicionar mais alguns argumentos para:

1. Altere o slug de URL das receitas Tipo de postagem personalizada
2. Altere a posição do menu de administração do tipo de postagem personalizada
3. Alterar o ícone do menu

Alterando o Slug de URL do tipo de postagem personalizado

Se criarmos um post de receita e o nomearmos 'Recipe 1', o URL padrão do post 'Recipe 1' seria algo como https://mycompanyname.com/recipes/recipe-1/ desde que os links permanentes estejam definidos como ' Nome do post' em nossas configurações de link permanente.

Se você quiser alterar a forma como o tipo de postagem personalizada de receitas aparece na URL, você pode usar o argumento de rewrite com sua chave slug .

Como notamos na URL, se esse argumento for ignorado, o valor padrão seria o rótulo do tipo de postagem personalizada 'receitas'. Se quisermos mudar isso para my-home-recipes por exemplo, temos que sobrescrevê-lo editando nosso trecho de código para ficar assim:

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), ) ); } add_action( 'init', 'recipes_post_type' );

Agora, se você salvar permalinks (limpar o cache de permalinks) e visualizar sua receita novamente, seu URL deve ser https://mycompanyname.com/my-home-recipes/recipe-1/

Observe que, se você alterar o slug, também terá que alterar a URL do arquivo de /recipes/ para /my-home-recipes/ na página do menu principal.

Alterando o posicionamento do menu de tipo de postagem personalizada

Se você deseja mover o menu Recipes para uma posição diferente, você pode usar o argumento menu_position assim:

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, ) ); } add_action( 'init', 'recipes_post_type' );

Os valores que você pode usar para este argumento são:

0: no topo
5: abaixo das mensagens
10: abaixo da mídia
15 : abaixo Links
20 : abaixo das páginas
25: comentários abaixo
60 : abaixo da primeira lacuna no menu
65 : abaixo de Plugins
70 : abaixo de Usuários
75: abaixo de Ferramentas
80 : abaixo de Configurações
100 : abaixo do segundo intervalo no menu

A captura de tela abaixo mostra a posição do menu quando o valor 5 foi adicionado ao argumento menu_position .

Alterando o ícone do menu de tipo de postagem personalizado

Atualmente, o menu Receitas usa o ícone de postagens padrão. Seria um toque agradável que tivesse seu próprio ícone único. Para fazer isso, podemos usar o argumento menu_icon .

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, 'menu_icon' => 'https://mycompanyname.com/wp-content/uploads/2020/10/recipes.svg', ) ); } add_action( 'init', 'recipes_post_type' );

Para exibir seu próprio ícone, você pode inserir o URL completo do local do ícone do menu (como mostrado no código acima) ou usar a biblioteca WordPress Dashicons adicionando o nome da classe do ícone. Você pode ver os ícones com as classes correspondentes aqui.

Se, por exemplo, você escolher o ícone de comida, adicione-o ao seu código como este 'menu_icon' => 'dashicons-food' .

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, 'menu_icon' => 'dashicons-food', ) ); } add_action( 'init', 'recipes_post_type' );

O resultado final deve ser que o ícone escolhido apareça em seu menu de postagem personalizada... ajudando a tornar sua postagem personalizada, bem, verdadeiramente personalizada!

Leitura adicional

Crie tipos de postagem personalizados do WordPress usando um plug-in
Criar tipos de postagem personalizados do WordPress manualmente
Crie tipos de postagem personalizados do WordPress usando seu próprio plug-in!

Conclusão

Espero que essas dicas realmente ajudem você em sua busca para criar seus próprios tipos de postagem personalizados e, ao fazê-lo, permitir que você melhore ainda mais as funções e o uso do seu site WordPress. Tal como acontece com toda a codificação, é melhor dedicar algum tempo para jogar e ver como seu novo código afeta seu site. Construir sobre essas bases permitirá que você lide com projetos ainda mais complexos, onde é necessária uma personalização pesada.