Aperçu

#1 – Thème Hikkoshi

Un exemple avec un site de foot

#2 – Thème The Influencers

Un exemple avec un site d'astuces

Fonctionnalités

Bien qu’étant tous différents d’un point de vue design, les thèmes Hikkoshi et The Influencers proposent les mêmes caractéristiques techniques, à savoir :

• HTML 5 / CSS 3 ;
• Optimisé pour le référencement (SEO) ;
• Haute performances d’affichage ;
• Fil d’ariane ;

Même s’ils sont proposés gratuitement, on regrettera toutefois l’absence de traduction via Poedit, ou encore un menu d’options même sommaire pour personnaliser rapidement certaines éléments comme le logo.

Obtenir Hikkoshi et The Influencers

Pour rappel, ces 2 magnifiques thèmes sont gratuits :

Ces thèmes WordPress sont gratuits alors profitez-en ! Simples en termes de fonctionnalités, ils vous permettront une personnalisation plus aisée pour les développeurs qui souhaiteraient aller plus loin en termes de fonctionnalités (design adaptatif, slider, etc.).

Aperçu

Magnifique, simple et puissant, j'adore !

Fonctionnalités

Design adaptatif

Que vous utilisez un grand écran, une tablette ou un smartphone, le thème s’adaptera automatiquement en fonction de la résolution d’affichage. Faites le test en redimensionnant la fenêtre.

Slider personnalisable

Différents sliders sont proposés dans ce thème premium. Vous serez même en mesure d’incorporer de la vidéo. Les sliders sont très tendance et assurent un impact visuel à votre site Web.

Schémas de couleurs illimités

Nick Roach nous gâte une fois de plus en incorporant un outil de personnalisable comme vous pouvez le voir dans la démo. Au final, le thème correspond à vos couleurs, polices et autres arrière-plan !

Obtenir Trim

39 $ c’est le prix de la totalité des thèmes premium proposés par l’agence Elegant Themes. C’est la meilleure offre sur le marché des thèmes WordPress depuis des années alors profitez-en !

Trim est vraiment exceptionnel à mon goût sauf les effets sur les menus que je n’apprécie pas vraiment. A tester !

Dans cet exemple, nous aurons recours à la fonction get_post de WordPress – notez ici l’absence du pluriel dans l’intitulé. Celle-ci n’étant pas très explicité pour les néophytes sur le codex, je vous propose de l’utiliser de manière plus détaillée :

<?php
 $id = 1;
 $billet = get_post($id);
 $title = $billet->post_title;
 $date = $billet->post_date;
 $contenu = $billet->post_content;
 $contenu = apply_filters('the_content', $contenu);
 $contenu = str_replace(']]>', ']]&gt;', $contenu);
?>

 <div id="billet">
 <?php echo "<h1>$title</h1><p>$contenu</p><strong>$date</strong>"; ?>
 </div>

L’idée consiste à indiquer dans un premier temps l’ID du billet à retourner. Pour obtenir l’identifiant, il suffit de survoler un élément dans le back office de WordPress avec le pointeur de la souris pour que ce dernier s’affiche dans la barre de détails du navigateur.

Le numéro correspond à l'ID du billet

Ensuite, nous créons plusieurs variables qui vont récupérer le contenu, le titre et la date. Il est possible d’obtenir de nombreux autres éléments comme l’indique la liste sur le codex.

Un besoin simple mais pas vraiment facile à réaliser sans un minimum de connaissance. Bien entendu, des plugins vous permettront de faire la même chose… mais probablement pas en si peu de lignes de code et à l’emplacement de votre choix.

Principales fonctionnalités

EmbedPlus est une extension dotée d’un assistant d’insertion de vidéos en provenance de YouTube directement sous WordPress. Un simple clic sur l’icône en question vous permettra de doter vos vidéos des éléments suivants :

• Création de chapitres personnalisés ;
• Réactions sur le Web (commentaires YouTube, Twitter, etc.) ;
• Annotations à certains moments-clés ;
• Ralenti :
• Zoom ;

Une démo est disponible sur le site officiel.

Captures d’écran

Une URL YouTube suffit !

Utile pour créer des séries vidéos personnalisées

Un essai vidéo YouTube (cliquez pour voir la vidéo)

Obtenir EmbedPlus: YouTube for WordPress

EmbedPlus est un plugin sympathique qui pourra être très utile pour concevoir des séries vidéos, améliorer la lecture de vidéos YouTube en créant des chapitres sur-mesure ou en redécouvrant cette dernière. A essayer !

Aperçu

Tumblr ? Non WordPress !

