Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Duilio Gomes Pereira

[Resolvido] Adicionar Foto no SlideShow pelo post.

Por , em Desenvolvimento com Wordpress

Recommended Posts

Duilio Gomes Pereira    0

Duilio Gomes Pereira
Postado

Oi pessoal! Cara esse wordpress realmente é sensacional, tô super feliz com ele. Tô com uma dúvida sobre slideshow. Eu quero criar uma maneira, na qual o meu cliente adicione as fotos a um slideshow pelo post. Eu encontrei esse plugin Featured Content Gallery, que é massa, mas eu acho que ele dá muito trabalho para postar usando o campo personalizado. Algum colega conhece algo que possa facilitar este procedimento? Conhece algum plugin fora este? ou se tem que ser no código mesmo usando JQuery, JavaScript...

 

Obrigado pela atenção e bom trabalho!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Silviomc    1

Silviomc
Postado

Deixa eu ver se entendi bem, você quer que o cliente ao inserir um post/notícia essa notícia vá para o slideshow com a imagem e título automaticamente? assim dessa forma, ex slideshow

Compartilhar este post

Link para o post
Compartilhar em outros sites

Silviomc    1

Silviomc
Postado

eu usei esse código ja faz um tempo, existem outros que posso te passar depois tbm:

 


<!-- destaque -->
            <div id="myslider" >
         <ul class="ui-tabs-nav">
<?php query_posts('showposts=4&category_name=destaques'); $i = 1; if (have_posts()) { while (have_posts()) { the_post(); ?>
		<li class="ui-tabs-nav-item <?php if ($i == 1) { ?>ui-tabs-selected<?php } ?>"<?php echo 'id="nav-fragment-' . $i . '"><a href="#fragment-' . $i . '">'; ?>
		<img src="<?php getImage('1'); ?>" width="73" height="58" >
		<span><?php the_title(); ?></span></a></li>
		<?php  $i++; } // end while loop
		} // end if
	wp_reset_query(); ?>
  </ul>
<?php query_posts('showposts=4&category_name=destaques'); $i = 1; if (have_posts()) { while (have_posts()) { the_post(); ?>
	<?php echo '<div id="fragment-' . $i . '" class="ui-tabs-panel" style="">'; ?>

           <a href="<?php the_permalink() ?>" ><img src="<?php getImage('1'); ?>" width="382" height="293" ></a>

	<div class="info" >
			<h2><a href="<?php the_permalink() ?>" ><?php the_title(); ?></a></h2>
			<p><?php the_content_rss('', TRUE, '', 15);  ?><a href="<?php the_permalink() ?>" >[+]</a></p>
		</div>
	</div>
	<?php  $i++; } // end while loop
	} // end if
wp_reset_query(); ?>
</div>

<!-- /destaque -->

 

css:

 


/*  slider css  */
#myslider{

border:2px solid #375D81;
width:612px;
padding-right:5px;
position:relative;
height:295px;
background:#375D81;
}
#myslider img{
   border:none;
}

#myslider ul.ui-tabs-nav{
position:absolute;
top:3px;
left:385px;
list-style:none;
padding:0;
margin:0;
width:230px;
height: 290px;
}
#myslider ul.ui-tabs-nav li{
padding:1px 0; padding-left:2px;
font-size:10px;
color:#666;
}
#myslider ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#FFF;
padding:2px;
border:1px solid #666;
}
#myslider ul.ui-tabs-nav li span{
font-size:10px; font-family:Verdana;
line-height:15px;
}
#myslider li.ui-tabs-nav-item a{
display:block;
height:70px;
color:#333;  background:#fff;
line-height:15px;
}
#myslider li.ui-tabs-nav-item a:hover{
background:#C4D7ED;
}
#myslider li.ui-tabs-selected{

}
#myslider ul.ui-tabs-nav li.ui-tabs-selected a{
background:#E0EBF5;
}
#myslider .ui-tabs-panel{
width:382px; height:295px;
background:#999; position:relative;
}
#myslider .ui-tabs-panel .info{
position:absolute;
top:225px;
left:1px;
width:381px;
height:70px;
background: url('images/transparent-bg.png');
}
#myslider .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#myslider .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#myslider .info a{
text-decoration:none;
color:#fff;
}
#myslider .info a:hover{
text-decoration:underline;
}
#myslider .ui-tabs-hide{
display:none;
}

 

 

