Wordpress - Aula 3 - Atividade 3 Explicação - Alura - Cursos Online de Tecnologia

201766 Wordpress: Aula 3 Atividade 3 Explicação | Alura Cursos online de tecnologia
03
Explicação
Custom Post Type do WordPress
Até o momento registramos os imóveis através de posts, cada post correspondendo a um imóvel diferente. Entretanto,
imagine a seguinte situação: desejamos vender nosso tema para alguém que tenha interesse em montar uma imobiliária.
Essa pessoa, em algum momento, desejará cadastrar novos imóveis, porém, com esse modelo isso não será feito de maneira
muito intuitiva. Imagine que toda vez que for necessário cadastrar um novo imóvel a pessoa terá que se dirigir ao "Posts >
Adicionar Novo".
Vamos pensar em algo, o WordPress é um gerenciador de conteúdo, ou seja, ele não gerencia apenas "Posts", mas também o
conteúdo que é qualquer coisa! Então, vamos customizar o conteúdo para acrescentar uma nova funcionalidade, que poderá
ser "Adicionar um novo imóvel" ao em vez de termos apenas "Posts".
Em nosso arquivo "functions.php" podemos utilizar o register_post_type , que é uma função que registra um novo
conteúdo. Essa função recebe dois parâmetros, o primeiro será "imovel", pois é justamente isso que queremos que seja
registrado e o segundo deve ser uma con𐴀guração que, na verdade, será uma série de con𐴀gurações, uma "Array", um args .
Então, a variável $args que deve acompanhar isso deve ser pública, por isso, acrescentamos o public , que por sua vez deve
ser true . Teremos o seguinte:
<?php
add_theme_support( 'post‐thumbnails' );
$args = array(
'public' => true,
);
register_post_type( 'imovel', $args);
Bom, se dermos um "reload" podemos perceber que o nome "Posts" 𐴀ca um tanto inadequado, vamos renomear isso,
portanto, a array deve receber uma label , para que possamos "dar nomes aos bois". Como teremos diversos nomes o
label deverá receber uma variável, a $labels . E como essa label é uma "array" temos que declarar isso, então, $label =
array . Nessa $label devemos ter um nome que será o Imóveis , isto é, 'name' => 'Imóveis' . Como temos um nome no
plural temos que ter ele no singular também, 'name_singular' => 'Imóvel' . Teremos o seguinte:
<?php
$labels = array(
'name' => 'Imóveis',
'singular_name' => 'Imóvel'
);
$args = array(
'labels' => $labels,
https://cursos.alura.com.br/course/wordpresscriacaotemazero/task/19125 1/15
'public' => true

);
Dando um reload veremos que temos em nossa página o "Imóveis". Entretanto, se acessarmos qualquer imóvel que já temos
registrado e abrirmos a aba de edição dele, veremos que estará escrito "Editar post", o que não faz muito sentido, não é
mesmo?!
Bom, temos que alterar isso também! Mas, olhando o "Editar post" podemos 𐴀car em dúvida em relação a sua classe e para
nos auxiliar podemos consultar a documentação, não é necessário e, na verdade, ninguém merece 𐴀car decorando mil
detalhes. Vamos acessar o https://codex.wordpress.org/Function_Reference/register_post_type
(https://codex.wordpress.org/Function_Reference/register_post_type) e observar o que ele nos diz sobre a função
register_post_type :
Bom, primeiro temos a informação sobre o que a função recebe, por exemplo, os argumentos, que são as labels e temos
diversos tipos de "labels". Podemos testar a add_new_item que aparece na documentação, para isso basta copiar a função e
acrescentar ela em nosso arquivo "function.php". Esse novo item se chamará "Adicionar novo Imóvel" :
<?php
$labels = array(
'singular_name' => 'Imóvel',
'add_new_item' => 'Adicionar novo Imóvel'
);
$args = array(
'public' => true,
);
Dando um "reload" em nossa página teremos na aba de edição o título modi𐴀cado para "Adicionar novo Imóvel":
E, assim como 𐴀zemos o add_new_item , podemos usar o edit_item para modi𐴀car algum título de um imóvel que nós já
tenhamos criado. Usaremos 'edit_item' => Editar Imóvel
$labels = array(
'singular_name' => 'Imóvel',
'add_new_item' => 'Adicionar novo Imóvel',
'edit_item' => 'Editar Imóvel'
);
Ou seja, o que 𐴀zemos é basicamente dar nomes aos bois!
Bom, não vamos 𐴀car modi𐴀cando muito mais isso. Mas, precisamos melhorar um aspecto que é simples, no name temos
"Imóveis" escrito, imagine o caso de que em seis meses tenhamos o desejo de alterar esse nome para "Casas", teríamos que
modi𐴀car isso em diversos lugares! A melhor coisa para lidar com essa situação é isolar o código! Ou seja, criamos uma nova
variável, a $nomeSingular que deve ser igual a "Imóvel" e se temos o singular, também temos o plural, por isso, criamos a
$nomePlural que deve ser igual a Imóveis e alteramos isso na label também! O name será igual a $nomePlural e o
name_singular será igual a $nomeSingular e para concatenar no add_new_item vamos colocar o ponto (.) após o 'Adicionar
novo' e escrevemos o $nomeSingular e no edit_item teremos o mesmo, Editar , . e $nomeSingular :
<?php
$nomeSingular = 'Imóvel';
$nomePlural = 'Imóveis';
$labels = array(
'name' => $nomePlural,
'singular_name' => $nomeSingular,
'add_new_item' => 'Adicionar novo' . $nomeSingular,
'edit_item' => 'Editar ' . $nomeSingular,
);
$args = array(
'public' => true,
);
Com isso já teremos nossa página funcionando!
Bom, agora que já conseguimos renomear diversos aspectos da página podemos voltar na documentação e veri𐴀car outras
coisas que podemos utilizar. Podemos adicionar uma description que será igual ao texto "Imóveis da imobiliária Malura".
<?php
$description = 'Imóveis da imobiliária Malura';
E, como isso é um arg devemos acrescentá-lo, também, junto aos demais args :
$args = array(
'public' => true,
'description' => $description
);
E temos outros diversos parâmetros! Os essenciais já conseguimos utilizar! Falta observarmos uma questão em nossa página
"Painel do Administrador", repare que o desenho que acompanha o "Móveis" é o mesmo que acompanha os "Posts" e,
portanto, vamos alterar esse símbolo para algo que combine mais. Se buscarmos informações na documentação
encontraremos o "menu_icon" que é uma string opcional que podemos passar para que se coloque o ícone que desejarmos.
Esse ícone nós buscaremos em dashicon wordpress que podemos encontrar no seguinte site
https://developer.wordpress.org/resource/dashicons/#book (https://developer.wordpress.org/resource/dashicons/#book).
Vamos escolher para ilustrar a opção de "Imóveis" o símbolo da casinha:
Basta para colocar esse ícone dar um "Ctrl+C" no nome e adicionar ele junto a string do menu_icon . Teremos o seguinte:
$args = array(
'public' => true,
'description' => $description,
'menu_icon' => 'dashicons‐admin‐home'
);
Dando um "reload" teremos o ícone inserido junto ao texto "Imóveis":
Bom, agora que já conseguimos inserir tudo o que queríamos vamos prestar mais atenção no código em si! Queremos que ele
𐴀que mais organizado e menos confuso. Vamos isolar esse código usando funções, vamos adicionar uma function abaixo do
add_theme_support . Essa função estará "cadastrando_post_type_imoveis" e, agora, jogaremos esse código dentro da função:
<?php
function cadastrando_post_type_imoveis() {
$description = 'Imóveis da Imobiliária Malura';
$labels = array(
'name_singular' => $nomeSingular,
'add_new_item' => 'Adicionar novo ' . $nomeSingular,
'edit_item' => 'Editar ' . $nomeSingular
);
$args = array(
'public' => true,
);
register_post_type( 'imovel', $args );

}
Entretanto, se dermos um "reload" na página teremos que o "Tipo de post inválido". O WordPress não chama a função
sozinho, é preciso que nós digamos para ele fazer isso. Podemos utilizar uma função própria do WordPress que é a
add_action e essa função recebe dois parâmetro, o segundo parâmetro é aquilo que desejamos que seja executado, no caso,
'cadastrando_post_type_imoveis' e o primeiro parâmetro é quando isso deve ser executado, no caso, quando foi iniciado
'init' . Teremos o seguinte que deve ser acrescentando após a chave da function fechar:
add_action('init', 'cadastrando_post_type_imoveis');
Teremos:
<?php
$labels = array(
);
$args = array(
'public' => true,
);
register_post_type( 'imovel', $args );
add_action('init', 'cadastrando_post_type_imoveis');
Bom, falta ainda algo, o nosso thumbnail . Vamos consultar mais uma vez a documentação, observe que nós temos o
supports :
O supports é outra coisa que 𐴀ca dentro do args . Temos que criar também sua array e passaremos para ele um title ,
um editor e, por 𐴀m, o thumbnail :
$supports = array(
'title',
'editor',
'thumbnail'
);
$args = array(
'public' => true,
'supports' => $supports
);'
Se testarmos isso teremos no "Imóveis" que criamos tudo o que desejámos, o título, a descrição e também o thumbnail .
Podemos, portanto, acrescentar as imagens que queremos em nossos imóveis.
Nosso código no arquivo "functions" 𐴀cará da seguinte maneira:
<?php
$labels = array(
);
$supports = array(
'title',
'editor',
'thumbnail'
);
$args = array(
'description' => $descricao,
'public' => true,
'menu_icon' => 'dashicons‐admin‐home',
'supports' => $supports
);

}
add_action('init', 'registrar_imoveis');
Até o momento vimos como criar os Custom Post Type do WordPress.
Listagem de imóveis e single.php
Se formos na "Home" encontraremos três imagens que representam três imóveis diferentes.
A pergunta é: Essas imagens são Posts ou Imóveis?
Para veri𐴀carmos isso podemos realizar um pequeno teste, basta apagarmos tudo o que temos no "Posts" e removendo os
três elementos veri𐴀caremos que não temos mais nada em nossa página, ou seja, todos aqueles itens eram "Posts". Temos
que deixar claro para o "WordPress" que ele não deve puxar os "posts" do "banco de dados", mas sim os "imóveis".
Para fazer isso é necessário ir no arquivo "index.php" que é onde está rodando o loop e temos que falar para ele que são os
imóveis que devem ser pegos. Para isso, usamos um objeto do WordPress que é o WP_Query que é justamente o que faz as
buscas do loop e temos que passar para ele alguns argumentos, $args . Digitaremos loop = $new WP_Query( $args ); . E,
agora, temos que de𐴀nir os argumentos portanto, escrevemos $args = array e vamos passar uma única opção para ele,
post_type => 'imovel' . Teremos o seguinte:
<h1>Bem vindo!</h1>
<?php
$args = array( 'post_type' => 'imovel' );

$loop = new WP_Query( $args );
if( have_posts() ) { ?>
<ul class="imoveis‐listagem">
<?php while( have_posts() ) {
the_post();
?>
/...
}
</ul>
Mas, observe, o have_posts deverá estar se referenciando aquilo que estamos 𐴀ltrando, portanto, if( $loop‐>have_posts()
) e faremos o mesmo com o php while( $loop‐>have_posts() ) e, por 𐴀m, $loop‐>the_post
<h1>Bem vindo!</h1>
<?php
$args = array( 'post_type' => 'imovel' );

$loop = new WP_Query( $args );
if( $loop‐>have_posts() ) { ?>
<ul class="imoveis‐listagem">
<?php while( $loop‐>have_posts() ) {
$loop‐>the_post();
?>
/...
}
</ul>
Dando um "reload" teremos as três imagens aparecendo em nossa tela!
Bom, agora, imagine-se como o usuário dessa página, é bem provável que ao ver um imóvel que lhe agrade que você tenha o
desejo de clicar nele e, logicamente, deverá abrir uma nova janela. Por enquanto não temos nenhum link que esteja
relacionado a qualquer uma das opções, mas se você deseja veri𐴀car como está a página que abrirá ao clicar você pode
observar em "Imoveis > Casa de Argila". Logo abaixo do campo título podemos encontrar um "Link Permanente" que nos
redirecionará para essa página, porém, clicando nesse link seremos redirecionados para o "index". Isso acontece pois ainda
não criamos essa página.
Podemos criar um novo arquivo que salvaremos com o nome de "single.php", que é o nome que o "WordPress" dá para as
páginas que contêm apenas um "Post" . Após criarmos essa página poderemos acessar ela através do "Link permanente" e
abrirá uma página vazia.
Podemos acrescentar algum código no "single.php". Por padrão temos que adicionar a tag php e get_header e get_footer .
No miolo pediremos para ele renderizar algo, basicamente, o imóvel a que ele se refere. Então, no "meio" iremos rodar o
loop novamente. Abrimos uma nova tag php e se tiver post, if( have_posts() ) e enquanto tiver posts,
while(have_posts() ) deve ser pego o the_post . Teremos o seguinte:
<?php get_header(); ?>
<?php
if( have_posts() ) {
while( have_posts() ) {
the_post();
?>
}
}
?>
<?php get_footer(); ?>
Bom, para pegarmos o conteúdo e o título colocamos as tags php acompanhadas de the_title e the_content , cada uma
em uma linha. Ainda, podemos acrescentar a tag php com o the_post_thumbnail . Teremos o seguinte:
<?php
the_post();
?>
<?php the_post_thumbnail(); ?>
<?php the_title(); ?>
<?php the_content(); ?>
<?php
}
}
?>
Dando um "reload" teremos o seguinte:
Falta apenas melhorarmos o HTML desse arquivo. Podemos envolver tudo em uma main , um article e organizarmos a
dentação da maneira adequada. Já vamos acrescentar a tag html para que possamos estilizar isso posteriormente,
colocando nosso CSS. Na linha de cima vamos envolver o the_post_thumbnail com a div class="single‐imovel‐thumbnail" .
O the_title deverá ser separado utilizando o div class="container" que envolvera ele e também o the_content . Ainda, o
the_title terá uma seção especial, uma section class que deverá ser igual a chamada‐principal , fecharemos a section
após o the_title . No conteúdo, criaremos uma outra section que deverá ser igual a informação geral do imovel, section
class="single‐imovel‐geral" e acrescentamos, ainda, mais uma div class="single‐imovel‐descrição" . Teremos:
<main>
<article>
<?php
the_post();
?>
<div class="single‐imovel‐thumbnail">
</div>
<div class="container">
<section class="chamada‐principal">
<?php the_title(); ?>
</section>
<section class="single‐imovel‐geral">
<div class="single‐imovel‐descrição">
<?php the_content(); ?>
</div>
</section>
</div>
<?php
}
}
?>
</article>
</main>
Agora que esse trecho está pronto precisamos acrescentar o CSS. Lembrando que ele já esta pronto, então, basta abrir o
arquivo "inicial.css" e copiar tudo o que estiver escrito que contenha o single até o comentário "PAGE" e colarmos em nosso
arquivo "style.css" ao 𐴀nal de tudo:
Dando um "reload" teremos uma página que estará melhor organizada. Agora, podemos colocar uma data em que o post foi
criado. Para isso, podemos ir no "single.php" e podemos acrescentar, dentro do container , uma função que inicia com a tag
php e usamos a função the_date . Envolvemos isso um span class para que a data seja mostrada e isso será igual a single‐
imovel‐data , span class="single‐imovel‐data" . Teremos o seguinte:
<section class="single‐imovel‐geral">
<div class="single‐imovel‐descricao">
<?php the_content();?>
</div>
</section>
<span class="single‐imovel‐data">
<?php the_date(); ?>
</span>
Se dermos um "reload" podemos veri𐴀car que teremos nossa data inserida:
Vamos retornar a "Home" e pensar em algo. Qual seria o ⅕�uxo natural do usuário ao acessar a página inicial de nosso site?
Provavelmente, seria clicar em alguma das opções. Então, no "index.php" vamos envolver o conteúdo da li para que uma
vez que clicarmos em qualquer parte do site, sejamos redirecionados para uma outra página. Envolveremos isso usando um
a href que por enquanto será vazio, ou seja, igual a # .
Mas, não temos como saber de cabeça quais são os elementos que temos em nossa página, qual é "Casa na Praia", "Casa de
Madeira" ou "Casa de Argila", é preciso que um link seja gerado automaticamente. É necessário que isso venha do WordPress,
usaremos uma tag, php e junto uma função the_permalink e passaremos isso para a a href , assim ele pegará um link
permanente do imóvel ou post. Teremos:
<li class="imoveis‐listagem‐item">
<a href="<?php the_permalink(); ?">
<h2><?php the_title(); ?></h2>
<div><?php the_content(); ?></div>
</a>
</li>
E, dando um "reload" em nossa página, seremos redirecionados para uma nova página!

