Criando um site do zero com WordPress - #17 Criando o arquivo single.php
22/03/2018Nessa vídeo-aula vamos criar nosso arquivo single.php, que é o arquivo responsável pela estilização interna do nosso post.
Desenvolvendo o single.php do WordPress
Após criar o arquivo single.php, vamos inserir o seguinte código nele.
<?php get_header(); ?>
<?php the_post(); ?>
<div class="SingleTitle">
<h1><?php the_title(); ?></h1>
<small><?php the_author(); ?></small>
</div>
<div class="SingleImagem">
<?php
$t=wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'thumbnail');
$m=wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'medium');
$ml=wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'medium_large');
$l=wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'large');
?>
<picture>
<source media="(max-width: 480px)" srcset="<?php echo $t[0]; ?>">
<source media="(min-width: 481px) and (max-width: 768px)" srcset="<?php echo $m[0]; ?>">
<source media="(min-width: 769px) and (max-width: 1199px)" srcset="<?php echo $ml[0]; ?>">
<source media="(min-width: 1200px)" srcset="<?php echo $l[0]; ?>">
<img src="<?php echo $l[0]; ?>" alt="Imagem do Post <?php the_title(); ?>" title="Imagem do Post <?php the_title(); ?>">
</picture>
</div>
<div class="SingleTexto">
<?php the_content(); ?>
</div>
<?php get_footer(); ?>
No código acima, a função the_post() serve para identificar nosso post, nos dando a oportunidade de usar as funções específicas para aquele post, como por exemplo a função the_content().
Estilizando o arquivo single.php
Vamos utilizar o CSS para estilizar nosso post.
.Single{}
.SingleTitle{float:left; width: 100%; text-align: center; margin-bottom: 15px;}
.SingleTitle h1{font-size: 28px; margin-bottom: 10px!important;}
.SingleTitle small{font-size: 18px;}
.SingleImagem{float:left; width: 100%; text-align: center; margin: 20px 0;}
.SingleTexto{float:left; width: 100%; text-align: center;}
Posts Relacionados
Criando um site do zero com WordPress - #16 Busca com filtros no WordPress III
Na terceira e última aula de pesquisa com filtro no WordPress, iremos realizar o ajax que fará a busca com filtro sem refresh da página.
Criando um site do zero com WordPress - #18 Criando formulário de comentários
No tutorial de hoje, vamos aprender como disponibilizar para o usuário a oportunidade de deixar um comentário no post do site.