Se você já passou algum tempo visitando blogs ultimamente é provável que você já viu aqueles pequena foto do pequeno instruído com um título ou um pouco de texto ou perto do topo. Não tenho certeza se ele tem um nome próprio, mas a maioria das pessoas que eu falei para chamá-lo de um carrossel, neste tutorial eu vou lhe mostrar como adicionar um para o seu blog. Para os poucos de vocês que não sei o que eu estou falando, aqui está uma captura de tela de gawker.com que é o lugar que eu vi ele sendo usado.
Como o tempo passa em movimento histórias em todo o banner, acabou caindo fora da vista, semelhante à forma como os cavalos de um carrossel. Estou indo para mostrar-lhe como fazer isso com a tese, como acontece com muitos desses cursos que você pode adaptar a programação para trabalhar com qualquer blog, é apenas mais fácil com a tese. 
Primeiro vamos precisar de uma forma de isolar quais os lugares que queremos que apareça no topo. Provavelmente, você vai querer escolher o melhor de suas mensagens mais recentes (nem todos os novos lugares são melhores). Eu gosto de manter meu blog manutenção ou baixa auto maintaing, então eu decidi usar a categoria de destaque que é o mesmo que eu uso para preencher o controle deslizante visual que está na página inicial. No entanto, você poderia facilmente usar tags em vez de uma categoria isolada.
Para fazer a farra acontecer vamos criar uma função personalizada em custom_functions.php chamado top_carousel() e dentro dele vamos adicionar global $post (que permite wordpress para obter itens fora do cargo atual) e um "if" para fazer a farra só aparecem em páginas de post só (senti a homepage olhou para "ocupado" com uma barra e um carrossel, mas a escolha é sua). Veja o que o código inicial é semelhante a:
function top_carousel(){
global $post;
if (is_single ()){
}
}
Em seguida vamos adicionar um "wrapper" para o "carrossel" Isso nos permitirá adicionar algum estilo visual, uma vez que estamos a fazer:
function top_carousel(){
global $post;
if (is_single ()){
echo '<div id="topcarosel">';
echo '</div>';
}
}
Em seguida nós vamos precisar para construir um banco de dados selecione declaração que seleciona apenas as mensagens que queremos. No meu caso, eu queria os últimos 6 posts publicados, a partir da "manchete" da categoria, em ordem de data inversa. Para isso vamos usar a seguinte consulta
$the_query = new WP_Query(array(
'category_name'=>'featured',
'orderby'=>'date',
'order'=>'DESC',
'showposts'=>'6'
));
Explicando os meandros da WP_Query está além do escopo deste post, contudo, você pode ler mais sobre ele no Wordpress ou lotes de tutoriais outro na web. No entanto esperemos que ele é fácil de fazer engenharia reversa, selecione apenas mensagens a partir do "manchete categoria", ordená-los por data, por ordem decrescente, e selecionar um máximo de 6 lugares.
Em seguida temos de mostrar os lugares com base nessa consulta, veja aqui como fazê-lo:
while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID;
$image = get_post_meta($post->ID, 'thesis_post_image', $single = true);
echo '<div class="carouselu">';
echo '<a href="';
echo the_permalink();
echo '" >';
echo '<img src="http://www.wolf-howl.com/wp-content/themes/thesis-wolf/lib/scripts/thumb.php?src='.$image.'&w=140&h=140&zc=1&q=100"></a>';
echo '<a href="';
echo the_permalink();
echo '" >';
echo the_title();
echo '</a>';
echo '</div>';
endwhile;
Esse pedaço de código SQL executa a consulta anterior, de exibição da imagem tese para esse lugar, redimensioná-lo para baixo para um quadrado 140 × 140, liga para o permalink para o cargo, depois de exibir o título como um link para o permalink, bem como, e envolve a coisa toda em um div ".
Há apenas um pouco atrás, já que estamos indo para usar o CSS para a unidade flutuante carrossel individual DIV, precisamos ter certeza de que limpar a flutuar quando estamos feito assim:
echo '<div style="clear:both"></div>';
Ok, agora para colocar tudo junto, ele deve procurar algo como isto:
function top_carousel(){
global $post;
if (is_single ()){
echo '<div id="topcarosel">';
$the_query = new WP_Query(array(
'category_name'=>'featured',
'orderby'=>'date',
'order'=>'DESC',
'showposts'=>'6'
));
while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID;
$image = get_post_meta($post->ID, 'thesis_post_image', $single = true);
echo '<div
function top_carousel(){
global $post;
if (is_single ()){
echo '<div id="topcarosel">';
$the_query = new WP_Query(array(
'category_name'=>'featured',
'orderby'=>'date',
'order'=>'DESC',
'showposts'=>'6'
));
while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID;
$image = get_post_meta($post->ID, 'thesis_post_image', $single = true);
echo '<div>';
echo '<a href="';
echo the_permalink();
echo '" >';
echo '<img src="http://www.wolf-howl.com/wp-content/themes/thesis-wolf/lib/scripts/thumb.php?src='.$image.'&w=140&h=140&zc=1&q=100"></a>';
echo '<a href="';
echo the_permalink();
echo '" >';
echo the_title();
echo '</a>';
echo '</div>';
endwhile;
echo '<div style="clear:both"></div>';
echo '</div>';
}
}
Apenas 2 passos à esquerda, precisamos adicionar este código para custom_functions.php dizer tese quando ativar e exibir o carrossel, fazemos isso assim:
add_action('thesis_hook_before_header', 'top_carousel');
Então precisamos adicionar um pouco de estilo para o nosso arquivo custom.css, no meu caso eu usei esta:
#topcarosel {border:1px solid #efefef; padding: 0px;padding-left:10px;}
.caroselu {width:150px;float:left;padding:3px;text-align:center;}
.caroselu IMG {border:2px solid #ccc;display:block;}
Que envolve uma borda cinza em torno do carrossel superior inteiro e coloca um pouco de padding no lugar, em seguida, define uma largura de 150px para cada uma das unidades "carrossel" com um pouco de estofamento e "flutua" los para que eles aparecem lado a lado, e depois coloca uma caixa cinza em torno da imagem no "carrossel" e certifique-se não se arrastam únicas letras na tela. Se você fez tudo certo, deve se parecer com a tela abaixo:
Esse código é muito bonita nua ossos e não de oportunidade para você melhorar / mudar, aqui estão algumas sugestões:
- Ter o primeiro um ou dois slots de preenchimento de uma marca diferente / categoria, se você tem qualquer tipo de "notícia" de conteúdo em seu blog, que seria realmente útil.
- Olhe para a tag / categoria do post atual e escolher lugares relacionados para os últimos um ou dois slots, isso deve aumentar drasticamente o CTR.
- Alterar a posição do carrossel por exemplo Techcrunch atualmente mistura-lo para o "conteúdo" bloco, o New York Times o coloca no fundo do artigo.
- Use carrossel múltiplos na barra lateral ou após a postagem, para mostrar posts relacionados.
Graças a Sean Percival para escrever sobre a última semana do carrossel e inspirando-me para sair meu Kiester e descobrir como fazê-lo, e graças a Nick Reese, que ajudou com um problema de codificação, você pode também querer verificar para fora alguns tutoriais de sua tese .
Enquanto esta obra não é um tutorial de programação, pode ser um pouco mais além se você tem experiência em programação muito pouco. No entanto, se você estiver querendo saber é a tese apenas para "novatos" Espero que estes últimos tutoriais tese de alguns estudos mostraram que a tese é realmente um quadro que torna fácil para você interagir com o seu blog e fazer as coisas mais rápido e fácil, não importa como você é experiente, então por que não experimentá-lo?
Este post veio originalmente de Michael Gray, que é um Search Engine Optimization Consultant. Cuidado para não perder o Thesis WordPress Theme revisão.
Como adicionar um carrossel para a sua tese Blog
Related posts:
- Como adicionar uma Slider Visual de Tese O seguinte é um tutorial sobre como adicionar um ...
- Tese Tutorial - Como adicionar Adsense Section Targeting usando o Adsense no seu blog normalmente não é o mais rentável ...
- Tese de fazer funcionar melhor com o Digg e Facebook Se você estiver envolvida com os sites de mídia social como o Digg, Facebbok ...
Lugares ligados trazido a você por Yet Another Posts Relacionados Plugin.
Related posts:
