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

201766 Wordpress: Aula 2 Atividade 3 Explicação | Alura Cursos online de tecnologia
03
Explicação
Vamos observar como está a renderização de nosso site até esse momento:
Por enquanto temos apenas o "Bem Vindo!" escrito. Isso já era de se esperar, uma vez que, em nosso "Sublime" temos apenas
o h1 com este texto escrito.
Como estamos criando o site de uma imobiliária é interessante que a página mostre, logo no início, uma listagem de móveis
disponíveis para comprar ou alugar. Tendo em vista que o WordPress é um gerenciador de conteúdo, podemos criar diversos
conteúdos nessa página. Quem trabalha com o PHP sabe que existe um painel administrativo no fundo, então, vamos acessá-
lo. Mas, para que possamos acessar isso é preciso acrescentar algumas coisas. Normalmente, para acessar isso, podemos
clicar no botão que 𐴀ca no cabeçalho do administrador, em nosso caso não temos isso. Ou seja, temos que dar um jeito de
inserir esse cabeçalho antes.
O primeiro passo é colocar esse botão. Bom, antes, vamos pensar em algo, se tivéssemos que dividir nossa página,
poderíamos segmentá-la em head que seria o topo, body , o miolo, e footer , o rodapé. Desejamos acrescentar um botão
que sirva para acessar a parte administrativa e que deve 𐴀car no cabeçalho da página, então, ele deverá se situar, justamente,
no head .
Então, vamos criar um cabeçalho! Para isso, criaremos um arquivo novo, que chamaremos de header.php :
https://cursos.alura.com.br/course/wordpresscriacaotemazero/task/19102 1/14
E, parte do código que tínhamos escrito no "index.php" nós copiaremos e colaremos nesse novo arquivo. O "index" 𐴀cará, na
verdade apenas com o código equivalente ao miolo do site. Copiaremos desde o body até o !doctype html . Copiaremos o
seguinte para o header.php :
<!doctype html>
<html>
<head>
<meta charset="utf‐8">
</head>
<body>
Nosso "index" 𐴀cará da seguinte maneira:
<h1>Bem Vindo!</h1>
</body>
</html>
Como o código que copiamos será deslocado para o arquivo header.php . Teremos que o código do "index" 𐴀cará, na verdade,
sem código. Por isso, é preciso importar o head no index e podemos fazer isso utilizando uma função pronta do
"WordPress" que é o get‐header . Assim, adicionamos no arquivo "index.php" a tag php e escrevemos o get_header , cuja
função pega o arquivo chamado header que temos no mesmo diretório:
<? php get_header(); ?>
<h1>Bem Vindo!</h1>
</body>
</html>
E, assim, como pegamos o cabeçalho, podemos pegar também o rodapé. Vamos criar um novo arquivo que chamaremos de
"footer.php", esse arquivo é o que encerra tudo, inclusive o body e o html e, por isso, apagamos essas duas tags que
restaram. Precisamos importar o get_footer no "index.html" e apagar o </body> e o </html> :
<? php get_header(); ?>
<h1>Bem Vindo!</h1>
<? php get_footer(); ?>
Colocaremos o </body> e o </html> no arquivo "footer.php". Mas, se dermos um "reload" em nossa página, ainda não
teremos nada de distinto além da frase "Bem vindo!". Falta pedirmos para que o "WordPress" renderize o "Menu de
administrador" e no arquivo "header.php" podemos utilizar uma função do WordPress que é wp_head que traz o cabeçalho e
também a barra do administrador:
<!doctype html>
<html>
<head>
<?php wp_head(); ?>
</head>
<body>
E, da mesma maneira que utilizamos uma função para trazer o cabeçalho, usaremos uma função para trazer o
rodapé: wp_footer . Escreveremos isso no "footer.php":
<?php wp_footer(); ?>
</body>
</html>
Observe que se dermos um "reload" 𐴀nalmente teremos o "Menu" do administrador:
Bom, o que queremos é criar um conteúdo para o nosso site. Então, como o "WordPress" administra conteúdos através dos
"Posts" clicamos no ícone "Imobiliária Malura > Painel" e estaremos em nosso painel administrativo e nele clicaremos no
"Posts > Adicionar Novo". Teremos um formulário e nele vamos adicionar um título, "Casa de Madeira", e podemos
acrescentar também uma descrição, "A casa de madeira é uma casa bonita e bem quente no inverno". Teremos o seguinte:
Ao completarmos as informações podemos selecionar a opção "Publicar". Entretanto, ainda não teremos nada aparecendo
em nossa página mesmo que já tenhamos publicado nosso post. Isso acontece porque nosso código não passa essa
informação.
No arquivo "index.php" podemos acrescentar algo que diga que queremos ver todos os "posts" que temos em nosso banco de
dados, isto é, algo que mostre isso em nossa página principal. Para fazermos isso podemos usar uma função do "WordPress"
chamada loop . Podemos trazer o loop usando um código php . Se você quiser pode buscar informações a respeito dessa
função na documentação do "WordPress".
Colocaremos no "index.php" o php , logo abaixo colocaremos o if que indica que se tiver "posts" deve ocorrer uma
interação do tipo loop - looping- e o "post" deve ser pegado. E do post desejamos imprimir as informações de nossa
página, ou seja, o título, por isso usamos a função the_title e também o seu conteúdo e por isso usamos o the_content .
Teremos o seguinte:
<?php get_header(); ?>
<h1>Bem Vindo!</h1>
<?php
if( have_posts() ) {
while( have_posts() ) {
the_post();
the_title();
the_content();
}
}
?>
<?php get_footer(); ?>
Dando um "reload" teremos em nossa página o título e sua respectiva descrição:
Bom, se quisermos podemos criar um "Novo Post", para isso vamos em nosso "Painel > Posts > Adiciona Novo Post" e, agora,
preenchemos com as informações desejadas o título e sua respectiva descrição. Se dermos um "reload" na página será
possível visualizar os dois itens inseridos.
Para melhorar o código podemos 𐴀nalizar o php após o the post e envolver o the_title em outra tag php que por sua vez
deve ser envolvida com a tag h2 , pois este será um título secundário. O "conteúdo" também será envolvido por uma tag, a
php , e, além disso, usamos o div para envolve-lo, não usaremos o p , pois o conteúdo pode ser tanto uma imagem quanto
um parágrafo. Bom, quando terminarmos de inserir essa tags, veremos que as duas chaves do 𐴀nal estarão um pouco
perdidas, portanto, vamos acrescentar, ainda, uma tag php para que elas não 𐴀quem tão deslocadas. Teremos o seguinte:
<h1>Bem Vindo!</h1>
<?php
the_post();
?>
<h2><?php the_title(); ?></h2>
<div><?php the_content(); ?></div>
<?php
}
}
?>
Salvando isso e dando um "reload" teremos o seguinte:
Em nossa listagem de móveis consta apenas o nome e a descrição do móvel, mas em uma lista convencional podemos
encontrar, também, informações como uma imagem de destaque. Essa imagem que deverá constar em cada imóvel faz parte
do conteúdo do imóvel e para manipular o conteúdo vamos no "Painel do administrador > Post > Casa de Madeira > Adicionar
Mídia". Devemos clicar no botão "Adicionar Mídia":
Temos a possibilidade de escolher diversas imagens e todas elas estão disponíveis para serem baixadas junto as outras
explicações. Basta dar um "check" em qualquer uma delas e a teremos inserido no corpo de nosso "Post". Observe:
Voltando ao navegador e atualizando nossa página podemos veri𐴀car como está nosso site até o momento:
Bom, agora já temos a imagem desejada, mas podemos observar que ela esta deslocada em relação ao restante do conteúdo
de texto, assim, para alterar o seu lugar temos que observar nosso código. A imagem é renderizada no the_content , é ele
quem traz todo o conteúdo do site, isto é, a descrição e a imagem. Bom, diante disso, podemos querer desvincular as partes
de nosso código e como o the_content traz tanto a imagem quanto a descrição não é possível manipulá-lo, o que podemos
fazer para resolver isso é trazer a imagem de outro lugar usando uma função e uma função distinta para trazer o conteúdo
textual do "Post". Para fazer isso podemos usar o thumbnail image , que refere-se a imagem de destaque, e assim,
conseguiremos desvincular o texto da imagem. Vamos apagar a imagem que tínhamos inserido e vamos inserir a "imagem de
destaque". Vamos colocar suporte para essa imagem e começamos criando um arquivo novo, que chamaremos de
"functions.php" e nesse código escreveremos aquilo que é "a mais" em nosso tema. A funcionalidade que queremos, nesse
momento, é a de "post thumbnail".
Começamos por inserir o php e não precisamos nos preocupar em fechar essa tag, pois, não teremos nenhum HTML nesse
arquivo. Vamos adicionar suporte, assim, usamos o add_theme_support e o tema deve dar suporte a 'post‐thumbnails' , que
são as imagens de destaque. Teremos o seguinte:
<?php
add_theme_support('post‐thumbnails');
Vamos dar um "reload" e observar o que acontece na página do "Post" que estamos manuseando. Observe que aparece um
"Imagem destacada" em nossa página, agora, todo o post que criarmos podemos escolher uma "imagem destacada" para
colocar, pois nosso tema dá suporte para essa possibilidade.
Então, podemos selecionar o "de𐴀nir imagem", a opção que se encontra abaixo do "Imagem destacada" e selecionamos a
𐴀gura que quisermos. Selecionando uma imagem e atualizando podemos veri𐴀car, entretanto, que não teremos nenhuma
𐴀gura aparecendo:
Bom, o que 𐴀zemos foi desvincular o the_content da imagem, ou seja, que a função the_content traga apenas o conteúdo
textual e que a imagem seja algo a parte, assim, teremos que trazer essa imagem de alguma maneira. Para fazer isso,
podemos trazer do banco e realizamos isso usando o "Wordpress", usamos o php e dentro dele usamos a função da imagem
em destaque, a the_post_thumbnail . Teremos o seguinte:
<?php
the_post();
?>
<?php the_post_thumbnail(); ?>

