Capture d'écran - Thème WordPress Vivee Portfolio

Démo : Vivee Portfolio

Site officiel : Vivee

#2 – Linquist

Capture d'écran - Thème WordPress Linquist

Démo : Linquist

Site officiel : Redworks

#3 – Shalom Typo

Capture d'écran - Thème WordPress Shalom Typo

Démo : Shalom Typo

Site officiel : Ikab-Mag

#4 – PolaroidPress

Capture d'écran - Thème WordPress PolaroidPress

Démo : PolaroidPress

Site officiel : Magnus Jepson

#5 – Kubrick on Crack

Capture d'écran - Kubrick on Crack

Démo : Kubrick on Crack

Site officiel : Fearlessflyer

Et si vous aussi vous souhaitez figurer dans une prochaine série de thèmes WordPress, n’hésitez pas à nous contacter via les commentaires ou la page Contact

Capture d'écran - Thème WordPress Furvious

Démo : Furvious

Site officiel : KreativeThemes

#2 – CoolRetro

Capture d'écran - Thème WordPress CoolRetro

Démo : CoolRetro

Site officiel : FreeThemeLayouts

#3 – AppCloud

Capture d'écran - Thème WordPress AppCloud

Démo : AppCloud

Site officiel : iCreativeLabs

#4 – Obscure

Capture d'écran - Thème WordPress Obscure

Démo : Obscure

Site officiel : WPCrunchy

#5 – NewsPress

Capture d'écran - Thème WordPress NewsPress

Démo : NewsPress

Site officiel : WPCrunchy

#6 – Mystique

Capture d'écran - Thème WordPress Mystique

Démo : Mystique

Site officiel : DigitalNature

De très beaux thèmes à télécharger d’urgence ! A très bientôt pour une nouvelle série de thèmes WordPress !

Utilisé sur la version précédente du site, nous offrons gratuitement aux lecteurs de Protuts notre ancien thème WordPress entièrement optimisé et commenté. Ce thème fait appel à quelques plugins dont WP-PageNavi que nous avons inclus dans l’archive téléchargeable. Vous pouvez modifier ce thème selon votre bon vouloir et l’utiliser pour un site commerciale. Mais en aucun cas, le vendre et ce, par quelque moyen que ce soit. Enfin, nous vous serions gré de ne pas supprimer le lien vers Protuts situé dans le footer.

Aperçu

Capture d'écran - Page d'accueil du thème Protuts

Live demo du thème

Fonctionnalités

Voici en quelques points les fonctions clés du thème :

• Sidebar widgétisée
• Emplacements Adsense
• Navigation paginée
• Page archive personnalisable
• Miniatures pour les articles
• Intégration Google Custom Search (moteur de recherche personnalisé)
• Module de promotion d’article type Sociable
• Module A Propos de l’auteur
• Page 404 personnalisable
• Testé sous Firefox 3.5, IE 7/8, Safari.
  
• …

Installation

Pour bénéficier de toutes les fonctionnalités du thème, il est nécessaire d’installer quelques plugins, et d’effectuer quelques petites modifications. Rien de bien méchant rassurez-vous !

Plugins fournis à installer et activer

Pour celles et ceux qui débutent avec WordPress et les plugins, je vous propose la lecture du dossier Réaliser un blog sous WordPress (partie 4).

• WP PageNavi : pagination des articles;
• WP PostViews : affiche les nombres de lectures d’un article;
• Post-Plugin Library : nécessaire à Similar Posts;
• Similar Posts : affiche les articles relatifs en fin d’article.

Vous n’avez pas besoin de rajouter le moindre morceau de code supplémentaire pour que ces plugins soient pleinement opérationnels.

Affichage des miniatures

Créer un champ personnalisé lors de l’édition de votre article et saisissez pour Nom, Image et pour Valeur, l’URL de l’image.

Affichage des articles relatifs sous forme de miniatures

Tous les renseignements disponibles dans ce tutoriel.

Google Custom Search

La fichier searchform.php contient le code du moteur de recherche personnalisé Google. Ouvrez-le et collez-y votre propre code fourni par Google. Pour en savoir plus, consulter le tutoriel Intégrer Google à votre blog WordPress.

A propos de l’auteur

Remplissez les champs suivants de votre profil :

• Biographie;
• Email;
• Site Web;
• AIM (qui correspond ici à Twitter).

Publicité Adsense

Le thème offre 4 emplacements de publicités dont :

• 1 illustrée au format 250×250 dans le haut de la sidebar;
• 1 illustrée au format 120×600 dans le bas de la sidebar;
• 1 textuelle au format 468×15 dans le haut d’un article;
• 1 textuelle au format 468×60 dans le bas de l’article.

Ouvrez le fichier single.php et second.php pour y insérer vos propres codes Adsense.

Nous espérons que ce thème constituera votre futur design de site ! Un souci ? N’hésitez pas à nous les soumettrent sur notre forum ! Vous aimez (ou pas) ce thème ? Faites-le nous savoir dans vos commentaires !

Capture d'écran - Thème WordPress The Seven Five Theme

Démo : The Seven Five Theme

Site officiel : Press75

#2 – White House

Capture d'écran - Thème WordPress White House

Démo : White House

Site officiel : PageLines

#3 – Station

Capture d'écran - Thème WordPress Station

Démo : Station

Site officiel : PageLines

#4 – iBlog 2

Capture d'écran - Thème WordPress iBlog 2

Démo : iBlog 2

Site officiel : PageLines

#5 – Spectrum

Capture d'écran - Thème WordPress Spectrum

Démo : Spectrum

Site officiel : Ignacio Ricci

La semaine prochaine pas de thèmes WordPress : mais ne soyez pas déçus pour autant, il y aura à la place une nouvelle série de Wallpapers pour égayer votre bureau !

Dans l’administration WordPress, cliquez sur Ajouter, sous l’onglet Articles. En mode d’affichage HTML, insérez ce bout de code à l’emplacement souhaité où apparaîtra le PDF:

Exemple:

Explications:

• scr correspond à l’URL source de votre fichier;
• width est la largeur de votre document en pixels;
• et, height la hauteur, là encore, en pixels.

Cette solution est assez simple et rapide à mettre en place mais l’interface utilisateur se limite à deux simples ascenseurs (horizontal et vertical).

Solution n°2 (nécessite Flash Player)

Si vous souhaitez proposer à vos lecteurs un visualiseur nettement plus poussé, optez pour le service en ligne Scribd. Créez un compte, publiez votre 1er document, puis visualisez-le. Cliquez sur le bouton Share & Embed, et choisissez Advanced (sous Embed).

Capture d'écran - Menu de partage Scribd

Configurer les différentes options, et copiez le bout de code fourni dans la 1ère ligne (la deuxième s’adressant aux utilisateurs de wordpress.com, ce qui n’est pas notre cas ici).

Capture d'écran - Paramètres de publication du fichier PDF (Scribd)

Collez le code, comme indiqué dans la solution n°1, à l’emplacement désiré dans votre post, et admirez le résultat !

À propos des piles

Une troisième solution consisterai tout simplement à fournir un lien de téléchargement à l’utilisateur pour profiter pleinement des fonctions offertes par Adobe Reader. A voir…

Capture d'écran - Thème WordPress Rockstar

Démo : Rockstar

Site officiel : WooThemes

#2 -FreeStyle

Capture d'écran - Thème FreeStyle

Démo : FreeStyle

Site officiel : Digital Visions

#3 – Cypher

Capture d'écran - Thème WordPress Cypher

Démo : Cypher

Site officiel : Digital Visions

#4 – Simplicity

Capture d'écran - Thème WordPress Simplicity

Démo : Simplicity

Site officiel : Digital Visions

#5 – PhotoView

Capture d'écran - Thème WordPress PhotoView

Démo : PhotoView

Site officiel : Digital Visions

Des thèmes de qualité, à télécharger et essayer sans plus attendre ! A noter que les 4 derniers thèmes incluent les fichiers PSD.

Recherchez ensuite la ligne commençant par :

define ('WPLANG', '');

Remplacez le contenu par ceci pour passer en français :

define ('WPLANG', 'fr_FR');

Capture d'écran - Edition du fichier wp-config.php

Maintenant que nous avons configuré WordPress pour que le français soit la langue par défaut, encore faut-il télécharger les fichiers de traduction. Ces derniers étant propres à chaque pays, il vous suffit de télécharger la version française de WordPress.

