Escolha uma Página

Se você é o tipo de desenvolvedor WordPress que se preocupa muito com design e organização, é hora de entender totalmente os tipos de postagem do WordPress.

Como você bem sabe, nem todos os sites WordPress são blogs simples. Freqüentemente, os desenvolvedores exigem mais do que simples páginas e postagens padrão. Eles precisam ser capazes de adicionar tipos de conteúdo completamente novos.

Mas qual é a melhor maneira de quebrar o teto de vidro do design e desenvolvimento do WordPress, e ainda oferecer ao usuário uma ótima experiência do usuário?

A resposta é encontrada nos tipos de postagem do WordPress e nos tipos de postagem personalizados do WordPress.

Ao aprender, compreender e implementar todo o potencial de Tipos de postagem do WordPress, você transformará sua área de administração em um lugar empolgante, organizado e personalizado que é todo seu.

Os tipos de postagem do WordPress permitem que os designers organizem facilmente o conteúdo, permitindo a criação de novos baldes para colocar seus tipos de conteúdo exclusivos.

Mas o que isso significa exatamente e por onde você começa?

O que o uso de tipos de postagem personalizados do WordPress pode fazer pela UX geral do seu site?

Vamos descobrir.

O que são tipos de postagem do WordPress?

Na escala mais básica, um tipo de postagem do WordPress funciona como as postagens e páginas familiares em sua área de administração.

Por padrão, o núcleo do WordPress hospeda vários tipos de conteúdo diferentes que são divididos em tipos de postagem. Um desses tipos de conteúdo é chamado de postagem. No entanto, este é apenas um dos muitos tipos de postagem padrão no WordPress.

Quando você usa o núcleo do WordPress, ele virá automaticamente com os seguintes tipos de postagem, cada um armazenado na tabela wp_posts de seu banco de dados WordPress:

  • Páginas
  • Postagens
  • Revisões
  • Anexos
  • CSS customizado
  • Menus de navegação
  • Conjuntos de alterações

Cada um desses tipos de postagem tem campos de editor e título, assim como você está acostumado com páginas e postagens normais.

E quando você cria um tipo de postagem personalizado, que mostraremos neste guia, ele aparecerá no menu de administração do WordPress, assim como os tipos de postagem padrão do WordPress.

Depois de implementar um tipo de postagem personalizado do WordPress, você poderá adicionar conteúdo a ele da mesma forma que faz quando adiciona um novo conteúdo de blog à seção de postagens.

No entanto, com os tipos de postagem do WordPress, você pode fazer com que esses tipos de postagem façam muito mais do que postagens e páginas padrão. Você também pode personalizar como o front-end do seu site exibe o conteúdo do tipo de postagem para os usuários do site.

Um novo tipo de postagem pode ser qualquer coisa que você quiser. Dependendo do assunto do seu site, pode ser algo como:

  • Filmes
  • Citações inspiradoras
  • Etc.

A funcionalidade de tipo de postagem do WordPress torna possível qualquer novo tipo de conteúdo.

Claro que existem plug-ins que ajudam você a criar tipos de postagem em WordPress. Mas você pode não querer necessariamente um plug-in para ter tanto controle sobre o design e a funcionalidade do seu site.

Se você deseja controle total sobre seu design e experiência do usuário, a melhor opção é codificar seus próprios tipos de postagem personalizados.

Iremos sugerir um plugin posteriormente neste guia para aqueles que preferem essa opção para criar tipos de postagem personalizados do WordPress.

Mas a melhor maneira de registrar, adicionar ou criar um tipo de postagem do WordPress é codificá-lo diretamente no tema do seu site. Isso é feito usando a função registrar-pós-tipo do WordPress.

Usando esta função, você pode adicionar conteúdo ao seu novo intervalo de tipo de postagem imediatamente e exibi-lo em seu site.

Melhor ainda, só vai exigir a adição de cinco linhas de código para você começar.

Uma olhada nos tipos de postagem personalizados do WordPress

Agora que você tem um conhecimento básico dos tipos de postagem do WordPress e dos tipos de postagem personalizados, é hora de sujar um pouco as mãos.

Para começar, siga estas etapas para criar um novo tipo de postagem:

  1. Faça login na sua área de administração.
  2. Abra seu editor de código e o arquivo functions.php de seu tema.
  3. Adicione as cinco linhas de código mostradas abaixo no início do arquivo functions.php.
  4. Atualize o navegador.
  5. Verifique o menu de administração do WordPress em Comentários para o novo item de menu de tipo de postagem.
  6. Limpe seus permalinks.

Este é o código a ser adicionado:

 true, 'label' => $label ) );
  );

Agora você deve ter um novo tipo de postagem.

Mas o que você pode realmente fazer com o novo tipo de postagem?

O poder dos tipos de postagem do WordPress e dos tipos de postagem personalizados do WordPress

Para realmente cavar tipos de postagem, vamos trabalhar com um exemplo específico de criação de um novo site de portfólio que precisa apresentar uma lista de estudos de caso.

Para isso, vamos registrar um novo tipo de postagem para gerenciar cada um dos estudos de caso.

Usando o tema padrão do WordPress Twenty Twenty, começaremos adicionando nosso tipo de postagem de estudo ao tema.

Primeiro, abra o arquivo functions.php do tema Twenty Twenty em seu editor de código. É aqui que você escreverá seu código de tipo de postagem.

O novo tipo de postagem deve ser registrado no início do arquivo functions.php. Isso é feito com um gancho init do WordPress usando add_action (). Quando você usa a função para register_post_type para adicionar o tipo de postagem, ela não funcionará corretamente sem o gancho de inicialização.

Então, comece com três argumentos para o register_post_type:

  1. Público – significa definir o tipo de postagem para que todos possam acessá-la.
  2. Descrição – Isso não é muito usado, mas ainda é bom ter.
  3. Rótulo – Este é um argumento que expandiremos um pouco mais tarde.
 true, // Allow access to post type
        'description' => 'Case studies for portfolio.', // Add a description
        'label' => $label // Set the primary label
    );
    register_post_type( $type, $arguments);
  );

Certifique-se de descarregar seus permalinks sempre que concluir uma alteração.

Personalização de etiquetas de tipo de postagem

O WordPress irá, por padrão, rotular o novo tipo de postagem como Postagem em toda a área administrativa do seu site. Mas você pode querer que os rótulos sejam marcados como o novo tipo de postagem chamado Estudo, não Postagem.

Para substituir os rótulos padrão de tipo de postagem, você precisará chamá-los manualmente.

Para definir rótulos corretamente, crie uma nova função que compila rótulos sem desordenar seu código de registro de tipo de postagem.

Basta adicionar a seguinte função ao seu tema para que ela possa ser usada no processo de registro de tipo de postagem:

 $plural,
      'singular_name' => $singular,
      'add_new_item' => "New $singular",
      'edit_item' => "Edit $singular",
      'view_item' => "View $singular",
      'view_items' => "View $plural",
      'search_items' => "Search $plural",
      'not_found' => "No $p_lower found",
      'not_found_in_trash' => "No $p_lower found in trash",
      'parent_item_colon' => "Parent $singular",
      'all_items' => "All $plural",
      'archives' => "$singular Archives",
      'attributes' => "$singular Attributes",
      'insert_into_item' => "Insert into $s_lower",
      'uploaded_to_this_item' => "Uploaded to this $s_lower",
    );
  

Então, no código de registro, você precisará chamar a função que acabamos de criar, xcompile_post_type_labels (). Use-o para seus marcadores e verifique sua área de administração.

 true,
      'description' => 'Case studies for portfolio.',
      'labels' => $labels // Changed to labels
    );
    register_post_type( $type, $arguments);
  );

Como está tudo até agora?

Ícone de menu e posição para tipos de postagem personalizados do WordPress

Desde que os Dashicons WP foram introduzidos, ficou muito fácil adicionar ícones de menu aos tipos de postagem.