<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p>
<?php
}
}
?>
Dando um "reload" no site teremos a imagem inserida, ela está totalmente fora das proporções, mas por enquanto não
estamos nos preocupando tanto com o CSS.
Embora nossa preocupação principal não seja o CSS, vamos ajeitar um pouco ele. Para fazer isso, antes, temos que ajeitar
nosso HTML. Lembrando que esse curso não tem o foco no HTML, por isso, já temos algumas coisas prontas em relação a
isso. Temos um arquivo, o "index.php", que possui todo o código necessário para essa página. Colaremos o conteúdo abaixo
do seguinte:
<?php
}
}
?>
Teremos o seguinte:
Bom, agora, é preciso colocar o código PHP, isto é, o back-end, dentro do HTML de uma maneira que seja legal e organizada.
Bom, dentro do main vamos colocar o h1 . E no if temos o começo do loop , bom, a cada "post" nós queremos que seja
gerado um item de lista, então, o loop vai iniciar dentro da lista, do ul . Vamos aproveitar e fechar o loop , assim as chaves
de fechamento disso devem ir antes que a lista acabe. E o código que é renderizado, a imagem, o texto e o título devem ir
dentro do li , assim a cada item que tivermos o "WordPress" irá renderizar um item dessa lista, recheado do que queremos,
ou seja, o conteúdo do post:

<main class="home‐main">
<div class="container">
<h1>Bem Vindo ao Maluras!</h1>

<ul class="imoveis‐listagem">
<?php
the_post();
?>
<li class="imoveis‐listagem‐item">
<?php the_post_thumbnail(); ?><h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p>
</li>
<?php
}
}
?>
</ul>
</div>
</main>
Salvando isso podemos dar um "reload" na página e veremos que nada se alterou muito, temos a mais apenas um ".":
Bom, a primeira imagem que temos contêm um thumbnail , as demais não possuem isso. Vamos acrescentar na "Posts >
Casa de Argila" uma nova imagem. De𐴀nimos uma imagem destacada e salvando isso podemos voltar para a página e
veri𐴀car que temos a segunda imagem:
Bom, vamos discutir aquela marca a mais que temos, o "pontinho" que aparece, ele é um "bullet". Essa marca é o próprio CSS
que coloca. O próprio "Chrome" possui um CSS padrão, quando temos uma lista não ordenada ele coloca essa informação do
"pontinho", mas isso acaba empurrando nossa imagem.
Para nos livrarmos disso podemos usar o reset mayer . Vamos copiar seu código do site
http://meyerweb.com/eric/tools/css/reset/ (http://meyerweb.com/eric/tools/css/reset/):
Isso é usado para retirar qualquer estilo que os navegadores colocam por padrão em nosso site, como queremos nosso site do
zero, podemos colar essa informação no "style.css", no CSS que já possuímos. Vamos inserir ele depois da última coisa que já
tínhamos na tela.
Entretanto, se dermos um "reload" no site não teremos nada resetado. Bom, falta importarmos isso no head , do arquivo
header.php . Vamos importar isso usando uma tag link . Falta, apenas passar o caminho do reset que como está na
mesma pasta, passaremos apenas o style.css . Teremos o seguinte:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"
<?php wp_head(); ?>
</head>
<body>
Dando um "reload" ele ainda não terá modi𐴀cado nada. Podemos dar um "Expect Element" e no "Console > Network"
poderemos veri𐴀car que ele não conseguirá encontrar o "style.css", ele está procurando, na verdade, o
"localhost/wordpress/style.css". Mas, o "style.css" não esta na pasta de "wordpress", repare que na verdade ele esta no "wp-
content > themes > malura", ou seja, um caminho muito diferente do que está originalmente sendo buscado.
Temos, portanto, que passar o caminho da raiz do tema e, com isso passado, poderemos acessar o "style.css". Então, temos
que passar no "header.php" e passar para o href uma php e dentro dela passaremos uma função que é
get_template_directory_uri e isso vai passar para nós a pasta raiz do tema e agora que já chegamos a pasta raiz, podemos
pedir para que o style.css seja acessa. Falta ainda um detalhe, imprimir usando uma string e para fazer isso do jeito fácil
basta colocar um ponto de interrogação e um sinal de igual, ?= , que é um atalho do php :
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="<?= get_template_directory_uri(); ?>/style.css">
<?php wp_head(); ?>