No header.php você coloca isso abaixo, mas depois de <?php wp_head(); ?> :

 

<script type="text/javascript"> 
       $(document).ready(function(){ 
               $("#myslider").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);  
       }); 
</script>

 

Agora no function.php do seu tema você coloca o código abaixo:

 

// imagem do post 
function getImage($num) {
global $more;
$more = 1;
$content = get_the_content();
$count = substr_count($content, '<img');
$start = 0;
for($i=1;$i<=$count;$i++) {
$imgBeg = strpos($content, '<img', $start);
$post = substr($content, $imgBeg);
$imgEnd = strpos($post, '>');
$postOutput = substr($post, 0, $imgEnd+1);
$image[$i] = $postOutput;
$start=$imgEnd+1;  

$cleanF = strpos($image[$num],'src="')+5;
$cleanB = strpos($image[$num],'"',$cleanF)-$cleanF;
$imgThumb = substr($image[$num],$cleanF,$cleanB);

}
if(stristr($image[$num],'<img')) { echo $imgThumb; }
else {echo bloginfo('template_directory')."/images/sem_imagem.jpg";}
$more = 0;
}

 

 

Qualquer dúvida, pode perguntar aí. Agora é só você mudar para sua necessidade.

 

Existe também uma outra forma melhor de mostrar as imagens otimizadas, entretanto não sei se é muito seguro pois estou pesquisando ainda, é dessa forma com o arquivo timthumb.php

 

<a href="<?php the_permalink() ?>" ><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php getImage('1'); ?>&w=332&h=220&zc=1&q=90" ></a>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Duilio Gomes Pereira    0

Duilio Gomes Pereira
Postado

Nossa man! Show demais! Vou testar agora mesmo. Pow cara, eu to começando no wordpress, tõ alucinado. Como é legal cara! Eu quero muito trocar algumas ideias sobre para tirar dúvidas. Tem como um dia a gente conversar sobre isso? Juro que só vou incomodar só uma vez...kkkk é que eu sou auto-ditada, mas é sempre bom as orientações de quem conhece. Abração brother. Muito obrigado pela atenção! E venda muitos projetos e fique rico!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Silviomc    1

Silviomc
Postado

Tem sim claro, eu também vejo vários sites sobre desenvolvimento de wordpress e procuro sempre aprender, o que não consigo vou em foruns como esse.

 

Rapaz tem vários sites que vende video aulas sobre desenvolvimento de portais em wordpress dê uma olhada depois, isso é como um divisor de águas, vai abrir muito sua cabeça. conheço dois site que vende esse tipo de material pra que quer aprender(obs. não to ganhando nada pela dica, é somente para você ter idéia de materiais existentes.

 

http://mxcursos.com/curso-de-wordpress-vol-2

 

http://www.upinside.com.br/loja/curso/portais-com-wordpress

 

Foruns que você pode acessa também:

 

http://br.forums.wordpress.org/

 

http://wordpress.org/support/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Duilio Gomes Pereira    0

Duilio Gomes Pereira
Postado

Oi Silvio!

O código que você enviou, não tá mudando de slide. Fiz como você falou e pra testar coloquei como estava no topico do forum, mas não tá rodando. As fotos do slide desceram todas. Já coloquei a pasta js na pasta do themes com o Jquery e nada. O que pode ser? Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Duilio Gomes Pereira    0

Duilio Gomes Pereira
Postado

Olhe o que eu fiz:

 

 

 

---Content---

 

<!-- destaque -->
            <div id="myslider" >
                <ul class="ui-tabs-nav">
<?php query_posts('showposts=4&category_name=destaques'); $i = 1; if (have_posts()) { while (have_posts()) { the_post(); ?>
                       <li class="ui-tabs-nav-item <?php if ($i == 1) { ?>ui-tabs-selected<?php } ?>"<?php echo 'id="nav-fragment-' . $i . '"><a href="#fragment-' . $i . '">'; ?>
                       <img src="<?php getImage('1'); ?>" width="73" height="58" >
                       <span><?php the_title(); ?></span></a></li>
                       <?php  $i++; } // end while loop
                       } // end if
               wp_reset_query(); ?>
         </ul>
       <?php query_posts('showposts=4&category_name=destaques'); $i = 1; if (have_posts()) { while (have_posts()) { the_post(); ?>
               <?php echo '<div id="fragment-' . $i . '" class="ui-tabs-panel" style="">'; ?>

           <a href="<?php the_permalink() ?>" ><img src="<?php getImage('1'); ?>" width="382" height="293" ></a>

               <div class="info" >
                               <h2><a href="<?php the_permalink() ?>" ><?php the_title(); ?></a></h2>
                               <p><?php the_content_rss('', TRUE, '', 15);  ?><a href="<?php the_permalink() ?>" >[+]</a></p>
                       </div>
               </div>
               <?php  $i++; } // end while loop
               } // end if
       wp_reset_query(); ?>
</div>

 

<!-- /destaque -->

 

----CSS----

 

#myslider{

       border:2px solid #375D81;
       width:612px;
       padding-right:5px;
       position:relative;
       height:295px;
       background:#375D81;
	margin-top:20px;
}
#myslider img{
   border:none;
       }

