Como adicionar suporte a formatos de post ao seu tema


Descrição

O que são Formatos de post, como você pode usá-los e como desenvolver Formatos de post? Este passo a passo dará a você uma compreensão do que são os Formatos de post e de como criar os seus próprios.

Conhecimentos prévios

  • Conhecimento básico de HTML/CSS/PHP
  • Conhecimento básico sobre como instalar e ativar temas do WordPress
  • Compreensão de como pastas e arquivos são estruturados
  • Capacidade de editar arquivos com um editor de texto

Objetivos

  • Os alunos criarão cada formato de post usando um tema padrão do WordPress
  • Os alunos habilitarão o suporte a Formatos de post em um tema que ainda não tenha os Formatos de post habilitados
  • Os alunos estilizarão cada tipo de Formato de post

Recursos

  • WordPress instalado localmente
  • Tema Twenty Thirteen instalado (todos os formatos de post concluídos e estilizados)
  • Tema Twenty Twelve instalado (para demonstrar como habilitar e estilizar Formatos de post quando eles ainda não são compatíveis com o tema selecionado)
  • Tema filho para habilitar formatos de post
  • Conteúdo de preenchimento dos dados de teste da unidade de tema

É importante que você tenha o Underscores configurado como um tema totalmente funcional, exceto pelos Formatos de post, para demonstrar como configurá-los e estilizar.

Perguntas de triagem

  • Você está familiarizado com a instalação e ativação de temas pelo painel do WordPress?
  • Você tem pelo menos um conhecimento básico de HTML/CSS/PHP?
  • Você se sente confortável usando um editor de texto para editar código?
  • Você terá um site WordPress de teste hospedado local ou remotamente para usar durante a aula?

Observações para o professor

  • Fazer uma demonstração ao vivo durante o ensino das etapas para criar um tema filho é essencial para que o conteúdo “faça sentido” para os alunos.
  • É mais fácil para os alunos trabalharem em uma cópia do WordPress instalada localmente. Reserve um tempo antes da aula para ajudar os alunos a instalar o WordPress localmente, se necessário. Para obter mais informações sobre como instalar o WordPress localmente, visite Instalação em um servidor local.
  • As respostas preferenciais para as perguntas de triagem são “sim”. Participantes que responderem “não” às 4 perguntas podem não estar prontos para esta aula.

Passo a passo prático

Introdução: O que são Formatos de post?

Os Formatos de post existem no WordPress desde a versão 3.1. No entanto, poucos temas oferecem suporte nativo a eles, e menos usuários ainda os implementam. Um Formato de post é uma informação meta que pode ser usada por um tema para personalizar a apresentação de um post. O recurso Formatos de post fornece uma lista padronizada de formatos disponível para todos os temas que oferecem suporte ao recurso. Os temas não são obrigados a oferecer suporte a todos os formatos da lista. Novos formatos não podem ser introduzidos por temas nem mesmo por plugins. A padronização dessa lista proporciona compatibilidade entre vários temas e uma forma para que ferramentas externas de blog acessem esse recurso de maneira consistente. Em resumo, com um tema que oferece suporte a Formatos de post, um blogueiro pode alterar a aparência de cada post escolhendo um Formato de post em uma lista de botões de opção. Os tipos de Formatos de post incluem:

Nota – Normalmente estilizada sem título. Semelhante a uma atualização de nota do Facebook.

Aside post screenshot

Galeria – Uma galeria de imagens. O post provavelmente conterá um shortcode de galeria e terá anexos de imagem.

Gallery post screenshot

Link – Um link para outro site. Os temas podem optar por usar a primeira tag no conteúdo do post como o link externo desse post. Outra abordagem seria considerar que, se o post consistir apenas em uma URL, ela será a URL e o título (post_title) será o nome anexado à âncora correspondente.

Link post type screenshot

Imagem – Uma única imagem, com ou sem legenda. A primeira tag do post poderia ser considerada a imagem. Como alternativa, se o post consistir apenas em uma URL, ela será a URL da imagem e o título do post (post_title) será o atributo title da imagem.

Image post type screenshot

Citação – Uma citação. Provavelmente conterá um blockquote com o conteúdo da citação. Como alternativa, a citação pode ser apenas o conteúdo, sendo a fonte/autor o título.

Quote. post type scree
Tipo de post de citação
Status post type.

Vídeo – Um único vídeo ou uma lista de reprodução de vídeos.

Por que usar Formatos de post?

Ao usar Formatos de post, os visitantes do seu blog saberão exatamente que tipo de conteúdo estão visualizando.  Estilos diferentes para cada Formato de post tornarão seu blog visualmente mais interessante. Anteriormente, os desenvolvedores tentavam criar esses estilos exclusivos para o conteúdo modificando categorias ou usando tipos de post personalizados.  Esses tipos personalizados tinham a intenção de representar algo diferente do conteúdo do blog. O uso de Formatos de post manterá todo o seu conteúdo dentro da parte de blog do site e, depois de configurado, exigirá apenas que você marque qual formato está usando. Os Formatos de post aparecerão no seu feed RSS e poderão ser editados na seção Posts do seu site.

Como funcionam os Formatos de post

Ao editar um post individual, você verá um módulo Formato:

Post formats in the editor.

Se você não vir o módulo Formato, verifique se ele está habilitado nas suas Opções de tela. Se você não vir a opção Formato ali, provavelmente está usando um tema que não utiliza formatos de post

Depois de atribuir posts a um determinado Formato de post, você verá ícones no painel indicando qual é o formato de cada post.  Acesse Posts > Todos os posts:

Post formats in dashboard
Formatos de post no painel

Ao visualizar seu blog, o conteúdo terá uma aparência exclusiva para cada formato.

Post formats in site front-end.

Adicionando suporte ao tema

Os temas precisam usar add_theme_support() no arquivo functions.php para informar ao WordPress quais formatos de post devem ser compatíveis, passando uma matriz de formatos como esta:

add_theme_support( 'post-formats', array( 'aside', 'quote', 'status', 'image', 'gallery', 'chat', 'link', 'audio', 'video' ) );

Observe que você deve chamar isso antes que o hook init seja executado! Um bom hook para usar é o hook after_setup_theme.

Adicionando suporte a tipos de post

Se quiser usar a estilização de Formatos de post em Páginas ou Tipos de post personalizados, isso é possível. Os Tipos de post precisam usar add_post_type_support() no arquivo functions.php para informar ao WordPress quais formatos de post devem ser compatíveis:

// add post-formats to post_type 'page'
add_post_type_support( 'page', 'post-formats' );

// add post-formats to post_type 'my_custom_post_type'
add_post_type_support( 'my_custom_post_type', 'post-formats' );

Usando Formatos de post

No tema, use get_post_format() para verificar o formato de um post e alterar sua apresentação de acordo. Observe que os posts com o formato padrão retornarão o valor FALSE. Ou use a tag condicional has_post_format():

if ( has_post_format( 'video' )) {
  echo 'this is the video format';
}

Uma forma alternativa de usar formatos é por meio de regras de estilo. Os temas devem usar a função post_class() no código de contêiner que envolve o post para adicionar classes de estilo dinâmicas. Os Formatos de post farão com que classes extras sejam adicionadas dessa maneira, usando o nome “format-foo”. Por exemplo, seria possível ocultar os títulos de posts no formato status adicionando isto à folha de estilos do tema:

.format-status .post-title {
display:none;
}

Estilizando Formatos de post