</head>
<body>
Finalizado isso damos um "Save" e um "reload" e teremos o "pontinho" por 𐴀m "resetado"!
O problema é que temos um resultado um tanto feio, podemos dar uma melhorada nisso usando o CSS. Como já foi
comentado, anteriormente, não é esse o objetivo do curso, portanto, vamos usar algo que já está razoavelmente pronto.
Vamos em nossa pasta onde deixamos as coisas prontas. Abrimos a pasta "workspace > estilo.css". Uma vez que o arquivo
estiver aberto copiaremos e colaremos todo o seu conteúdo no style.css . Observe:

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

Enviado por

Direitos autorais:

Formatos disponíveis

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

Nosso "index" 𐴀cará da seguinte maneira:

<? php get_header(); ?>

<? php get_header(); ?>

<? php get_footer(); ?>

<?php wp_footer(); ?>

Observe que se dermos um "reload" 𐴀nalmente teremos o "Menu" do administrador:

<?php get_header(); ?>

<?php get_footer(); ?>

Dando um "reload" teremos em nossa página o título e sua respectiva descrição:

<?php get_header(); ?>

<?php get_footer(); ?>

Salvando isso e dando um "reload" teremos o seguinte:

<?php the_post_thumbnail(); ?>

<?php get_footer(); ?>

<?php get_header(); ?>

<h1>Bem Vindo ao Maluras!</h1>

<?php get_footer(); ?>

mesma pasta, passaremos apenas o style.css . Teremos o seguinte:

<?php wp_head(); ?>

Finalizado isso damos um "Save" e um "reload" e teremos o "pontinho" por 𐴀m "resetado"!

Você também pode gostar

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

Enviado por

Direitos autorais:

Formatos disponíveis

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

Nosso "index" 𐴀cará da seguinte maneira:

<? php get_header(); ?>

<? php get_header(); ?>

<? php get_footer(); ?>

<?php wp_footer(); ?>

Observe que se dermos um "reload" 𐴀nalmente teremos o "Menu" do administrador:

<?php get_header(); ?>

<?php get_footer(); ?>

Dando um "reload" teremos em nossa página o título e sua respectiva descrição:

<?php get_header(); ?>

<?php get_footer(); ?>

Salvando isso e dando um "reload" teremos o seguinte:

<?php the_post_thumbnail(); ?>

<?php get_footer(); ?>

<?php get_header(); ?>

<h1>Bem Vindo ao Maluras!</h1>

<?php get_footer(); ?>

mesma pasta, passaremos apenas o style.css . Teremos o seguinte:

<?php wp_head(); ?>

Finalizado isso damos um "Save" e um "reload" e teremos o "pontinho" por 𐴀m "resetado"!

Você também pode gostar

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