Créez votre thème WordPress en intégrant votre design

Créez votre thème WordPress en intégrant votre design

Langage : HTML, CSS et PHP

Difficulté : Intermédiaire

Temps estimé : 10 Heures

Télécharger les fichiers sources
Vous devez être logués ou enregistrés pour télécharger !

Arnos (Arnaud Steckle) livre enfin la suite de son tutoriel où il intègre cette fois son webdesign sous WordPress.

Enfin le voici le voilà  ! Le tutoriel d`intégration du blog sous WordPress est disponible sur Living Tuts. Dans ce tutoriel nous verrons ensemble comment découper et intégrer un design de blog sous WordPress. Bien évidemment sur un tutoriel en une partie comme celui-ci, il n’est pas possible de voir tout en détail, mais vous pourrez  acquérir  les bases nécessaires pour intégrer un thème.

Il s’agit de la suite du précédent tutoriel de création du webdesign sous Photoshop visible sur cette page, que nous allons donc maintenant intégrer comme nouveau thème dans le CMS WordPress.

Tutoriel Webdesign WordPress


Demo Flash


Commençons tout de même par voir ce qu`est un thème WordPress, à  quoi ils servent et comment ils sont constitués. Ensuite nous allons ensemble découper notre maquette Photoshop avant d`intégrer le tout pour créer notre propre thème pour WordPress. Pour d’abord se mettre en jambe, voici une petite description de ce qu’est un thème WP.

WORDPRESS :

L`interface utilisateur de WordPress est basée sur un système de thèmes gratuits ou/et payants, facilement personnalisables et interchangeables. C`est en partie ce qui fait la richesse de WordPress. Grâce à  l`interface d`administration vous pouvez télécharger de nouveaux thèmes et les installer directement sur votre blog.

De nombreux tutoriels peuvent vous aider à  réaliser la célèbre installation de WordPress en 5 minutes. Consultez le  site officiel par exemple.  Je pars du principe que WordPress est déjà  installé sur votre serveur avant de commencer ce tutoriel.

Dans l`administration, ouvrez l`onglet  « Apparence  » puis  « Thèmes  » pour gérer les thèmes. De nombreux sites proposent des thèmes comme wordpress-fr.net/themes, Smashing Magazine ou demandez simplement à  Google avec  « Thème WordPress  ».

Tutoriel Intégration WordPress

Mais il est bien entendu possible de construire son propre thème à  partir d`une maquette Photoshop. Pour comprendre de quoi est fait un thème, jetons un coup d`oeil à  la structure du thème par défaut : (trouvez-le dans votre dossier WordPress dans wp-content/themes).

Tutoriel Intégration WordPress

Comme vous pouvez le voir sur l’image ci-dessus, un thème est constitué d`un bon nombre de fichiers PHP qui gèrent le fonctionnement du blog : création et affichage de la structure, commentaires, liste d`articles, affichage des archives, fonctions diverses. Le fichier index.php appelle le header, le footer, la sidebar, et la liste de vos articles. Le fichier style.css quant à  lui s`occupe de mettre en forme ces belles lignes de code. Le dossier « images » contient bien entendu les images relatives au design du site. Parlons-en des images, première étape de la construction de notre thème, découpons la maquette Photoshop.

Étape 1 : Découpage des images.

Ouvrez votre fichier PSD.

En général une maquette se découpe avec une méthode simple. En se servant de l`outil de sélection de Photoshop (M), en faisant des CTRL+Clic sur un calque suivi d`un recadrage ou en utilisant directement l`outil de recadrage (C). Il convient de veiller également à  optimiser au maximum les images, en adaptant le bon format (png pour la transparence, gif lorsqu`il y a des aplats de couleurs, ou JPG pour les objets graphiques plus complexes). Le B-ABA des formats d’images en quelque sorte…

Pour cette maquette de nombreux effets d`ombres, de dégradés et de bords arrondis peuvent être réalisé à  l`aide des CSS3. Même si il n`est pas encore pris en charge correctement sur les navigateurs, notamment Internet Explorer, nous allons exploiter cette technologie pour gagner du temps sur notre intégration. C`est aussi et surtout l`occasion de prendre en main ces nouveaux outils. Je commence par découper le logo en utilisant l`outil de recadrage (C). Avant d`enregistrer je veille bien à  ne pas laisser de fond noir pour avoir une image PNG transparente. J`enregistre le logo pour le web (Alt+Maj+CTRL+S) en PNG 24 dans un dossier  « images  » sur mon bureau.

Tutoriel Intégration WordPress

Tutoriel Intégration WordPress

Découpons ensuite le fond du header ainsi que le menu. Pour les deux, créons une seule image de 2 pixels de large sur toute la hauteur du header et du menu, comme le montre l’image ci-dessous :

Tutoriel Intégration WordPress

Je continue la découpe avec les petits éléments graphiques, comme les étoiles devant le titre des posts, les icônes Facebook, Twitter, Rss etc. Au final, nous disposons de 20 images nécessaires au design du blog :

Tutoriel Intégration WordPress

Étape 2 : Mise en place du thème

Pour éviter de créer un thème totalement de zéro, nous allons nous baser sur le thème par défaut de Wordrpress. Dans le dossier wp-content/themes, copiez-collez le dossier du thème  « twentyten.  » Renommez le nouveau dossier en  « designbleu  » par exemple. Copiez les images que vous venez de découper dans le dossier  « images  » de votre nouveau thème. Installez ce nouveau thème via l`interface d`administration de WP comme vu dans l`introduction. Nous allons commencer à  éditer les différents fichiers PHP du thème, ainsi que le fichier CSS en parallèle. Retrouvez le fichier CSS complet en téléchargeant les sources. Ci-dessous une capture du thème de base de WordPress.

Tutoriel Intégration WordPress

Étape 3 : Édition du fichier header.php

Ouvrez le fichier header.php avec votre IDE favori. Personnellement j’utilise Notepad ++.

NB : attention à  bien régler l`encodage en UTF-8 sans BOM sous peine de voir apparaître des caractères non désirés.

Le fichier header.php contient toutes les informations de votre HTML. La balise habituelle pour appeler la feuille de style CSS est écrite avec un tag WordPress spécifique qui crée ce lien automatiquement : /wp-content/themes/*nom-du-theme*/style.css. J’appelle déjà  les différents fichiers Javascript pour la suite du tutoriel. Gardez sous la main le Codex WordPress qui explique en détails tout les tags nécessaires au template. Pour commencer mettons en place notre header. Repérez la div id  « header  » existante. Dans cette div, à  la place du contenu existant, je crée une div contenthead qui contiendra notre logo, ainsi que le menu et les liens sociaux. J`utilise le tag wp_nav_menu pour afficher dynamiquement le menu dans la div menutop ainsi que get_search_form(); dans la div searchbar pour afficher le moteur de recherche du site. Enfin je termine le fichier par l`ouverture de la div main qui contient le reste du site. Retrouvez-ci dessous le code complet du fichier header.php :

Header.php :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php language_attributes(); ?>>
<head>
<title>
<?php
	/*
	 *Affiche la balise <title> basée sur ce qui est vu.
	 */
	global $page, $paged;
	wp_title( '|', true, 'right' );
	// Ajoute le nom du blog
	bloginfo( 'name' );
	// Ajoute la description du blog sur la home
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Ajout du numéro de page si nécessaire
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );

	?></title>

	<?php /*Chargement de la feuille de style alternative pour IE*/?>
	<!--[if IE]>
	<link rel="stylesheet" type="text/css" title="Style IE7" media="screen" href="<?php echo home_url( 'wp-content/themes/designbleu/ie.css' ); ?>" />
	<![endif]-->

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="stylesheet" href="<?php echo home_url( 'wp-content/themes/designbleu/nivo-slider.css' ); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo home_url( 'wp-content/themes/designbleu/jquery-ui-1.8.6.custom.css' ); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="shortcut icon" type="image/x-icon" href="<?php echo home_url( 'wp-content/themes/designbleu/images/favicon.ico');?>"/>

<?php /*Affichage du dernier Tweet*/?>
<script  src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" type="text/javascript"></script>
<script src="<?php echo home_url( 'wp-content/themes/designbleu/js/derniertweet.js' ); ?>" type="text/javascript"></script>
<?php /* Merci à  http://www.pressimi.com */?>

<?php /*Appel du Jquery pour le menu a onglet et le slider en homepage*/?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo home_url( 'wp-content/themes/designbleu/js/jquery.nivo.slider.pack.js' ); ?>" type="text/javascript"></script>
<script src="<?php echo home_url( 'wp-content/themes/designbleu/js/sliderjs.js' ); ?>" type="text/javascript"></script>
<script type="text/javascript" src="<?php echo home_url( 'wp-content/themes/designbleu/js/jquery-ui-1.8.6.custom.min.js'); ?>"></script>
<script type="text/javascript" src="<?php echo home_url( 'wp-content/themes/designbleu/js/tabjs.js'); ?>"></script>

<?php /*Balise pour la comptabilité IE 7/8*/?>
<meta http-equiv="X-UA-Compatible" content="IE=7" />

<?php	wp_head(); ?>
</head>

<body>

	<!-- #header -->
	<div id="header">

			<div id="contenthead">

				<div id="logo">
					<a href="<?php echo home_url( '/' );?>"><img src="<?php echo home_url( 'wp-content/themes/designbleu/images/logowt.png' ); ?>" title="Webdesign Tuts" alt="Webdesign Tuts" /></a>
				</div>

				<div id="socialbar">
					<a href="<?php echo home_url( '/feed' ); ?>"><img src="<?php echo home_url( 'wp-content/themes/designbleu/images/iconerss.png' ); ?>" title="Flux RSS" alt="Flux RSS" /></a>
					<a href="http://twitter.com/livingtuts_fr"><img src="<?php echo home_url( 'wp-content/themes/designbleu/images/iconetwitter.png' ); ?>" title="Twitter" alt="Twitter" /></a>
					<a href="http://www.facebook.com/livingtuts"><img src="<?php echo home_url( 'wp-content/themes/designbleu/images/icone_facebook.png' ); ?>" title="Facebook" alt="Facebook" /></a>
				</div>

				<div id="menutop"><!--Affichage du menu dynamique de WP-->
					<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
				</div>

				<div id="searchbar">
					<?php get_search_form(); ?><!--Affichage de la barre de recherche-->
				</div>

			</div>

	</div><!-- #header -->

	<div id="main">

