Partager

billet-interface-originaleCertains Blogs se démarquent par les ressources qu’ils partagent avec leurs lecteurs, d’autres se distinguent par la façon qu’ils ont de présenter visuellement leurs billets.

Designer une interface différente pour chaque nouvelle sur son blog demande un temps fou ainsi qu’énormément de créativité. Pour vous initier à cette tendance très originale, voici quelques exemples de billets s’ayant démarqués depuis les dernières semaines.

N.B: Si vous voulez vous joindre à cette tendance de créer des interfaces uniques pour vos billets sur WordPress, vous trouverez, à la suite des exemples ci-bas, d’excellents conseils afin d’arriver au résultat voulu.

« Article original paru sur le site web WebDesignWall.com. »

72ave

billet unique 72ave

Dustin Curtis

post unique Dustin Curtis

Kyle Fiedler

billet unique Kyle Fiedler

Paddy Donnelly

billet unique Paddy Donnely

Jack Cheng

Post unique Jack Cheng

Gregory Wood

billet unique Gregory Wood

David DeSandro

post unique David DeSandro

Jason Santa Maria

billet unique Jason Santa Maria

Trent Walton

post unique Trent Walton

Posts Uniques Occasionnels

billet unique Smashing Magazine

billet unique Smashing Mag

billet unique Smashing

Trucs pour créer des billets uniques avec WordPress

Créer une interface unique pour chaque billet dans WordPress est relativement facile. La méthode la plus simple est de designer vos billets en local sur votre ordinateur et d’appeler ensuite votre feuille de style spécifique au billet en question avec un champs personnalisé (custom field).

  • Pour commencer, en local sur votre ordinateur, créez un dossier pour stocker vos billets. Dupliquez une copie de la feuille de style de votre thème WordPress (style.css) dans un dossier brouillon. Pour chaque nouveau billet, créez un autre dossier.
  • Pour chacun de vos posts, créez également un fichier HTML ainsi qu’un fichier CSS pour plus tard, remplacer la feuille de style originale de votre thème (style.css).
  • Lorsque vous aurez terminé d’écrire votre billet et de designer votre interface, téléversez (uploadez) la feuille de style sur votre serveur. Dans votre console d’administration WordPress, créez un champs personnalisé (custom field) pour insérer le chemin pointant vers votre fichier CSS.

Feuille de style personnalisée WordPress

Pour terminer, dans le fichier header.php de votre thème, ajoutez le code suivant après la ligne qui permet de lier votre fichier style.css à votre thème.

<?php $customcss = get_post_meta($post->ID, 'custom-style', true); ?> <?php if ($customcss != "") { ?> <link href="<?php echo $customcss ?>" rel="stylesheet" type="text/css" /> <?php } ?>