Os arquivos de modelo de um tema são a espinha dorsal do seu site WordPress-eles servem para exibir vários tipos de conteúdo dinâmico no site. Embora a maioria dos usuários do WordPress confie apenas nesses modelos e criadores de páginas para editar seu conteúdo, existe outra maneira de personalizar o conteúdo do seu site. E envolve escrever arquivos de modelo personalizados usando código. Neste artigo, discutiremos como você pode criar modelos de postagem personalizados especificamente e considerar os benefícios potenciais de fazer isso. E mostraremos como lidar com esse tópico dividindo-o em várias etapas menores:
Por que você deseja criar um personalizado modelos de postagem única no WordPress Compreendendo a hierarquia do arquivo de modelo Criando modelos de postagem única personalizados
Por que você deseja criar modelos de postagem única personalizados no WordPress
Os modelos de postagem personalizados são mais bem aplicados em postagens específicas que destinam-se a se destacar do resto do seu site e impressionar o público. Eles oferecem a capacidade de criar layouts exclusivos e totalmente personalizados, o que pode ser benéfico para uma ampla variedade de sites e ocasiões.
Por exemplo, você pode usar modelos de postagem personalizados para postagens que pertencem a uma tendência categoria ou postagens feitas por autores ou colaboradores convidados específicos. Além disso, você pode criar templates de post específicos para cada autor em seu site, tornando seu conteúdo visualmente reconhecível. Você pode até criar modelos para tipos de postagem específicos, especialmente se você adicionou qualquer tipo de postagem personalizado. Estes são apenas alguns exemplos para dar uma ideia da gama de possibilidades oferecidas pela criação de modelos de postagem única do WordPress.
Simplificando, os modelos de postagem personalizados permitem que você crie um layout que não estaria disponível de outra forma através de seu tema ou o uso de plug-ins do construtor de página. Ao saber como codificá-los, você obterá mais flexibilidade para personalizar o conteúdo do seu site.
Temas Qode: Melhores escolhas Ver coleção Bridge
Tema criativo multiuso do WordPress
Um tema genuinamente multi-conceito
Fresh Startup Business Theme
Como criar modelos de postagem única personalizados no WordPress
Agora que você tem uma imagem mais clara dos benefícios envolvidos na criação modelos de postagem personalizados, vamos dar uma olhada em como você pode fazer isso. Dividimos esta parte do artigo em duas seções. Um cobre os requisitos que você precisa saber antes de começar a codificar e o outro ilustra como um modelo personalizado pode ser usando um exemplo que criamos.
Compreendendo a hierarquia de arquivos de modelo
Como mencionamos no início, os arquivos de modelo são responsáveis por exibir várias peças de conteúdo dinâmico em seu site. Para que funcionem corretamente, uma estrutura estrita de Hierarquia de modelo deve ser observada. O WordPress verifica automaticamente se uma página ou postagem tem um modelo personalizado atribuído a ela antes de usar qualquer um dos arquivos de modelo fornecidos pelo seu tema.
No passado, isso só era verdade para páginas (ou seja, modelos de página ), mas a funcionalidade foi estendida para postagens e tipos de postagem personalizados a partir da atualização do WordPress 4.7. Como tal, a hierarquia atual para postagens e tipos de postagem personalizados é a seguinte:
página personalizada/arquivo de modelo de postagem único-{post-type}.php single.php archive-{post-type}.php archive.php index.php
Vamos esclarecer o que isso significa.
Em primeiro lugar, a notação {post-type} representa o slug de um tipo específico de postagem. Os arquivos com nomes que contêm a notação {post-type} só se aplicam a tipos de postagem personalizados, que são registrados usando o register_post_type () . Se você registrou um tipo de postagem personalizado com portfólio-item como seu slug, então os dois arquivos seriam nomeados single-portfolio-item.php e archive-portfolio-item.php, respectivamente. Isso também estaria de acordo com a hierarquia acima.
Em segundo lugar, um arquivo de modelo personalizado é o único que não precisa seguir as convenções de nomenclatura estritas mostradas acima. Colocamos deliberadamente página/postagem como parte do nome para enfatizar que os arquivos de modelo personalizado podem ser escritos para páginas, postagens e tipos de postagem personalizados de maneira uniforme. Isso também fez parte da atualização do WordPress 4.7 que mencionamos anteriormente.
A razão para essa flexibilidade de uso está no cabeçalho do modelo, que é a primeira parte-e obrigatória-de todo arquivo de modelo personalizado. Serve para registrar o template e dar algumas informações adicionais sobre ele. O cabeçalho do modelo é, na verdade, um comentário simples que especifica o nome do modelo para o qual o tipo de postagem, ou tipos, foi escrito.
O cabeçalho do modelo tem uma estrutura rígida; as informações relevantes são especificadas após o Nome do modelo: e Tipo de postagem do modelo: strings. Nenhuma outra informação é necessária, mas se você decidir adicionar algumas, pode ser útil para qualquer pessoa que analise o arquivo. Além disso, como o arquivo de modelo tem a extensão.php, ele deve começar com a tag de abertura do PHP: Php . No entanto, a tag de fechamento do PHP (?> ) pode ser colocada posteriormente no código, dependendo do conteúdo principal do arquivo.
Tendo explicado isso, você pode ver um exemplo de como um arquivo de modelo personalizado pode começar abaixo.
php/** * Nome do modelo: Sem modelo da barra lateral * Modelo de tipo de postagem: post, página */
Usando este cabeçalho de modelo, você pode registrar um modelo personalizado template chamado No Sidebar Template e torná-lo disponível tanto para posts quanto para páginas. Isso significa que Nenhum modelo da barra lateral aparecerá como uma opção nos Atributos da página em uma única página, bem como nos Atributos da postagem em uma única postagem.
Como estamos nos concentrando em modelos de postagem única do WordPress neste artigo, definiremos o tipo de postagem do modelo em nosso exemplo para postar. Fora isso, nosso último conselho sobre cabeçalhos de modelo seria usar nomes autoexplicativos, pois isso o ajudará a evitar qualquer possível confusão mais tarde.
Dito isso, há algumas outras coisas precisamos mencionar antes de passar para o exemplo que fizemos para o artigo.
Primeiro, em termos de código, há muitas coisas que podem ser adicionadas a um arquivo de modelo personalizado. Todos eles são adicionados na segunda parte de um arquivo de modelo, aquele que cria o conteúdo. Eles incluem códigos que exibem as barras laterais, widgets, conteúdo inserido por meio do editor, metainformações de tipo de postagem personalizada e assim por diante.
Existem muitos layouts diferentes que podem ser obtidos usando arquivos de modelo personalizado, se você possuir as habilidades de programação apropriadas. E mesmo se você não fizer isso, não há razão para você começar do zero-os arquivos de modelo personalizado são mais comumente feitos pegando um arquivo de modelo apropriado de seu tema e modificando-o de acordo com sua preferência.
Depois de criar o arquivo de modelo completo, você deve salvá-lo como um arquivo.php e enviá-lo ao seu servidor. Usando o FTP, você deve colocar o arquivo em um dos quatro locais apropriados para arquivos de modelo personalizados. Esses são o diretório do tema pai ativo, o diretório do tema filho ativo ou um subdiretório dentro de qualquer um desses dois locais.
Além disso, você deve tomar cuidado ao nomear o arquivo. Evite usar qualquer um dos nomes já reservados (por exemplo, índice, arquivo, único,…) ou nomes que contenham um prefixo já reservado (por exemplo, único-, arquivo-, página-,…). Para simplificar, você pode querer nomear o arquivo com o mesmo nome do modelo, para que possa controlá-lo facilmente.
Criando modelos personalizados de postagem única
Na seção a seguir, discutiremos como criar layouts de postagem personalizados usando código personalizado. Como esse processo requer uma familiaridade significativa com o WordPress e experiência anterior de codificação, é mais inclinado para usuários intermediários e avançados do WordPress. Fornecemos explicações detalhadas e links úteis para esclarecer o assunto, mas recomendamos que você faça mais pesquisas se precisar antes de continuar.
O processo de criação de um modelo de postagem única em WordPress também requer compreensão de como usar FTP , pois você precisará dele para enviar o arquivo.php para o servidor depois de criar o código. Além disso, antes de prosseguir, recomendamos que você faça um backup do seu site apenas no caso.
Mesmo que os requisitos para este método possam parecer altos, a vantagem é significativa-você será capaz de fazer um layout de postagem personalizado perfeitamente adequado às suas necessidades. E para ajudá-lo nesse processo de criação de modelos de postagem única em WordPress, preparamos um exemplo de código para este artigo. Você pode usá-lo como está ou modificá-lo como quiser.
Dito isso, vamos dar uma olhada no código em si.
Php/* * Nome do modelo: Sem barra lateral Post Template * Template Post Type: post */get_header (); ?>
php the_title (); ?>
php}?>
php}?>
php//Navegação da postagem anterior/seguinte. the_post_navigation (array ('next_text'=>‘
‘,’prev_text’=>’
% title
‘));//Incluir comentários if (comments_open ()) {?>
php}?>
php}//Fim do loop. } wp_reset_postdata (); ?>
php get_footer ();
Para tornar este código mais fácil de entender, explicaremos seus componentes principais.
Faremos isso examinando primeiro uma versão mais simplificada do código. Como você pode ver no cabeçalho do modelo abaixo, o código representa um modelo específico de postagem de blog chamado No Sidebar Post Template.
Além disso, o código contém um pequeno pedaço de marcação HTML que envolve um WordPress Loop . A parte principal do código, que especifica o que é mostrado em uma determinada postagem, está localizada dentro dela.
Além disso, o código contém o uso de get_header () e get_footer () funções, que carregam os modelos de cabeçalho e rodapé do tema atualmente ativo do site. Além deles, também usamos a função wp_reset_postdata () para redefinir a variável $ post global para a postagem atual na consulta principal.
php/* * Nome do modelo: Nenhum modelo de postagem da barra lateral * Tipo de postagem do modelo: post */get_header (); ?>
php get_footer ();
Agora, vamos nos concentrar na parte principal do código.
Primeiro, definimos duas variáveis -$ author_id e $ author_url. Eles são usados para exibir o avatar do autor da postagem e para vinculá-lo à página de arquivo do autor da postagem apropriada. Como os nomes das variáveis indicam, eles contêm o ID do autor da postagem e o URL e são criados usando as funções get_the_author_meta ( ) e get_author_posts_url () .
$ author_id=get_the_author_meta (‘EU IA’); $ author_url=get_author_posts_url ($ author_id);
Em seguida, chegamos ao conteúdo de cada postagem, embrulhado com um
php the_title (); ?>
php}?>
A seção acima da imagem contém duas partes distintas. O primeiro é a imagem e o nome do avatar do autor. A segunda é uma lista de categorias, separadas por uma barra (/), às quais a postagem pertence. Além disso, a imagem do avatar do autor e o nome vinculam à página de arquivo do autor e as categorias vinculam às respectivas páginas de arquivo de categoria.
Quanto à seção abaixo da imagem em destaque, ela contém quatro partes distintas. O primeiro deles é o rótulo Tags: seguido por uma lista de tags, que são separadas por vírgulas (,) às quais a postagem pertence. Em seguida, a parte que pode ser editada diretamente usando o criador/editor de página de sua escolha é adicionada à postagem, usando o the_content () função. Em seguida, usando a função the_post_navigation () , a navegação de postagem padrão do WordPress para Anterior/Próximo postagem é adicionada. Também especificamos a marcação HTML dos links Anterior/Próximo. E, se a postagem tiver comentários habilitados, um modelo de comentário será exibido no final da postagem, usando o comments_template () . Finalmente, de acordo com os padrões do WordPress, nós higienizamos corretamente o código em vários lugares ao longo dele.
php}?>
php//Navegação da postagem anterior/seguinte. the_post_navigation (array ('next_text'=>‘
‘,’prev_text’=>’
% title
‘));//Incluir comentários if (comments_open ()) {?>
php}?>
Com isso, cobrimos todos os principais componentes do exemplo de código preparado para o artigo.
Como mencionamos na seção anterior, para usar este código, você precisará salvá-lo como um arquivo.php e carregá-lo em seu servidor, em um dos quatro locais apropriados. Posteriormente, você precisará editar uma de suas postagens, atribuir o modelo de postagem sem barra lateral a ela e revisar os resultados.
Mesmo que a maior parte do trabalho árduo já esteja feito, neste ponto, você pode precisar de algum código CSS adicional para fins de estilização. Este é um princípio que também se aplica quando você adiciona um novo recurso ou funcionalidade usando snippets de código personalizados.
O código CSS usado para estilização é feito caso a caso. Como tal, não podemos fornecer um exemplo que se aplique a todos os sites WordPress. Em vez disso, você precisa criar o código CSS apropriado por conta própria, para ter certeza de que corresponderá ao design do seu site atual.
Abaixo, você pode encontrar o CSS que criamos para nosso novo modelo de postagem única do WordPress. Temos que alertá-lo uma última vez contra simplesmente copiar e colar, pois não há garantias de que esse estilo se encaixará no seu site.
# main-content {padding: 10px 0 30px; }. conteúdo acima da imagem {posição: relativa; margin-bottom: 20px; exibir:-webkit-box; display:-ms-flexbox; display: flex;-webkit-box-align: center;-ms-flex-align: center; alinhar-itens: centro;-webkit-box-pack: justificar;-ms-flex-pack: justificar; justify-content: espaço entre; }.bi-author {display:-webkit-box; display:-ms-flexbox; display: flex;-webkit-box-align: center;-ms-flex-align: center; alinhar-itens: centro; tamanho da fonte: 18px; }.bi-autor-avatar img {raio da borda: 50px;-ms-flex-negative: 0; encolhimento flexível: 0; margem direita: 15px; }.image-wrapper {posição: relativa; }.bi-data {posição: absoluta; topo: 16px; esquerda: 16px; preenchimento: 12px; cor: # 000; tamanho da fonte: 18px; plano de fundo: # fcd4d2; }.bi-tags {display:-webkit-box; display:-ms-flexbox; display: flex;-webkit-box-align: center;-ms-flex-align: center; alinhar-itens: centro;-webkit-box-pack: center;-ms-flex-pack: centro; justificar o conteúdo: centro; }.bi-tags-wrapper {padding-left: 18px; } nav.navigation.post-navigation {margin-top: 40px; }.nav-links {display:-webkit-box; display:-ms-flexbox; display: flex;-webkit-box-pack: justificar;-ms-flex-pack: justificar; justify-content: espaço entre; alinhamento de texto: centro; preenchimento: 12px 0; plano de fundo: # f7f7f7; }.nav-anterior,.nav-próximo {preenchimento: 8px 15px; plano de fundo: # fcd4d2; raio da borda: 20px; }.nav-p anterior,.nav-próximo p {margem: 0; }
Código CSS como este pode ser adicionado por meio do seu painel em Aparência> Personalizar> CSS adicional. Como alternativa, você pode inseri-lo usando um plug-in WordPress que permite adicionar snippets CSS; mas certifique-se de testar o plug-in primeiro para verificar se não há problemas de compatibilidade com o seu site.
Nossos leitores mais avançados também podem adicionar o código CSS, colocando-o em um arquivo.css separado, enviando-o para o servidor e enfileirando-o usando wp_enqueue_style () . Para obter mais informações sobre este tópico, você pode dar uma olhada em nosso artigo sobre enfileiramento de scripts e folhas de estilo personalizados .
Finalmente, depois de adicionar todo o código, precisamos revisar o resultado. Você pode ver o nosso nas imagens abaixo.
Considerações finais
Os modelos de postagem personalizados podem ajudá-lo a obter designs feitos sob medida que, de outra forma, não seriam possíveis usando apenas os modelos fornecidos pelo seu tema ou com construtores de páginas. Saber como criar modelos de postagem única em WordPress pode ajudar seu blog a se destacar e ser mais atraente para seus leitores.
Os arquivos de modelo personalizados podem ser feitos com relativa facilidade adicionando um cabeçalho de modelo e o código apropriado para exibir o conteúdo principal. Para ajudá-lo nesse processo, projetamos um modelo de postagem única de exemplo e compartilhamos seu código, e tivemos o cuidado de explicá-lo ao longo do caminho. Além disso, mencionamos a possível estilização que seu novo modelo pode exigir e os métodos para adicioná-lo ao seu site. Diante de tudo isso, estamos confiantes de que você será capaz de criar seu próprio modelo de postagem única WordPress personalizado.