Menu

Posts Customizados no Wordpress - Custom posts types

Pode ser que criar um post customizado seja algo necessário para seu novo tema. Por exemplo, eu precisei criar um site de casamento e para que o usuário pudesse cadastrar madrinhas e padrinhos, criei um Post Customizado ou em inglês Custom Posts Types.

Para que o wordpress saiba que você deseja criar um tipo de post customizado, precisamos informar nossa intenção no arquivo functions.php, criando uma função específica para isso e depois adicionando ela a alguma ação.

O código é parecido com esse:

function meu_tema_personalizado_registrando_post_customizado()
{
    register_post_type('padrinhos',
        array(
            'labels' => array('name' => 'Madrinhas e Padrinhos'),
            'public' => true,
            'menu_position' => 0,
            'supports' => array('title', 'editor', 'thumbnail'),
            'menu_icon' => 'dashicons-admin-site'
        )
    );
}
add_action('init','meu_tema_personalizado_registrando_post_customizado');

O register_post_type possuí dois argumentos. O primeiro é o post_type, que é um identificador único para seu post customizado no qual poderemos referenciá-los mais tarde quando necessário. O segundo é um array de argumentos que informa as configurações básicas e o que precisamos suportar no nosso post customizado.

Nesse array de argumentos, o labels informa o nome que aparecerá no menu do wordpress.

A segunda opção informa que estará disponível para todos os usuários do site.

Na sequência dizemos a posição que nosso novo post customizado ocupará no menu inical do wordpress.

A opção de supports temos que informar o que terá no nosso post customizado.

Todas as entradas no menu inicial possuem um ícone, também podemos definir esse ícone com a entrada menu_icon


WP_Query

Para exibir o post customizado que criamos na página desejada, vamos usar o Loop do Wordpress de forma customizada. Precisamos alterar o loop para informar onde precisamos buscar os dados para o Loop.

Para fazer isso usamos a classe WP_Query.

$args = array('post_type' => 'padrinhos' ); //precisa ser o nome informado no register_post_type
$query = new WP_Query($args);
if ($query->have_posts()):
    while($query->have_posts()): $query->the_post();
        the_post_thumbnail();
        the_title();
        the_content();
    endwhile;
endif;

Claro que sempre pode ser personalizado de acordo com as necessidades do seu post.

Hierarquia dos Templates no Wordpress

Supondo que no Wordpress temos duas páginas:

Uma com título de Home e outra com título de Contato.

Quando você solicita ao Wordpress carregar uma página, por exemplo, página de Contato, o que acontece?

Primeiro ele tenta encontrar se existe algum arquivo específico para a página Contato. Se existir ele renderiza esse arquivo e pronto. Nada mais acontece. Se não existir esse arquivo específico, o Wordpress vai renderizar o index.php, que é o arquivo mais genérico de todos e a razão dele ser obrigatório.

Se olharmos a imagem com resumo da Hierarquia, podemos observar que a imagem está orientada da esquerda pra direita, partindo dos arquivos mais específicos e terminando no mais genéricos de todos que é index.php.

Por si só a imagem já demostra que wordpress não é tão simples quanto parece, mas também não é tão difícil assim. O arquivo que estamos querendo renderizar é de uma página estática, criada como página normal no wordpress. Seguindo o fluxo da imagem, temos:

Singular Page -> Static Page -> Page Template -> Default Template -> page-$slug.php -> page-$id.php -> page.php -> singular.php -> index.php

O arquivo mais específico possível disponível está mais a esquerda e nesse caso é page-$slug.php. Se criarmos um arquivo chamado page-contato.php, o wordpress irá reconhecer e renderizar primeiro o que está nessa página toda vez que for requisitado este arquivo.

No caso de configurar uma página incial estática (ao invés de uma página de posts), podemos também criar um arquivo específico para isso.

Site Front Page -> front-page.php

O que nos diz que, se criarmos um arquivo chamado front-page.php e nas configurações do wordpress definir que a página inicial será estática, conseguimos definir o layout para ela nesse arquivo com nome de front-page.php

Este é apenas um exemplo simples para entender a hierarquia de templates do wordpress.

Para mais informações consulte a documentação oficial, e também na imagem de resumo.

