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

201766 Wordpress: Aula 4 Atividade 5 Explicação | Alura Cursos online de tecnologia
05
Explicação
Sobre Nós
Vamos pensar no usuário, ele entra no site, observa os imóveis e deseja descobrir mais informações sobre a empresa. A
melhor forma de fornecer mais informações sobre a empresa seria criando uma nova página. Podemos criar ela indo no
"Painel > Páginas > Adicionar Nova". Nomearemos ela de "Sobre Nós" e escreveremos uma descrição:
Feito isso podemos clicar no "Ver página", entretanto, seremos redirecionadas para a página do "index.php". Esse problema já
aconteceu antes, isso acontece pois ele não encontra a página que desejamos.
É preciso criar essa página, podemos fazer isso criando um novo arquivo que chamaremos de "page.php". Criando essa
página, se dermos um "reload", teremos uma página em branco, pois ainda não temos nenhum código na que acabamos de
criar. A primeira coisa que deve aparecer nessa página é a barra de administrador, por isso usamos a tag php e o
get_header e colocaremos também o get_footer . Bom, depois de acrescentar o topo e a base do site podemos acrescentar o
conteúdo. Para renderizar o conteúdo do banco de dados podemos utilizar o loop e acrescentamos tudo o que acompanhava
o loop , no caso o if , while e the_post :
<?php get_header(); ?>
<?php if( have_posts() ) {

while( have_posts() ) {
the_post();
?>
<?php
}
https://cursos.alura.com.br/course/wordpresscriacaotemazero/task/19192 1/17
}
?>
<?php get_footer(); ?>
E no meio vamos escrever o que desejamos que seja renderizado, no caso, o the_title e o the_content acompanhados de
tags php .

the_post();
?>
<?php the_title(); ?>

<?php the_content(); ?>
<?php
}
}
?>
Dando um reload teremos o título e a descrição:
Agora, teríamos que escrever um HTML e um CSS para deixar nossa página mais bonita. Mas, esse é um código que já temos
pronto, então, apenas copiaremos e colaremos isso no código. Abrindo o "workspace > php > page.php". Colocaremos o
código logo abaixo do get_header no arquivo "page.php". Observe o local onde o código será inserido:
Vamos observar o código.
O main refere-se ao inicio da página, o article ao corpo do site e, abaixo do article , temos o título, o h1 , onde
colocaremos o the_title . Bom, logo abaixo do h1 temos o inicio do loop . Podemos recortar o que tínhamos digitado e
vamos colar onde diz inicio do loop e apagaremos isso. Onde diz o "conteúdo", nós colocaremos o the_content e, por 𐴀m,
onde diz "𐴀m do loop" cabem as chaves:
<main class="pagina">
<article class="pagina">
<h1 class="pagina‐titulo">
</h1>

the_post();
?>
<div class="pagina‐conteudo">
<?php the_content();?>
</div>
<?php
}
}
?>
</article>
</main>
Já temos o HTML e podemos acrescentar também o CSS. Para isso, basta copiar o seu código dos nossos arquivos já prontos e
colamos ele no "style.css". Colaremos o que acabamos de copiar no 𐴀nal e dando um "reload" na página teremos o seguinte:
O próximo passo é acrescentar no "index.html" um "Menu". Normalmente, poderíamos ir no "Painel administrativo >
Aparências > Acrescentar Menu", mas não temos essa opção aqui, isso acontece porque alguns temas já possuem um menu
"Registrado". Como nosso tema inicia do zero, a obrigação de cadastrar um "menu" está em nossas mãos. Para registrar novas
funcionalidades podemos nos dirigir ao arquivo "functions.php" e registramos uma parte de nosso menu e para fazer isso
podemos utilizar a função register_nav_menu que recebe duas strings de argumentos, a primeira vai ser um apelido para a
sua localização, que será header‐menu e o segundo será uma descrição desse menu, main‐menu :
add_action('init', 'cadastrando_post_type_imoveis');
register_nav_menu('header‐menu', 'main_menu');
Isso 𐴀cará ao 𐴀nal de tudo o que temos na página!
Além disso, é preciso passar a informação para o "WordPress" de que o menu precisa ser carregado e quando isso deve
acontecer. Podemos utilizar a add_action , assim, temos que passar para esta função o primeiro parâmetro, logo que o
"WordPress" começar a rodar, é preciso rodar um código, escrevemos o init . Antes de passar o segundo parâmetro,
precisamos criar uma função, a function registrar_menu_navegação . Por 𐴀m, com essa função criada podemos passar o
segundo parâmetro para o add_action que será registrar_menu_navegacao . Nosso código no "functions.php" estará assim:
add_action('init', 'cadastrando_post_type_imoveis');
function registrar_menu_navegacao() {
register_nav_menu('header‐menu', 'main_menu');
}
add_action('init', 'registrar_menu_navegacao');
Se dermos um "reload" poderemos con𐴀rmar que nosso site possui espaço para "Menus":
Podemos clicar no botão de "Salvar o Menu" e voltamos para a "Home", mas ainda não teremos nada aparecendo, pois, falta
chamar esse menu em nosso código.
Como queremos que esse menu seja renderizado em todas as páginas e sabemos que o header é renderizado em todas,
podemos chamar o "menu" pelo arquivo "header.php". Bom, nesse arquivo nós vamos criar, abaixo de todo o código que já
temos, uma tag header e dentro dela vamos acrescentar um "menu". Na header , para deixar os itens mais alinhados, vamos
colocar a div class="container" . Colocamos a tag php e passamos o wp_nav_menu , temos, por 𐴀m, que referenciar qual é o
menu de que estamos falando. É preciso passar algumas con𐴀gurações, primeiramente, passaremos o $args . A cima do
wp_nav_menu escreveremos a variável $args que é igual a array . O args recebe a opção do theme_location que receberá a
localização do menu, header‐menu . Nosso código 𐴀cará da seguinte maneira:
<header>
<div class="container">
<?php
$args = array(
'theme_location' => 'header‐menu'
);
wp_nav_menu( $args );
?>
</div>
</header>
Salvando isso e dando um "reload" teremos o menu do "Sobre Nós":
Mas, se clicarmos nele nada acontecerá ainda e, além disso, falta estilizarmos isso. Se voltarmos no Painel, em "Aparências >
Menus" e, em "Estrutura do Menu" no primeiro campo, removemos um link e, em "Páginas" nós damos um check no "Sobre
Nós" e clicando em "Adicionar ao Menu".
Podemos salvar e voltar a nossa página e ao testarmos, novamente, nosso "Menu". Ele irá para a página do "Sobre Nós":
Falta, ainda, estilizá-lo para deixá-lo mais bonito. Podemos pegar o arquivo "header.css" que já temos pronto e copiar todo o
seu conteúdo e colar ao 𐴀nal do arquivo do "style.css".
Dando um "reload" na página já teremos algo bem diferente!
Entretanto, o "Home" terá desaparecido! Se observarmos o que temos no "style.css" percebemos que nós mesmos acabamos
sumindo com aquele texto, pois, justamente usamos um background‐image e o caminho está diferente também
/assets/images/header‐logo.svg .
Para resolver esse problema podemos criar duas novas pastas, a "assets" e a "images". Para isso, basta digitarmos
assets/images e colocaremos o "header-logo.svg" nessa pasta que estará no seguinte longo caminho: "XAMPP > xampp𐴀les >
htdocs > wordpress > wp-content > themes > malura > assets > images" e por 𐴀m colocamos a imagem no "Images".
Teremos o seguinte:
Falta apenas comentar algo! Quando clicamos no "Sobre Nós" e somos redirecionados para a página do "Sobre Nós" podemos
observar que o estilo muda um pouco.
Isso acontece, pois no CSS temos uma classe que é o ".menu" e temos o ".menu.current-menu-item". E, sempre que clicamos
em algum menu o "WordPress" traz essa classe ".menu .current-menu-item" no item e, assim, podemos estilizar isso
facilmente devido a essa classe.
Contato
Agora, vamos criar uma nova página, a "Contato". Ela servirá para que o cliente que acessa o site possa estabelecer contato
com a imobiliária. Para que isso aconteça basta ir no Painel e "Páginas > Nova Página" e adicionamos um título e uma
descrição e já podemos publicar o conteúdo dessa nova página.
Falta adicionarmos isso em nosso menu. Basta clicarmos no ícone do Painel e escolhermos "Menu". Uma vez na página do
"Menu", podemos dar um "check" no campo "Contato" que está junto de "Páginas".
No "estrutura do Menu", podemos alterar a ordem das coisas, primeiro, deixaremos "Contato", em segundo lugar colocaremos
o "Home" e em terceiro, o "Sobre Nós".
Salvando e indo para nossa página já teremos a opção de escolhermos o item "Contato":
Seremos redirecionados para a seguinte página:
Podemos, ainda, acrescentar outras informações nessa página de "Contato". Podemos, por exemplo, acrescentar um
formulário que o usuário preencha. Para colocar esse tipo de informação precisamos alterar no código. Faremos isso no
arquivo "page.php" que é o que administra as páginas. Vamos colocar o que queremos logo após o "Content". Como vamos
introduzir um HTML pegamos o que já temos pronto em nossos arquivos, o "form.php". Copiando o código desse arquivo
podemos copiar e colá-lo logo após o content :
Não vamos entrar em detalhes sobre o formulário, ele é bastante simples.
Se dermos um reload teremos em nossa página ele inserido!
Agora, temos um layout bem mais interessante para que o usuário possa entrar em contato com a Imobiliária!
Entretanto, temos um problema! Pois, ao acessarmos a página do "Sobre Nós" vamos nos deparar com o mesmo formulário:
Temos que dar um jeito de falar que desejamos que o formulário que acabamos de colocar no "page.php" deve aparecer
somente junto a página "Contato". Para fazer isso precisamos colocar, acima do início da form , um php acompanhado de
is_page e devemos passar qual a página que queremos que tenha o formulário. Se entrarmos no "Painel" em "editar página"
sabemos que o título da página é "Contato" e o "WordPress" gera um apelido para isso através do nome que demos. O apelido
é sempre com letra minúscula. Se tivéssemos um espaço no título, ao em vez do espaço teríamos um "underline". O apelido é
conhecido como slug. Assim, se for "contato", teremos o formulário, ?php if(is_page('contato))' . Fechamos a tag do php
depois do form . Teremos o seguinte:
<?php if(is_page('contato')) { ?>
<form>
/...
</form>
<?php } ?>
Se testarmos isso teremos tudo em ordem! A página "Contato" terá um formulário, enquanto a página do "Sobre Nós" estará
da maneira como queríamos!
Vimos como criar a página de Contato, colocamos um formulário nela e usamos o if para nos auxiliar!
Arrumando o código
Agora, vamos observar nosso arquivo "style.css" , ele possui 280 linhas de código CSS. Encontramos CSS escrito para a
"single.php", "page.php", "header.php", "index.php" e outros... Ou seja, distintos CSS e alguns deles são comuns a todas as
páginas como o HTML, o container , o head e etc. Mas, por exemplo, o CSS especí𐴀co sobre INDEX só vai estar presente na
página do index e nós, mesmo assim, o incluímos em tudo, o que acaba sendo desnecessário na verdade! Para melhorar isso
e organizar o código podemos criar uma pasta nova dentro de "assets" e ela se chamará "css". Nesta pasta criaremos distintos
arquivos referentes aos diferentes códigos.
O primeiro arquivo nomearemos de "comum.css" e pegamos tudo aquilo que temos no "style.css" e está abaixo do comentário
"Comum", recortamos e colamos no novo arquivo, o "comum.css".
O segundo arquivo que criaremos é para comportar os "css" referentes ao header , o nome dele será "header.css". Recortamos
do "style.css" tudo o que está abaixo do comentário "header" e colamos nesse novo arquivo.
Faremos o mesmo processo para separar o código que refere-se ao "index", copiaremos o seu código e criamos o arquivo
"index.css". O mesmo faremos para separar os "css" do page e , por 𐴀m, o mesmo para o "single".
Bom, após fazer isso e dar um "reload" na página teremos o código todo quebrado. Vamos pensar, os "css" que devem
aparecer em todas as páginas são o "comum" e o "header". As páginas, quando importam o header usam o get_header .
Vamos abrir o "header.php" e copiamos o código do link que já estava pronto e colamos duas vezes ele abaixo dos demais
links . Fazemos isso, pois, vamos tentar trazer tanto o "header" quanto o "comum" para este arquivo. Temos que alterar a
href para o caminho do "comum.css", teremos assets/css/comum.css . O mesmo faremos no segundo link , mas o caminho
será o do "header.css", então, assets/css/header.css . Teremos:
<head>
<?php $home = get_template_directory_uri(); ?>
<meta charset="utf‐8">
<link rel="stylesheet" href="<?= $home; ?>reset.css">
<link rel="stylesheet" href="<?= $home; ?>style.css">
<link rel="stylesheet" href="<?= $home; ?>/assets/css/comum.css">
<link rel="stylesheet" href="<?= $home; ?>/assets/css/header.css">
<?php wp_head(); ?>
</head>
Mas o "header" terá perdido sua referência do "background-image", arrumamos isso indo no arquivo "header.css" e alterando
o caminho para a imagem, ../images/header‐logo.svg
.menu‐item‐type‐custom {
background‐image: url (../images/header‐logo.svg);
background‐repeat: no‐repeat;
background‐size: cover;
}
Salvando isso e rodando teremos ao menos o "header" já mais organizado:
Nosso "index", entretanto, ainda tem vários códigos que estão quebrados. Temos que colocar ele junto ao "head", mas se o
importarmos direto isso não funcionará. Para fazer isso podemos fazer com que todas as páginas mandem seu "css". Assim,
no "index.php" temos que dar um jeito de mandar ele para o "header.php". Podemos fazer isso acrescentando uma variável ao
"index.php", a $css_especifico = 'index' . Ela 𐴀cará no ínicio da página:
<?php
$css_especifico = 'index';
get_header();
?>
Agora, podemos passar a referência dessa variável a um terceiro "link" que acrescentamos no "header.php".
<head>

<link rel="stylesheet" href="<?= $home; assets/css/<?= $css_especifico; ?>. css">
<?php wp_head(); ?>
</head>
Testando veremos que nada será modi𐴀cado. Infelizmente, o get_header do "WordPress" não permite que nós enviemos
uma variável para dentro dele. Esse é, inclusive, um dos temas que o StackOverFlow menciona bastante.
Diante disso o que faremos é dizer ao get_header : "Adeus!". Vamos apagar isso do "index.php"
Temos que voltar ao mais cru do "php", como por exemplo, utilizar o include , require e etc. Nós usaremos o
require_once('header.php') para substituir o get_header e teremos o seguinte no "index.php":
<?php
$css_especifico = 'index';
require_once('header.php');
?>
Dando um "reload" teremos nossa página funcionando conforme queríamos!
É dessa forma que passamos o "css" especí𐴀co! Assim, quando abrirmos o arquivo "page.php" nada acontecerá a não ser que
passemos o $css_especifico = page' e temos que alterar também o get_header por require_once('header.php') . Teremos
o seguinte:
<?php
$css_especifico = 'page';
?>
Salvando e testando isso veremos que estará tudo em ordem uma vez que clicamos em "Contato" somos redirecionados para
a página do formulário do "Contato".
Falta repetir esse procedimento no "single.php":
<?php
$css_especifico = 'single';
?>
E se rodarmos isso estará tudo certo! Acabamos de resolver os problemas que tínhamos com os "css".
Bloginfo
Abrindo nossos arquivos "css" podemos excluir os comentários que acabamos deixando junto ao código. A ideia de termos
fragmentado os "css" foi para não carregar tantos ao mesmo tempo na página.
Ainda não usamos nenhuma tag de title , ela serve para alterar o título que aparece no navegador, para que ele seja
referente ao nosso site:
Observe que temos na aba escrito "localhost...". Queremos algo mais limpo e bonito.
Podemos acrescentar no arquivo "header.php" um title que terá o texto "Malura":
<head>

<link rel="stylesheet" href="<?= $home; assets/css/<?= $css_especifico; ?>. css">
<title>Malura</title>
<?php wp_head(); ?>
</head>
Salvando isso teremos o "Malura" aparecendo:
Entretanto, se eventualmente desejarmos mudar o título do site é preciso que na própria plataforma do WordPress
acessemos o "Aparências > Personalizar" e clicando no "Identidade do Site" abrirá uma nova janela na qual poderemos alterar
o "Título do site":
Mudando a mão o título o que aconteceria é que no código nós deveríamos alterar o "Malura" também "na mão".
Para automatizar essa ação o "WordPress" possui um meio de fazer isso, no arquivo "header.php" podemos acrescentar
dentro da tag title o ?php bloginfo ('name') :
<title>
<?php bloginfo ('name'); ?>
</title>
Dando um "reload" em nossa página teremos a aba nomeada de "Imobiliária Malura". Agora, qualquer página que
acessarmos terá esse nome aparecendo. Mas, queremos algo um pouco mais elaborado, na "Home" pode aparecer
"Imobiliária Malura", mas quando clicarmos em um dos imóveis a ideia é que apareça um "pipe" que é a barra reta e também
o nome do imóvel.
Como podemos imprimir o título do imóvel na aba do navegador? Usando o the_title , vamos acrescentar essa tag abaixo
do bloginfo . E vamos usar um echo no meio para separar o the_title do bloginfo . No echo colaremos uma "|".
Teremos:
<title>
<?php echo ' | '; ?>
</title>
Dando um "reload" teremos a aba com o que queríamos:
Mas se voltarmos a página inicial teremos um pipe perdido sem nenhum texto acompanhando:
A ideia é que o "pipe" não apareça quando estivermos na página inicial, por isso, temos que acrescentar alguns ifs . Assim,
abaixo do bloginfo vamos escrever que se estivermos na "home" não queremos que o "pipe" apareça, if( !is_home() ) echo
' | ' ?:
<title>
<?if( !is_home() ) echo ' | '; ?>
</title>
Dando um "reload" veremos que isso funcionará como queremos!
Se observarmos nosso código podemos perceber que ele está bastante desorganizado. Podemos usar uma função para isolar
o title e seus respectivos conteúdos. Poderíamos inserir um php e uma function geraTitle . Dentro dessa função nós
colocamos o bloginfo e o if e depois de fazer isso ele poderia printar o título. Vamos, antes de fechar a title , chamar a
função geraTitle . Teremos :
<title>
<?php
function geraTitle() {
bloginfo ('name');
if( !is_home() ) echo ' | ';
the_title();
}
geraTitle(); ?>
</title>
Dando um "reload" teremos tudo funcionando da maneira como desejamos!
Claro, o código ainda está desorganizado. Podemos, isolar a function em algum lugar, por exemplo, junto com as demais
function no arquivo "functions.php". Basta copiar e colar o código no 𐴀nal do arquivo:

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

Enviado por

Direitos autorais:

Formatos disponíveis

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

<?php get_header(); ?>

<?php if( have_posts() ) {

<?php get_footer(); ?>

<?php get_header(); ?>

<?php if( have_posts() ) {

<?php the_title(); ?>

<?php get_footer(); ?>

Dando um reload teremos o título e a descrição:

Vamos observar o código.

<?php get_header(); ?>

<?php if( have_posts() ) {

<?php get_footer(); ?>

Isso 𐴀cará ao 𐴀nal de tudo o que temos na página!

localização do menu, header‐menu . Nosso código 𐴀cará da seguinte maneira:

Salvando isso e dando um "reload" teremos o menu do "Sobre Nós":

Dando um "reload" na página já teremos algo bem diferente!

Seremos redirecionados para a seguinte página:

Não vamos entrar em detalhes sobre o formulário, ele é bastante simples.

Se dermos um reload teremos em nossa página ele inserido!

<?php if(is_page('contato')) { ?>

será o do "header.css", então, assets/css/header.css . Teremos:

<?php wp_head(); ?>

Salvando isso e rodando teremos ao menos o "header" já mais organizado:

<link rel="stylesheet" href="<?= $home; ?>/assets/css/comum.css">

<?php wp_head(); ?>

Dando um "reload" teremos nossa página funcionando conforme queríamos!

Falta repetir esse procedimento no "single.php":

Podemos acrescentar no arquivo "header.php" um title que terá o texto "Malura":

<link rel="stylesheet" href="<?= $home; ?>/assets/css/comum.css">

<?php wp_head(); ?>

Salvando isso teremos o "Malura" aparecendo:

Dando um "reload" teremos a aba com o que queríamos:

Dando um "reload" veremos que isso funcionará como queremos!

Dando um "reload" teremos tudo funcionando da maneira como desejamos!

Você também pode gostar

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