Home
Button Mobile Webdesign em Foco
Newsletter Webdesign em Foco
Support Webdesign em Foco
Contribuition Webdesign em Foco
Doe para a Webdesign em Foco
Suporte da Webdesign em Foco
Fechar

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

22/03/2018

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;}
Receba as aulas da Webdesign em Foco em Seu Email
Suporte Webdesign em Foco

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.
Saiba mais!
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.
Saiba mais!
WordPress do Zero
Neste curso aprenderemos como criar um site no CMS WordPress do zero, começando pela instalação, criação do tema e publicação no ar.
Saiba mais!