Para fazer isso, primeiro defina o argumento menu_icon para um nome Dashicon. Para este exemplo, usaremos o ícone de mesa do computador usando o valor dashicons-desktop.

 true,
      'description' => 'Case studies for portfolio.',
      'menu_icon' => 'dashicons-desktop', // Set icon
      'labels' => $labels
    );
    register_post_type( $type, $arguments);
  );

Agora, se você deseja alterar a localização do item de menu, use o argumento menu_position. Este argumento terá um valor que começa com 0 e termina com 100. O valor escolhido listará um item de menu superior ou inferior na base do menu, com um valor 0 no topo e 100 na parte inferior.

Agora, devemos adicionar uma imagem em destaque ao novo tipo de postagem.

Para adicionar ou alterar os campos do formulário administrativo padrão para o seu tipo de postagem, como Imagem em destaque, Título e campos do Editor, use um argumento conjunto de suporte.

Existem muitas opções que você pode ativar e desativar usando o argumento suporte de tipo de postagem. Eles estão:

  • Campo de título
  • editor
  • Caixa do autor
  • Miniatura (imagem em destaque)
  • Excerto
  • Trackbacks
  • Os campos personalizados
  • Comentários
  • Revisões
  • Atributos de página
  • Pós-formatos

Para o seu novo tipo de postagem de estudo, você pode substituir as opções padrão do WordPress e adicionar sua própria imagem em destaque aplicando a opção de miniatura.

Antes de fazer isso, certifique-se de ter habilitado o suporte ao tema para pós-miniaturas. Isso é feito usando a função add-theme-support.

Requer apenas algumas linhas adicionais de código para usar o recurso de suporte e habilitará a imagem em destaque.

 $supports, // Apply supports
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'menu_icon' => 'dashicons-desktop',
      'labels' => $labels,
    );
    register_post_type( $type, $arguments);
  );

Poucos designers ou desenvolvedores de WordPress se aprofundam tanto nos tipos de postagem personalizados do WordPress. Agora é um bom momento para dar um tapinha nas costas.

A hierarquia dos tipos de postagem personalizados do WordPress

Embora as postagens do WordPress não possam ter postagens secundárias, o Pages pode. Um filho de uma página é considerado uma subpágina.

Se desejar, você pode fazer com que os tipos de postagem personalizados do WordPress usem uma hierarquia como Páginas usando o argumento hierárquico.

Para o nosso exemplo de tipo de postagem de Estudos, não precisaríamos necessariamente disso. Mas se você precisar disso para seu projeto específico, este é o código a ser usado:

 false, // Do not use hierarchy
      'supports' => $supports,
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'menu_icon' => 'dashicons-desktop',
      'labels' => $labels,
    );
    register_post_type( $type, $arguments);
  );

Como ativar a API REST para um novo tipo de postagem

API REST mudou o WordPress para sempre. Como tal, você vai querer que seu novo tipo de postagem seja capaz de acessar todos os recursos mais recentes do WordPress, como o Gutenberg.

Habilitar a API REST para novos tipos de post customizados do WordPress é tão simples quanto configurar o argumento show_in_rest como true.

Quando a API REST estiver habilitada, seu novo tipo de postagem começará a usar o Gutenberg (se ele também suportar o editor).

 true, // Enable the REST API
      'hierarchical' => false,
      'supports' => $supports,
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'menu_icon' => 'dashicons-desktop',
      'labels' => $labels,
    );
    register_post_type( $type, $arguments);
  );

Ao ativar a API REST no WordPress, você também poderá acessar o novo tipo de postagem como um objeto JSON por meio de endpoints específicos do WordPress.

Para visualizar o terminal para o tipo de postagem REST, use este / wp-json / wp / v2 / study.

Para alterar o nome base do seu tipo de postagem na URL para estudos em vez de estudo, use o argumento rest_base.

 'studies', // Change the REST base
      'show_in_rest' => true,
      'hierarchical' => false,
      'supports' => $supports,
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'menu_icon' => 'dashicons-desktop',
      'labels' => $labels,
    );
    register_post_type( $type, $arguments);
  );

E assim, a API é definida e Gutenberg é habilitado no tipo de postagem.

Como adicionar Gutenberg a tipos de postagem personalizados do WordPress

Lembre-se de que o Gutenberg não pode ser habilitado para tipos de postagem personalizados, a menos que seja compatível com o editor e tenha a API REST habilitada.

Depois de habilitado, para adicionar Gutenberg ao seu tipo de postagem, precisamos esquecer nosso tipo de postagem de estudo por um segundo e criar um novo tipo de postagem que chamaremos de Artigo.

Usaremos o tipo de postagem Artigo para habilitar o Gutenberg.

 'articles',
      'show_in_rest' => true, // Required for Gutenberg
      'supports' => ('editor'), // Required for Gutenberg
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'menu_icon' => 'dashicons-desktop',
      'labels' => $labels,
    );
    register_post_type( $type, $arguments);
  );

Você notará que os dois argumentos que você precisa para adicionar Gutenberg são:

'show_in_rest' => true,
'supports' => ('editor'),

Como remover o Gutenberg dos tipos de postagem personalizados do WordPress

Se você deseja remover Gutenberg de um de seus tipos de postagem, simplesmente adicione o gancho de ação use_block_editor_for_post_type no arquivo functions.php de seu tema.

Isso é feito com o seguinte código:

Isso desativa forçosamente Gutenberg do tipo de postagem.

Observe que nem todos os tipos de postagem personalizados do WordPress devem ser habilitados com o Gutenberg. Há momentos em que você pode querer usar o editor clássico do WordPress com tipos de postagem.

A função Desabilitar Gutenberg também é útil quando o tipo de postagem precisa estar acessível a partir da API REST.

Nesses casos, desativar Gutenberg é a direção que você deseja seguir.

Habilitando arquivos e configurando o front-end

Finalmente chegamos ao ponto em que é hora de abordar nosso design de front-end de postagens personalizadas do WordPress.

Há três coisas que você precisa fazer quando quiser configurar a lista de conteúdo de tipo de postagem personalizado do WordPress:

  1. Ative o argumento has_archive.
  2. Defina as regras de reescrita para uma forma plural do nome do tipo de postagem. No caso do exemplo deste guia, ele precisaria ser alterado para "estudos".
  3. Limpe seus permalinks.
 ( 'slug' => 'studies' ) // Change the archive page URL
      'has_archive' => true, // Enable archive page
      'rest_base' => 'studies',
      'show_in_rest' => true,
      'hierarchical' => false,
      'supports' => $supports,
      'public' => true,
      'description' => 'Case studies for portfolio.',
      'menu_icon' => 'dashicons-desktop',
      'labels' => $labels,
    );
    register_post_type( $type, $arguments);
  );

Com tudo isso pronto, é hora de começar a definir o tema do conteúdo do seu tipo de postagem personalizada. Por enquanto, usaremos o tema padrão Twenty Twenty. Claro, você pode usar qualquer tema que desejar.

Modelo de tipo de postagem personalizado do WordPress

Antes de criar um modelo de nosso tipo de postagem personalizado, vamos primeiro dar uma olhada na hierarquia de modelos do WordPress.

Se você ainda não está familiarizado com a maneira como o WordPress funciona com modelos, pense nisso como algo semelhante ao modo como o CSS lida com a especificidade. Embora não seja muito importante se prender aos detalhes, essa analogia simples o ajudará a ter uma melhor compreensão da hierarquia de modelos do WordPress.

Existem dois arquivos de modelo específicos para prestar atenção na hierarquia de modelos para nosso novo tipo de postagem de estudo.

Eles estão:

1. single-study.php - É para a página única quando um usuário navega para http://yourcoolsite.com/studies/your-cool-study-post para ver um único estudo.

2. archive-study.php - Isso é para a página de arquivo quando um usuário navega para http://yourcoolsite.com/studies para visualizar uma lista de todos os estudos.