Fonctionnalités

Une gestion nouvelle des posts formats

Ce thème développé par l’agence Peaxl – lancée par des francophones est particulièrement novateur dans le sens où il intègre une gestion poussée des posts formats de WordPress – une fonctionnalité WordPress n’ayant pas eu le succès escompté.

Il s’agit de simplifier le processus de publication en reprenant des outils propres à Tumblr mais sous WordPress. Voici une vidéo explicative :

En fonction du type d’article, le thème Diary ajustera l’affichage des données : lecteur SoundCloud, lecteur vidéo HTML5, mise en forme pour les citations, etc.

Technologies du Web

Dès sa création, Peaxl nous a habitué aux technologies modernes du Web :

• HTML5 / CSS3 ;
• Optimisé pour le référencement (SEO) ;
• Design adaptatif (responsive) ;

Obtenir Diary

Diary est disponible pour 35 $ chez Peaxl…. mais profitez de 20% de réduction pendant 1 semaine sur toute la boutique avec le coupon WPCHANNEL !

Diary est véritablement le thème blog par excellence pour tous les fans de WordPress… et de Tumblr. Un mix du meilleur des deux ?

Aperçu

Smart Theme est entièrement personnalisable

 Fonctionnalités

Voici la liste des fonctionnalités proposées, des technologiques comme on les aime :

• HTML5 / CSS3 ;
• Optimisé pour le référencement (SEO) ;
• Design adaptatif (responsive) ;
• Choix des couleurs ;
• Support des Google Web Font ;
• Animations jQuery (diaporama, filtres de catégories, effet parallax ;

La liste complète est disponible sur le lien de démonstration de la miniature d’aperçu.

Obtenir Smart Theme

Smart Theme est disponible au prix exceptionnel de 12 $ :

J’apprécie tout particulièrement les thèmes de Marie pour 2 choses : le choix de technologies modernes et l’originalité. Vous ne trouverez pas ce type de thème ailleurs ! Rendez-vous sur son site pour une seconde démo de Smart Theme et vous faire ainsi une idée des possibilités offertes.

Partons du principe que vous souhaitez intégrer une zone d’article épinglé sur votre page d’accueil avec une photo de taille large, le titre et l’extrait.

Collez les lignes de code suivantes dans une balise div pour afficher le dernier billet à la une :

<?php
$recentPosts = new WP_Query();
$sticky = get_option('sticky_posts');
$args = array(
 'showposts' => 1,
 'post__in' => $sticky,
 'caller_get_posts' => 1,
 'orderby' => 'date',
 );
$recentPosts->query($args);
while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?>
<?php if ( has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail('large'); ?></a>
<h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
<?php the_excerpt(); ?>
<?php endif; ?>
<?php endwhile; ?>

Vous pouvez notamment changer le nombre dans l’argument showposts. La boucle se compose donc de la miniature en taille large pointant vers la page de l’article, du titre du billet et de son extrait.

Bien entendu, libre à vous de modifier celle-ci pour convenir à vos besoins !

Crédits photo : Angélique

Principales fonctionnalités

Posts 2 Posts n’est pas un plugin comme les autres que l’on active et qui fait ce qu’on lui demande. Sa véritable force est sous le capot comme en témoigne la documentation complète et riche.

Cette extension vous permettra notamment de :

• Créer des séries d’articles ;
• Gérer des listes manuelles d’articles relatifs ;
• Connecter tout type de contenu entre eux et les afficher en front end ;

De manière générale, les relations doivent être enregistrés dans les fonctions de votre thème et la dernière version du plugin les affichera côté back office.

Vous disposerez également d’un module permettant de créer les connexion entre les contenus directement depuis l’éditeur – avec une interface respectant les standard d’interface de WordPress.

Captures d’écran

Créer des connexion entre films / acteurs par exemple

Un widget pour afficher les contenus connectés sous Posts 2 Posts

La liste des connexions enregistrées en PHP

Obtenir Posts 2 Posts

Posts 2 Posts est librement téléchargeable à partir de ce lien :

Note: There is a file embedded within this post, please visit this post to download the file.

Pour information, ce plugin est développé par ciobi et scribu un membre très actif de la communauté WordPress… jetez un oeil sur sa liste d’extensions disponibles !

Je vais me répéter à nouveau mais ce plugin est une perle : je l’ai utilisé pour un projet récemment et il est même possible d’imbriquer les relations en bouclant sur un type de contenu personnalisé par 3 fois !

Avant de commencer, je vous demande d’insérer la librairie jQuery et jQueryUI. Et pour ce faire, je vous renvoi au tutoriel sur jQuery UI.

Avec ces librairies, il est très simple de créer un accordéon. Le plus compliqué, c’est de l’adapter sur WordPress.

Le code avec une boucle WordPress

En sortie votre code devra, stricto sensu, ressembler à ceci :

<div id="accordion">
   <h3><a href="Lien 1">Le titre</a></h3>
   <div>Le contenu</div>

   <h3><a href="Lien 2">Le titre</a></h3>
   <div>Le contenu</div>

   <h3><a href="Lien 3">Le titre</a></h3>
   <div>Le contenu</div>

   <h3><a href="Lien 4">Le titre</a></h3>
   <div>Le contenu</div>
</div>

Pour ce faire, nous allons utiliser le loop de WordPress afin de générer ce code :

<div id="accordion">
<?php query_posts('posts_per_page=5');
while ( have_posts() ) : the_post(); ?>

<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<div><?php the_content(); ?></div>

<?php endwhile;
wp_reset_query();?>
</div>

J’utilise donc la fonction query_posts pour n’afficher que les 5 premiers articles. Libre à vous d’en mettre plus ou moins, ou même de n’afficher les articles que d’une catégorie… Vous n’avez que l’embarra du choix.

Dans le loop, on va retrouver :

• Le titre, qui nous servira à déplier notre accordéon ;
• Le contenu de l’article ;

Du coté du JavaScript, vous devez simplement définir la div #accordion comme étant un accordéon :

jQuery(function() {
	jQuery( "#accordion" ).accordion();
});

Ce code est exempt de toute option. Il est possible d’y ajouter quelques paramètres. Par exemple, je ne veux pas que la hauteur de mon accordéon soit fixée :

jQuery(function() {
		jQuery( "#accordion" ).accordion({
			autoHeight: false,
			navigation: true
		});
	});

Ou encore que je puisse fermer les onglets en cliquant sur le titre :

jQuery(function() {
		jQuery( "#accordion" ).accordion({
			autoHeight: false,
			navigation: true,
			collapsible: true
		});
	});

Ou enfin, je veux que l’accordéon se déplie lors du passage de la souris :

jQuery(function() {
		jQuery( "#accordion" ).accordion({
			autoHeight: false,
			navigation: true,
			event: "mouseover"
		});
	});

Attention cette dernière méthode est incompatible avec l’option collapsible… Cela donne des résultats de fonctionnement bizarre !

Résultat final

Au final, vous aurez quelque chose dans ce goût :

Accordéon en jQuery

Dernière remarque importante : s’il vous prenez l’envie de vous amuser à tout « accordéoniser » – ça se dit, oui, sachez qu’il est possible de le faire. J’ai moi-même testé de mettre des accordéons dans des accordéons. Mise à part quelques réglages de style. Tout cela semble harmoniser.

Des accordéons dans des accordéons

Exemple jQuery Accordéon à télécharger

Je joins le projet dans une archive ZIP librement téléchargeable que vous pouvez utiliser comme un nouveau thème. Bon code à tous !

Étape n°1 – Ajout d’une fonction PHP

A l’aide de votre client FTP favori, localisez le fichier functions.php puis insérez la fonction suivante :

function admin_css() {

$admin_handle = 'admin_css';
$admin_stylesheet = get_template_directory_uri() . '/css/admin.css';

wp_enqueue_style( $admin_handle, $admin_stylesheet );
}
add_action('admin_print_styles', 'admin_css', 11 );

La 3^e ligne indique le chemin d’un fichier admin.css. Il nous faut donc créer un tel fichier à l’aide de votre éditeur de texte favori – Notepad++, Coda, etc.

Étape n°2 – Création d’une feuille de styles CSS

Placez donc ce fichier dans un dossier /css du répertoire de votre thème – bien que vous puissiez également le placer à la racine du thème en modifiant le chemin dans le code.

Pour composer votre feuille, il nous faut identifier les règles à insérer pour qu’elles surpassent les styles par défaut.

Le plus commode consiste à utiliser l’extension Firebug pour le navigateur Firefox bien que tous les autres disposent également d’outils de développement – généralement accessibles via la touche F12.

Vous pouvez par exemple modifier la couleur des liens qui donne tout de suite une nouvelle donne visuelle au back office.

N’oubliez pas de sauvegarder votre fichier CSS pour appliquer les changements.

Cette technique est similaire aux tutoriels concernant l’insertion d’un logo personnalisé dans la zone de connexion ou encore l’ajout d’icônes à vos contenus personnalisés. Faites-en bon usage !