Ceci fait, dézippez l’archive ZIP puis remarquez la présence d’un dossier languages dans le dossier /wp-content/. Ce dossier contient ni plus ni moins les fichiers de traduction de WordPress. Il nous faut donc téléverser ce dossier languages sur votre serveur FTP dans le dossier /wp-content.

Capture d'écran - Administration WordPress en français

Si vous préférez des explications par capture vidéo de l’écran (screencast), regardez cette vidéo issue du projet WordPress Channel, la chaîne francophone des tutoriels vidéos WordPress.

Une fois l’opération terminée, connectez-vous à votre administration WordPress : la langue française est activée ! Notez que cette méthode est valable pour tous les autres pays.

Capture d'écran - Pack d'icônes par WooThemes et WeFunction

De quoi donner un aspect professionnel à votre blog WordPress ! (ou tout autre site bien évidemment)

Connectez-vous à l’administration WordPress et ouvrez la page single.php via l’onglet Apparence, puis Éditeur. Histoire de vous faciliter la tâche, copier-coller ce bout de code à l’emplacement souhaité, généralement en fin d’article, après la ligne <?php the_content('', ''); ?> :

<div id="author-meta"><h4>A propos de l&apos;auteur :  <?php the_author_posts_link(); ?></h4>
<?php echo get_avatar( get_the_author_id() , 72 ); ?>
<p><?php the_author_description(); ?></p>
<p><?php the_author_posts_link(); ?> a &eacute;crit <?php the_author_posts(); ?> articles sur <a href="http://www.protuts.net/">Protuts.net</a>.</p>
<div id="author-info"><img src="URL DE VOTRE IMAGE"/><a href="mailto:<?php echo antispambot(get_the_author_email()); ?>">&Eacute;crivez-lui</a>
<img src="URL DE VOTRE IMAGE"/><a href="<?php the_author_aim(); ?>">Suivez-moi sur Twitter !</a>
</div>
</div>

Explication des différentes requêtes utilisées :

<?php the_author_posts_link(); ?>

Permet d’afficher l’auteur de l’article, et, si cliqué, les articles de l’auteur

<?php echo get_avatar( get_the_author_id() , 72 ); ?>

L’avatar de l’auteur, le nombre 72 correspondant à la taille en pixel

<?php the_author_description(); ?>

La biographie de l’auteur

<?php the_author_posts(); ?>

Affiche le nombre d’articles de l’auteur

<?php echo antispambot(get_the_author_email()); ?>

Lien vers l’adresse email de l’auteur

<?php the_author_aim(); ?>

Petite ruse ici, cette requête est censée faire appel à une adresse de messagerie AIM, remplacée ici par Twitter.

N’oubliez pas d’ajouter les URLs des icônes Mail et Twitter dans le code.

Modification de votre profil

Les requêtes que nous avons utilisé font tout simplement appel aux différents champs du profil utilisateur WordPress. Il est donc nécessaire de le compléter convenablement si ce n’est pas déjà fait. Pour rappel, le champ AIM correspondra ici à Twitter, mais libre à vous d’utiliser les champs pour afficher d’autres informations.

Pour modifier votre profil, déroulez l’onglet Utilisateurs puis cliquez sur Votre profil, et complétez les champs.

Capture d'écran - Votre profil dans WordPress

Design du module

Ouvrez votre feuille de style en cascade (styles.css) toujours via l’éditeur et ajoutez-y les styles suivants :

#author-meta {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#F3F8FA none repeat scroll 0 0;
clear:both;
padding:10px;
}
#author-meta img {
border:none;
vertical-align:middle;
}
#author-meta h4 {
color:#257;
font-weight:normal;
font-size:18px;
margin:0;
padding:8px 12px;
line-height:2em;
}
#author-meta p {
padding-left:90px;
line-height:1.7em;
}
#author-info {
padding:10px;
}
#author-info a {
margin-left:5px;
margin-right:30px;
}

Étude de cas : Protuts

Au final, si vous avez bien suivi le tutoriel, vous devriez obtenir le résultat suivant :

Capture d'écran - Exemple d'encart A propos de l'auteur (ici Protuts.net)

Ce genre d’encart A propos de l’auteur est particulièrement utile dans le cas d’un blog écrit par plusieurs personnes (comme c’est le cas sur Protuts). Des questions ? N’hésitez pas !