#myslider ul.ui-tabs-nav{
       position:absolute;
       top:3px;
       left:385px;
       list-style:none;
       padding:0;
       margin:0;
       width:230px;
       height: 290px;
}
#myslider ul.ui-tabs-nav li{
       padding:1px 0; padding-left:2px;
       font-size:10px;
       color:#666;
}
#myslider ul.ui-tabs-nav li img{
       float:left; margin:2px 5px;
       background:#FFF;
       padding:2px;
       border:1px solid #666;
}
#myslider ul.ui-tabs-nav li span{
       font-size:10px; font-family:Verdana;
       line-height:15px;
}
#myslider li.ui-tabs-nav-item a{
       display:block;
       height:70px;
       color:#333;  background:#fff;
       line-height:15px;
}
#myslider li.ui-tabs-nav-item a:hover{
       background:#C4D7ED;
}
#myslider li.ui-tabs-selected{

}
#myslider ul.ui-tabs-nav li.ui-tabs-selected a{
       background:#E0EBF5;
}
#myslider .ui-tabs-panel{
       width:382px; height:295px;
       background:#999; position:relative;
}
#myslider .ui-tabs-panel .info{
       position:absolute;
       top:225px;
       left:1px;
       width:381px;
       height:70px;
       background: url('images/transparent-bg.png');
}
#myslider .info h2{
       font-size:18px; font-family:Georgia, serif;
       color:#fff; padding:5px; margin:0;
       overflow:hidden;
}
#myslider .info p{
       margin:0 5px;
       font-family:Verdana; font-size:11px;
       line-height:15px; color:#f0f0f0;
}
#myslider .info a{
       text-decoration:none;
       color:#fff;
}
#myslider .info a:hover{
       text-decoration:underline;
}
#myslider .ui-tabs-hide{
       display:none;
}

 

---Function---

 

<?php
if ( function_exists('register_sidebar') )
   register_sidebar();

add_filter('comments_template', 'legacy_comments');
function legacy_comments($file) {
if(!function_exists('wp_list_comments')) 	$file = TEMPLATEPATH . '/legacy.comments.php';
return $file;
}
// imagem do post
function getImage($num) {
global $more;
$more = 1;
$content = get_the_content();
$count = substr_count($content, '<img');
$start = 0;
for($i=1;$i<=$count;$i++) {
$imgBeg = strpos($content, '<img', $start);
$post = substr($content, $imgBeg);
$imgEnd = strpos($post, '>');
$postOutput = substr($post, 0, $imgEnd+1);
$image[$i] = $postOutput;
$start=$imgEnd+1;  

$cleanF = strpos($image[$num],'src="')+5;
$cleanB = strpos($image[$num],'"',$cleanF)-$cleanF;
$imgThumb = substr($image[$num],$cleanF,$cleanB);

}
if(stristr($image[$num],'<img')) { echo $imgThumb; }
else {echo bloginfo('template_directory')."/images/sem_imagem.jpg";}
$more = 0;
}
?>

 

---HEADER---

 

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/print.css" type="text/css" media="print" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
       $(document).ready(function(){
               $("#myslider").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
       });
</script>
</head>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento com Wordpress
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito