Plugin p Sistema de Noticias, com imagem grande e thumb

Diego Dacal · Novembro 4, 2009

Oi gente,

Então, comecei a usar wordpress como CMS e to achando bem legal. Peguei um projeto pequeno pra começar a fazer aprendendo e dei de cara com um problema.

Minha ideia era fazer um pequeno sistema de noticias.

Para inserir as noticias, eu queria que meu cliente tivesse alguns campos, como Titulo, Conteudo e Imagem (a principio soh isso, talvez entrar um campo Lugar ou algo mais).

Para exibir essa noticia eu queria fazer de 2 maneiras. Essa mesma imagem que o cliente fez o upload eu queria que ela aparecesse na pagina principal, como um thumb que fosse redimensionado ali mesmo e dentro da noticia completa, em um tamanho tambem definido pelo sistema.

Ou seja, eu queria ter uma imagem vinculada ao post, mas separada do conteúdo (forma com que é feito o post normalmente). Para que eu pudesse receber essa imagem na hora q eu quisesse e usar outras funçoes para redimensionar.

Pra fazer isso tudo eu descobri um plugin espetacular chamado "Flutter". Ele me permite criar tipos customizados de dados. Ou seja, eu posso colocar lá pro meu cliente "Criar nova notícia", e criar os campos específicos desse tipo de conteúdo, e logo abaixo criar um "Criar novo portifólio", ou qq outra tipo de conteudo, com os campos também personalizados.

O problema é que esse plugin está com um defeito que não consigo encontrar solução. Quando faço upload da imagem, ele não mostra o thumb da imagem carregada, mas retorna um erro ali dentro. Não rola de entregar um trabalho pra um cliente assim, né?

Então, queria saber se vocês conhecem algum plugin que atenda minhas necessidades, ou que se assemelhem ao máximo desse, ou até mesmo alguma dica de como fazer isso, pq estou realmente bem perdido.

Obrigado,

Diego Dacal.

Daniel Filho · Novembro 6, 2009

Cara, acho que nem precisa criar um sistema de notícias para isso, basta controlar o loop do WordPress de acordo com as tuas necessidades e criar uma função responsável pelas imagens.

Por exemplo, o código abaixo mostra uma index.php de um tema feito por mim que é responsável por exibir pequenas manchetes das mais diversas categorias configuradas no WordPress, exibindo ainda uma imagem para cada manchete. Ou seja, eu uso o próprio sistema de postagens do WordPress.

<script language="JavaScript" src="wp-content/themes/CooltBox/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="wp-content/themes/CooltBox/jcycle.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
$(function() {
$('#slide').cycle({ fx: 'fade' });
});
</script>
<?php get_header(); ?>
<div id="container">
  <div align="center" style="clear:both; width:898px; height:auto; margin-top:20px">
    <div id="slide" style="float:left; width:500px; height:160px">
      <a href=""><img src="wp-content/themes/CooltBox/imagens/destaques/destaque1.png" width="500" height="160" border="0" /></a>
      <a href=""><img src="wp-content/themes/CooltBox/imagens/destaques/destaque2.png" width="500" height="160" border="0" /></a>
      <a href=""><img src="wp-content/themes/CooltBox/imagens/destaques/destaque3.png" width="500" height="160" border="0" /></a>
      <a href=""><img src="wp-content/themes/CooltBox/imagens/destaques/destaque4.png" width="500" height="160" border="0" /></a>
    </div>
    <div style="float:right; width:388; height:160">
      <a href=""><img src="wp-content/themes/CooltBox/imagens/promo.png" width="388" height="160" border="0" /></a>
    </div>
  </div>
  <div style="height:10px; clear:both">
  </div>
  <div id="container-title">COLUNAS</div>
	<table width="898" height="auto" align="center" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="217" height="auto">
          <div id="coluna-est">
            <?php query_posts('category_name=rock-talk&showposts=1'); ?>
              <?php while (have_posts()) : the_post(); ?>
	            <div id="coluna-info">
                  POR <?php the_author_posts_link(); ?>, EM <a href="?cat=4">ROCK TALK</a>
                </div>
                <div id="coluna-img">
                  <a href="<?php the_permalink(); ?>"><?php imagem('imagem', 211, 189); ?></a>
		        </div>
                <div id="coluna-title"><a href="<?php the_permalink(); ?>"><?php the_title(''); ?></a></div>
                <div id="coluna-exc"><?php the_content(' ...continue lendo'); ?></div>
              <?php endwhile; ?>
          </div>
        </td>
        <td width="10" height="auto" style="background:url(wp-content/themes/CooltBox/imagens/sep.png) top center repeat-y">
        </td>
        <td width="217" height="auto">
          <div id="colunas-est">
            <?php query_posts('category_name=ai-mundo&showposts=1'); ?>
              <?php while (have_posts()) : the_post(); ?>
	            <div id="coluna-info">
                  POR <?php the_author_posts_link(); ?>, EM <a href="?cat=6">AI MUNDO</a>
                </div>
                <div id="coluna-img">
                  <a href="<?php the_permalink(); ?>"><?php imagem('imagem', 211, 189); ?></a>
		        </div>
                <div id="coluna-title"><a href="<?php the_permalink(); ?>"><?php the_title(''); ?></a></div>
                <div id="coluna-exc"><?php the_content(' ...continue lendo'); ?></div>
              <?php endwhile; ?>
          </div>
        </td>
        <td width="10" height="auto" style="background:url(wp-content/themes/CooltBox/imagens/sep.png) top center repeat-y">
        </td>
        <td width="217" height="auto">
          <div id="colunas-est">
            <?php query_posts('category_name=cenazoica&showposts=1'); ?>
              <?php while (have_posts()) : the_post(); ?>
	            <div id="coluna-info">
                  POR <?php the_author_posts_link(); ?>, EM <a href="?cat=7">CENAZÓICA</a>
                </div>
                <div id="coluna-img">
                  <a href="<?php the_permalink(); ?>"><?php imagem('imagem', 211, 189); ?></a>
		        </div>
                <div id="coluna-title"><a href="<?php the_permalink(); ?>"><?php the_title(''); ?></a></div>
                <div id="coluna-exc"><?php the_content(' ...continue lendo'); ?></div>
              <?php endwhile; ?>
          </div>
        </td>
        <td width="10" height="auto" style="background:url(wp-content/themes/CooltBox/imagens/sep.png) top center repeat-y">
        </td>
        <td width="217" height="auto">
          <div id="coluna-est">
            <?php query_posts('category_name=saindo-da-caixa&showposts=1'); ?>
              <?php while (have_posts()) : the_post(); ?>
	            <div id="coluna-info">
                  POR <?php the_author_posts_link(); ?>, EM <a href="?cat=5">SAINDO DA CAIXA</a>
                </div>
                <div id="coluna-img">
                  <a href="<?php the_permalink(); ?>"><?php imagem('imagem', 211, 189); ?></a>
		        </div>
                <div id="coluna-title"><a href="<?php the_permalink(); ?>"><?php the_title(''); ?></a></div>
                <div id="coluna-exc"><?php the_content(' ...continue lendo'); ?></div>
              <?php endwhile; ?>
          </div>
        </td>
      </tr>
    </table>
    <div id="container-title" style="margin-top:30px">ÚLTIMAS POSTAGENS</div>
    <table width="898" height="auto" align="center" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="162" height="auto">
          <div id="ultimo-est">
            <?php query_posts('category_name=ultimas-noticias&showposts=1'); ?>
              <?php while (have_posts()) : the_post(); ?>
	            <div id="ultimo-info">
                  POR <?php the_author_posts_link(); ?>, EM <a href="<?php the_permalink(); ?>">NOTÍCIAS</a>
                </div>
                <div id="ultimo-img">
                  <a href="<?php the_permalink(); ?>"><?php imagem('imagem', 156, 112); ?></a>
		        </div>
                <div id="ultimo-title"><a href="<?php the_permalink(); ?>"><?php the_title(''); ?></a></div>
                <div id="ultimo-exc" style="text-align:justify"><?php the_content(' ...continue lendo'); ?></div>
              <?php endwhile; ?>
          </div>
        </td>
        <td width="10" height="auto">
        </td>
        <td width="162" height="auto">
          <div id="ultimo-est">
            <?php query_posts('category_name=cinema&showposts=1'); ?>
              <?php while (have_posts()) : the_post(); ?>
	            <div id="ultimo-info">
                  POR <?php the_author_posts_link(); ?>, EM <a href="?cat=9">CINEMA</a>
                </div>
                <div id="ultimo-img">
                  <a href="<?php the_permalink(); ?>"><?php imagem('imagem', 156, 112); ?></a>
		        </div>
                <div id="ultimo-title"><a href="<?php the_permalink(); ?>"><?php the_title(''); ?></a></div>
                <div id="ultimo-exc" style="text-align:justify"><?php the_content(' ...continue lendo'); ?></div>
              <?php endwhile; ?>
          </div>
        </td>
        <td width="10" height="auto">
        </td>
        <td width="162" height="auto">
          <div id="ultimo-est">
            <?php query_posts('category_name=musica&showposts=1'); ?>
              <?php while (have_posts()) : the_post(); ?>
	            <div id="ultimo-info">
                  POR <?php the_author_posts_link(); ?>, EM <a href="?cat=40">MÚSICA</a>
                </div>
                <div id="ultimo-img">
                  <a href="<?php the_permalink(); ?>"><?php imagem('imagem', 156, 112); ?></a>
		        </div>
                <div id="ultimo-title"><a href="<?php the_permalink(); ?>"><?php the_title(''); ?></a></div>
                <div id="ultimo-exc" style="text-align:justify"><?php the_content(' ...continue lendo'); ?></div>
              <?php endwhile; ?>
          </div>
        </td>
        <td width="10" height="auto">
        </td>
        <td width="162" height="auto">
          <div id="ultimo-est">
            <?php query_posts('category_name=teatro&showposts=1'); ?>
              <?php while (have_posts()) : the_post(); ?>
	            <div id="ultimo-info">
                  POR <?php the_author_posts_link(); ?>, EM <a href="<?php the_permalink(); ?>">TEATRO</a>
                </div>
                <div id="ultimo-img">
                  <a href="<?php the_permalink(); ?>"><?php imagem('imagem', 156, 112); ?></a>
		        </div>
                <div id="ultimo-title"><a href="<?php the_permalink(); ?>"><?php the_title(''); ?></a></div>
                <div id="ultimo-exc" style="text-align:justify"><?php the_content(' ...continue lendo'); ?></div>
              <?php endwhile; ?>
          </div>
        </td>
        <td width="10" height="auto">
        </td>
        <td width="210" height="auto">
          <div id="pod-est">
            <?php query_posts('category_name=podcast&showposts=1'); ?>
              <?php while (have_posts()) : the_post(); ?>
	            <div id="pod-info">
                  POR <?php the_author_posts_link(); ?>, EM <a href="<?php the_permalink(); ?>">PODCAST</a>
                </div>
                <div id="pod-img">
                  <a href="<?php the_permalink(); ?>"><?php imagem('imagem', 204, 112); ?></a>
		        </div>
                <div id="pod-title"><a href="<?php the_permalink(); ?>"><?php the_title(''); ?></a></div>
                <div id="pod-exc" style="text-align:justify"><?php the_content(' ...continue lendo'); ?></div>
              <?php endwhile; ?>
          </div>
        </td>
      </tr>
    </table>
    <table width="898" height="10" align="center" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="162" height="10" style="background:url(wp-content/themes/CooltBox/imagens/hor.png) center repeat-x"></td>
        <td width="10" height="10"></td>
        <td width="162" height="10" style="background:url(wp-content/themes/CooltBox/imagens/hor.png) center repeat-x"></td>
        <td width="10" height="10"></td>
        <td width="162" height="10" style="background:url(wp-content/themes/CooltBox/imagens/hor.png) center repeat-x"></td>
        <td width="10" height="10"></td>
        <td width="162" height="10" style="background:url(wp-content/themes/CooltBox/imagens/hor.png) center repeat-x"></td>
        <td width="10" height="10"></td>
        <td width="210" height="10" style="background:url(wp-content/themes/CooltBox/imagens/hor.png) center repeat-x"></td>
      </tr>
    </table>
    <table width="898" height="auto" align="center" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="162" height="auto">
          <div id="ultimo-est">
            <?php query_posts('category_name=agenda-cultural&showposts=1'); ?>
              <?php while (have_posts()) : the_post(); ?>
	            <div id="ultimo-info">
                  POR <?php the_author_posts_link(); ?>, EM <a href="<?php the_permalink(); ?>">AG. CULTURAL</a>
                </div>
                <div id="ultimo-img">
                  <a href="<?php the_permalink(); ?>"><?php imagem('imagem', 156, 112); ?></a>
		        </div>
                <div id="ultimo-title"><a href="<?php the_permalink(); ?>"><?php the_title(''); ?></a></div>
                <div id="ultimo-exc" style="text-align:justify"><?php the_content(' ...continue lendo'); ?></div>
              <?php endwhile; ?>
          </div>
        </td>
        <td width="10" height="auto">
        </td>
        <td width="162" height="auto">
          <div id="ultimo-est">
            <?php query_posts('category_name=exposicoes&showposts=1'); ?>
              <?php while (have_posts()) : the_post(); ?>
	            <div id="ultimo-info">
                  POR <?php the_author_posts_link(); ?>, EM <a href="<?php the_permalink(); ?>">COOLT VITRINE</a>
                </div>
                <div id="ultimo-img">
                  <a href="<?php the_permalink(); ?>"><?php imagem('imagem', 156, 112); ?></a>
		        </div>
                <div id="ultimo-title"><a href="<?php the_permalink(); ?>"><?php the_title(''); ?></a></div>
                <div id="ultimo-exc" style="text-align:justify"><?php the_content(' ...continue lendo'); ?></div>
              <?php endwhile; ?>
          </div>
        </td>
        <td width="10" height="auto">
        </td>
        <td width="554" height="auto" style="background:url(wp-content/themes/CooltBox/imagens/siga-bg.png) left no-repeat">
          <div class="myspace">
            <table width="auto" height="auto" align="center" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="auto" height="auto" class="myspace"><a class="myspace" href="http://www.myspace.com/cooltbox" target="_blank"><img src="wp-content/themes/CooltBox/imagens/icon-espc.png" width="105" height="99" border="0" /></a></td>
              </tr>
            </table>
          </div>
          <div class="orkut">
            <table width="auto" height="auto" align="center" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="auto" height="auto" class="orkut"><a class="orkut" href="http://www.orkut.com.br/Main#Community?cmm=94292269&refresh=1" target="_blank"><img src="wp-content/themes/CooltBox/imagens/icon-espc.png" width="105" height="99" border="0" /></a></td>
              </tr>
            </table>
          </div>
          <div class="twitter">
            <table width="auto" height="auto" align="center" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="auto" height="auto" class="twitter"><a class="twitter" href="http://twitter.com/cooltbox/" target="_blank"><img src="wp-content/themes/CooltBox/imagens/icon-espc.png" width="105" height="99" border="0" /></a></td>
              </tr>
            </table>
          </div>
          <div class="feed">
            <table width="auto" height="auto" align="center" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="auto" height="auto" class="feed"><a class="feed" href="" target="_blank"><img src="wp-content/themes/CooltBox/imagens/icon-espc.png" width="105" height="99" border="0" /></a></td>
              </tr>
            </table>
          </div>
        </td>
      </tr>
    </table>
    <table width="898" height="10" align="center" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="162" height="10" style="background:url(wp-content/themes/CooltBox/imagens/hor.png) center repeat-x"></td>
        <td width="10" height="10"></td>
        <td width="162" height="10" style="background:url(wp-content/themes/CooltBox/imagens/hor.png) center repeat-x"></td>
        <td width="564" height="10"></td>
      </tr>
    </table>
</div>
<?php get_footer(); ?>

Tudo bem, realmente é muito código. Mas atenta pra esse trecho:

<div id="coluna-est">
            <?php query_posts('category_name=rock-talk&showposts=1'); ?>
              <?php while (have_posts()) : the_post(); ?>
	            <div id="coluna-info">
                  POR <?php the_author_posts_link(); ?>, EM <a href="?cat=4">ROCK TALK</a>
                </div>
                <div id="coluna-img">
                  <a href="<?php the_permalink(); ?>"><?php imagem('imagem', 211, 189); ?></a>
		        </div>
                <div id="coluna-title"><a href="<?php the_permalink(); ?>"><?php the_title(''); ?></a></div>
                <div id="coluna-exc"><?php the_content(' ...continue lendo'); ?></div>
              <?php endwhile; ?>
          </div>

Perceba que ao longo do código, existirão trechos semelhatíssimos. A diferença está na definição dos parâmetros de <?php query_posts('category_name=rock-talk&showposts=1'); ?>, que determina uma condição para a montagem do loop. Neste caso, exibir um post (o último) da categoria Rock Talk. Perceba que foi definido também o "more" do <?php the_content(' ...continue lendo'); ?> que é responsável por resumir a postagem. E claro, quando clicado, o usuário vai para o single.php.

