Hot Hosting

Just another WordPress weblog

Comment faire pour ajouter un carrousel à votre Blog de thèses

Août 10th, 2009 by admin Laisser un »répondre

Si vous avez passé du temps à visiter des blogs récents chances sont que vous avez vu ces petite photo petit accompagné par un titre ou un morceau de texte dans ou près de la tête de mât. Je ne sais pas si elle a un nom propre, mais la plupart des gens avec qui j'ai parlé de l'appeler un carrousel, dans ce tutoriel, je vais vous montrer comment ajouter une à votre blog. Pour quelques-uns d'entre vous qui ne savez pas de quoi je parle, voici une capture d'écran d'gawker.com qui est le premier endroit que j'ai vu qu'elle soit utilisée.

Au fil du temps se déplacer à travers les histoires de la bannière, qui pourrait éventuellement hors de la vue, similaire à la façon dont les chevaux faire sur un carrousel. Je vais vous montrer comment faire cela avec thèse, comme pour beaucoup de ces tutoriaux, vous pouvez adapter la programmation à travailler avec n'importe quel blog, c'est juste plus facile avec thèse.

D'abord, nous allons avoir besoin d'un moyen d'isoler les postes qui nous voulons voir apparaître dans le haut. Les chances sont que vous allez avoir à choisir le meilleur de vos plus récents messages (et non tous les nouveaux postes sont les meilleures). Je tiens à garder mon blog ou peu d'entretien maintaing soi-même, alors j'ai décidé d'utiliser la catégorie vedette qui est le même que j'utilise pour remplir le curseur visuel que sur la page d'accueil. Cependant, tu pourrais tout aussi bien utiliser facilement des étiquettes au lieu d'une catégorie isolée.

Pour rendre le carouse arriver, nous allons créer une fonction personnalisée dans custom_functions.php appelé top_carousel() et à l'intérieur de celui-ci, nous allons ajouter global $post (qui permet wordpress pour obtenir des éléments en dehors du poste actuel) et un "if" pour rendre le carouse apparaissent uniquement sur les pages de messages simples (je sentais la page d'accueil s'est tourné vers "occupé" avec un curseur et un carrousel, mais c'est votre choix). Voici ce que le code initial ressemble à:

function top_carousel(){ global $post; if (is_single ()){ } }
Ensuite, nous allons ajouter un "wrapper" pour Carousel cela nous permettra d'ajouter quelques style visuel une fois qu'on fait:

function top_carousel(){ global $post; if (is_single ()){ echo '<div id="topcarosel">'; echo '</div>'; } }

Ensuite, nous allons avoir besoin de construire une base de données SELECT déclaration qui sélectionne uniquement les messages que nous voulons. Dans mon cas, je voulais que les 6 derniers messages publiés, de la «vedette» catégorie, dans l'ordre chronologique inverse. Pour ce faire, nous allons utiliser la requête suivante
$the_query = new WP_Query(array( 'category_name'=>'featured', 'orderby'=>'date', 'order'=>'DESC', 'showposts'=>'6' ));
Expliquer les subtilités de la WP_Query dépasse le cadre de ce poste mais vous pouvez en lire plus à ce sujet sur wordpress ou beaucoup de tutoriels d'autres sur le web. Toutefois il faut espérer qu'il est facile de l'ingénierie inverse, de sélectionner uniquement les messages de la «catégorie vedette», les ordonner par date, en ordre décroissant, et de sélectionner un maximum de 6 postes.

Maintenant nous avons besoin pour afficher les postes basés sur cette requête, voici comment nous procédons:
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;
Ce bout de code exécute la requête précédente SQL, affichage de l'image de thèse pour ce poste, redimensionnez-la à un carré de 140 × 140, il renvoie sur le lien permanent pour le poste, puis affichage du titre en tant que lien vers le lien permanent aussi bien, et enveloppe le tout dans un div ".

There's only one bit dernière, puisque nous allons utiliser les CSS pour laisser flotter le carrousel unité individuelle DIV, nous devons nous assurer d'effacer le flotteur quand on est fait comme suit:
echo '<div style="clear:both"></div>';
Ok maintenant à tout mettre ensemble, il devrait ressembler à quelque chose comme ceci:

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>'; } }
Seulement 2 étapes à gauche, nous devons ajouter ce code à custom_functions.php thèse de dire quand activer et afficher le carrousel, nous le faisons comme ceci:
add_action('thesis_hook_before_header', 'top_carousel');

Ensuite, nous avons besoin d'ajouter un peu de style à notre fichier custom.css, dans mon cas, j'ai utilisé ceci:
#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;}

Qui encapsule une bordure grise lumière autour du carrousel supérieure entière et met un peu de rembourrage en place, puis définit une largeur 150px pour chacune des "unités de carrousel" avec un peu de rembourrage et «flotte» entre eux de sorte qu'ils apparaissent côte à côte, et met alors une boîte grise lumière autour de l'image dans le carrousel et assurez-vous qu'aucun fluage de simples lettres dans l'affichage. Si vous avez tout fait correctement il devrait ressembler à la capture d'écran ci-dessous:

Lots Ce code est assez Bare Bones et il ya des chances pour que vous puissiez améliorer ou le changer, voici quelques suggestions:

A l'un ou les deux premiers créneaux remplissage par rapport à une balise différente / catégorie, si vous avez une sorte de "nouvelles" du contenu sur votre blog, ce serait vraiment utile.
Regardez le tag / catégorie du poste actuel et de choisir les postes liés à ce dernier un ou deux slots, ce qui devrait considérablement augmenter le CTR.
Changer la position du carrousel par exemple Techcrunch combinaisons de mesures actuellement le dans le "contenu" bloc, le New York Times le met au bas de l'article.
Utilisez carrousel multiple dans la barre latérale ou après le poste, pour afficher des postes connexes.

Merci à Sean Percival pour écrire sur la semaine dernière carrousel et m'inspirer de descendre de Kiester et trouver comment le faire, et merci à Nick Reese qui a aidé avec un problème de codage, vous pouvez également vouloir vérifier certains de ses tutoriaux thèse .

Bien que ce didacticiel n'est pas un chef-d'œuvre de la programmation, il serait peut-être un peu au-delà si vous avez très peu d'expérience de programmation. Toutefois, si vous vous demandez est la thèse juste pour "débutants" J'espère que ces tutoriaux thèse dernières années ont montré que vous thèse est véritablement un cadre qui le rend facile pour vous de dialoguer avec votre blog et d'obtenir des résultats plus rapides et plus faciles, peu importe Comment vous êtes expérimenté, alors pourquoi ne pas essayer?

Ce poste est originaire de Michael Gray qui est un moteur de recherche Consultant Optimisation. Veillez à ne pas manquer la thèse d'examen Wordpress Theme.

Comment faire pour ajouter un carrousel à votre Blog de thèses

1 2 3 4 5 6 7 8