Créer un thème complet – part 2 | DSAA Design La Martinière

Dernière mise à jour le 5 avril 2018 par LMD

Le fichier header.php

Il sera intégré au début de chaque fichier de contenu, par un « include » PHP. Il en sera de même pour les fichiers footer.php et sidebar.php.

Le fichier header.php reprend la structure du début du code HTML, jusqu’à l’ouverture de la <section> y compris. Voici pour mémoire le code HTML à adapter en PHP :

[pcsh lang= »xml » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Titre du site</title>
		<link rel="stylesheet" href="style.css">
	</head>

	<body>
		<div id="wrapper">
			<header id="en-tete">
				<img src="images/logo.png" alt="logo">
				<h1>Nom du site</h1>
				<h2>Slogan</h2>
				<nav class="menu_principal">
					<!-- ici le menu en html -->
				</nav>
			</header>
			
			<section id="projets">

[/pcsh]

On va y remplacer tout ce qui doit devenir dynamique par des fonctions WordPress. Chaque fonction s’écrit dans une syntaxe PHP, c’est-à-dire encadrée par la balise PHP à l’intérieur de laquelle se trouve la fonction elle-même, par exemple pour le titre du site :
<?php bloginfo('name'); ?>Ne pas oublier le point virgule à la fin de la fonction. Voyons à présent le détail des fonctions WordPress à utiliser ici. N’hésitez pas à comparer le code PHP et le code HTML généré en affichant le code source de votre page sur WordPress.

Pour la partie <head> :

Voici le code PHP correspondant au début et à la partie <head> :

[pcsh lang= »xml » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

	<head>
		<meta charset="<?php bloginfo( 'charset' ); ?>">

		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="profile" href="http://gmpg.org/xfn/11">
		<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
		
		<title>
			<?php bloginfo( 'name' ); ?>
			<?php if (is_home() || is_front_page()) : ?>
				&mdash; <?php bloginfo( 'description' ); ?>
			<?php else : ?>
				&mdash; <?php wp_title( "", true ); ?>
			<?php endif; ?>
		</title>
		
		<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
		
		<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/engin.png" type="image/x-icon" />
		
		<?php wp_head(); ?>
	</head>

[/pcsh]

Ligne 1, le DOCTYPE est inchangé.
Ligne 2, la balise <html> reçoit un attribut de langue et s’écrit :
<html <?php language_attributes() ; ?>
Ligne 5, le jeu de caractère devient :
<meta charset="<?php bloginfo( 'charset' ) ; ?>">
Il est à noter ici que le code PHP se place à l’intérieur des guillemets.
Ligne 7, la ligne pour le viewport est inchangée. On y ajoute cependant, ce qu’on aurait pu faire en HTML :
<link rel="profile" href="http://gmpg.org/xfn/11">L’ensemble sert à l’affichage correct d’un site responsive. Ce n’est donc utile que dans ce cas-là.
Ligne 9, on ajoute une instruction servant à la gestion des rétroliens (pingback), afin d’améliorer votre indexation, qui repère les liens d’autres sites vers le vôtre :
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
Lignes 11 à 18, dans la balise <title> le titre est remplacé par
<?php bloginfo('name') ; ?>ensuite, lignes 13 à 17, il est possible d’ajouter une condition pour ajouter au titre, le slogan sur la page d’accueil, le nom de la page ou de l’article affiché sur les autres pages. L’instruction de titre bloginfo(‘name’); peut cependant suffire.
Ligne 20, le lien vers la feuille de style se fait par la fonction de l’URL de la feuille de style selon WordPress à placer entre les guillemets du href :
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ; ?>" type="text/css" />
Ligne 22, on suggère d’ajouter un favicon, si WordPress ne le propose pas dans le Dashboard > Apparence > Personnaliser > Identité du site > icône du site. Une image pour le favicon, au format .png ou .ico de 32 pixels de côté, sera placée dans un dossier images à créer au premier niveau du thème. Le code nécessaire est le suivant en adaptant le nom et éventuellement le chemin de l’image :
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/engin.png" type="image/x-icon" />
Ligne 24 enfin, le code suivant doit obligatoirement être ajouté avant la fermeture de la balise </head> afin de permettre aux extensions d’insérer du code à cet endroit :
<?php wp_head() ; ?>
Ligne 23, il est possible d’ajouter des liens vers d’autres fichiers CSS ou des fichiers JS.

Pour la partie <body> :

Voici le code PHP correspondant à la partie <body> :

[pcsh lang= »xml » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]

<body <?php body_class(); ?>>

		<div id="wrapper">

			<header id="en_tete">

				<img src="<?php echo( get_header_image() ); ?>" alt="image d'en-tête, chantier" class="header_image"/> 
				<h1><a href="<?php bloginfo( 'url' ); ?>" title="<?php bloginfo( 'name' ); ?>">
						<?php bloginfo( 'name' ); ?>
				</a></h1>
				<h2><?php bloginfo( 'description' ); ?></h2>
				
				<div id="search-block">
						<?php get_search_form(); ?>
				</div>
				
				<?php if ( has_nav_menu( 'principal' )) : ?>
					<nav class="menu_principal">
						<?php wp_nav_menu(array( 'theme_location' => 'principal' )); ?>
					</nav>
				<?php endif; ?>				

			</header>

[/pcsh]

Ligne 1, on ajoute une fonction qui va rajouter automatiquement des classes à l’élément body, selon le template utilisé, ce qui permettra de styler facilement cet élément si besoin :
<body <?php body_class(); ?>>
Ligne 7, l’appel à une image d’arrière plan pour le header se fait en remplaçant l’url « en dur » de l’image par le code ci-dessous. Il faut préalablement charger l’image dans la bibliothèque de votre WordPress et l’activer depuis le Dashboard > Apparence > Personnaliser > Image d’en-tête :
<?php echo( get_header_image() ); ?>
Lignes 8 à 10, dans le <h1> le contenu du titre est remplacé par :
<?php bloginfo('name') ; ?>et est entouré d’un lien vers la page d’accueil du site en l’entourant de :
<a href="<?php bloginfo('url') ; ?>" title="<?php bloginfo( 'name' ); > </a>
Ligne 11, dans le <h2> le sous-titre (le slogan pour WordPress) est remplacé par :
<?php bloginfo('description') ; ?>
Lignes 13 à 15, une zone de recherche peut être ajoutée en incluant ce code dans un conteneur (ici une <div>) :
<?php get_search_form(); ?>
Enfin, Lignes 17 à 21, le contenu de la balise <nav> est remplacé par un appel au menu principal défini dans WordPress :
<?php wp_nav_menu(array( 'theme_location' => 'principal' )); ?>Les arguments de la fonction d’appel au menu sont déterminés par la déclaration d’une zone de Menu dans le fichier functions.php, nous verrons celà plus loin.
La <nav> pour le menu est insérée dans un test, non obligatoire, mais recommandé pour savoir si la zone de Menu a bien été déclarée :
<?php if ( has_nav_menu( 'principal' )) : ?> <?php endif; ?>
Il est possible de rajouter une image de contenu, type logo, dans le header. Celle-ci doit être placée dans un dossier spécifique, le dossier images par exemple, et il faut rajouter le chemin du dossier images dans le thème. Indiquer ceci avant le nom de l’image :
<?php bloginfo('template_directory'); ?>/ images/
Si cela ne fonctionne pas, il est également possible d’utiliser :
<?php echo get_template_directory_uri(); ?>/images/
Le fichier se termine par l’ouverture de la balise <section> qui se retrouvera donc dans tous les autres fichiers et notamment le fichier index.php et sera donc fermée dans ce fichier. Il arrive aussi que cette balise soit refermée dans le fichier footer.php.

Voici donc ci-dessous le code complet de la page header.php. Il faut créer à partir de votre éditeur un nouveau fichier et l’enregistrer dans le dossier de votre thème sous le nom header.php. Il ne reste plus qu’à y copier le code qui suit et l’adapter à vos besoins :

[pcsh lang= »xml » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

	<head>
		<meta charset="<?php bloginfo( 'charset' ); ?>">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="profile" href="http://gmpg.org/xfn/11">
		<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
		
		<title>
			<?php bloginfo( 'name' ); ?>
			<?php if (is_home() || is_front_page()) : ?>
				&mdash; <?php bloginfo( 'description' ); ?>
			<?php else : ?>
				&mdash; <?php wp_title( "", true ); ?>
			<?php endif; ?>
		</title>
		
		<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
		
		<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/engin.png" type="image/x-icon" />

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

<body <?php body_class(); ?>>

		<div id="wrapper">

			<header id="en_tete">

				<img src="<?php echo( get_header_image() ); ?>" alt="image d'en-tête, chantier" class="header_image"/> 
				<h1><a href="<?php bloginfo( 'url' ); ?>" title="<?php bloginfo( 'name' ); ?>">
						<?php bloginfo( 'name' ); ?>
				</a></h1>
				<h2><?php bloginfo( 'description' ); ?></h2>
				
				<div id="search-block">
						<?php get_search_form(); ?>
				</div>
				
				<?php if ( has_nav_menu( 'principal' )) : ?>
					<nav class="menu_principal">
						<?php wp_nav_menu(array( 'theme_location' => 'principal' )); ?>
					</nav>
				<?php endif; ?>				

			</header>
			
			<section id="projets">

[/pcsh]

Le fichier footer.php

En général ce fichier ne contient pas grand chose, mais il porte la responsabilité de refermer le code ouvert dans les autres fichiers, particulièrement le fichier header.php dans lequel les balises <body> et <html> ont été ouvertes.

De même que pour le header.php, il faut créer un nouveau fichier depuis votre éditeur de code et l’enregistrer dans le dossier de votre thème sous le nom footer.php. Il restera à y placer le code PHP que nous allons étudier et le personnaliser.

Reprenons d’abord le code HTML à convertir :

[pcsh lang= »xml » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]

			<footer id="pied-de-page">
				<p>Copyright</p>
			</footer>
		</div>
	</body>
</html>

[/pcsh]

Dans notre cas, il n’y a rien à modifier, sauf si vous souhaitez ajouter du contenu dynamique (ce peut être le slogan du site, ou autre).

Pour les réseaux sociaux, reportez-vous à cette page pour le détail :
http://atelier-wordpress.com/ajouter-des-icones-de-reseaux-sociaux-a-un-menu-wordpress/ ou encore
http://www.notuxedo.com/comment-ajouter-des-icones-de-reseaux-sociaux-sur-wordpress/

Pour le faire vous-même dans votre thème, il faudra ajouter un Widget au footer (ou ailleurs) et suivre le second tuto. Voir dans ce cas, le chapitre suivant sur le fichier sidebar.php

Il est quand même obligatoire de rajouter juste avant la balise de fin </body> le code suivant afin d’autoriser des extensions à rajouter du code à cet endroit :
<?php wp_footer() ; ?>

Voici cependant, le code minimal du fichier footer.php :

[pcsh lang= »xml » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]

		<footer id="pied-de-page">
			<p> Copyright &copy; </p>
		</footer>

	</div>

	<?php wp_footer() ; ?>
</body>
</html>

[/pcsh]

le fichier sidebar.php

Le rôle d’une sidebar dans WordPress est généralement d’accueillir des Widgets, c’est-à-dire la possibilité d’afficher des informations relatives au site (archives, recherche, derniers articles, texte personnalisé, etc.) mais aussi des menus secondaires.

Le code est pour cela, relativement restreint. C’est un appel à la fonction appropriée de WordPress, à placer dans une liste <ul> :

[pcsh lang= »xml » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]

<aside id="en-plus">
	<ul>
		<?php 
			if (function_exists('dynamic_sidebar')) {
				dynamic_sidebar();
			}
		 ?>
	</ul>
</aside>

[/pcsh]

Le code PHP est basé sur une condition qui teste d’abord l’existence d’une fonction (définie dans le fichier functions.php, nous le verrons plus loin), afin de pouvoir appeler cette fonction, dont le rôle est d’autoriser les Widgets dans la sidebar. Ici, nous avons choisi comme nom de fonction : dynamic_sidebar, mais vous avez la liberté de choisir un autre nom, l’essentiel est que ce soit le même que celui défini dans le fichier functions.php.

Ce fichier n’est pas obligatoire, mais même si vous ne vous en servez pas dans l’immédiat, il est recommandé de le créer a minima.

Il reste encore à réaliser le fichier index.php. Ce sera l’objet de la troisième partie de cet article. Il contiendra notamment un élément essentiel du fonctionnement de WordPress, la boucle WordPress (ou WordPress loop) dons nous verrons bientôt le principe.

Le fichier header.php

Le fichier footer.php

le fichier sidebar.php

Design collaboratif