Embora você possa estilizar e criar seus formatos para que sejam exibidos da maneira que quiser, cada formato se presta a um determinado tipo de “estilo”, conforme ditado pelo uso moderno. É importante ter em mente o uso pretendido de cada formato, pois isso fará com que eles sejam facilmente reconhecidos visualmente pelos leitores como um tipo específico de conteúdo. Por exemplo, os formatos nota, link e status normalmente serão exibidos sem informações de título ou autor. Eles são simples, curtos e secundários. A nota poderia conter talvez um ou dois parágrafos, enquanto o link provavelmente seria apenas uma frase com um link para alguma URL. Tanto o link quanto a nota podem ter um link para a página do post individual (usando the_permalink()) e, assim, permitir comentários, mas é muito provável que o formato status não tenha esse link. Um post de imagem, por outro lado, normalmente conteria apenas uma única imagem, com ou sem uma legenda/texto acompanhando-a. Um post de áudio/vídeo seria semelhante, mas com áudio/vídeo incluído. Qualquer um desses três poderia usar plugins ou incorporações padrão para exibir seu conteúdo. Os títulos e a autoria talvez também não fossem exibidos, pois o conteúdo poderia ser autoexplicativo. O formato citação é especialmente adequado para publicar uma citação simples de uma pessoa sem informações adicionais. Se você colocasse apenas a citação no conteúdo do post e o nome da pessoa citada no título do post, poderia estilizar o post para exibir the_content() sozinho, mas reformulado no formato blockquote, e usar the_title() para exibir o nome da pessoa citada como assinatura. Um chat, em particular, provavelmente tenderá a usar uma exibição com fonte monoespaçada em muitos casos. Com algum estilo em .format-chat, você pode fazer com que ele exiba o conteúdo do post usando uma fonte monoespaçada, talvez dentro de uma div com fundo cinza ou algo semelhante, distinguindo-o visualmente como uma sessão de chat. Consulte Formatos de post: Chat para obter mais informações sobre estilização.

Formatos em um tema filho

Os temas filhos herdam os formatos de post definidos pelo tema pai. A chamada de add_theme_support() para formatos de post em um tema filho deve ser feita com uma prioridade posterior à do tema pai e irá substituir a lista existente, não acrescentar itens a ela.

add_action( 'after_setup_theme', 'childtheme_formats', 11 );
function childtheme_formats(){
     add_theme_support( 'post-formats', array('aside', 'quote', 'status', 'image', 'gallery', 'chat', 'link', 'audio', 'video') ); }

Chamar remove_theme_support('post-formats') removerá todo o suporte de uma só vez.

Exercícios em grupo

  1. Usando o tema Twenty Thirteen, crie um post usando cada opção de formato de post.
  2. Usando o Underscores:
    1. Crie cada Formato de post

Use como modelo os arquivos do tema Twenty Thirteen , mas lembre-se de alterar as chamadas para a convenção de nomenclatura do seu próprio tema

  1. content-aside.php
  2. content-audio.php
  3. content-chat.php
  4. content-gallery.php
  5. content-image.php
  6. content-link.php
  7. content-quote.php
  8. content-status.php
  9. content-video.php
  10. content-none.php

Estilize os Formatos de post (use como modelo o Style.css, linha 1380, do Twenty Thirteen)

Questionário

  1. O que são Formatos de post? Formatos de post são usados por um tema para personalizar a apresentação de um post. O recurso Formatos de post fornece uma lista padronizada de formatos disponível para todos os temas que oferecem suporte ao recurso.
  2. Quais são algumas opções de Formato de post? Nota, áudio, chat, galeria, imagem, link, citação, status, vídeo
  3. Os Formatos de post são iguais aos Tipos de post personalizados? Quando você escolheria um Tipo de post personalizado em vez de um Formato de post? Não, os tipos de post personalizados aparecem como outra opção no painel administrativo, próximo a posts e páginas.  Os Tipos de post personalizados são úteis quando você não quer que o conteúdo apareça em /blog, como em um calendário de eventos ou em anúncios imobiliários.
  4. Onde você habilita os Formatos de post para o seu tema? Functions.php, especificamente no functions.php de um tema filho
  5. O que você deve fazer ao escrever um post que deve usar um Formato de post? Selecionar qual formato de post usar
  6. Onde você personaliza a aparência dos Formatos de post? Style.css, ou especificamente o style.css do tema filho
  7. Todos os temas oferecem suporte a Formatos de post? Não
  8. Quais temas padrão do WordPress oferecem suporte a Formatos de post? Twenty Thirteen e Twenty Fifteen
  9. É possível adicionar suporte a Formato de post ao seu tema ou tema filho? Sim