Criando um site do zero com WordPress - #17 Criando o arquivo single.php

Nessa 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;}