Inserir miniaturas nos posts e banners em slide no WordPress

Aviso importante!

Eu sei que você não quer ver propagandas, porém o conteúdo gratuito só está aqui graças a publicidade. Considere desativar o AdBlock para esse site.

Olá pessoal, estou postando hoje uma vídeo aula sobre WordPress mostrando como colocar miniaturas nos posts e também como implementar o sistema de banners em slide na home do blog. Esta aula foi feita para responder à várias perguntas feitas pelo site sobre banners e miniaturas.

A aula não ficou muito boa (no meu ponto de vista) pois estão construindo no lado da minha casa e o barulho me atrapalhou um pouco na concentração e na gravação, mas espero que todos entendam e gostem da aula mesmo assim.

Qualquer dúvida é só deixar um comentário, e sugestões também são bem vindas. Obrigados à todos que vem seguindo o blog e participando com sugestões para melhorar-mos cada vez mais.

Código da função para pegar a primeira imagen de cada post:

function get_first_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = "";
}
return $first_img;
}

Update: pessoal, na linha de código antes do fechamento da } do if (is_home()... tem um pequeno errinho no showposts, o correto é ter somente um offset, ficando assim:

<?php query_posts('offset=5'); ?>

Sobre o autor

Ricardo Bernardi

Sou técnico em hardware e desenvolvedor web, e sobre estes dois assuntos comecei a compartilhar aulas e artigos, tornando-me blogueiro em 2008. Em 2010 esse hobby virou profissão, e desde então tenho buscado melhorar e profissionalizar cada vez mais os projetos que mantenho na web.

Comentários

Atualmente temos 52 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

  • Boa tarde! Ricardo muito boa a sua video aula.

    Gostaria de pedir uma ajuda ou uma dica, estou aprendendo ainda a trabalhar com o wordpress.

    Comprei um template de wordprees para um cliente e já fiz todas as alterações necessárias.

    Mas estou encontrando problemas no SlideShows do portfólio pois tem algumas imagens repetindo você poderia me ajudar?

    Este é o site que estou terminando segue abaixo o link.

    http://ecourbe.com.br/website/projects/

    Desde já agradeço a sua atenção.

    abç

    Kleber

    Responder
  • vladimir comentou em

    Ricardo, muito show de bola suas VAs. Só fiquei com uma dúvida de qual alteração seria necessária para que o sistema carregasse uma postagem aleatória por categoria, limitada a uma exibição por categoria dentro do limite de 05 exibições. Se puder me ajudar nesse sentido ficarei muito agradecido.

    Responder
  • Gabriel Brunelli comentou em

    Olá Ricardo, muito obrigado pela va.

    Eu estou criando uma Web Rádio gospel, e queria saber
    se você conhece algum plugin para Player de Rádio.
    Por exemplo algum que fica fixo.

    Agradeço desde já.

    Responder
  • Erick Sales comentou em

    Muito obrigado Ricardo! Nunca conseguiria sem sua video aula. Infelizmente o WordPress está um pouco necessitado de um bom plugin de slide que realmente funcione e atenda nossas necessidades como esse ai :D Obrigado

    Responder
  • Marco Alexandre de Souza comentou em

    Boa tarde Ricardo,

    Estava um bom tempo procurando um slide simples e rápido para aplicação no wordpress, parabéns. Eu somente tenho uma dúvida, não consigo deixar as imagens nítidas quando entra no slide. Já fiz várias tentativas no css não sei se é alguma configuração do próprio wordpress que tenho que alterar e não tive resultado, gostaria de umas dicas, desde já agradeço!

    Abraço

    Responder
  • Boa tarde, Ricardo.

    Muito boa a video-aula.

    Você pode me explicar como fazer para trocar a paginação numérica (1,2,3...) por marcadores, nas imagens, tipo círculos?

    Grata

    Responder
  • otavio comentou em

    eae ,muito boa suas vídeo aulas parabéns!me ajudou muito.
    tip odesculpe se a pergunta for tonta mas é que sou iniciante em programação rsrs tipo:
    sabe aqueles botoes [1][2][3] que ficam emcima ,eles estão em laranja. como faço para alterar a cor deles?
    brigadão ae flow

    Responder
  • weslley comentou em

    Oi, show d bola a video aula so to com uma duvida
    tipo ao inves d pega posts eu tentei pegar imagens direto da pasta mas mesmo indicando o diretorio e extensao corretos nao aparece a imagem nem a faixa ,se algem puder me ajudar ?
    sou iniciante em programação
    vlew desde ja

    Responder
  • weslley comentou em

    Oi, show d bola a video aula so to com uma duvida
    tipo ao inves d pega posts eu tentei pegar imagens direto da pasta mas mesmo indicando o diretorio e extensao corretos nao aparece a imagem nem a faixa
    sou iniciante em programação
    vlew desde ja

    Responder
  • Alisson comentou em

    Muito Obrigado Suas Video Aulas São As Melheros com sua video aulas estou de desenvolvendo chamado Stside Mais Poirem Quanto estou so em criação no meu localhost.

    Responder
  • Carlos comentou em

    Olá Ricardo parabens pelo post, porém estou com seguinte problema, efetuei o passo a passo e apresenta o erro Parse error: syntax error, unexpected T_ENDWHILE

    segue o código abaixo, poderia me ajudar?

    Responder
    • Se não me falha a memória nesta aula eu errei um código no HTML, está faltando finalizar uma tag IMG ou A, confira qual é que está errada e corrija em sua codificação.

      E por gentileza, utilize as tags adequadas para postagem de código fonte nos comentários, caso contrário não tem como saber onde está o erro de outra forma.

      Responder
  • Carlos Fernando comentou em

    Fala Ricardo beleza então eu assisti sua aula muito boa e dessa que estava precisando pois baixei um thema imobiliario e ele tem esse problema não inseri as imagens o ingraçado que no localhost ele aceita da da uma ajuda por favor

    na minha idex esta assim:

    <a href=""><img class="postimg" src="/timthumb.php?src=&h=150&w=200&zc=1" alt=""/>

    <a href=""><img class="postimg" src="/images/dummy.png" alt="" />

    onde coloco este codigo porque é diferente do seu repare que ela ja vem com a thumb e também no function.
    desculpe mas naõ sei como colocar o codigo igual esta la em cima que vc pois me ajuda por favor.mande para meu email

    Responder
  • marcello lima alves ferreira comentou em

    oi Ricardo tudo em estou com um problema como eu faço aparecer para mim na minha pagina de posts no admin o campo imagem destacada pois nao esta ativa aqui no meu WP versão 3.3.1

    Responder
    • Seu tema precisa oferecer suporte à miniaturas, procure na documentação do WP sobre post_thumbnails, você precisa adicionar alguns códigos em seu tema (no functions.php).

      Responder
  • Sidnei comentou em

    Olá Ricardo! muito legal esta tua aula que Deus continue te abençoando com mais inteligencia e saúde.
    Um grande abraço. Estou tb esperando as aulas de criação de temas wp.
    Att: Sidnei Rodrigues

    Responder
  • Gustavo Luiz da Silva comentou em

    Olá Ricardo,
    Vi que depois de colocar o sistema de Banners aqui em
    meu blog ele começou a repetir os posts da primeira página
    na segunda página.
    Dê uma conferida ...http://engenhariacotidiana.com/
    como poço resolver esse problema ?
    Sei que a pergunta é bem vaga mas pelo menos
    dê uma luz aqui..
    Abraço

    Responder
    • Você precisa fazer 2 loops diferentes para suas páginas, por exemplo: 1 loop para o slide e outro para listar os posts. Procure algo como "multiple loops + wordpress" acho que é assim.

      Responder
      • Gustavo Luiz da Silva comentou em

        Olá Ricardo ,
        Vlw pela dica porém como sou iniciante nem sei onde coloca o loop
        seria no index?
        Abraço t+

        Responder
        • Gustavo Luiz da Silva comentou em

          Pelo que vi por aqui o problema está no
          se coloco offset=0 ele não repete mais os posts da primeira página na segunda porém
          os posts que são exibidos nos slides repetem abaixo..
          Colocando igual você fez no vídeo
          fica tudo ok mas dá um errinho na paginação q aparecem 4 páginas enquanto meu blog tem apenas 1.....
          Acho q vou deixar repetindo em os posts do slide mesmo..
          Vlw pela dica abraço t+

          Responder
        • Você precisa criar um loop exclusivo para o slide e depois desse loop "limpar ele da memória" para então fazer o loop da paginação normalmente. Pesquise um pouco sobre "query_posts" na documentação do WP, acredito que encontrará que procura.

          Responder
  • Gustavo Luiz da Silva comentou em

    Muito bom o Banner deu tudo certo por aqui
    só vou pedir uma dica como faço para fazer as alterações
    em localhost antes de enviar definitivo para o servido evitando
    assim erros no blog online?

    Responder
  • Luiz Fernando S. Lima comentou em

    Ola blz Ricardo,
    Estou testando o sistema de slide e até agora correu tudo bem, porem ta acontecendo um pequeno problema com a imagem no slideshow..., A imagem definida como destacada fica normal na thumbnail mas no slide fica desfocada/esticada (como se uma imagem pequena tivesse sido esticada pelo css...). Eu inseri ela com o tamanho normal do slideshow, e tbm inseri a função (no arquivo funcions como explicou no video) para cortar a imagem para o campo thumbnail. A imagem cortou normal para a thumbnail, mas para o slideshow não ficou nitida, como disse algo desfocou ela...Tem ideia do que fazer para ficar como o tamanho certo?e assim a imagem ficar nitida to tamanho normal no slide e cortada para thumbnail?
    Fico agradecido pelas informações.

    Responder
    • Olá Luiz, se a imagem está desfocada é porque a mesma está sendo chamada com um tamanho inferior ao aplicado ao slide, verifique sua função que define o tamanho do thumb de seu tema.

      Responder
      • Luiz F. S. Lima comentou em

        Blz Ricardo, valeu pela atençao
        defini a função com o tamanho exatamente igual ao do slide e resolveu (realmente estava com um tamanho inferior),
        mas nas imagens em miniatura, dos posts abaixo do slide (...abaixo do slide como vc fez no exemplo na video-aula), as imagens ficaram grandes (do mesmo tamanho em que aparecem no slide).
        No exemplo que usou na video-aula quando os posts se repetiam, as imagens ficavam certas..., com seus respectivos tamanhos no slide e na thumb (maior no slide e menor na thumbnail do post).
        Acho que tem que configurar o tamanho em css e estou tentando. Estou fazeno uns testes online...,se quiser visualizar e ter uma ideia melhor segue o endereço:: mensagempublica.com.br.
        se tiver alguma ideia do pq q aconteceu esse erro na minha implementação do slide, sou todo ouvidos...rs
        Valeu

        Responder
          • Luiz F. S. Lima comentou em

            Poxa, valeu mesmo, incrivel a flexibilidade do wordpress.
            parabens pelo site e pelos video-tutoriais, tão bem esclarecidos.

  • Netinho Ximenes comentou em

    Ricardo eu consegui habilitar a função post_tuhmbnail, o erro desapareceu, aí aparece td certinho paginando, soh q a imagem naum aparece....

    vc pode me ajudar a resolver?

    a paz...

    Responder
    • Confira a documentação oficial da função post_thumbnail para ver se você está chamando a mesma de forma correta. Veja também se tem a imagem destacada nas postagens.

      Responder
  • netinho Ximenes comentou em

    mandei os códigos por email

    o erro eh esse:

    Fatal error: Call to undefined function has_post_thumbnail() in C:\wamp\www\Site\wp-content\themes\portalboahora\index.php on line 17

    a paz....

    Responder
  • Netinho Ximenes comentou em

    brother me aju aki, eu fiz os código aki mais naum deu certo, aki estão os códigos:

    <a href="" title="">

    <a href="" title="">

    eu tentei incrementar no portal modelo, igual akele de curso desenvovendo portais com wordpress do Robson....
    vc pode me ajudar?

    aguardo.....
    a paz....

    Responder
  • Antonio Carlos comentou em

    Deu certo, mas a paginação da página de post está pegando o valor do que foi colocado no slide gerando erro, uso o wp_paginavi.
    Como faço para que o loop do slide não interfira no loopo dos posts da página e não gere erro na paginação?

    Responder
  • Antonio comentou em

    Muito bom!!!
    Se possível gostaria que você mostrasse como colocar posts em colunas, por exemplo: eu tenho 6 categorias de post e gostaria de mostrar cada categoria em duas linhas e tres colunas em formato randômico.

    Agradeço!

    Responder
  • thiago vilela comentou em

    gostaria de saber como manipular o plugin cub3r para wp
    poderia me ajudar????
    agradeço muito,
    é minha primeira vez no seu site e ja divulguei aqui
    abraçosss

    Responder
    • Olá Thiago, obrigado por comentar. Confesso que essa eu fico te devendo pois não sei trabalhar com este plugin, até fica a dica se alguem souber e quiser fazer uma aula para postar aqui no blog, todos nós agradecemos.

      Responder
  • Matheus comentou em

    "já estou gravando o curso de WP (criação de temas e outro de gerenciamento de blogs) em breve iniciarei as postagens. "
    Opá aguardando ansiosamente !
    Ahhh é muito obrigado pelo conhecimento passado ;)

    Responder
  • Victor comentou em

    Achei essa aula muito legal. E também acho que talvez seu próximo mini curso poderia ser sobre WordPress, criação ou edição de um tema. Seria muito bacana. Valeu, até mais ...

    Responder
    • Fala Victor, já estou gravando o curso de WP (criação de temas e outro de gerenciamento de blogs) em breve iniciarei as postagens. Primeiramente quero concluir o que está em aberto para então poder me dedicar mais ao WP.

      Responder
    • Olá Alessander, particularmente não li nenhum livro de PHP por isso sou suspeito em indicar algum. Se algume tiver sugestões de livros por favor ajudem ae para indicar algum ao nosso colega... obrigado

      Responder
  • João Neto comentou em

    Show de bola vídeo aula, adoro as postagens de vídeo aulas sobre wordpress.
    Parabéns, abraço.

    Responder
  • Rodolfo comentou em

    Fala Ricardo muito bom o video show de bola essa parte de colocar a imagem destaca ai eu não sabia sempre usava campos personalizados mais como sempre digo é vivendo e aprendendo obrigado pelo video e por me dar mais uma forma de trabalhar com WordPress vlw

    Responder

Deixe seu comentário