Loop do Wordpress

Para exibir conteúdos dos posts padrões do wordpress, utilizamos o famoso Loop. O código é parecido com abaixo:

if(have_posts()):
    while(have_posts()): the_post();
        the_post_thumbnail();
        the_title();
        the_content();
    endwhile;
endif;

É importante salientar que, para criar posts personalizados, também usaremos uma estrutura parecida na hora de exibir.

Adicionando Folha de Estilos ao Wordpress - Tema Personalizado

Para adicionar estilos ao seu tema, não há muito mistério. No cabeçalho, no arquivo header.php, coloque este código dentro da tag head

< link rel="stylesheet" href="< ?= get_template_directory_uri() . '/css/normalize.css' ?>">
< link rel="stylesheet" href="< ?= get_template_directory_uri() . '/css/bootstrap.css' ?>">
< link rel="stylesheet" href="< ?= get_template_directory_uri() . '/css/header.css' ?>">

Adicionando Logo Personalizada

Simples e direto

function meu_tema_personalizado_adicionando_recursos_ao_tema(){
    add_theme_support('custom-logo');
}
add_action('after_setup_theme', 'meu_tema_personalizado_adicionando_recursos_ao_tema');

Especificado argumentos:

function meu_tema_personalizado_custom_logo_setup() {
	$defaults = array(
		'height'               => 100,
		'width'                => 400,
		'flex-height'          => true,
		'flex-width'           => true,
		'header-text'          => array( 'site-title', 'site-description' ),
		'unlink-homepage-logo' => true, 
	);

	add_theme_support( 'custom-logo', $defaults );
}

add_action( 'after_setup_theme', 'meu_tema_personalizado_custom_logo_setup' );

No header, onde for exibir:

if ( function_exists( 'the_custom_logo' ) ) {
	the_custom_logo();
}

Para adicionar logotipo com mais informações, como link por exemplo:

$custom_logo_id = get_theme_mod( 'custom_logo' );
$logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );

if ( has_custom_logo() ) {
	echo '< img src="' . esc_url( $logo[0] ) . '" alt="' . get_bloginfo( 'name' ) . '">';
} else {
	echo '< h1 >' . get_bloginfo('name') . '< /h1>';
}
Outras informações consultar referência oficial.

Adicionando Menu de Navegação Wordpress - Tema customizado

O Wordpress nos permite criar menus personalizados para serem exibidos no tema, de forma dinâmica. No entanto, é necessário informar ao Wordpress que seu tema tem suporte a eles, assim, conseguimos configurar diretamente pelo menu aparência.

Para informar ao wordpress que o tema dá suporte a menus, precisamos criar o arquivo functions.php na raiz do nosso tema. (Se o arquivo já existir não é necessários criar outro).

Sempre que precisamos informar algo específico par ao wordpress, é através desse arquivo de configurações específico. Nele são utilizadas as Actions Hooks do wordpress.

Cada ação que pode ser especificada, possuí uma Action específica que pode ser consultada neste link.

Para especificar uma ação, criaremos uma função que adiciona o menu que desejamos, e ao inicializar o wordpress, incluiremos a função que criamos para que o menu customizado seja exibido.

Para exemplificar, a função:

function meu_tema_personalizado_registrando_menu(){
    register_nav_menu(
        'menu-navegacao', //id para o menu poder ser referenciado no tema
        'Menu Navegação' //nome para exibição
    ); 
}

//informando ao wordpress qual momento executar nossa função personalizada
add_action('init', 'meu_tema_personalizado_registrando_menu');

Para especificar o local onde o menu deve aparecer, colocamos este código no header.php (para mais informações consulte documentação oficial)