En parallèle j`ouvre le fichier style.css pour mettre en forme, la structure globale, le header et le menu. Je ne vais pas détailler toutes les déclarations CSS, mais expliquer certains points de structure importants. Tout d’abord, plaçons les éléments de structure de base dans le fichier style.css (pour le moment vide).

La base du CSS :

/*
Theme Name: Design Bleu
Theme URI: http://www.livingtuts.com
Description: Thème développé pour un tutoriel sur Livingtus.com
Author: Arnad STECKLE
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, */

/* =Reset CSS basé sur le reset de Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 background: transparent;
 border: 0;
 margin: 0;
 padding: 0;
 vertical-align: baseline;
}
body {
 line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
 clear: both;
 font-weight: normal;
}
ol, ul {
 list-style: none;
}
blockquote {
 quotes: none;
}
blockquote:before, blockquote:after {
 content: '';
 content: none;
}
del {
 text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
 border-collapse: collapse;
 border-spacing: 0;
}
a img {
 border: none;
}

a{outline:none;}

Ici nous avons placé le code de base pour avoir un fichier CSS propre, et qui soit adapté au mieux dès le départ au différents navigateurs (technique du reset CSS). Mettons en place tout le CSS pour avoir un formatage de police qui soit adapté, des comportements de liens par défaut, pas de bordures autour des images dans un lien, etc.

La base du CSS :

/* =Fonts
-------------------------------------------------------------- */
body,
input,
textarea,
.page-title span,
.pingback a.url {
 font-family: Arial, "Helvetica Neue", sans serif;
}

h3#comments-title,
h3#reply-title,
#access .menu,
#access div.menu ul,
#cancel-comment-reply-link,
.form-allowed-tags,
#site-info,
#site-title,
#wp-calendar,
.comment-meta,
.comment-body tr th,
.comment-body thead th,
.entry-content label,
.entry-content tr th,
.entry-content thead th,
.entry-meta,
.entry-title,
.entry-utility,
#respond label,
.navigation,
.page-title,
.pingback p,
.reply,
.widget-title,
.wp-caption-text,
input[type=submit] {
 font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
pre {
 font-family: "Courier 10 Pitch", Courier, monospace;
}
code {
 font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

/* =Elements généraux
-------------------------------------------------------------- */

body {
 background: #f2f2f2;
}
body,
input,
textarea {
 color: #666;
 font-size: 12px;
 line-height: 18px;
}
hr {
 background-color: #e7e7e7;
 border: 0;
 clear: both;
 height: 1px;
 margin-bottom: 18px;
}

/* Textes */
p {
 margin-bottom: 18px;
}
ul {
 list-style: square;
 margin: 0 0 18px 1.5em;
}
ol {
 list-style: decimal;
 margin: 0 0 18px 1.5em;
}
ol ol {
 list-style: upper-alpha;
}
ol ol ol {
 list-style: lower-roman;
}
ol ol ol ol {
 list-style: lower-alpha;
}
ul ul,
ol ol,
ul ol,
ol ul {
 margin-bottom: 0;
}
dl {
 margin: 0 0 24px 0;
}
dt {
 font-weight: bold;
}
dd {
 margin-bottom: 18px;
}
strong {
 font-weight: bold;
}
cite,
em,
i {
 font-style: italic;
}
big {
 font-size: 131.25%;
}
ins {
 background: #ffc;
 text-decoration: none;
}
blockquote {
 font-style: italic;
 padding: 0 3em;
}
blockquote cite,
blockquote em,
blockquote i {
 font-style: normal;
}
pre {
 background: #f7f7f7;
 color: #222;
 line-height: 18px;
 margin-bottom: 18px;
 padding: 1.5em;
}
abbr,
acronym {
 border-bottom: 1px dotted #666;
 cursor: help;
}
sup,
sub {
 height: 0;
 line-height: 1;
 position: relative;
 vertical-align: baseline;
}
sup {
 bottom: 1ex;
}
sub {
 top: .5ex;
}
input[type="text"],
textarea {
 background: #f9f9f9;
 border: 1px solid #ccc;
 box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
 -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
 -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
 padding: 2px;
}
a:link {
 color: #0066cc;
}
a:visited {
 color: #743399;
}
a:active,
a:hover {
 color: #ff4b33;
}

/* Pour les lecteurs d'écran !Important pour l'accessibilté */
.screen-reader-text {
 position: absolute;
 left: -9000px;
}

Déclarons ensuite le layout global (mise en page globale) en fixant la largeur du site, ainsi que son centrage dans la page avec la règle CSS margin. Je met également en place les éléments qui feront référence plus tard à  la sidebar, au contenu de gauche et au footer.

La structure de base, deux colonnes, tête et pied de page :

/* =Structure
-------------------------------------------------------------- */

/* La structure principale du thème */
#access .menu-header,
#colophon,
#branding,
#main,
#wrapper {
 margin: 0 auto;
 width: 940px;
}
#wrapper {
 background: #fff;
 margin-top: 20px;
 padding: 0 20px;
}

/* =Layout
-------------------------------------------------------------- */
/*
LAYOUT: Deux colonnes
DESCRIPTION: Deux colonnes largeur fixe et sidebar à  droite
*/
#container {
 width: 960px;
 margin:0 auto;
}
#content {
 float:left;
 width:575px;
 margin:0 0 0 20px;
}

#sidebar{
 width:325px;
 margin:0 0 0 615px;
}

#primary,
#secondary {
 overflow: hidden;

}
#secondary {
 clear: right;
}
#footer {
 clear: both;
 width: 100%;
}

.centered {
 display: block;
 margin-left: auto;
 margin-right: auto;
} 

Nous pouvons à  présent mettre en forme le header de notre blog.  Pour le fond du header j`utilise la règle CSS background. Je vais chercher l`image découpée tout à  l`heure que je répète sur toute la largeur de la div header grâce à  repeat-x. Ainsi le fond du header prendra toujours toute la largeur de l`écran quelque soit sa résolution.

Style de haut de page (header)


/* =Header
-------------------------------------------------------------- */

#header {
 background:url(images/bghead.jpg) top left repeat-x;
 height:146px;
 margin:0;
}

#contenthead{
 width:960px;
 margin:0 auto;
}

#logo{
 padding:12px 0 0 0;
 float:left;
}

#logo a{
outline:none;}

#socialbar{
 margin:0 0 0 845px;
 width:110px;}

Pour la mise en forme du menu j`utilise des règles  CSS3 pour mettre des ombres sur le texte (text-shadow), ainsi qu`un arrondi (border-radius) au survol de la souris. Le menu est contenu dans une liste, je peux donc facilement le styler en ciblant correctement les éléments de liste UL et LI. Ajoutez le contenu CSS suivant, toujours dans votre fichier style.css.

Style du menu

/* =Menu
-------------------------------------------------------------- */

#menutop {
 margin: 22px auto 0 auto;
 width: 575px;
 float:left;
}

#menutop .menu-header,
div.menu {
 font-size: 14px;
 font-weight:bold;
}
#menutop .menu-header ul,
div.menu ul {
 list-style: none;
 margin: 0;
}
#menutop .menu-header li,
div.menu li {
 float: left;
 margin:0 24px 0 0;
}
#menutop a {
 color: #389cc2;
 display: block;
 line-height: 30px;
 padding: 0 15px;
 text-decoration: none;
 text-shadow:0 1px 0 #89e1fe;
}
#menutop ul ul {
 box-shadow: 0px 3px 3px rgba(0,0,0,0.2);/*CSS 3 pour gérer les ombres sur le texte*/
 -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 display: none;
 position: absolute;
 top: 38px;
 left: 0;
 float: left;
 width: 180px;
 z-index: 99999;
}
#menutop ul ul li {
 min-width: 180px;
}
#menutop ul ul ul {
 left: 100%;
 top: 0;
}
#menutop ul ul a {
 background: #333;
 line-height: 1em;
 padding: 10px;
 width: 160px;
 height: auto;
}
#menutop li:hover > a,
#menutop ul ul :hover > a {
 color: #fff;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 background-color:#379cc2;
 text-shadow:none;
}
#menutop ul li:hover > ul {
 display: block;
}
#menutop ul li.current_page_item > a,
#menutop ul li.current-menu-ancestor > a,
#menutop ul li.current-menu-item > a,
#menutop ul li.current-menu-parent > a {
 color: #fff;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 background-color:#379cc2;
 text-shadow:none;

}
* html #menutop ul li.current_page_item a,
* html #menutop ul li.current-menu-ancestor a,
* html #menutop ul li.current-menu-item a,
* html #menutop ul li.current-menu-parent a,
* html #menutop ul li a:hover {
 color: #fff;
} 

Souvenez-vous tout à  l’heure nous avons affiché la barre de recherche (div id searchbar) dans le header. Par défaut, le champ de recherche ne comporte pas de bouton stylé. Et hop un peu de CSS pour le mettre en forme par rapport à  notre maquette. J’utilise une image de fond pour le bouton de recherche, ainsi que des bordures arrondies pour le champ (input HTML).


#searchbar{
 width:200px;
 float:left;
 margin:22px 0 0 185px;
}

#s{
 -moz-border-radius: 15px;/*CSS 3 bordures arrondi*/
 border-radius: 15px;
 height:26px;
 width:148px;
 padding:2px 2px 0 5px;
 color:#000;
}

#searchsubmit{
 background:url(images/btn_search_form.png) no-repeat;
 width:39px;
 height:31px;
 border:none;
 position:relative;
 right:26px;
 outline:none;
 cursor:pointer;
 }

Vous disposez à  présent de tout le CSS nécessaire pour le haut de page du blog. Passons à  la suite si vous le voulez bien !

Étape 4 : Edition du fichier index.php

Le fichier index.php est le coeur du thème. C`est lui qui appelle tout les différents fichiers constituant la page. La première ligne get_header(); sert à  appeler le header. Je déclare ensuite une div container qui servira à  contenir toute la colonne principale de notre site. Dans cette div je déclare une div content qui est la colonne de gauche du site.  à€ la suite, j`appelle le fichier qui affiche les post du blog avec la ligne get_template_part( ‘loop’, ‘index’ ); qui sert à  appeler le fichier qui affiche les articles du blog. Je termine mon fichier index.php en appelant la sidebar et le footer. Voici le code du fichier index.php :

Index.php

<?php get_header(); ?>

		<div id="container">
			<div id="content">

			<?php
			/* Boucle pour afficher les posts du blog */
			 get_template_part( 'loop', 'index' );
			?>
			</div><!-- #content -->

		<?php get_sidebar(); ?><!--Appel de la sidebar-->

		</div><!-- #container -->

<?php get_footer(); ?><!--Appel du footer-->

Etape 4.1 : Slider d’actualités

En regardant notre maquette, nous pouvons voir que j`ai prévu un slider dans la colonne de gauche. Rappel, la colonne de gauche est la div content que nous avons déclaré dans le fichier index.php. Je vais me baser sur le plug-in Jquery  Nivo slider. Il est réellement facile à  intégrer. Téléchargez le dossier .zip sur le site  dev7studios.com.

Créez ensuite un nouveau dossier  « js  » dans le dossier de votre thème et déposez le fichier JS à  l`intérieur. Ce fichier est déjà  appelé sur le blog grâce aux lignes  « script  » du fichier  header.php. Le header appelle aussi la librairie Jquery nécessaire pour faire fonctionner le slider. Déposez le fichier css du slider (nivo-slider.css) à  la racine du thème. Le slider est placé dans la div content (div id slider). Collez la div id slider dans la div content, avant la ligne get_template_part. Ci-dessous, le code qui récapitule, l’explication.

<div id="slideractus">
<!--Slider JQuery - Plus d'infos sur http://nivo.dev7studios.com/-->
	<div id="bandeaunouveau"></div>

		<div id="slider">
			<a href="http://www.webdesignertrends.com"><img src="http://www.webdesignertrends.com/wp-content/uploads/2010/10/Wojciech_Pijecki_0.jpg" alt="" title="#htmlcaption" width="555" height="255"/></a>
			<a href="http://fr.livingtuts.com/photoshop/webdesign-creer-un-design-bleu-et-aere-pour-un-blog/"><img src="http://fr.livingtuts.com/wp-content/uploads/2010/08/tuto_webdesign21.jpg" alt="" title="#htmlcaption2" width="555" height="255"/></a>
	        </div>

		<div id="htmlcaption" class="nivo-html-caption">
			<h1>La création du moment</h1>
			<p>Wojciech Pijecki pour votre inspiration !</p>
		</div>

		<div id="htmlcaption2" class="nivo-html-caption">
			<h1>Tutoriel</h1>
		 <p>Design de blog sous Photoshop.</p>
		</div>
	</div>

Sur cette image vous pouvez voir à  quoi correspondent les différents blocs HTML du slider :

Intégration WordPress

Pour styler la page index ainsi que le slider utilisez le CSS suivant :

CSS de l’index à  placer dans style.css

#main {
 clear: both;
 overflow: hidden;
 padding: 20px 0 0 0;
 width:960px;
 margin:0 auto;
 border-left:1px solid #d9d9d9;
 border-right:1px solid #d9d9d9;
 background-color:#FFF;
}
#content {
 margin-bottom: 36px;
}

#content #slideractus{
 width:555px;
 height:255px;
 background-color:#CCC;
 margin:0 0 20px 0;
 border:10px solid #f2f2f2;}

#content #bandeaunouveau{
 width:87px;
 height:89px;
 background:url(images/bandeaunouveaute.png) no-repeat;
 position:absolute;/*Permet de placer le bandeau au dessus du slider*/
 z-index:9999;
 margin:0px 0 0 468px;}

#content,
#content input,
#content textarea {
 color: #000;
 font-size: 12px;
 line-height: 14px;
 text-align:justify;
}
#content p,
#content ul,
#content ol,
#content dd,
#content pre,
#content hr {
 margin-bottom: 27px;
 line-height:16px;
}
#content ul ul,
#content ol ol,
#content ul ol,
#content ol ul {
 margin-bottom: 0;
}
#content pre,
#content kbd,
#content tt,
#content var {
 font-size: 15px;
 line-height: 21px;
}
#content code {
 font-size: 13px;
}
#content dt,
#content th {
 color: #000;
}
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
 color: #000;
 line-height: 1.5em;
 margin: 0 0 20px 0;
}
#content table {
 border: 1px solid #e7e7e7;
 margin: 0 -1px 24px 0;
 text-align: left;
 width: 100%;
}
#content tr th,
#content thead th {
 color: #888;
 font-size: 12px;
 font-weight: bold;
 line-height: 18px;
 padding: 9px 24px;
}
#content tr td {
 border-top: 1px solid #e7e7e7;
 padding: 6px 24px;
}
#content tr.odd td {
 background: #f2f7fc;
}

CSS du slider (placé à  la racine du thème, sous le nom nivo-slider.css)

/*
 * jQuery Nivo Slider v2.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2010, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * March 2010
 */

/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider img {
 position:absolute;
 top:0px;
 left:0px;
 width:555px !important;
 height:255px !important;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 border:0;
 padding:0;
 margin:0;
 z-index:60;
 display:none;
}
/* The slices in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:50;
 height:100%;
}
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:89;
}
.nivo-caption h1 {
 margin:0 !important;
 font-size:16px;
 color:#2ad0ed !important;
 font-weight: normal;
 font-style: normal;
 line-height:normal;
 font-family: 'Museo700', sans-serif;
 font-size-adjust: 0.51;
 padding:0 0 0 10px !important;
}

.nivo-caption p {
 margin:0 0 5px 0 !important;
 font-size:12px;
 font-weight:bold;
 padding:0 0 0 10px !important;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
 display:none;
}
/* Direction nav styles (e.g. Next &amp; Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:99;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
 background:url(images/flechegauche.png) no-repeat;
 height:11px;
 width:12px;

}
.nivo-nextNav {
 right:0px;
 background:url(images/flechedroite.png) no-repeat;
 height:11px;
 width:12px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
 position:relative;
bottom:0;
padding:220px 0 0 500px;}

.nivo-controlNav a {
 position:relative;
 z-index:99;
 cursor:pointer;
 margin:0 5px 0 0;
 color:#52bcdc;
}
.nivo-controlNav a.active {
 font-weight:bold;
 color:#52bcdc;
}

Étape 5 : Edition du fichier loop.php

Souvenez-vous, nous avons appelé le fichier loop.php dans le fichier index.php grâce à  la ligne : get_template_part( ‘loop’, ‘index’ );. Le fichier loop.php sert à  afficher les articles du blog en page d’accueil. Il s’agit d’une boucle qui va littéralement « chercher » les articles dans la base de données. Il y a également différents tests pour vérifier si il y a des articles, sinon on ordonne l’affichage d’un message d’erreur, ou bien encore l’affichage d’une pagination lorsqu’il y a un nombre trop important d’articles à  afficher. La boucle qui affiche les article ne commence réellement qu’avec la ligne while ( have_posts() ) : the_post();. Pour y voir plus clair, jetez un oeil à  ce fameux code loop.php

<?php
/**
 * Ceci est la boucle qui affiche les posts du blog
 *
 * Pour plus d'infos voir
 * http://codex.wordpress.org/The_Loop to understand it and
 * http://codex.wordpress.org/Template_Tags to understand
 * the tags used in it.
 *
 */
?>

<?php /* Affiche la pagination */ ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
	<div id="nav-above" class="navigation">
		<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>
		<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>
	</div><!-- #nav-above -->
<?php endif; ?>

<?php /* Affiche une page si jamais il n'y a pas de résultats. Pas exemple une catégorie vide etc */ ?>
<?php if ( ! have_posts() ) : ?>
	<div id="post-0" class="post error404 not-found">
		<h1 class="entry-title"><?php _e( 'Not Found', 'twentyten' ); ?></h1>
		<div class="entry-content">
			<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyten' ); ?></p>
			<?php get_search_form(); ?>
		</div><!-- .entry-content -->
	</div><!-- #post-0 -->
<?php endif; ?>

<?php
	/* Début de la boucle */ ?>
<?php while ( have_posts() ) : the_post(); ?>

		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

			<div class="entry-meta">
			  <?php the_date(); // affiche la date de publication ?>
<span class="meta-sep">|</span>
			  <?php printf( __( '<span class="%1$s">Posté dans la catégorie</span> %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) ); ?>

			</div><!-- .entry-meta -->

	<?php if ( is_archive() || is_search() ) : // Affiché seulement pour les archives et la recherche. ?>
			<div class="entry-summary">
				<?php the_excerpt(); ?>
			</div><!-- .entry-summary -->
	<?php else : ?>
			<div class="entry-content">
				<?php the_content('',FALSE,'');?>
				<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
							<div class="entry-utility">
				<?php if ( count( get_the_category() ) ) : ?>

				<?php endif; ?>
				<?php
					$tags_list = get_the_tag_list( '', ', ' );
					if ( $tags_list ):
				?>
					<span class="tag-links">
						<?php printf( __( '<span class="%1$s">Tagged</span> %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?>
					</span>
					<span class="meta-sep">|</span>
				<?php endif; ?>
				<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?></span>
				<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta-sep">|</span> <span class="edit-link">', '</span>' ); ?>
			<span class="lirelasuite"><a href="<?php the_permalink(); ?>">Lire la suite</a></span>

			</div><!-- .entry-utility -->

				</div><!-- .entry-content -->
	<?php endif; ?>

		</div><!-- #post-## -->

		<?php comments_template( '', true ); ?>

<?php endwhile; // Fin de la boucle. ?>

<?php /* Affiche la navigation */ ?>
<?php if (  $wp_query->max_num_pages > 1 ) : ?>
				<div id="nav-below" class="navigation">
					<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>
					<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>
				</div><!-- #nav-below -->
<?php endif; ?>

Nous avons mis en place le code pour afficher les articles sur le site. Il convient maintenant de mettre en forme ce résumé des articles pour correspondre à  la maquette. Le résultat final attendu est le suivant :

Tutoriel Intégration WordPress

Comme le montre l’image ci-dessus, le résumé de l’article comporte un titre, un « sous-titre », ainsi qu’une image et un texte. Localisez le début de la boucle d`affichage qui commence comme ceci :  « while ( have_posts() ) : the_post();  ». C`est à  partir de là  que vous pouvez trouvez le début de la structure d`un article. Nous allons voir pas à  pas comment rendre l`article conforme au résultat final. L’image ci-dessous montre comment les éléments HTML constituent l’article.

Tutoriel Intégration WordPress

Ouvrez pour cela le fichier style.css. Commençons par mettre en forme le titre du post contenu dans la balise h2. entry-title. D`après la maquette, le titre de l’article est écrit avec une police non standard, qui n’est pas installée par défaut sur les ordinateurs. Je vais donc utiliser la règle css @font-face pour inclure la police Museo dans mon design. Pour créer mon kit de police j`utilise le site Font Squirel. En utilisant le @fontface kit generator, le site génère les lignes CSS pour importer la police, et créer également un format de police adapté au web.

Tutoriel Intégration WordPress

Je crée un dossier fonts à  la racine du thème et je place les polices générées dans ce dossier. Je peux   à  présent utiliser le code suivant sans souci et l`ajouter à  mon fichier CSS pour inclure la police dans le site :

@font-face {
 font-family: 'Museo700';
 src: url('fonts/museo700-regular-webfont.eot');
 src: local('☺'), url('fonts/museo700-regular-webfont.woff') format('woff'), url('fonts/museo700-regular-webfont.ttf') format('truetype'), url('fonts/museo700-regular-webfont.svg#webfontips0TgQr') format('svg');
 font-weight: normal;
 font-style: normal;
}

 .museo700 {
 font-weight: normal;
 font-style: normal;
 line-height:normal;
 font-family: 'Museo700', sans-serif;
 font-size-adjust: 0.51;
 }

Localisez à  présent la ligne de votre fichier CSS qui contient   #content .entry-title pour mettre en forme le titre et collez le code suivant :

#content .entry-title {
 color: #0f7f7f;
 font-size: 26px;
 margin-bottom: 0;
 font-weight: normal;
 font-style: normal;
 line-height:normal;
 font-family: 'Museo700', sans-serif; /*Référence au font face*/
 font-size-adjust: 0.51;
 padding:0 0 0 20px;
 background:url(images/etoile_big.png) left center no-repeat;
}
.entry-title a:link,
.entry-title a:visited {
 color: #0f7f7f;
 text-decoration: none;
}
.entry-title a:active,
.entry-title a:hover {
 color: #5a7f7f;
}

Nous voilà  avec un beau titre gris, avec une étoile devant. L’astuce pour mettre l’étoile en CSS, consiste à  la mettre en image de fond, avec une marge intérieure gauche (padding-left). Je met en forme le reste de l’article avec le CSS suivant :


.hentry {
	margin: 0 0 75px 0;
}
.home .sticky {
	background: #f2f7fc;
	border-top: 4px solid #000;
	margin-left: -20px;
	margin-right: -20px;
	padding: 18px 20px;
}
.single .hentry {
	margin: 0 0 36px 0;
}
.page-title {
	color: #000;
	font-size: 14px;
	font-weight: bold;
	margin: 0 0 36px 0;
}
.page-title span {
	color: #333;
	font-size: 16px;
	font-style: italic;
	font-weight: normal;
}
.page-title a:link,
.page-title a:visited {
	color: #888;
	text-decoration: none;
}
.page-title a:active,
.page-title a:hover {
	color: #ff4b33;
}

.entry-meta {
	color: #0f7f7f;
	font-size: 12px;
}
.entry-meta abbr,
.entry-utility abbr {
	border: none;
}
.entry-meta abbr:hover,
.entry-utility abbr:hover {
	border-bottom: 1px dotted #666;
}
.entry-content,
.entry-summary {
	clear: both;
	padding: 12px 0 0 0;
}
#content .entry-summary p:last-child {
	margin-bottom: 12px;
}
.entry-content fieldset {
	border: 1px solid #e7e7e7;
	margin: 0 0 24px 0;
	padding: 24px;
}
.entry-content fieldset legend {
	background: #fff;
	color: #000;
	font-weight: bold;
	padding: 0 24px;
}
.entry-content input {
	margin: 0 0 24px 0;
}
.entry-content input.file,
.entry-content input.button {
	margin-right: 24px;
}
.entry-content label {
	color: #888;
	font-size: 12px;
}
.entry-content select {
	margin: 0 0 24px 0;
}
.entry-content sup,
.entry-content sub {
	font-size: 10px;
}
.entry-content blockquote.left {
	float: left;
	margin-left: 0;
	margin-right: 24px;
	text-align: right;
	width: 33%;
}
.entry-content blockquote.right {
	float: right;
	margin-left: 24px;
	margin-right: 0;
	text-align: left;
	width: 33%;
}

.entry-content img{
	float:left;
	border:5px solid #F2F2F2;
	margin:0 10px 0 0 !important;
	}
.page-link {
	color: #000;
	font-weight: bold;
	margin: 0 0 22px 0;
	word-spacing: 0.5em;
}
.page-link a:link,
.page-link a:visited {
	background: #f1f1f1;
	color: #333;
	font-weight: normal;
	padding: 0.5em 0.75em;
	text-decoration: none;
}
.home .sticky .page-link a {
	background: #d9e8f7;
}
.page-link a:active,
.page-link a:hover {
	color: #ff4b33;
}
body.page .edit-link {
	clear: both;
	display: block;
}
#entry-author-info {
	background: #f2f7fc;
	border-top: 4px solid #000;
	clear: both;
	font-size: 14px;
	line-height: 20px;
	margin: 24px 0;
	overflow: hidden;
	padding: 18px 20px;
}
#entry-author-info #author-avatar {
	background: #fff;
	border: 1px solid #e7e7e7;
	float: left;
	height: 60px;
	margin: 0 -104px 0 0;
	padding: 11px;
}
#entry-author-info #author-description {
	float: left;
	margin: 0 0 0 104px;
}
#entry-author-info h2 {
	color: #000;
	font-size: 100%;
	font-weight: bold;
	margin-bottom: 0;
}
.entry-utility {
	float:right;
	color: #888;
	font-size: 12px;
	line-height: 18px;
	height:28px;
	width:382px;
	background:url(images/barre_com.gif) 0 -2px no-repeat;
	margin
}
.entry-meta a,
.entry-utility a {
	color: #0f7f7f;
	font-weight:bold;
	text-decoration:none;
}
.entry-meta a:hover,
.entry-utility a:hover {
	color: #a57f7f;
}
#content .video-player {
	padding: 0;
}

.comments-link{
		background:url(images/bulle.png) center left no-repeat;
		padding:0 0 0 29px;
		margin:0 0 0 10px;
		display:block;
		float:left;
	}

.lirelasuite a{
	color:#20a2e6;
	text-shadow:0 1px 0 #1dfffb;
	float:right;
	margin:0 30px 0 0;
}

.lirelasuite a:hover{
	color:#20a2e6;
	text-shadow:0 -1px 0 #1dfffb;
}

Étape 6 : Edition du fichier sidebar.php

La sidebar de notre site est constituée de 5 éléments que nous pouvons diviser en 5 blocs distincts. En premier le bloc du dernier Tweet, en second un menu à  onglet, en troisième un bloc affichant des articles, en quatrième un module de pub et pour finir un module Facebook. Une sidebar WordPress est généralement constituée de widgets. Les widgets WP sont des composants prêts à  l’emploi, affichables facilement depuis l’interface d’administration. Cependant pour bien pousser la personnalisation du template, il est possible de créer ses propres composants en éditant directement le fichier PHP. Pour avoir un bon aperçu de ce qui peut se faire, nous allons utiliser les deux techniques. Commençons par mettre en place la structure de la sidebar. Ouvrez le fichier sidebar.php et collez le code suivant. Cette div sidebar contiendra nos 5 blocs.

<?php
/**
 * Sidebar WordPress - Colonne de droite
 **/
?>

<div id="sidebar">

</div>

Etape 6.1 : le bloc de dernier Tweet

Il existe de nombreux plug-ins WordPress pour afficher son dernier tweet sur un blog. Cependant j’ai choisi une méthode « à  la main ». Un petit script Javascript très efficace fournir par Pressimi. Créez un nouveau   fichier Javascript derniertweet.js, puis enregistrez-le dans le dossier JS du thème. Copiez-collez le code suivant qui permet de récupérer le flux de son compte Twitter.

getTwitters('tweet', {
		    id: 'livingtuts_fr', //votre id twitter
		    count: 1, //ici vous indiquez le nombre de tweets que vous voulez afficher
		    enableLinks: true,
		    ignoreReplies: true,
		    clearContents: true,
		    template: '%text% <a href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a>'
		    });

Indiquez votre Id Twitter pour le relier à  votre compte. Le fichier est déjà  appelé dans le header que vous avez mis en place à  l’étape 2. Dans le fichier sidebar.php, je place les éléments HTML nécessaires dans la div sidebar pour afficher et mettre en forme ce dernier tweet :


<div id="lasttweet"><!--Affichage du dernier Tweet-->
			<div id="showlasttweet">
				<div id="tweet"></div>
			</div>
			<p id="linktwitter"><a href="http://www.twitter.com/wdtrends">Suivez-nous sur Twitter</a></p>
		</div>

Tutoriel Intégration WordPress

Pour bien comprendre cette petite structure, voila à  quoi correspondent les blocs. Nous pouvons voir que la div showlasttweet comporte des bords arrondis et un dégradé en fond. Nous allons utiliser un peu de CSS 3 pour rendre tout cela joli en quelques petites lignes. La div tweet est liée au Javascript, c’est elle qui affiche le contenu du dernier tweet. Le tout est contenu dans la div lasttweet qui affiche l’image des oiseaux avec un background CSS. Voici le contenu à  mettre en place pour parvenir au résultat :


/***Affichage du dernier tweet*******/

#lasttweet{
 background:url(images/derniertweet.jpg) bottom left no-repeat;
 margin:0 0 20px 0;
 min-height:105px;
}

#showlasttweet{
 margin:0 0 0 145px;
 width:170px;
 /* Dégradé en CSS 3 */
 /* Anciens navigateurs */
 background: #45f1f4 url(images/bglastweet.png) repeat-x top;
 -o-background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 background-size: 100% 100%;
 /* Internet Explorer */
 *background: #45f1f4;
 background: #45f1f4\0/;
 filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#FFa2fcf2, endColorstr=#FF45f1f4);
 /* Navigateurs récents */
 background-image: -moz-linear-gradient(top,       #a2fcf2,#45f1f4       );
 background-image: -webkit-gradient(       linear,       left top, left bottom,       from(#a2fcf2),       to(#45f1f4)       );

 /**Bordures arrondies en CSS 3**/
 -moz-border-radius: 4px;
 border-radius: 4px;
 border:1px solid #52f0f5;
 padding:5px;
}

#tweet {
 color:#000;
 font-size:12px;
}

#tweet a{
 color:#52b6dc;
}

#tweet ul{
 list-style-type:none;
 margin:0;
 padding:0;
}

#linktwitter{
 margin:3px 0 0 0;
 font-size:12px;
 font-weight:bold;
 text-align:right;
 }

 #linktwitter a{
 color:#22abf2;
 text-decoration:none;
 background:url(images/pucefleche.gif) left center no-repeat;
 padding:0 0 0 15px;
 }

Pour styler la div showlasttweet j’ai utilisé le générateur de dégradé CSS 3 de display-inline qui permet de créer un dégradé rapidement mais également de le rendre compatible sous IE, en générant automatiquement une image. Cela reste expérimental, mais en attendant que le CSS 3 soit pris en compte par tous les navigateurs, cela reste une très bonne alternative.

Etape 6.2 : le menu à  onglets Jquery

Prochain bloc de notre sidebar, le menu à  onglet Jquery. Il existe également des plugs-ins WordPress pour gagner du temps, mais le fait de créer le menu « à  la main » permet, je pense, d’apprendre un peu plus. C’est pour pour ça que nous sommes là  pas vrai ? Commençons ! Tout d’abord, je met en place la structure HTML :

<div id="menuonglets">
			<div id="tabs">
					<ul>
						<li><a href="#tabs-1">Catégories</a></li>
						<li><a href="#tabs-2">Téléchargements</a></li>
					</ul>
					<div id="tabs-1">Ici les catégories</div><!--Liste des catégories du blog sans le titre "catégorie"-->
					<div id="tabs-2">Ceci est du faux texte du genre lorem ipsum dolor sit amet...Au fait à  vous de voir quoi mettre ici !</div>
				</div>
		</div>

J’affiche une div menuonglet qui contient tout le menu. Dans cette div j’affiche les onglets avec la div tabs. La première liste (ul, li) correspond au texte des onglets. Les deux div tabs-1 et tabs-2 affichent les contenus des onglets. Pour lister les catégories du blog, j’utilise la ligne suivante :

<?php wp_list_categories('title_li='); ?>

Cette ligne affiche une liste des catégories du blog sans afficher le titre « Catégories« . Entourez cette ligne par une balise ul pour être sémantiquement correct car la liste affichée comporte uniquement des li. Pour faire fonctionner le menu à  onglets, nous avons besoin de Jquery et de Jquery UI. Nous possédons déjà  Jquery sur le blog, il suffit maintenant de télécharger le fichier Jquery UI et de placer le fichier jquery-ui-1.8.6.custom.min.js dans le dossier js du blog. Reste maintenant à  mettre en forme le menu avec du CSS. Comme pour le blog du dernier Tweet, le menu possède un dégradé en fond et des bordures arrondies que je vais traiter à  l’aide des règles CSS3 border-radius et gradient. Je me suis basé sur le CSS de Jquery UI que j’ai modifié pour correspondre à  la maquette. Sur l’image ci-dessous voyez la base à  gauche, et le menu finalisé à  droite.

Menu Jquery

Et voici le CSS, à  enregistrer sous jquery-ui-1.8.6.custom.css à  la racine du thème.