Wordpress - Aula 3 - Atividade 3 Explicação - Alura - Cursos Online de Tecnologia

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Wordpress - Aula 3 - Atividade 3 Explicação - Alura - Cursos Online de Tecnologia

Enviado por

Direitos autorais:

Formatos disponíveis

2017­6­6 Wordpress: Aula 3 ­ Atividade 3 Explicação | Alura ­ Cursos online de tecnologia

Custom Post Type do WordPress

register_post_type( 'imovel', $args);

'public' => true

register_post_type( 'imovel', $args);

register_post_type( 'imovel', $args);

Ou seja, o que 𐴀zemos é basicamente dar nomes aos bois!

novo' e escrevemos o $nomeSingular e no edit_item teremos o mesmo, Editar , . e $nomeSingular :

Com isso já teremos nossa página funcionando!

Dando um "reload" teremos o ícone inserido junto ao texto "Imóveis":

register_post_type( 'imovel', $args );

register_post_type( 'imovel', $args );

Nosso código no arquivo "functions" 𐴀cará da seguinte maneira:

register_post_type( 'imovel', $args);

Até o momento vimos como criar os Custom Post Type do WordPress.

Listagem de imóveis e single.php

A pergunta é: Essas imagens são Posts ou Imóveis?

$args = array( 'post_type' => 'imovel' );

$args = array( 'post_type' => 'imovel' );

Dando um "reload" teremos as três imagens aparecendo em nossa tela!

while(have_posts() ) deve ser pego o the_post . Teremos o seguinte:

<?php get_header(); ?>

<?php get_footer(); ?>

<?php get_header(); ?>

<?php get_footer(); ?>

Dando um "reload" teremos o seguinte:

<?php get_header(); ?>

<?php get_footer(); ?>

imovel‐data , span class="single‐imovel‐data" . Teremos o seguinte:

Se dermos um "reload" podemos veri𐴀car que teremos nossa data inserida:

Você também pode gostar

201766 Wordpress: Aula 3 Atividade 3 Explicação | Alura Cursos online de tecnologia