wp_nav_menu(
        array(
                'menu' => 'menu-navegacao'
        )
);
wp_nav_menu( array $args = array(
	'menu'				=> "", // (int|string|WP_Term) Desired menu. Accepts a menu ID, slug, name, or object.
	'menu_class'		=> "", // (string) CSS class to use for the ul element which forms the menu. Default 'menu'.
	'menu_id'			=> "", // (string) The ID that is applied to the ul element which forms the menu. Default is the menu slug, incremented.
	'container'			=> "", // (string) Whether to wrap the ul, and what to wrap it with. Default 'div'.
	'container_class'	=> "", // (string) Class that is applied to the container. Default 'menu-{menu slug}-container'.
	'container_id'		=> "", // (string) The ID that is applied to the container.
	'fallback_cb'		=> "", // (callable|bool) If the menu doesn't exists, a callback function will fire. Default is 'wp_page_menu'. Set to false for no fallback.
	'before'			=> "", // (string) Text before the link markup.
	'after'				=> "", // (string) Text after the link markup.
	'link_before'		=> "", // (string) Text before the link text.
	'link_after'		=> "", // (string) Text after the link text.
	'echo'				=> "", // (bool) Whether to echo the menu or return it. Default true.
	'depth'				=> "", // (int) How many levels of the hierarchy are to be included. 0 means all. Default 0.
	'walker'			=> "", // (object) Instance of a custom walker class.
	'theme_location'	=> "", // (string) Theme location to be used. Must be registered with register_nav_menu() in order to be selectable by the user.
	'items_wrap'		=> "", // (string) How the list items should be wrapped. Default is a ul with an id and class. Uses printf() format with numbered placeholders.
	'item_spacing'		=> "", // (string) Whether to preserve whitespace within the menu's HTML. Accepts 'preserve' or 'discard'. Default 'preserve'.
) );

Criando um tema customizado no Wordpress

Obs: O blogger não permite colocar tags php nos blocos de código. Então toda vez que mencionar entre chaves php me refiro a esse tipo de código:

 

Configuração Básica

Já tendo o wordpress instalado e configurado na sua máquina, para criar um tema novo é bem simples.

Primeiro passo é criar uma pasta para seu novo tema dentro de:

 C:\xampp\htdocs\wordpress\wp-content\themes 

Dentro da sua nova pasta crie um arquivo style.css e outro com nome de index.php.

Essa é a estrutura básica para um tema ser reconhecido.


Se entrar no painel do wordpress será possível visualizar o tema, porém não haverá nenhuma informação relevante como nos outros temas.

Para incluir essas informações sobre tema, é preciso incluir como forma de comentários dentro do arquivo style.css

/*
Theme Name: Aprendendo Wordpress 
Author: Seu nome
Description: Tema customizado criado para aprendizagem do wordpress.
Version: 1.0.0
Tags: aprendizado, customizacao, 
*/

Para que o thumbnail com o preview do tema apareça também é necessário ter essa imagem, nomear screenshot.jpg e incluir na pasta principal.


Para configurar o tema:

É possível incluir todo o site/blog num único arquivo index.php? Sim, funcionaria. Mas não é o objetivo de se criar um tema do Wordpress, pois não refletiria as alterações feitas dentro da plataforma do Wordpress, mas vamos por partes

Criando o Cabeçalho para o tema

Para criar o cabeçalho crie um arquivo chamado header.php.

No arquivo header.php teremos toda estrutura inicial da nossa página html. Literalmente o mas com algumas alterações.

Crie um página html normalmente, porém deixe o código até a abertura da tag body. No lugar do título, entre código PHP, coloque o código wordpress correspondente:

bloginfo('name');  

Logo após o título, também é necessário incluir um código para que todo o layout funciona (inclua este código entre chaves php):

 wp_head(); 

Criando o Rodapé para o tema

Para criar o rodapé crie um arquivo chamado footer.php.

Neste arquivo feche a tag body aberta do cabeçalho e incluia o seguinte código entre chaves php:

wp_footer();

Não se esqueça de fechar a tag html também aberta do cabeçalho. Ao final todos os arquivos irão de unir e formar um arquivo só, por isso temos que abrir e fechar todas as tags.


Se você já tiver uma página em html criada, pode copiar e colar o conteúdo do cabeçalho e do rodapé nos arquivos que criamos para eles.

Configurando o arquivo index.php

Agora que já configurei o cabeçalho e o rodapé, posso chamar esses arquivos no arquivo principal criado: o index.php

Para incluir o arquivo do cabeçalho dentro do index.php, use o seguinte código entre chaves php:

require_once 'header.php';

E para incluir o rodapé, temos um código semelhante:

require_once 'footer.php';