Se você entender que pode criar a sua página com a estrutura que quiser, e entender que pode (e deve, neste caso) controlar o loop ao seu gosto, e ainda, que podem existir vários loops na página, você criará desde blogs a portais bem dinâmicos com o WordPress.

Agora vamos ao segredo do thumb. Perceba ainda no código anterior o seguinte trecho <?php imagem('imagem', 211, 189); ?>. Este trecho é responsável por exibir o thumb da manchete. Para isso, basta inserir o código abaixo no seu functions.php.

<?php
function imagem($key, $width, $height) {
	global $post;
	$custom_field = get_post_meta($post->ID, $key, true);

	if($custom_field) {
		echo '<img src="'.$custom_field.'" border="0" width="'.$width.'" height="'.$height.'" />';
	}
	else {
		return;
	}
}
?>

Como funciona?

Bem, juntamente com a edição do post, você deve inserir algumas coisas no "Campos Personalizados". Insira em "Nome": imagem. E em "Valor", a URL correspondente a imagem que deve ser apresentada. Clique "em adicionar campo", e claro, insira a memsa imagem no seu post, normalmente. Isso concluiria a sua idéia.

Lembre-se que na linha de comando dentro do loop, você pode terminar o tamanho da imagem.

Acho que deu pra entender não?

A propósito, seja bem-vindo ao fórum!

Qualquer coisa, posta ai!

Diego Dacal · Novembro 11, 2009

Oi Daniel,

Antes de tudo, muito obrigado pela resposta!

Mas bom, dessa forma não me ajuda muito. Eu não posso entregar um sistema pro meu usuário onde ele tenha que fazer o upload por um lugar, lembrar da url pra depois criar um post, pra criar um campo e depois inserir a url. :/

Sabe como é cliente, né? Bicho chato! hehehe

Mas sem dúvida isso me esclareceu muita coisa do Wordpress, que ainda sou bem iniciante.

Vou ver se encontro algum plugin que modifique o WP e insira um campo que permita enviar uma imagem e essa imagem fique "ligada" ao post, podendo ser recuperada.

Muito Obrigado,

Diego Dacal.

Entrar

Arquivado

Plugin p Sistema de Noticias, com imagem grande e thumb

Recommended Posts

Diego Dacal 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Daniel Filho 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diego Dacal 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carregamento preloading

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante