Solucionado (ver solução)
Solucionado
(ver solução)
18
respostas

Aula 3: Página single.php com thumbnail sem destaque

Olá, pessoal! Tudo bem?

O professor nesse curso ensina criar uma página (single.php) para que os post (ou Imóveis no nosso caso) possam ter suas respectivas páginas para trazer o conteúdo completo conforme cadastrado.

Na página principal, há os últimos Imóveis cadastrados, e quando clicado em algum imóvel a página single.php é aberta, mas com o layout semelhante a página index.php (o thumbnail está sem destaque).

Em outras temas (inclusive na vídeo aula o professor desmontra assim) nas páginas single, a imagem destacada toma uma proporção maior na página, mas como disse, utilizando o código disponibilizado pelo professor o código continua semelhante ao layout da página index.php, sendo que no vídeo o professor demonstra o thumbnail da forma que coloquei aqui.

Vocês podem me auxiliar? O erro está no arquivo CSS desta página, ou há alguma outra função que destaca a thumbnail na página single.php?

OBS: *Caso eu não tenha deixado claro, no vídeo 2 da Aula 3 nos 6m12 do vídeo é mostrado como a imagem inserida como thumbnail fica destacada na single.php.

*O código que testei é o mesmo disponibilizado pelo professor na aula 3 e 4.

Desde já obrigado!

18 respostas

Oi André, quer dizer que o thumbnail não está funcionando é isso?

Exatamente Wanderson! Ele não está funcionando como deveria na página single.php

Posta o código do single.php e do functions.php aqui pra gente analisar o que pode estar acontecendo?

Sim Wanderson, segue os códigos:

single.php :

<?php
$css_escolhido = 'single';
require_once('header.php');
?>

<main>

    <article>

        <?php if( have_posts() ) {
            while( have_posts() ) {
                the_post(); ?>

        <div class="single-imovel-thumbnail">
            <?php the_post_thumbnail(); ?>
        </div>

        <div class="container">
            <section class="chamada-principal">
                <h1><?php the_title(); ?></h1>
            </section>

            <section class="single-imovel-geral">

                <div class="single-imovel-descricao">
                    <?php the_content(); ?>
                </div>


            </section>

            <span class="single-imovel-data">
             <?php the_date(); ?>
            </span>


        </div>

        <?php }
        } ?>

    </article>

</main>



<?php get_footer(); ?>

functions.php :

<?php

add_theme_support( 'post-thumbnails' );

function registrar_imoveis() {
    $descricao = 'Usado para listar os imóveis da Maluras';
    $singular = 'Imóvel';
    $plural = 'Imóveis';

    $labels = array(
        'name' => $plural,
        'singular_name' => $singular,
        'view_item' => 'Ver ' . $singular,
        'edit_item' => 'Editar ' . $singular,
        'new_item' => 'Novo ' . $singular,
        'add_new_item' => 'Adicionar novo ' . $singular
    );

    $supports = array(
        'title',
        'editor',
        'thumbnail'
    );

    $args = array(
        'labels' => $labels,
        'description' => $descricao,
        'public' => true,
        'menu_icon' => 'dashicons-admin-home',
        'supports' => $supports
    );


    register_post_type( 'imovel', $args);    
}

add_action('init', 'registrar_imoveis');

/* Registrando menu de navegação */

function registrar_menu_navegacao() {
    register_nav_menu('header-menu', 'Menu Header');
}

add_action( 'init', 'registrar_menu_navegacao');

function get_titulo() {
    if( is_home() ) {
        bloginfo('name');
    } else {
        bloginfo('name');
        echo ' | ';
        the_title();
    }
}

function registra_taxonomia_localizacao() {
    $nomeSingular = 'Localização';
    $nomePlural = 'Localizações';

    $labels = array(
        'name' => $nomePlural,
        'singular_name' => $nomeSingular,
        'edit_item' => 'Editar ' . $nomeSingular,
        'add_new_item' => 'Adicionar nova ' . $nomeSingular
    );

    $args = array(
        'labels' => $labels,
        'public' => true,
        'hierarchical' => true    
    );

    register_taxonomy('localizacao', 'imovel', $args);
}

add_action('init', 'registra_taxonomia_localizacao');

Andre, seu código tá certo, a imagem tá aparecendo? Você colocou a imagem no campo de imagem destacada do post? Já que você comentou algo como não está funcionando como deveria, então como deveria estar funcionando?

Você quer uma imagem maior? A imagem não aparece de forma alguma?

Wanderson, desculpe pela demora!

Sim, quero a imagem maior e meu código está certo, igual ao código do Professor. A imagem aparece e a coloquei no campo de imagem destacada, entretanto, não da forma que aparece no vídeo do Professor.

Se você quer definir um tamanho personalizado para sua imagem destacada, pode fazer algo assim:

//Array com largura e altura da imagem
$array_tamanho = array(202, 90);
//Array com os atributos da tag IMG
$attr = array('alt'   => the_title());

if (has_post_thumbnail() ) {
    the_post_thumbnail($array_tamanho, $attr);
}

Daniel, primeiramente obrigado!

Eu testei e não funcionou. Eu não quero definir um tamanho, eu quero que ele apareço como padrão. Isso não está ocorrendo.

Pelo que eu entendi, no seu admin a imagem aparece quando você adiciona ou atualizar o post do tipo imovel. O seu problema ocorre apenas no site.

Olhando o código, também não identifiquei problema, mas você pode fazer os seguintes testes

<div class="single-imovel-thumbnail">
    <?php 
    if (has_post_thumbnail() ) {
        the_post_thumbnail(); 
    } else {
        echo "Nao tem imagem";
    }
    ?>
</div>

Se aparecer "não tem imagem", então ele não está localizando a imagem gravada no post.

Se não aparecer nada, abra o código fonte da página gerada pelo navegador e verifique se ele imprimiu a imagem. Se a imagem estiver lá, mas não estiver aparecendo, então temos um problema de estilo, você pode inspecionar o elemento para verificar o que está ocorrendo. Eliminar a class da div também seria outra forma de testar.

André, um dos fatores para sua imagem não aparecer do mesmo tamanho, além da codificação, é o tamanho da imagem em si e suas dimensões. O WordPress gera thumbnails direitinho se as imagens estiverem proporcionais com as configurações lá do painel. Quando não são proporcionais, ele faz o um corte diferente, que pode não ser igualzinho ao configurado.

A um tempo atrás o pessoal utilizava um script chamado timthumb escrito em php justamente para resolver esse problema de imagens de diferentes tamanhos. Checa isso também, se as dimensões são proporcionais. Está por exemplo, utilizando as mesmas imagens do instrutor?

Wanderson e Daniel,

Obrigado pela ajuda, mas acho que não sou eu que não estou conseguindo explicar. Talvez seja pela minha falta de experiência.

Acredito que seja melhor eu disponibilizar o meu projeto para vocês conseguirem entender o meu caso (de acordo com a disponibilidade de vocês, é claro). Segue abaixo o link:

https://drive.google.com/file/d/0B34eoub7ImZ5ZXdmRWU3eDYyUmM/view?usp=sharing

Nele, vocês verão que ele não está puxando somente um imóvel, mas sim os últimos cadastrados como na página home. É só clicar em algum imóvel e vocês entenderão.

Desde já, mais uma vez, muito obrigado!

Eu testei o seu código, e o que aconteceu foi o seguinte, cadastrei dois imóveis com imagem, eles apareceram OK na página inicial.

Ao clicar neles, abriu apenas o imóvel selecionado com a imagem destacada ocupando toda a largura, mas, não apareceu o texto do imóvel, e tinha um "?>" aparecendo na página. A imagem apareceu duplicada devido ao teste que você fez.

Eu percebi que o if para verificar se existe o post e o while estavam no meio da página. Eu alterei para o começo, e o texto voltou a aparecer. A single ficou desta forma:

<?php get_header(); ?>

<main>

    <article>
    <?php wp_reset_query(); ?>
        <?php if( have_posts() ) {
            while( have_posts() ) {
                the_post(); ?>

        <div class="single-imovel-thumbnail">
            <?php the_post_thumbnail(); ?>
        </div>

        <div class="container">
            <section class="chamada-principal">
                <h1><?php the_title(); ?></h1>
            </section>

            <section class="single-imovel-geral">

                <div class="single-imovel-descricao">
                    <?php the_content(); ?>
                    <?php the_permalink(); ?>

                </div>


            </section>

            <span class="single-imovel-data">
             <?php the_date(); ?>
            </span>


        </div>

        <?php }
        } ?>

    </article>

</main>



<?php get_footer(); ?>

Wow, o Daniel foi mais rápido. Andre verifica se resolve e marca o tópico como solucionado por favor?

Poxa Daniel, obrigado por mais uma tentativa, entretanto, eu testei aqui e a imagem ainda não corresponde com o tamanho mostrado pelo professor na vídeo-aula.

Veja este print usando seu código na página single.php:

https://drive.google.com/file/d/0B34eoub7ImZ5MkNlVUk1OG5HNUk/view?usp=sharing

Não era dessa forma que deveria ficar. A imagem do imóvel Casa de Praia deveria tomar todo o espaço que mostra os outros imóveis cadastrados.

solução!

Eu olhei a sua imagem, e testando aqui não ocorre este problema. Pela imagem, alterou o link na barra de endereços, mas o conteúdo não mudou.

Aqui não aconteceu isso, utilizando o conteúdo de sua pasta e fazendo apenas essa alteração no arquivo single, o conteúdo muda ao selecionar o imóvel. O seu site já funcionava antes de fazer a alteração, apenas não aparecia o texto do imóvel

Isso pode ser problema nos links permanentes. No seu admin, vá em configurações -links permanentes, e altere a configuração, depois teste para ver se resolveu. Ou então altere, e depois volte para a configuração anterior.

Se isto der errado, tente inserir o seguinte comando no final do seu arquivo functions.php

flush_rewrite_rules();

Aow Daniel! \o/

O problema era realmente simples rs

Somente mudando a configuração do link permanentes o thumbnail funcionou em todos imóveis.

Muito obrigado! Mas, deveria aparecer mesmo com a configuração padrão do link permanentes, certo?

Oi Andre, acredito que não, por que talvez essa seja a estratégia de seleção do template. Simplesmente single.php por padrão é utilizado para os post type comuns é utilizado como última alternativa caso não haja template mais específico. Perceba que você poderia nomear o single.php como imovel.php e continuar funcionando.

Era só uma adição a sua dúvida. Que bom que já conseguiu resolver o problema.

Entendi Wanderson, obrigado!

Não resolveria sem ajuda de vocês!