WordPress

Criar custom post type no WordPress – Tipo de Post Personalizado

Salve salve mundo, vou mostrar pra vocês como criar Custom Post Type no WorPress, que é um recurso muito bacana pra você usar no seu site/blog, ele permite criar tipo de post personalizado, categorias, tags e campos específicos próprio pra esse post-type, depois que você usar uma vez, vai perceber o quanto fica muito mais fácil e organizado fazer um site com bastante conteúdo.

Clique aqui e veja o exemplo no admin com o post-type Portifólio

Clique aqui e veja o exemplo do single

Porque criar custom post type no WordPress?

O custom post type, permite criar tipos de post personalizados, ou seja, no admin do WordPress, além de ter a aba Posts, você pode criar outras abas personalizadas, como por exemplo, Portifólio, você também pode criar categorias e tags específicas para esse tipo de post, além de criar campos personalizados para o conteúdo, por exemplo, vamos criar dois campos de texto (cliente e ano), e um dropdown (serviços) para que na hora de cadastrar o Portifólio, seja sempre inserido essas informações separado da descrição do job.

Como eu não sou apreciador de dividir um conteúdo em dois posts, fiz esse tutorial em post único, porém ensino como criar custom post type, criar categorias, tags e também campos personalizados, ficou meio extenso, te garanto que vale a pena ler até o final, então chega de lero-lero e vambora.

Criar custom post type no WordPress

1º Passo – Criando a função

Você pode criar esse tipo de post personalizado adicionando o código desse tutorial direto no functions.php, mas eu particularmente, gosto de deixar os arquivos do template organizados, então no exemplo, vou criar uma pasta chamada post-type dentro do meu tema, e o caminho da pasta é esse wp-content/themes/nome-do-tema/post-type.
Agora vamos criar um arquivo chamado portifolio.php e vou incluir uma chamada pra esse arquivo dentro do meu functions.php, você pode adicionar na ultima linha se preferir.

PHP

require( get_template_directory() . '/post-type/portifolio.php' );

Salve o functions.php e envie novamente pro seu servidor, agora vamos começar a colocar o código dentro do portifolio.php

Atenção todo processo abaixo (passo 1 ao 5) é feito dentro do arquivo portifolio.php que estamos criando.

PHP

<?php // Criando tipo de Post - Portifólio
add_action('init', 'portifolio_register');
function portifolio_register() {
$args = array();
register_post_type( 'portifolio' , $args );
}
?>

Agora vamos completar o array $args (do código acima), definindo diversas opções do nosso tipo de post personalizado que estamos criando.

PHP

$args = array(
'labels' => $labels, // define os rótulos como variáveis
'public' => true, // define se é o post é exibido no admin
'publicly_queryable' => true, //define se o post é exibido no frontend
'exclude_from_search' => false, // define se o post é buscável	
'menu_icon' => get_stylesheet_directory_uri() . '/img/Icon/iconPortifolio.png', // define o icone no Menu
'rewrite' => true, // define se o post deve ter a sua URL
'capability_type' => 'post', //define se é post ou page
'show_in_menu' => true, //define se é exibido no Menu
'has_archive' => true, // define se vai ter um archive do tipo de post
'hierarchical' => false, // define se vai ter hierarquia de páginas
'menu_position' => null, // define a posição no menu
'supports' => array('title','editor','thumbnail') // define que será exibido o título do post, o editor de conteúdo e a imagem destacada
);

É hora de definir os rótulos para esse tipo de post personalizado, então adicionamos o código abaixo, depois da seguinte linha

function portifolio_register() {

.

PHP

$labels = array(
'name' => _x('Portifolio', 'post type general name'), // define o nome geral
'singular_name' => _x('Portifolio', 'post type singular name'), // define o rótulo do post no singular
'add_new' => _x('Add Nova Imagem', 'portifolio item'), // define o rótulo ao adicionar novo item
'add_new_item' => __('Nova Imagem'), // define o rótulo da nova item
'edit_item' => __('Editar imagem'), //define o rótulo ao editar item
'new_item' => __('Nova Imagem'), // define o rótulo do novo item
'view_item' => __('Ver Imagem'), // define o rótulo para visualizar item
'search_items' => __('Buscar Imagem'), // define o rótulo para buscar item
'not_found' =>  __('Sem resultado'), //define o no rótulo para quano não houver item
'not_found_in_trash' => __('sem resultados na lixeira'), //define o rótulo quando não houver item na lixeira
'parent_item_colon' => ''
);

É isso, você acaba de criar custom post type no WordPress, porém esse é um tipo de post personalizado simples, abaixo vamos incluir outras opções, como categorias, tags, campos personalizados, vamos lá. Se você não precisa dessas opções (categorias, tags e campos personalizados) pule para o passo 5.

2º Passo – Criando Campos personalizados

Esse é um passo muito interessante, que abre um leque de possibilidades pra você criar custom post type no WordPress que atenda as necessidades de seu projeto, como no exemplo estamos criando um tipo de post personalizado, chamado de portifolio, eu vou criar 3 campos, serão eles: Cliente e Ano (text) e Tipo de Serviço (dropdown), vamos agora inserir a seguinte função para criarmos um box de conteúdo no admin, onde vão estar os campos, na hora de cadastrar o Job.

PHP

add_action("admin_init", "admin_init_portifolio");
function admin_init_portifolio(){
add_meta_box(
'portifolio_meta', // define o nome do metabox
 __('Informações do Job'), // define o título da Caixa de campos personalizados
 'portifolio_meta', // define a função que sera chamada para exibir o conteúdo
 'portifolio', // define que tipo de post vai ter esses campos personalizados
 'normal', // define o local da página de edição que será exibido a caixa
 'high' // define a prioridade de onde vai aparecer a caixa - high, normal ou low
 );
}

Chegou a hora de criar os campos, para isso vamos usar a seguinte função.
Obs: se quiser adicionar ou excluir campos, basta duplicar e renomear a linha 4 abaixo, de acordo com o nome do seu campo e do seu input

PHP

function portifolio_meta() {
  global $post;
  $custom = get_post_custom($post->ID);
  $cliente = $custom["cliente"][0]; // define o campo cliente | mesmo nome do input
  $ano = $custom["ano"][0]; // define o campo ano
  $servico = $custom["servico"][0]; // define o campo servico
  ?>
<p><label>Cliente:</label><br />
<input type="text" name="cliente" id="cliente" value="<?php echo $cliente; ?>" />
</p>
<p><label>Ano:</label><br />
<input type="text" name="ano" id="ano" value="<?php echo $ano; ?>" />
</p>
<p><label>Tipo de Serviço:</label><br />
<select name="servico">
<option <?php if($servico == "") echo ' selected = "selected" ' ?> checked value="">Escolha uma opção</option>
<option <?php if($servico == "Design") echo ' selected = "selected" ' ?> checked value="Design">Design</option>
<option <?php if($servico == "Desenvolvimento") echo ' selected = "selected" ' ?> value="Desenvolvimento">Desenvolvimento</option>
<option <?php if($servico == "SEO") echo ' selected = "selected" ' ?> value="SEO">SEO</option>
</select>
</p>
<?php
}

Já estamos com os campos criados, caso você não precise de categorias ou tags para seu tipo de post personalizado, pode pular para o passo 5.

3º Passo – Criando Taxonomia/Categoria

Para registrar uma taxonomia, é muito simples, basta inserir as linhas de código abaixo, depois de fechar nossa função criada no 1º passo, chamada portifolio_register.

PHP

register_taxonomy(
"categorias_portifolio", //nome da taxonomia 
"portifolio", // nome do tipo de conteúdo criado
array(
"hierarchical" => true, // define se vai ter hierarquia de páginas
"label" => "Categorias", // define o rótulo da categoria
"singular_label" => "Categoria", // define o rótulo da categoria no singular
"rewrite" => true // define se a categoria deve ter a sua URL
)
);

Pronto, você já pode criar taxonomias/categorias no seu tipo de post personalizado, se você não precisa de tags, pode pular para o passo 5.

4ª Passo – Adicionando Tags ao criar custom post type no WordPress

Para adicionar tags, vamos usar também o register_taxonomy e nosso código ficará assim:

PHP

register_taxonomy
(
'tags_portifolio', // define o nome da taxonomia
array('portifolio'), // define o nome do tipo de conteúdo criado
array(
'hierarchical' => false, // define se vai ter hierarquia de páginas
'labels' => array(
'name' => _x( 'Tags do Portifolio', 'tags_portifolio' ), // define o rótulo das Tags
'singular_name' => _x( 'Tag do Portifolio', 'tags_portifolio' ), //define o rótulo da tag no singular
'search_items' =>  __( 'Buscar Tags' ), // define o rótulo ao buscar tags
'all_items' => __( 'Todas as Tags' ), // define o rótulo para todas as tags
'edit_item' => __( 'Editar Tags' ),  // define o rótulo ao editar tags
'update_item' => __( 'Atualizar Tag' ), //define o rótulo para atualizar tags
'add_new_item' => __( 'Adicionar nova Tag' ), // define o rótulo para adicionar nova tag
'new_item_name' => __( 'Nova Tag' ), // define o rótulo da Nova Tag
'menu_name' => __( 'Tags de Feiras' ), // define o rótulo no Menu do admin
), 
'rewrite' => array('slug' => 'tags_portifolio', 'with_front' => true), // define se o post deve ter a sua URL
)
);

5º Passo – Criando a função para salvar o post

O código abaixo vai fazer com que as informações do post sejam gravadas no banco de dados, caso você tenha incluído ou retirado campos, basta editar as linhas que salvam os campos personalizados (linha 5 até a linha 7) se por um caso não criou, pode apagar o conteúdo da linha 4 até a linha 8.

PHP

add_action('save_post', 'save_details_portifolio');
function save_details_portifolio(){
  global $post;
// salva os campos personalizados
update_post_meta($post->ID, "cliente", $_POST["cliente"]);
update_post_meta($post->ID, "ano", $_POST["ano"]);
update_post_meta($post->ID, "servico", $_POST["servico"]);
// fim dos campos personalizados
};

Salve o arquivo portifolio.php e envie pra pasta wp-content/themes/nome-do-tema/post-type e vá testar no seu admin.

6º Passo: Criando single específico para custom-post-type

Para você criar um single para o tipo de post que não tenha campos personalizados é muito simples, basta você duplicar o conteúdo do seu arquivo single.php que fica em /wp-content/themes/nome-do-tema/ e criar um arquivo PHP chamado single-portifolio.php (portifolio é o nosso custom post type).

Relembrando que no exemplo, criamos 3 campos personalizados, que são: cliente, ano e serviço, então para exibir o conteúdo dos campos, a imagem e a descrição do post, devemos criar um arquivo chamado single.portifolio.php e inserir um loop básico, dentro dele as chamadas para os campos personalizados (meta_value), e nosso arquivo será preenchido assim:

PHP

<?php get_header(); //CHAMA O HEADER/CABEÇALHO ?>
<div id="primary" class="site-content">
   <div id="content" role="main">
    <?php while ( have_posts() ) : the_post(); //INÍCIO DO LOOP ?>
      <h2><?php the_title(); //EXIBE O TÍTULO DO POST ?></h2>
      <div><?php $cliente = get_post_meta($post->ID, 'cliente', true); echo '<strong>Cliente: </strong>' . $cliente; ?></div>
      <div><?php $ano = get_post_meta($post->ID, 'ano', true); echo '<strong>Ano: </strong>' . $ano; ?></div>
      <div><?php $servico = get_post_meta($post->ID, 'servico', true); echo '<strong>Serviço: </strong>' . $servico; ?></div>
      <div><?php the_content(); // EXIBE O CONTEÚDO DO POST ?></div>
    <?php endwhile; //FINAL DO LOOP ?>
   </div><!-- #content -->
 </div><!-- #primary -->
<?php get_sidebar(); // EXIBE A BARRA LATERAL ?>
<?php get_footer(); // EXIBE O FOOTER/RODAPE ?>

Salve o arquivo single-portifolio.php e envie pra pasta wp-content/themes/nome-do-tema/ e vá testar no seu frontend.

Clique aqui e veja o código completo no GitHub
Clique aqui e veja o exemplo no admin
Clique aqui e faça download do arquivo

Criar custom post type no WordPress – Custom Post Type

Como o tutorial ficou grande, nos próximos posts vou ensinar a criar um loop específico para custom post-type, a criar uma busca específica e outros macetes.

Edit:

Como fazer um loop para post type específico no WordPress

Como fazer uma busca para post type específico no WordPress

Pronto, você acabou de criar custom post type no WordPress, com campos personalizados, categorias e tags específicas para seu tipo de post. Foi fácil? Comentem!

Se o post te ajudou curte a página, não custa nada e me incentiva a continuar escrevendo.
Posts recomendados
Comentários

    21 respostas para Criar custom post type no WordPress – Tipo de Post Personalizado

    1. Renan escreveu em 6 de março de 2014

      Funcionou perfeitamente, muito bom, fácil e funcional… recomendo!!! só gostaria de personalizar o layout do post portfólio e adicionar uma galeria de fotos, alguma solução???

    2. Qcabeca escreveu em 9 de março de 2014

      Que bom Renan, você quer alterar o single.php? Caso seja essa a resposta, atualizei o tutorial, mostrando como criar o single-portfolio.php

      Abs

    3. darlon escreveu em 2 de maio de 2014

      excelente continue assim! posts de ótima qualidade o wordpress ajuda muitas pessoas inclusive Eu. te desejo sucesso com o blog, o conteúdo é nota 10!

    4. Qcabeca escreveu em 16 de maio de 2014

      Muito obrigado Darlon, fico feliz com esse feedback. Sucesso ae. Abraços

    5. André Zambelli escreveu em 24 de maio de 2014

      Excelente tutorial! Parabéns! No meu caso precisei colocar o flush_rewrite_rules( false ); após o register_post_type( ‘portifolio’ , $args ); para evitar a página 404 (page not found) no meu blog. [ ]s

    6. Qcabeca escreveu em 25 de maio de 2014

      Obrigado por compartilhar sua solução André, eu ainda não precisei disso, mas é interessante a solução. Valeu a visita e os elogios.

    7. Jorge::Calçado escreveu em 11 de julho de 2014

      Muito bom o post e muito bom seu site (já está nos favoritos). ainda não testei esse “tuto”, mas só pela leitura gostei.

      parabéns!

    8. Qcabeca escreveu em 11 de julho de 2014

      Obrigado pelos elogios Jorge. Sucesso pra você. Abs

    9. Alex escreveu em 11 de agosto de 2014

      ótima postagem, porém comigo deu problema no permalink, diz que a página não existe, mesmo após criar a página e pedir para ve-la no painel admin

    10. Qcabeca escreveu em 14 de agosto de 2014

      Opa Alex, você tentou, alterar os links permanentes? Vá em Configurações – Links Permanentes, mude a opção dos Links, salve e volte novamente para a original para ver se funciona. Sucesso.

    11. João Neto escreveu em 23 de setembro de 2014

      Parabéns pela postagem, muito bom.
      Gostaria de acrescentar uma opção de upload de imagens. como faço? abraço.

    12. Carlos escreveu em 7 de outubro de 2014

      Olá, montei e funcionou direitinho…só gostaria de inserir campos personalizados direto no post, tipo cidade, estado, cep, etc….como fazer usando o método enviado?
      Muito obrigado….

    13. Qcabeca escreveu em 8 de outubro de 2014

      Olá João, estou mega corrido aqui, desculpa a demora na resposta. Sugiro que você use Meta Box, Ok? Qualquer coisa, me avise.

    14. Qcabeca escreveu em 8 de outubro de 2014

      Boa Tarde Carlos, você deve alterar, modificando o passo 4, onde contém os inputs, criando os campos que você precisa. Depois altere a função que salva (passo 5), adicionando os inputs criados por você. Qualquer coisa, me avise, ok?

    15. Mauricio Coronado Jr escreveu em 5 de novembro de 2014

      poxa, demais, estava precisando mesmo disso. Mas como eu faço para ele ter um layout especifico, sem precisar alterar o single ? ou seja ele adotar um outro modelo de página? abs

    16. Qcabeca escreveu em 7 de novembro de 2014

      Opa Maurício, que bom que ajudou. Basta criar um arquivo single-nome-custom-post.php. Caso ele não funcione, altere os Permalinks no admin e depois volte ao padrão. Sucesso ae. Abraço

    17. Mauricio Coronado Jr escreveu em 26 de março de 2015

      Salve, eu novamente, estou usando este modelo para criar modelos de posts, mas quando acesso no admin ele nao me apresenta o box da imagem destacada. o que poderia ser?

    18. Qcabeca escreveu em 29 de março de 2015

      Maurício, no primeiro passo a linha de support está assim?

      'supports' =&gt; array('title','editor','thumbnail') // define que será exibido o título do 

      Sucesso ae. Abs

    19. Mauricio Coronado Jr escreveu em 1 de abril de 2015

      sim, esta deste jeito aí, até copiei o código novamente e colei, mas não mudou, será que pode ser algum conflito com o template que uso? Mas os posts tem normal a imagem destacada.

    20. Mauricio Coronado Jr escreveu em 1 de abril de 2015

      acho que é problema com o tema, quando altero de tema ele aparece a imagem destacada. ele tem como dizer para o thumbnail aparecer apenas para posts e portfolio, dele criado?

    21. Mauricio Coronado Jr escreveu em 2 de abril de 2015

      poxa consegui meu caro, yes, rs

      no function tinha isso
      add_theme_support(‘post-thumbnails’, array( ‘post’, ‘portfolio’, ));
      aí só acrescentei o nome do CPT ali no array e rolou.

      valeu abs

    Envie seu comentário.

    Seu email não será publicado