O WordPress irá, por padrão, usar os modelos single.php e archive.php do seu tema para o design de front-end de tipos de postagem personalizados. No entanto, quando um modelo específico existe para tipos de postagem personalizados, single-study.php e archive-study.php sobrescreverão os padrões no WordPress.

Página Única

Como estamos usando o tema padrão do WordPress Twenty Twenty neste guia, primeiro precisamos criar o nome do arquivo single-study.php e trabalhar com ele.

No arquivo de modelo de tipo de postagem única, adicione este loop WordPress:

	
	

Página de arquivo

A página de arquivo para o tipo de postagem usa exatamente o mesmo processo da página única. A única diferença é que você usará o modelo archive-study.php em vez de single-study.php.

Para sua página de arquivo, você deseja que ela tenha um link para todos os estudos e mostre apenas o título de “Estudo”.

Claro, fique à vontade para se divertir com este código:


  

Archives by Month:

Archives by Subject:

Agora que sua página de arquivo está perfeitamente posicionada, parece que você terminou. Mas o que acontece se você tiver cem ou mais estudos de caso?

Como modificar a consulta da página de arquivo

As páginas de arquivo listarão apenas o número de itens que o administrador especifica em Configurações> Leitura. Freqüentemente, você não deseja que o mesmo limite seja aplicado aos tipos de postagem personalizados de seu blog principal ou feed de artigo.

Quando você quiser remover o limite de sua página de arquivo, simplesmente modifique a consulta principal usando o gancho pre_get_posts.

Depois de estar conectado a pre_get_posts, você poderá acessar e modificar o objeto WP_Query principal.

Para listar todos os estudos em sua página de arquivo, você precisará:

  1. Use o gancho pre_get_posts.
  2. Detecte se o método is_main_query é o que está executando a consulta principal.
  3. Detecte se você está na página de arquivo do estudo usando is_post_type_archive.
  4. Na WP_Query principal, defina posts_per_page como -1. Isso remove todos os limites de número e lista tudo.
is_main_query() && $query->is_post_type_archive('study')) 
      $query->set('posts_per_page', -1);
    
  );

Ao usar o gancho pre_get_posts, você está acessando diretamente a consulta SQL que o WordPress já está executando. A consulta dá acesso a postagens, páginas e seus tipos de postagem personalizados sem escrever nenhum SQL.

Isso é sempre um bônus.

Usando um plug-in para tipos de postagem personalizados do WordPress

Se você não é do tipo que se preocupa com o código e prefere criar e modificar seus tipos de postagem personalizados com um plug-in, IU do tipo de postagem personalizada fornece uma interface fácil de usar para registrar e gerenciar tipos de post personalizados (e taxonomias).

O plugin é bem avaliado e está configurado para funcionar com as versões 5.5 e superiores do WordPress.

Ele foi testado até 5,6.

Usando um gerador para tipos de postagem personalizados do WordPress

Quer uma maneira realmente fácil de obter seu código para tipos de postagem personalizados (ou taxonomias)? Verificação de saída Gerar WP. Você pode usar GenerateWP para criar uma ampla variedade de códigos personalizados. É muito simples também. Basta preencher o formulário correto e obter o código para copiar / colar.

Você pode até assistir ao webinar de treinamento sobre os tipos de postagem personalizados de alguns anos atrás, que apresentava o GenerateWP. A boa notícia é que os tipos de postagem personalizados existem há tanto tempo que o treinamento ainda é relevante. 🙂

Os tipos de postagem do WordPress são seu novo melhor amigo

Esteja você trabalhando com tipos de postagem do WordPress manualmente ou com um plug-in, é extremamente importante ter seu site equipado com o melhor plug-in de backup do WordPress disponível.

A edição do código sempre tem o potencial de causar conflitos que podem levar seu site a uma direção que você não pretendia.

Nesses casos, BackupBuddy e iThemes Security, um poderoso plugin de segurança para WordPress, virão em seu socorro e o levarão de volta ao trabalho em segurança.

Fonte