/*
 * jQuery UI CSS Framework 1.8.6
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }

/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }

/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }

/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*
 * jQuery UI CSS Framework 1.8.6
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS,%20Tahoma,%20Verdana,%20Arial,%20sans-serif&amp;fwDefault=bold&amp;fsDefault=1.1em&amp;cornerRadius=4px&amp;bgColorHeader=f6a828&amp;bgTextureHeader=12_gloss_wave.png&amp;bgImgOpacityHeader=35&amp;borderColorHeader=e78f08&amp;fcHeader=ffffff&amp;iconColorHeader=ffffff&amp;bgColorContent=eeeeee&amp;bgTextureContent=03_highlight_soft.png&amp;bgImgOpacityContent=100&amp;borderColorContent=dddddd&amp;fcContent=333333&amp;iconColorContent=222222&amp;bgColorDefault=f6f6f6&amp;bgTextureDefault=02_glass.png&amp;bgImgOpacityDefault=100&amp;borderColorDefault=cccccc&amp;fcDefault=1c94c4&amp;iconColorDefault=ef8c08&amp;bgColorHover=fdf5ce&amp;bgTextureHover=02_glass.png&amp;bgImgOpacityHover=100&amp;borderColorHover=fbcb09&amp;fcHover=c77405&amp;iconColorHover=ef8c08&amp;bgColorActive=ffffff&amp;bgTextureActive=02_glass.png&amp;bgImgOpacityActive=65&amp;borderColorActive=fbd850&amp;fcActive=eb8f00&amp;iconColorActive=ef8c08&amp;bgColorHighlight=ffe45c&amp;bgTextureHighlight=03_highlight_soft.png&amp;bgImgOpacityHighlight=75&amp;borderColorHighlight=fed22f&amp;fcHighlight=363636&amp;iconColorHighlight=228ef1&amp;bgColorError=b81900&amp;bgTextureError=08_diagonals_thick.png&amp;bgImgOpacityError=18&amp;borderColorError=cd0a0a&amp;fcError=ffffff&amp;iconColorError=ffd27a&amp;bgColorOverlay=666666&amp;bgTextureOverlay=08_diagonals_thick.png&amp;bgImgOpacityOverlay=20&amp;opacityOverlay=50&amp;bgColorShadow=000000&amp;bgTextureShadow=01_flat.png&amp;bgImgOpacityShadow=10&amp;opacityShadow=20&amp;thicknessShadow=5px&amp;offsetTopShadow=-5px&amp;offsetLeftShadow=-5px&amp;cornerRadiusShadow=5px
 */

/* Component containers
----------------------------------*/
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
.ui-widget-content {}
.ui-widget-content a { color: #333333; }
.ui-widget-header { color: #ffffff; font-weight: bold; background:none; }
.ui-widget-header a { color: #ffffff; }

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #cccccc; background: #f6f6f6 url(images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #1c94c4; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #1c94c4; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #fbcb09; background: #fdf5ce url(images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #c77405; }
.ui-state-hover a, .ui-state-hover a:hover { color: #c77405; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #fbd850; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #eb8f00; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #eb8f00; text-decoration: none; }
.ui-widget :active { outline: none; }

/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; }
.ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
.ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
.ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; }
.ui-corner-bottom {-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
.ui-corner-right {   -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
.ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }

/* Overlays */
.ui-widget-overlay { background: #666666 url(images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat; opacity: .50;filter:Alpha(Opacity=50); }
.ui-widget-shadow { margin: -5px 0 0 -5px; padding: 5px; background: #000000 url(images/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x; opacity: .20;filter:Alpha(Opacity=20); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }/*

 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Tabs#theming
 */
.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav { margin: 0; height:32px;}
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border: 0 !important; padding: 0; white-space: nowrap; background-color:#92fbf7;}
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1.31em; text-decoration: none; font-size:14px; color:#0f7f7f; outline:none;}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; background-color:#92eceb;}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer} /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs-nav li.ui-tabs-selected a {background:url(images/etoile.png) 4px 10px no-repeat; padding:0.5em 1.3em;} /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { color:#000; display: block; border-width: 0; padding: 1em 1.4em;
 /* Anciens navigateurs */
 background: #81d1e2 url(images/bgtab.png) repeat-x top;
 -o-background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 background-size: 100% 100%;

 /* Navigateurs récents */
 background-image: -moz-linear-gradient(
 top,
 #92eceb,
 #81d1e2
 );
 background-image: -webkit-gradient(
 linear,
 left top, left bottom,
 from(#92eceb),
 to(#81d1e2)
 );
 }
.ui-tabs .ui-tabs-hide { display: none !important; }

.ui-tabs .ui-tabs-panel ul{margin:0; padding:0;}
.ui-tabs .ui-tabs-panel li{font-size:14px; color:#000; list-style-type:none; text-shadow:1px 0 0 #afeff0; border-bottom:1px solid #bcf1f2;}
.ui-tabs .ui-tabs-panel li a{color:#000;text-decoration:none;}

Nous voilà  avec un menu correctement formaté. Passons au bloc suivant, le widget des derniers articles.

Etape 6.3: Widget des derniers articles

Pour afficher des widgets dynamiquement depuis l’administration de WordPress, nous devons lui indiquer où les afficher. Toujours dans le fichier sidebar.php, collez les lignes suivantes qui permettent de créer deux zones de widgets administrables. Pour ce tutoriel nous ne nous servirons que d’une zone, mais il est tout à  fait envisageable d’utiliser plusieurs widgets si l’envie vous guette !


		<div id="primary" class="widget-area">
			<ul class="xoxo">
				<?php
				/* Ici on appelle les widgets administrable depuis l'admin de W. Dans notre cas les articles les plus lus sur le blog	 */
				if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?>
						<li id="meta" class="widget-container">
							<h3 class="widget-title"><?php _e( 'Meta', 'twentyten' ); ?></h3>
							<ul>
								<?php wp_register(); ?>
								<li><?php wp_loginout(); ?></li>
								<?php wp_meta(); ?>
							</ul>
						</li>

					<?php endif; // fin de la zone principale des widgets ?>
			</ul>
		</div><!-- #primary .widget-area -->

		<?php
			// Deuxième zone de widgets
			if ( is_active_sidebar( 'secondary-widget-area' ) ) : ?>

				<div id="secondary" class="widget-area" role="complementary">
					<ul class="xoxo">
						<?php dynamic_sidebar( 'secondary-widget-area' ); ?>
					</ul>
				</div><!-- #secondary .widget-area -->

		<?php endif; ?>

Connectez-vous à  présent à  l’administration de WordPress. Dans l’onglet « Apparence« , cliquez sur « Widgets« . Ici pour mettre en ligne un widget rien de plus simple : glissez puis déposez le widget « article récent » dans la zone principale de widgets. Et le voilà  en place ! En déroulant le menu vous pouvez ajouter le titre de votre choix, ainsi que le nombre d’articles à  afficher.

Intégration WordPress

Pour le mettre en forme, retournez sur le site puis utilisez l’extension Firebug de Firefox pour inspecter le HTML généré par le widget pour pouvoir le mettre en forme avec du CSS. En inspectant nous pouvons voir qu’il à  généré un titre h3 ainsi qu’une liste (ul, li).

Intégration WordPress

Facile à  mettre en forme pour correspondre à  la maquette :


/* =Zone de widgets
-------------------------------------------------------------- */

.widget-area ul {
list-style: none;
margin-left: 0;
}
.widget-area ul ul {
list-style: square;
margin-left: 1.3em;
}
.widget_search #s {
width: 60%;
}
.widget_search label {
display: none;
}
.widget-container {
margin: 0 0 18px 0;
}

.widget-title {
color: #0f7f7f;
font-weight: bold;
font-size:14px;
background:url(images/pen.png) no-repeat;
padding:0 0 0 28px; /*Décalage pour voir l'image de fond*/
}

.xoxo li{color:#000;}
.xoxo li a {color:#000;text-decoration:none;}
.xoxo li a:hover{color:#0f7f7f;text-decoration:none;}
.xoxo ul li{border-bottom:1px dotted #0f7f7f; padding:0 0 2px 0;}
.widget-area a:link,
.widget-area a:visited {
text-decoration: none;
}
.widget-area a:active,
.widget-area a:hover {
text-decoration: underline;
}
.widget-area .entry-meta {
font-size: 11px;
}

Etape 6.4 : Intégration du module de pub WP 125

Nouvelle étape dans notre intégration de sidebar, le plug-in de pub WP 125. Téléchargez le plug-in sur le site de WordPress. Les plugs-ins sont très utiles mais surtout très nombreux et permettent d’ajouter de nombreuses fonctions à  votre blog WordPress. Dézippez le dossier et placez-le dans le dossier wp-content/plugins/ de votre blog. Activez le plug-in depuis le menu extensions de l’administration du blog. Dans le fichier sidebar.php ajoutez les lignes suivantes :


<div id="ads">
			<?php wp125_write_ads(); ?><!-- Affichage du plug in WP 125 pour gerer les pubs -->
			<div class="adwrp"></div>
		</div>

Vous pouvez personnaliser l’image de pub par défaut, elle se trouve dans   le dossier du plug-in. Pour adpater l’espace dans le module de pub, je n’ai pas utilisé le CSS du plug-in. Voici le CSS correct pour afficher les blocs de pub en deux colonnes :

/*****Sidebarpub******/
#ads{/*margin:20px 0 20px 0;*/}/* Styles for one-column display */
#wp125adwrap_1c { width:100%; }
#wp125adwrap_1c .wp125ad { margin-bottom:10px; }

/* Styles for two-column display */
#wp125adwrap_2c { width:100%;margin:0 0 0 -10px;}
#wp125adwrap_2c .wp125ad { width:140px; float:left; margin:0 10px 10px 10px;}

Vous savez maintenant comment installer et styler un plug-in WordPress.

Etape 6.5 : Module Social Facebook

Pour mettre place un module social Facebook, l’énorme site communautaire à  tout fait pour que n’importe qui puisse utiliser ses plugs-ins. Rendez-vous sur la page des Developpeurs Facebook. Nous utilisons la « like Box » que vous pouvez paramétrer très facilement. Pour vous donner une indication de taille, j’ai utilisé une hauteur de 285px pour une largeur de 310px.

Intégration Worpdress

Cliquez sur le bouton « Get Code » et collez le code dans sidebar.php dans une div fblikebox pour pouvoir gérer les marges. Ajoutez le CSS suivant pour mettre un marge de 20px en haut du bloc :


/***Facebook Iframe Like Box*******/
#fblikebox{
	margin:20px 0 0 0;
};


Easy non ?

Étape 7 : Edition du fichier footer.php

Notre blog commence tout doucement à  avoir un aspect quasi-finalisé ! Il ne reste plus que le pied de page et le tour est joué ! Prenez votre courage à  deux mains et ouvrez le fichier footer.php et mettons ensemble la structure en place.

<?php
/**
 * Enfin voici notre pied de page !
 *
 */
?>
	</div><!-- #main -->

	<div id="footer">
		<div id="top-footer">

		</div>

		<div id="bottom-footer">

		</div>

	</div><!-- #footer -->

<?php
	/*Toujours utiliser wp_footer avec la balise de fin de body pour la sécurité */
	wp_footer();
?>

</body>
</html>

Le ficher contient tout le bas du site, donc la fermeture HTML etc. La div footer va contenir nos éléments du bas de page. Divisions cette div en deux partie, pour « le haut » du pied de page en bleu et le bas en blanc. Mettons également en place le style pour fermer notre site en beauté.

#footer {
	height:240px;
	background-color:#28c5fe;
       clear:both;
	width: 100%;
}
#top-footer{
height:200px;
    width:960px;
   margin:0 auto;
}
#bottom-footer{
   background-color:#f4f2f2;
   height:40px;

Dans la div bottom-footer, ajoutez les lignes suivantes pour faire apparaître les informations du site :

<div id="site-info">
				<a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
					<?php bloginfo( 'name' ); ?>
				</a>
				<a href="#"> | Copyright 2010 par Arnos</a>
				<p class="copyrt">Crédits : lysergid.com, sxc.hu, iconfinder</p>
			</div>

Voici le style pour le bottom-footer :

.blocfoot{
		width:277px;
		float:left;
		margin:0 0 0 20px;}

#colophon {
	border-top: 4px solid #000;
	margin-top: -4px;
	overflow: hidden;
	padding: 18px 0;
}
#site-info {
	width:960px;
	margin:0 auto;
	font-size:10px;
		color:#000;
}
#site-info a {
	color: #000;
	text-decoration: none;
}
.copyrt{float:right;}

Au final nous obtenons un footer qui ressemble à  ça :

intégration WordPress

Voilà  les éléments statiques mis en place dans notre footer. Les trois éléments du haut vont pouvoir être gérés via l’administration, en mettant en place des…widgets bien sûr ! Quelle est la première chose à  faire avant d’utiliser un widget ? L‘appeler dans le code, je vois que vous suivez. Dans la div top-footer collez cette ligne pour créer un footer dynamique :

<div id="top-footer">
			<?php
			/* Une sidebar dans le footer ? Hé oui ! Grâce à  ça, nous pouvons afficher les trois bloc du footer de manière dynamique
			en utilsant les widgets WordPress */
			get_sidebar( 'footer' );
			?>
		</div>

Dans le menu des widgets de l’administration de WordPress, je peux à  présent utiliser les 3 zones de pieds de page. Je place donc trois widgets, le premier affichant les liens du blog, le second les commentaires récents, le  troisième du simple texte.

Intégration WordPress

J’utilise à  nouveau Firebug pour inspecter les balises HTML. Sur la capture d’écran ci-dessous nous distinguons bien les trois blocs, étant les trois widgets.

Intégration WordPress

Une fois que vous avez repéré les différents  éléments  mettez en forme avec le CSS qui suit. Les techniques utilisées fonctionnent sur le même principe que celles déjà  utilisées précédemment. C’est-à -dire des images de fond sur les titres, et des styles de listes. Les autres balises servent à  mettre en forme l’espace dans le footer de manière à  répartir 3 bloc de largeur égale :

/* Structure de la zone du footer */
#footer-widget-area {
	overflow: hidden;
}
#footer-widget-area .widget-area {
	float: left;
	margin-right: 20px;
	width: 295px;
}
#footer-widget-area #fourth {
	margin-right: 0;
}
#top-footer #first h3{
	color:#000;
	font-size:16px;
	background:url(images/link.png) no-repeat;
	padding:0 0 0 23px;
	margin:20px 0 5px 0;
}

#top-footer #first ul.xoxo li ul.xoxo li{
	border-bottom:1px solid #bdd2ee;
}

