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

201766 Wordpress: Aula 6 Atividade 4 Explicação | Alura Cursos online de tecnologia
04
Explicação
Criação de Meta-Boxes
Já conseguimos fazer diversas coisas em nosso site da Imobiliária Malura. Vamos acrescentar outras informações acerca do
imóvel, como preço, vagas na garagem, quantidade de cômodos e etc.
Vamos em "Painel > Imóveis > Editar Imóvel" e acrescentaremos mais dessas outras informações, se tem vaga na garagem, o
preço, qual a quantidade de quartos e de banheiros. Ao pensar em introduzir essas informações o mais lógico é inseri-las na
parte de administrador:
Podemos inserir uma caixa abaixo do formulário já existente, que nos possibilite editar as informações. O WordPress chama
essas caixas de "meta-boxes" que contêm informações sobre os "post" type. O que criaremos é um "meta-box" dos imóveis.
Para inserir isso realizaremos modiᵔcações no "functions.php". Vamos inserir essas caixas utilizando a função add_meta_box
e passaremos diversos parâmetros. Como é uma quantidade grande de parâmetros que iremos passar podemos consultar a
documentação online no seguinte link: https://developer.wordpress.org/reference/functions/add_meta_box/
(https://developer.wordpress.org/reference/functions/add_meta_box/). Assim teremos o seguinte:
o primeiro parâmetro será informacoes‐imoveis ;

o segundo é um título que acompanhará a caixa. Nosso título será: Informações do Imóvel ;
o terceiro é o callback que é o conteúdo desejado, usamos a função preenche_conteudo_informacoes_imovel ;

o quarto é o screen , ou seja, em qual tela isso será mostrado, no caso, a tela imóvel, por isso ele recebe a slug imovel ;
o quinto é o context , ou seja, qual o contexto em que a caixa estará inserida. Em nosso caso ele será " normal ";
https://cursos.alura.com.br/course/wordpresscriacaotemazero/task/19243 1/12
o sexto será a priority que pode ser alta ou baixa. Se tivessem várias caixas e nós escolhêssemos a prioridade como
"alta" a nossa iria para o topo da lista. A nossa prioridade será "high". Obs: se fossemos colocar uma prioridade normal
ela deveria ser escrita com "default";
Teremos o seguinte código ao ᵔnal do arquivo "index.php":
add_meta_box(
'informacoes‐imoveis',
'Informacoes do Imóvel',
'preenche_conteudo_informacoes_imovel',
'imovel',
'normal',
'high'
);
Ele estará situado na seguinte parte do arquivo:
Agora, temos que deᵔnir quando o add_meta_box será rodado e para fazer isso, antes, temos que isolar o código adicionando
uma function que será a registra_meta_boxes . Para chamar isso podemos usar uma função que será a add_action e
rodaremos ele quando tivermos o início da execução, por isso, usamos o init e ele rodará o registra_meta_boxes . Teremos:
function registra_meta_boxes() {
add_meta_box(
'informacoes‐imoveis',
'Informacoes do Imóvel',
'preenche_conteudo_informacoes_imovel',
'imovel',
'normal',
'high'
);
}
add_action('init', 'registra_meta_boxes');
Se dermos um "reload" nesse instante, entretanto, ele dirá que não existe a função add_meta_boxes . O WordPress possui
tarefas a serem executadas antes dos "meta-boxes" é por isso que eles não podem ser executados no ínicio, conforme
tínhamos escrito, no init . Isso deve ser executado quando a página estiver sendo renderizada e os demais "meta-boxes"
estiverem sendo preparados. O momento certo para ser renderizado é o add_meta_boxes e é isso que adicionamos no
add_action .
Se dermos um "reload" ele ainda não encontrará a função de "callaback", pois, nós passamos a função
preenche_conteudo_informacoes_imovel , mas nós não criamos ela. Assim, fora da função registra_meta_boxes nós
criaremos a function que será a preenche_conteudo_informacoes_imovel :
function preenche_conteudo_informacoes_imovel() {
function registra_meta_boxes() {
.../
Falta colocarmos algo dentro da function preenche_conteudo_informacoes_imovel . Como queremos preencher o conteúdo da
página, utilizaremos o HTML, mas já pegaremos um código pronto para isso que está em nossos arquivos sob o nome
"funcao_metabox.php", copiaremos o seu conteúdo:
E colaremos ele em "function.php" :
O que faremos é apenas fechar a tag php ao ᵔnal da primeira linha da function e a abrimos a tag no ᵔnal para que se
continue a renderização:
function preenche_conteudo_informacoes_imovel() { ?>
/...
<?php }
Dando um "reload", por ᵔm, teremos o conteúdo:
No HTML que inserimos temos diversas classes, labels e inputs que estilizam nossa caixa. Vamos compreender,
rapidamente, o papel do input id="maluras‐preco‐input" que é responsável pelo preço a ser inserido, nós passamos para ele
um nome, o preco_id . Para o input seguinte, o input id="maluras‐vagas‐input" o seu nome é vagas_id , por ᵔm, temos os
últimos dois inputs que são o quartos_id e o banheiros_id . O código que escrevemos, se observamos no "Expect
Elements" já está em um formulário, então, não há a necessidade de abrir um formulário novo.
E através dessa caixa que inserimos já podemos colocar as informações de preço, quantidade de vagas, banheiros e quartos.
Vamos fazer um teste inserindo quais queres números:
Entretanto, ao tentarmos salvar essas informações veremos que elas terão sumido. Falta falarmos para o WordPress que ele
deve salvar essas informações. Veremos isso na sequência!
Salvando no Banco de Dados
Agora, temos que dar um jeito de fazer com que o formulário salve as informações que inserirmos. Essas informações devem
ser armazenadas no "Banco de Dados" e quem faz a comunicação com ele é o próprio WordPress, por isso, no arquivo
"function.php", ao ᵔnal, nós chamaremos o update_post_meta . Como queremos atualizar os dados de preço, por exemplo,
temos que passar a chave dele, ou seja, passamos em uma string o preco_id , o segundo parâmetro que passaremos deve
ser o local onde as informações serão enviadas, faremos isso utilizando uma variável, o $_POST , cujo campo é o preco_id :
add_action('add_meta_boxes', 'registra_meta_boxes');
update_post_meta('preco_id', $_POST['preco_id']);
Como temos outras informações que queremos que sejam guardadas nós iremos copiar o que acabamos de escrever e colar
mais três vezes, alterando apenas as informações que agora deverão se referir também a vagas na garagem, banheiros e
quartos:
add_action('add_meta_boxes', 'registra_meta_boxes');
update_post_meta('vagas_id', $_POST['vagas_id']);
update_post_meta('banheiros_id', $_POST['banheiros_id']);
update_post_meta('quartos_id', $_POST['quartos_id']);
Esse código não pode ᵔcar perdido, por isso, isolamos ele em uma função atualiza_meta_info e "dentamos" ele
corretamente. Mas, o WordPress não é capaz de chamar a função sozinho, por isso, usamos o add_action que recebe dois
parâmetros, o primeiro é a função atualiza_meta_info e o segundo é quando essa ação deve ser executada, quando
salvarmos o post, por isso, save_post . Teremos o seguinte:
function atualiza_meta_info() {
update_post_meta('quartos_id', $_POST['quartos_id']);
}
add_action('save_post', 'atualiza_meta_info');
Acrescentaremos o if para dizer que: "se existir $_POST o seu valor deve ser igual a preco_id e nesse caso a informação
deve ser salva". Observe:
if( isset($_POST['preco_id']) ) {
}
E faremos o mesmo com as demais linhas:
function salvar_meta_info_imoveis( $post_id ) {

}
if( isset($_POST['vagas_id']) ) {
}
if( isset($_POST['banheiros_id']) ) {
}
if( isset($_POST['quartos_id']) ) {
update_post_meta( $post_id, 'quartos_id', $_POST['quartos_id']);
}
}
add_action('save_post', 'salvar_meta_info_imoveis');
Mas, ainda não conseguimos salvar os novos dados inseridos no banco de dados! Podemos observar o banco de dados usando
o "localhost/phpmyadmin" no navegador. Teremos o seguinte:
Clicando no "wp_maluras" nos deparamos com uma série de tabelas. Mas, qual será a tabela que corresponde aos posts que
criamos sobre os imóveis?
É a "wp_postmeta", as "meta informações do post". Clicando nisso teremos o seguinte:
Essa página traz diversas informações, como o valor, id e etc. Vamos observar as últimas linhas dessa tabela:
Podemos veriᵔcar que temos as informações do nosso formulários, como o preço, quartos, banheiros e vagas! Na verdade,
podemos perceber que os valores estão sendo guardados, assim, o que falta é apenas mostrá-los em algum lugar! Podemos
fazer isso no input , nas caixas que temos referentes aos dados:
Para fazer isso no código temos que buscar o HTML no arquivo "function.php". Nele podemos observar os input que temos
e para inserir um valor nisso devemos passar um atributo, o value , e como esse valor vem do banco de dados do WordPress
temos que utilizar php . Assim, inserimos o value , mas temos que puxar os valores do código php , por isso abaixo do
function informacoes_imovel_view temos que criar uma variável para salvar essas informações, nos chamaremos ela de
$imoveis_meta_data que receberá o get_post_meta e temos que passar qual será o "post". Por isso, passamos $post‐>ID e
para a função precisamos passar o $post :
function informacoes_imovel_view( $post ) {

$imoveis_meta_data = get_post_meta( $post‐> ID );
?>
/...
Agora, já podemos retornar ao value e puxar o valor dele, que será o $imoveis_meta_data e passamos em array o que
desejamos pegar dele, no caso, preco_id e como passamos apenas essa informação sua posição será zero e isso é algo que
demarcaremos com [0] :
value="<?php $imoveis_meta_data['preco_id'] ?>">
Ao todo teremos:
<div class="maluras‐metabox‐item">
<label for="maluras‐preco‐input">Precço:</label>
<div class="input‐addon‐wrapper">
<span class="input‐addon">R$</span>
<input id="maluras‐preco‐input" class="maluras‐metabox‐input" type="number" name="preco_id" value="
</div>
Dando um "reload" na página teremos, por ᵔm o valor guardado! Mas, nós apenas chamamos o valor do value do preco_id ,
assim, temos que registrar para os demais para que seus valores sejam salvos, como no vagas_id :
<label for="maluras‐vagas‐input">Vagas:</label>
<input id="maluras‐vagas‐input" class="maluras‐metabox‐input" type="number" name="vagas_id" value="
</div>
E para o quartos _id :
<label for="maluras‐quartos‐input">Quartos:</label>
<input id="maluras‐quartos‐input" class="maluras‐metabox‐input" type="number" name="quartos_id"
value="<?= $imoveis_meta_data['quartos_id'][0]; ?>">
</div>
E, por ᵔm, banheiros_id :
<label for="maluras‐banheiros‐input">Banheiros:</label>
<input id="maluras‐banheiros‐input" class="maluras‐metabox‐input" type="number" name="banheiros_id"
value="<?= $imoveis_meta_data['banheiros_id'][0]; ?>">
</div>
Agora, dando um "reload" já podemos perceber que as informações serão guardadas. Mas, ainda temos algo um pouco
estranho que é o preço em um formato esquisito. Vamos ajeitar isso usando o number_format que o php possui por padrão.
Assim, passamos ao preco_id o 2 , de duas casas decimais, a ',' para marcar o valor e o . para demarcar de três em três
casas decimais. Teremos:
<label for="maluras‐preco‐input">Precço:</label>
<div class="input‐addon‐wrapper">
<span class="input‐addon">R$</span>
<input id="maluras‐preco‐input" class="maluras‐metabox‐input" type="number" name="preco_id"
value="<?= number_format($imoveis_meta_data['preco_id'])[0], 2, ','); ?>">
</div>
</div>
E dando um "reload" teremos ᵔnalmente o preço no formato que queríamos:
Mas, ainda nos deparamos com algo um pouco esquisito. Na function salvar_meta_info_imoveis , o $_POST ainda está vindo
cru:
Para corrigir problemas de string os desenvolvedores inventaram as funções de "higienização", ou sanitárias, por isso, vamos
introduzir isso em nosso código! A sanitize_text_field , ou seja, para não deixar coisas estranhas entrarem no banco de
dados. Teremos o seguinte:
function salvar_meta_info_imoveis( $post_id ) {

update_post_meta( $post_id, 'preco_id', sanitize_text_field( $_POST['preco_id']) );
}
if( isset($_POST['vagas_id']) ) {
update_post_meta( $post_id, 'vagas_id', sanitize_text_field( $_POST['vagas_id']) );
}
if( isset($_POST['banheiros_id']) ) {
update_post_meta( $post_id, 'banheiros_id', sanitize_text_field( $_POST['banheiros_id']) );
}
if( isset($_POST['quartos_id']) ) {
update_post_meta( $post_id, 'quartos_id', sanitize_text_field( $_POST['quartos_id']) );
}
}
add_action('save_post', 'salvar_meta_info_imoveis');
Dando um "reload" teremos tudo funcionando da maneira como queríamos e usamos o sanitize para barrar que coisas
erradas cheguem ao banco de dados!
Fim
Chegamos a parte ᵔnal do curso. Já ᵔzemos um longo percorrido em nosso site! Nosso menu do administrador está
funcionando da maneira que desejávamos, mas apenas para nós administradores! Pois, ao inserir alguma informação sobre
um imóvel, isso acaba não sendo atualizado na página.
Temos que passar essas informações para a "view", assim, o usuário poderá ter acesso a essas informações. Para fazer isso
temos que editar o arquivo "single.php" que é o que dita as regras a respeito do que o usuário poderá visualizar.
No "single.php" temos a missão de fazer com que as "meta-informações" que estão no banco de dados apareçam nesse
arquivo. Se pararmos para pensar lembramos que já ᵔzemos isso no arquivo "functions.php" usando o "get_post_meta".
Podemos recorrer ao mesmo método. Colocamos o mesmo código no "single.php":
Mas para que isso possa ser acessado é preciso que antes seja salvo em uma variável. A variável nós nomearemos de
$imoveis_meta_data . Teremos o seguinte:
<?php $imoveis_meta_data = get_post_meta( $post‐>ID ); ?>
Passamos o post‐>ID , isso acontece pois o the_post que temos é transformado em uma variável global e por isso podemos
acessar sem problemas.
O próximo passo é renderizar isso na tela e podemos fazer isso usando o código HTML, o dl - deᵔnition list- usaremos junto
class e isso será igual a "single‐imovel‐informacoes" e o dl class serpa composto por dt - data title - e dd - data
description. Dentro do dt renderizaremos a informação do preço e no dd nós imprimimos a variável preço,

$imoveis_meta_data . Como isso é uma array temos ainda que complementar com ['preco_id'] e como isso só retorna um
array a posição é "0". Teremos:
<dl class="single‐imovel‐informacoes">
<dt>Preço:</dt>
<dd><?= $imoveis_meta_data['preco_id'][0]<; ?></dd>
</dl>
E, assim como ᵔzemos com o preço, faremos também com os demais dados:
<dl class="single‐imovel‐informacoes">
<dt>Preço:</dt>
<dd><?= $imoveis_meta_data['preco_id'][0]; ?></dd>
<dt>Vagas:</dt>

Wordpress - Aula 6 - Atividade 4 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 6 - Atividade 4 Explicação - Alura - Cursos Online de Tecnologia

Enviado por

Direitos autorais:

Formatos disponíveis

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

o primeiro parâmetro será informacoes‐imoveis ;

o terceiro é o callback que é o conteúdo desejado, usamos a função preenche_conteudo_informacoes_imovel ;

Teremos o seguinte código ao ᵔnal do arquivo "index.php":

Ele estará situado na seguinte parte do arquivo:

criaremos a function que será a preenche_conteudo_informacoes_imovel :

E colaremos ele em "function.php" :

function preenche_conteudo_informacoes_imovel() { ?>

Dando um "reload", por ᵔm, teremos o conteúdo:

Salvando no Banco de Dados

E faremos o mesmo com as demais linhas:

function salvar_meta_info_imoveis( $post_id ) {

É a "wp_postmeta", as "meta informações do post". Clicando nisso teremos o seguinte:

para a função precisamos passar o $post :

function informacoes_imovel_view( $post ) {

value="<?php $imoveis_meta_data['preco_id'] ?>">

E para o quartos _id :

E, por ᵔm, banheiros_id :

E dando um "reload" teremos ᵔnalmente o preço no formato que queríamos:

function salvar_meta_info_imoveis( $post_id ) {

<?php $imoveis_meta_data = get_post_meta( $post‐>ID ); ?>

description. Dentro do dt renderizaremos a informação do preço e no dd nós imprimimos a variável preço,

array a posição é "0". Teremos:

<?php $imoveis_meta_data = get_post_meta( $post‐>ID ); ?>

<?php $imoveis_meta_data = get_post_meta( $post‐>ID ); ?>

Você também pode gostar

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