#top-footer #first ul.xoxo li ul.xoxo{
	list-style:none;
}

#top-footer #second h3{
	color:#000;
	font-size:16px;
	background:url(images/bulle.png) no-repeat;
	padding:0 0 0 23px;
	margin:20px 0 5px 0;
}

#recentcomments{
		list-style-type:none;
}
#recentcomments li{
		border-bottom:1px solid #bdd2ee;
}

#top-footer #second ul.xoxo li ul.xoxo li{
	border-bottom:1px solid #bdd2ee;
}

#top-footer #second ul.xoxo li ul.xoxo{
	list-style:none;
}

#top-footer #third img{
	float:left;
	border:5px solid #F2F2F2;
	margin:0 10px 0 0 !important;
}

#top-footer #third h3{
	color:#000;
	font-size:16px;
	background:url(images/apropos.png) no-repeat;
	padding:0 0 0 23px;
	margin:20px 0 5px 0;
}

#top-footer #third ul.xoxo li ul.xoxo li{
	border-bottom:1px solid #bdd2ee;
}

#top-footer #third ul.xoxo li ul.xoxo{
	list-style:none;
}

Étape 8 : fichier single.php (Bonus !)

Cette étape sort quelque peu de notre maquette Photoshop de base, mais c’est pourtant une étape essentielle à  l’affichage correct du blog. En effet le fichier single.php affiche votre article après un clic sur un lien « lire la suite » depuis la page d’accueil. La page du thème par défaut fonctionne déjà  très bien et s’intégre directement dans notre design. Single.php tout comme le fichier index.php appelle le header, le footer et la sidebar. Sachant qu’ils sont déjà  au couleurs de notre design, ils fonctionnent tout naturellement à  l’affichage d’un simple article ! Pratique non ?

Résultat attendu :

Intégration WordPress

NB : Sur la capture d’écran ne figure pas les commentaires, ainsi que le formulaire pour ajouter un commentaire.

Le fichier single.php « cherche » l’article demandé dans la base de donnée et affiche le contenu. En plus, il affiche la date de publication, l’auteur, la catégorie etc. Voici le code complet de la page single.php :

Single.php

<?php get_header(); ?>

		<div id="container">
			<div id="content" role="main">

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

				<div id="nav-above" class="navigation">
					<div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div>
					<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'twentyten' ) . '</span>' ); ?></div>
				</div><!-- #nav-above -->

				<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<h1 class="entry-title"><?php the_title(); ?></h1>

					<div class="entry-meta">
						<?php twentyten_posted_on(); ?>
					</div><!-- .entry-meta -->

					<div class="entry-content">
						<?php the_content(); ?>
						<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
					</div><!-- .entry-content -->

<?php if ( get_the_author_meta( 'description' ) ) : // If a user has filled out their description, show a bio on their entries  ?>
					<div id="entry-author-info">
						<div id="author-avatar">
							<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentyten_author_bio_avatar_size', 60 ) ); ?>
						</div><!-- #author-avatar -->
						<div id="author-description">
							<h2><?php printf( esc_attr__( 'About %s', 'twentyten' ), get_the_author() ); ?></h2>
							<?php the_author_meta( 'description' ); ?>
							<div id="author-link">
								<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">
									<?php printf( __( 'View all posts by %s <span class="meta-nav">&rarr;</span>', 'twentyten' ), get_the_author() ); ?>
								</a>
							</div><!-- #author-link	-->
						</div><!-- #author-description -->
					</div><!-- #entry-author-info -->
<?php endif; ?>

				</div><!-- #post-## -->

				<div id="nav-below" class="navigation">
					<div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div>
					<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'twentyten' ) . '</span>' ); ?></div>
				</div><!-- #nav-below -->

				<?php comments_template( '', true ); ?>

<?php endwhile; // end of the loop. ?>

			</div><!-- #content -->
			<?php get_sidebar(); ?>
		</div><!-- #container -->

<?php get_footer(); ?>

Tout d’abord mettons en forme les images à  l’intérieur des posts. Avec l’éditeur de WordPress vous pouvez choisir de centrer des images, de les aligner à  droite ou à  gauche etc. Dans votre style il faut spécifier cet aspect.

Style des images d’article :

/* =Images
-------------------------------------------------------------- */

#content img {
	margin: 0;
	height: auto;
	max-width: 640px;
	width: auto;
}
#content .attachment img {
	max-width: 900px;
}
#content .alignleft,
#content img.alignleft {
	display: inline;
	float: left;
	margin-right: 24px;
	margin-top: 4px;
}
#content .alignright,
#content img.alignright {
	display: inline;
	float: right;
	margin-left: 24px;
	margin-top: 4px;
}
#content .aligncenter,
#content img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
#content img.alignleft,
#content img.alignright,
#content img.aligncenter {
	margin-bottom: 12px;
}
#content .wp-caption {
	background: #f1f1f1;
	line-height: 18px;
	margin-bottom: 20px;
	padding: 4px;
	text-align: center;
}
#content .wp-caption img {
	margin: 5px 5px 0;
}
#content .wp-caption p.wp-caption-text {
	color: #888;
	font-size: 12px;
	margin: 5px;
}
#content .wp-smiley {
	margin: 0;}

Des liens de navigation apparaissent par défaut sur cette page en haut et en bas de page, comme le montre cette capture d’écran :

Intégration WP

Pour les  mettre correctement en forme utilisez le CSS suivant. Si vous souhaitez faire disparaître les liens mettez la div nav-above a display:none. Cette propriété CSS permet de faire disparaître l’élément HTML auquel elle est appliquée.

Navigation d’article :

/* =Navigation
-------------------------------------------------------------- */

.navigation {
	color: #888;
	font-size: 12px;
	line-height: 18px;
	overflow: hidden;
}
.navigation a:link,
.navigation a:visited {
	color: #888;
	text-decoration: none;
}
.navigation a:active,
.navigation a:hover {
	color: #ff4b33;
}
.nav-previous {
	float: left;
	width: 50%;
}
.nav-next {
	float: right;
	text-align: right;
	width: 50%;
}
#nav-above {
	margin: 0 0 18px 0;
}
#nav-above {
	display: none;
}
.paged #nav-above,
.single #nav-above {
	display: block;
}
#nav-below {
	margin: 80px 0 0 0;
}

Style des commentaires :

Un des points importants dans la communication avec vos lecteurs, les commentaires. Administrables via l’administration, ils s’affichent en bas de vos articles. De la manière la plus simple comme ceci :

Intégration WordPress

La capture d’écran ci-dessus montre la zone de commentaire. Par défaut elle est stylée dans le thème de base de WordPress, je ne vais donc pas expliquer en détail comment arriver au résultat de ce formulaire. N’hésitez pas à  vous éclater en mettant en forme le bouton avec un peu de CSS en encore en mettant des bordures arrondies sur les champs de texte (input) avec la propriété border-radius CSS 3. Mais voici un morceau de CSS qui vous permettra de comprendre comme il est mis en forme :

/* =Commentaires
-------------------------------------------------------------- */
#comments {
	clear: both;
}
#comments .navigation {
	padding: 0 0 18px 0;
}
h3#comments-title,
h3#reply-title {
	color: #000;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 0;
}
h3#comments-title {
	padding: 24px 0;
}
.commentlist {
	list-style: none;
	margin: 0;
}
.commentlist li.comment {
	border-bottom: 1px solid #e7e7e7;
	line-height: 24px;
	margin: 0 0 24px 0;
	padding: 0 0 0 56px;
	position: relative;
}
.commentlist li:last-child {
	border-bottom: none;
	margin-bottom: 0;
}
#comments .comment-body ul,
#comments .comment-body ol {
	margin-bottom: 18px;
}
#comments .comment-body p:last-child {
	margin-bottom: 6px;
}
#comments .comment-body blockquote p:last-child {
	margin-bottom: 24px;
}
.commentlist ol {
	list-style: decimal;
}
.commentlist .avatar {
	position: absolute;
	top: 4px;
	left: 0;
}
.comment-author {
}
.comment-author cite {
	color: #000;
	font-style: normal;
	font-weight: bold;
}
.comment-author .says {
	font-style: italic;
}
.comment-meta {
	font-size: 12px;
	margin: 0 0 18px 0;
}
.comment-meta a:link,
.comment-meta a:visited {
	color: #888;
	text-decoration: none;
}
.comment-meta a:active,
.comment-meta a:hover {
	color: #ff4b33;
}
.commentlist .even {
}
.commentlist .bypostauthor {
}
.reply {
	font-size: 12px;
	padding: 0 0 24px 0;
}
.reply a,
a.comment-edit-link {
	color: #888;
}
.reply a:hover,
a.comment-edit-link:hover {
	color: #ff4b33;
}
.commentlist .children {
	list-style: none;
	margin: 0;
}
.commentlist .children li {
	border: none;
	margin: 0;
}
.nopassword,
.nocomments {
	display: none;
}
#comments .pingback {
	border-bottom: 1px solid #e7e7e7;
	margin-bottom: 18px;
	padding-bottom: 18px;
}
.commentlist li.comment+li.pingback {
	margin-top: -6px;
}
#comments .pingback p {
	color: #888;
	display: block;
	font-size: 12px;
	line-height: 18px;
	margin: 0;
}
#comments .pingback .url {
	font-size: 13px;
	font-style: italic;
}

/* Comments form */
input[type=submit] {
	color: #333;
}
#respond {
	border-top: 1px solid #e7e7e7;
	margin: 24px 0;
	overflow: hidden;
	position: relative;
}
#respond p {
	margin: 0 0 20px 0;
}

p.comment-form-url {
	margin:0 0 32px 0 !important;
}
#respond .comment-notes {
	margin-bottom: 1em;
}
.form-allowed-tags {
	line-height: 1em;
}
.children #respond {
	margin: 0 48px 0 0;
}
h3#reply-title {
	margin: 18px 0;
}
#comments-list #respond {
	margin: 0 0 18px 0;
}
#comments-list ul #respond {
	margin: 0;
}
#cancel-comment-reply-link {
	font-size: 12px;
	font-weight: normal;
	line-height: 18px;
}
#respond .required {
	color: #ff4b33;
	font-weight: bold;
}
#respond label {
	color: #888;
	font-size: 12px;
	display:block;
}
#respond input {
	margin: 0 0 9px;
	width: 60%;
	float:left;
}
#respond textarea {
	width: 60%;
}
#respond .form-allowed-tags {
	color: #888;
	font-size: 12px;
	line-height: 18px;
}
#respond .form-allowed-tags code {
	font-size: 11px;
}
#respond .form-submit {
	margin: 12px 0;
}
#respond .form-submit input {
	font-size: 14px;
	width: auto;
}

Étape 9 : Finalisation

Dernière étape de ce tutoriel la finalisation. Après vérification avec notre navigateur préféré Internet Explorer, je découvre qu’il y a quelques souci de compatibilité. J’ai déjà  appelé un feuille de style alternative dans le fichier header.php. Parfois il faut avoir recours à  ce genre de pratique pour régler facilement les petits problèmes avec IE. Créez-donc une feuille de style CSS que vous nommerez ie.css à  la racine du thème. Il s’agit de problèmes de positionnement du slider, ainsi que de taille d’image dans le slider. IE CSS. La mention !important n’est pas obligatoire et en général à  utiliser avec modération :

/*Feuille de style alternative pour IE*/
#wp125adwrap_2c .wp125ad {margin:0 6px 10px 10px !important;}
#s{height:31px !important;}
#slider{width:555px !important;}
#slider img{width:555px !important;height:255px !important;}

Voilà  nos bugs IE réparés ! Une chose subsiste me direz-vous. Oui sous Internet Explorer, les bordures arrondies sont bizarrement carrés. Effectivement IE ne prend pas en compte les propriétés CSS 3 border-radius. Il existe des solutions autres pour avoir des bordures arrondies, nottament en utilisant des images ou du Javascript comme le script PIE CSS.   à€ découvrir peut-être dans un autre tutoriel !

Conclusion :

Tout d’abord félicitations ! Vous voilà  au bout de ce tutoriel. J’espère en tout cas qu’il vous permettra de créer votre thème et ainsi de comprendre le fonctionnement de WordPress. Il faut avouer qu’un tutoriel comme celui-ci reste court pour tout voir dans les détails. Il n’en reste pas moins une bonne base pour progresser et intégrer votre premier thème. J’ai tenté de voir avec vous diverses fonctions de WordPress (widgets, plug-ins…) mais également une petite dose de Jquery et de CSS3 qui vous permettent de toucher « à  tout » dans une intégration de blog. Si vous avez des soucis, téléchargez la source et installer le thème sur votre WordPress. Mais bien sûr n’hésitez pas à  laisser vos commentaires ou questions. Je vous dit à  bientôt sur Living Tuts avec un prochain tutoriel webdesign, mais aussi à  très bientôt sur Webdesignertrends !

Crédit : deux images du blog de démo sont des créations de Lysergrid.


Demo Flash


<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »>
<html <?php language_attributes(); ?>>
<head>
<title>
<?php
/*
*Affiche la balise <title> basée sur ce qui est vu.
*/
global $page, $paged;
wp_title( ‘|’, true, ‘right’ );
// Ajoute le nom du blog
bloginfo( ‘name’ );
// Ajoute la description du blog sur la home
$site_description = get_bloginfo( ‘description’, ‘display’ );
if ( $site_description && ( is_home() || is_front_page() ) )
echo  » | $site_description »;

// Ajout du numéro de page si nécessaire
if ( $paged >= 2 || $page >= 2 )
echo ‘ | ‘ . sprintf( __( ‘Page %s’, ‘twentyten’ ), max( $paged, $page ) );

?></title>

<?php /*Chargement de la feuille de style alternative pour IE*/?>
<!–[if IE]>
<link rel= »stylesheet » type= »text/css » title= »Style IE7″ media= »screen » href= »<?php echo home_url( ‘wp-content/themes/designbleu/ie.css’ ); ?> » />
<![endif]–>

<link rel= »stylesheet » type= »text/css » media= »all » href= »<?php bloginfo( ‘stylesheet_url’ ); ?> » />
<link rel= »stylesheet » href= »<?php echo home_url( ‘wp-content/themes/designbleu/nivo-slider.css’ ); ?> » type= »text/css » media= »screen » />
<link rel= »stylesheet » href= »<?php echo home_url( ‘wp-content/themes/designbleu/jquery-ui-1.8.6.custom.css’ ); ?> » type= »text/css » media= »screen » />
<link rel= »pingback » href= »<?php bloginfo( ‘pingback_url’ ); ?> » />
<link rel= »shortcut icon » type= »image/x-icon » href= »<?php echo home_url( ‘wp-content/themes/designbleu/images/favicon.ico’);?> »/>

<?php /*Affichage du dernier Tweet*/?>
<script   src= »http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js » type= »text/javascript »></script>
<script src= »<?php echo home_url( ‘wp-content/themes/designbleu/js/derniertweet.js’ ); ?> » type= »text/javascript »></script>
<?php /* Merci à  http://www.pressimi.com */?>

<?php /*Appel du Jquery pour le menu a onglet et le slider en homepage*/?>
<script src= »http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js » type= »text/javascript »></script>
<script src= »<?php echo home_url( ‘wp-content/themes/designbleu/js/jquery.nivo.slider.pack.js’ ); ?> » type= »text/javascript »></script>
<script src= »<?php echo home_url( ‘wp-content/themes/designbleu/js/sliderjs.js’ ); ?> » type= »text/javascript »></script>
<script type= »text/javascript » src= »<?php echo home_url( ‘wp-content/themes/designbleu/js/jquery-ui-1.8.6.custom.min.js’); ?> »></script>
<script type= »text/javascript » src= »<?php echo home_url( ‘wp-content/themes/designbleu/js/tabjs.js’); ?> »></script>

<?php /*Balise pour la comptabilité IE 7/8*/?>
<meta http-equiv= »X-UA-Compatible » content= »IE=7″ />

<?php       wp_head(); ?>
</head>

<body>

<!– #header –>
<div id= »header »>

<div id= »contenthead »>

<div id= »logo »>
<a href= »<?php echo home_url( ‘/’ );?> »><img src= »<?php echo home_url( ‘wp-content/themes/designbleu/images/logowt.png’ ); ?> » title= »Webdesign Tuts » alt= »Webdesign Tuts » /></a>
</div>

<div id= »socialbar »>
<a href= »<?php echo home_url( ‘/feed’ ); ?> »><img src= »<?php echo home_url( ‘wp-content/themes/designbleu/images/iconerss.png’ ); ?> » title= »Flux RSS » alt= »Flux RSS » /></a>
<a href= »http://twitter.com/livingtuts_fr »><img src= »<?php echo home_url( ‘wp-content/themes/designbleu/images/iconetwitter.png’ ); ?> » title= »Twitter » alt= »Twitter » /></a>
<a href= »http://www.facebook.com/livingtuts »><img src= »<?php echo home_url( ‘wp-content/themes/designbleu/images/icone_facebook.png’ ); ?> » title= »Facebook » alt= »Facebook » /></a>
</div>

<div id= »menutop »><!–Affichage du menu dynamique de WP–>
<?php wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’ ) ); ?>
</div>

<div id= »searchbar »>
<?php get_search_form(); ?><!–Affichage de la barre de recherche–>
</div>

</div>

</div><!– #header –>

<div id= »main »>

69 Comments to “Créez votre thème WordPress en intégrant votre design”

  • [...] This post was Twitted by DesignSpartan [...]

  • Premier à laisser un commentaire, mille fois merci. Un tutoriel qui sera surement classé parmis les meilleurs.

  • [...] This post was Twitted by renorcht [...]

  • Enfin un tuto complet et de qualité pour intégrer un thème WordPress « maison » ! Très bon boulot Arnaud, le peuple en redemande ! ^^

  • font-face, jquery… c’est bien d’avoir pensé à meler un peu d’autre technologies.

    Je viens de le survoler, il a l’air vraiment bien, dommage que je travail sous joomla.

    Mais juste pour ce tuto je vais me laisser tenter, et le suivre pas a pas, car il me semble vraiment très instructif et très riche, je ne connais pas du tout WP ca sera une bonne occasion d’apprendre.

    Et surtout un énorme merci pour la communauté francophone, car je n’ai encore jamais trouver de tuto qui crée une maquette et l’intègre à un CMS, et LivingTuts la fait !

    Enfin je dirais mon avis quand je l’aurais fait en entier ^^

    Par contre il aurait été judicieux de le scinder en plusieurs parties ^^

    Enfin merci, et encore encore encore ! c’est exactement le genre de tuto que je mange tout cru ^^

  • Le messie est la !!! le tutoriel tant attendu !! Merci beaucoup j’ai hâte de commencer je réserve déjà mon aprem de demain pour ça ! Je vous ferais part de mon résultat. Encore un grand merci a vous pour tous ce boulot ! C’est grâce à des sites comme le votre qu’on se dit que le net c’est chouette quand même ! Vive le partage ! thanks a lot.

  • Un grand bravo à son auteur ! :)
    On aime et on en redemande

  • [...] Tutoriel pour WordPress : créez votre propre thème et intégrer un design dans WordPress | L… Tags: toread, [...]

  • [...] This post was Twitted by MrCorbak [...]

  • Merci à vous tous, content que le tuto puisse vous être d’une grande utilité !

  • A Merci pour ce tuto ! Moi qui suis justement en plein apprentissage de wordpress (j’en parlait à l’instant avec une amie, qu’il n’y avait pas beaucoup (pour ne pas dire pas du tout) de tuto sur comment créer son thême wordpress).

    Vivement ce week end que j’ai du temps pour ce tuto :)

    Encore une fois merci :)

  • [...] This post was Twitted by mellepixelle [...]

  • Pour ceux qui souhaitent voir un autre tutoriel pour créer son thème de A à Z il y a l’excellent tutoriel de Fran6 qui existe depuis plusieurs années et qui explique plutôt comment fonctionne un thème :

    http://www.fran6art.com/wordpress/creez-votre-theme-wordpress-de-a-a-z/

    L’approche est très différente et plus explicative et chaque aspect du thème est vraiment détaillé. Cela peut être un bon complément à ce très bon tutoriel d’Arnaud.

  • Hum…. j’ai voulu tester le thème ,avec les fichiers donnés. Il y a un bug d’affichage lorsque l’on va sur une single page.Un problème de marge , je pense… Suis je le seul dans cette situation ?

    • Oui effectivement Mwea, c’est un souci que j’avais rencontré lors de la création. En fait certains de mes fichiers étaient encodés en ANSI plutôt qu’en UTF-8. C’est qui à posé des problème de fausses marges bizarres, le fichier ANSI crée parfois des caractères indésirable…Bref en tout cas, les sources sont mises à jour avec le bon encodage, tu peux les re-télécharger ! :)

      • Merci, je m’étais justement demandé si ça ne venait pas de là ayant déjà vécu le problème lors du codage d’un site. En tout cas, encore un grand bravo pour ce tutoriel ;)

  • Très bon tuto que je vais garder sous la main ! Il va surement me servir !
    Et merci de m’avoir cité dans ton tuto, ca fait toujours plaisir !

  • J’ai des petits problèmes, dans un premier temps j’ai voulus mettre sur mon ftp les fichiers de bases, les fichiers sources quoi, pour ensuite remplacer peut à peu par mes fichiers pour voir l’évolution. M’ais j’ai des soucis, le jQuery ne fonctionne pas, je ne comprend pas pourquoi ma bannière, les icônes sociaux et mon footer ne s’affiche pas ? … Les noms sont pourtant bon vis a vis du css etc … J’arrive pas à trouver la source du problème. Même quand je met uniquement les fichiers de base ça ne fonctionne pas … Le fichier SQL dans l’archive du blog source on est censé en faire quoi ? Je sais que ca fait beaucoup de question sorry.
    voila un lien pour avoir un aperçu : http://www.waymworld.com
    également, est-t-il normal que maintenant après mise a jour des fichiers sources, il n’y ai plus les pages style.css ou encore le dossier jquery ?

    Merci d’avance pour votre aide ! sorry pour le pavé.

    • j’ai réussi a régler pas mal de truc il me reste plus que le problème de jQuery qui ne marche ni pour le bandeau ni pour les tabs catégories et téléchargement. Et mon footer qui ne s’affiche pas bizarrement j’ai pourtant bien regardé :/

      • je poursuis mon monologue j’ai réglé le problème de jquerry en fait c’était juste le lien pour le fichier jquery.min.js qui a changé sur le site http://nivo.dev7studios.com/ entre temps … manque plus que le footer :)

        • Salut Waym.
          Pour ton footer je pense qu’il manque le plug in wp125 que tu peux installer comme à l’étape Etape 6.4. Il indique une Fatal error sur ton site qui je pense empêche l’affichage correcte du reste du code, donc du footer.

          • super merci ! j’hallucine d’avoir rater cette étape je crois que je l’ai sauté car je ne voulais pas avoir le module facebook enfn bref merci pour ton aide et encore une fois pour ton super tuto !

  • un grand Merci pour ce tuto !

  • Merci beaucoup pour ce super tuto :)

  • Hello,

    Super tuto merci encore.
    J’ai remarqué un bug pour ma part c’est le slider qui bug a moitié. La seconde image s’affiche en dessous et cache les articles. Dès fois au chargement il s’en va mais dès fois il reste.
    vous avez remarqué la mm chose ?

    • Tu utilise quel navigateur ? J’ai utilisé un slider qui est normalement testé et optimisé mais c’est possible qu’une image apparaisse en dehors du cadre au cours du chargement du Javascript.

      • Testé sur Chrome et firefox. comme tu dis au chargement de la page ca apparait mais dès fois elle reste et couvre le 1er article.

  • Le tuto a l’air pas mal…
    mais déjà dans l’intégration du slider, tu ne reprends rien de wordpress or si c’est pour juste avoir une galerie d’image en html, ça ne vaut pas le coup

    Pour le reste en effet c’est sympa
    Merci

    • c’est ce que je me posais comme question. il n’y a pas d’interaction avec wordpress faut faire à la main ?
      As-tu au solution intégré à wordpress à proposer ?

      Merci d’avance

      • Oui effectivement c’est juste pour le slider j’ai utilisé une méthode « à la main ». Mais en cherchant bien dans les plug-in WP tu peux trouver beaucoup d’exemples comme celui-ci : http://wordpress.org/extend/plugins/wp-nivo-slider/
        Libre à toi ensuite de choisir celui qui convient le mieux ;)

        • Merci je vais regarder ca de plus prêt :)

  • Je n’ose pas imaginer combien de temps ça t’a pris…

  • J’ai survolé le tuto, il a l’air vraiment complet et bien pensé. Félicitations et bonne continuation !

  • Hum, désolé, mais je n’arrive pas a faire fonctionner le flux RSS, peux tu m’aider ?

  • En mettant (enfin) en ligne mon blog, je me suis rendu compte de la lenteur monstrueuse de chargement du thème… Je conseil fortement les gens qui utilisent ce thème, d’y apporter quelques modifications. Charger l’iframe en dernier. Mettre tous les fichiers JS en local. Idem pour les CSS. Pour ceux qui utilisent un serveur Apache, utiliser un .htaccess etc…

    • Oui effectivement le thème n’est pas forcément super optimisé niveau du CSS et du JS, mais il reste ainsi accessible à tous pour comprendre le code ;)

      • Si je trouve la motivation, je ferais un tutoriel pour optimiser ce thème. J’attend la fin d’un concours auquel j’ai participé pour écrire quelque chose de complet sur l’optimisation. Si tu veux je peux te fournir un fichier .htaccess que tu rajouteras aux fichiers sources, comme ça pas besoin d’explication, le thème sera en partie optimisé sans que personne ne sache quoi que ce soit ;)

  • [...] bon tutoriel pour ceux qui désirent personnaliser leur wordpress sur Living Tuts. Did you like this? Share [...]

  • [...] A vous de jouer ! [...]

    [WORDPRESS HASHCASH] The comment’s server IP (213.251.189.204) doesn’t match the comment’s URL host IP (213.186.33.19) and so is spam.

  • MERCI MERCI MERCI

  • Merci beaucoup pour ce super article je le lirai plus en détail demain mais de ce que j’ai lu c’est franchement bien

  • Salut à tous voila ma maquette en place reste le codage c’est que du bonheur ! bravo pour le tutoriel !

  • Bonjour je n’arrive pas à configurer facebook
    http://developers.facebook.com/docs/reference/plugins/like-box/ j’ai beau changé iframe avec mon code mais cela ne fonctionne pas ! c’est systématiquement Living Tuts qui s’affiche avez vous une idée ? Merci

  • Facebook ok j’ai trouver !
    Maintenant préparation de mes articles ! et oui il faut bien commencer un jour !
    http://dtinfo21.free.fr/wordpress/

  • Merci bcp pour ce tuto, vraiment c’est complet pour avoir un thème perso, j’ai commencé par modifier un, mais c’est du salade ! là, c’est bien, merci ;)

  • Superbe Tuto, Mille mille fois merci à l’auteur et fécilitations. Je suis sûr qu’il me permettra d’immigrer complètement le monde WordPress.

    Et en core une fois, Merci

  • le slider ne marche pas sur internet explorer 9. ce seulement moi? parce que j’ai revérifie plusieurs fois mon code… pouvez*vous m’aider?

    il est super cool ce tuto 1000 fois merci. j’adore ce site plus que facebook ce vraiment dire :)

  • Un gros merci pour ce tuto qui me permettra de faire mon propre thème WordPress =)

  • Hello !

    Bon tuto, je vais surement m’en servir de base pour de prochains design ;)
    Mais comme waym, impossible d’utiliser les tabs, tout le texte apparait sans formatage… Une idée du soucis ?

  • Autre bug, les images apparaissent toujours avec leur taille d’origine dans les articles ou dans les pages… :s

  • Bonjour,

    Comment peut on changer la forme des titres, c’est à dire changer la couleur et y ajouter la propriété background-color. Les changements appliqués à #content .entry-title ne changent rien.

    `Merci d’avance

  • Regardez ce tutoriel similaire que j’ai moi-même écrit :

    Design de sites web avec Photoshop (créer, découper, assembler) :

    http://www.protic.net/heritage/heritage2012/chevalierg/tutz2.html

  • excellent, complet !

  • Bonjour,

    Je me permets de solliciter un peu d’aide ici, car j’imagine que si vous avez pu faire un tel tuto, vous saurez peut etre répondre sans problème à mon soucis.

    J’ai acheté un theme payant, c’est Object. Mais je ne vois pas d’option pour mettre un fond d’ecran ou bien changer le header.

    Savez vous comment je peux y remédier en modifiant le code, sachant que j’ai aucune connaissance la dedans, afin d’incorporer à la place du header de base du thème, celui que j’ai conçue ?

    A vous lire, en vous remerciant sincèrement pour toute aide apportée!

  • Bonsoir,

    Excellent tutoriel !
    En revanche, j’ai une toute petite question : je suis actuellement plongé dans le tuto’, et en cours de route je me demandais s’il était entièrement possible (je suppose que non, mais je veux tout de même en être certain) de renommer par exemple le dossier « designbleu » par « lenonquejeveux », même chose pour les premières lignes du style.css : « Theme Name: Design Bleu Theme URI: http://www.livingtuts.com
    Description: Thème développé pour un tutoriel sur Livingtus.com Author: Arnad STECKLE », ainsi que pour les lignes de description du genre « Deux colonnes largeur fixe et sidebar à droite » ?

    Merci à toi,

    J-erman

    • Bien sûr il est possible de renommer le dossier sans problème. Le thème est modifiable entièrement dans le cas où il n’est pas utilisé de manière commerciale. En gros ne revendez pas ce thème alors qu’il a été fourni gratuitement ;)

  • Impressionnant tuto.
    Merci beaucoup, depuis le temps que je voulais peaufiner mes connaissances sur wordpress.
    Excellent boulot !

  • Bonjour et félicitations pour ce magnifique tuto.

    Je suis en train d’adapter ce thème sur mon site, en changeant certaines petites choses, comme la colonne de navigation à gauche…

    J’ai suivi le tutorial, mais je rencontre un petit problème.

    Les images que je mets à la une pour illustrer l’article en page d’accueil ne s’affichent pas. De même, je n’arrive pas à mettre un background à la div.entry-content

    Un petit coup de main ? Une idée ?

    Le site en test (absolument pas terminé je vous rassure) est ici :
    http://tarnava-mare.ro/2014/

    Merci d’avance !

    Christophe

  • Un grand merci pour ce tuto instructif et agréable a méditer merci encore une fois

  • Bonjour,

    le lien de demo ne fonctionne plus ;-(
    Merci

    Fleur

  • [...] Créez votre thème WordPress en intégrant votre design [...]

  • [...] Créez votre thème WordPress en intégrant votre design [...]

  • Bonjours, tout d’abord merci pour ce tutoriel très complète et détailler

    ( j’ai notée que l’article n’est pas adapter pour une lecture smartphone juste au niveau de l’étape 9, les textes ne se cadre pas au niveau de la page )

    Au plaisir, et encore merci pour ce super tuto

  • Un grand merci pour l’auteur de ce tuto !

  • […] Créez votre thème WordPress en intégrant votre design […]

  • Bonjour,

    est-ce que c’est possible un template sans sidebar ou cette partie est obligatoire (en faite je veux bidouiller un template html et celui-ci n’a pas de sidebar).

    Merci d’avance

    • Hello,

      Oui il est totalement possible de supprimer la sidebar. Tu supprime cette partie dans le code, et ensuite il suffit de ré-adapter la largeur dans le CSS. Bonne chance ;)

  • […] Tutoriel pour WordPress : créez votre propre thème et intégrer un design dans WordPress | Living … […]

Laisser un commentaire