Démarrer avec WordPress : Modifier la structure de votre site

French (Français) translation by Henri Lotin (you can also view the original English article)

Donc, vous avez vos compétences CSS, et votre site devrait maintenant être au moins sur la bonne voie pour être personnalisé avec une palette de couleurs et peut-être même quelques polices personnalisées pour le faire vraiment commencer à ressembler à ce que « vous » voulez. Mais, vous pensez que vous pourriez également apporter quelques autres modifications et ces changements ne sont pas exactement liés au style. Il est donc probable que vous allez devoir commencer à modifier certaines structures la codées en dur, intégrées et ceci signifie commencer à creuser dans les fichiers PHP de votre site.

Oh, mais avant que nous le fassions, si vous cherchez la feuille de style que j’ai promise la semaine dernière qui effectue la conversion de Twenty Thirteen, de l’orange au bleu : c’est ici - il peut y avoir certains éléments du thème que j’ai pu manquer lorsque vous parcourez, je n’ai pas personnalisé tous les formats d'articles et il y a probablement d’autres choses vous trouverez manquantes. Donc, si vous avez vraiment l’intention d'utiliser cela pour un site en ligne vous aurez un peu plus de travail à faire. Mais cela, à tout le moins, vous donnera un moyen équitable dans le processus et vous mettra sur la voie pour être en mesure de gérer n’importe quelles autres personnalisations que vous souhaiterez.

En tout cas, retour au tutoriel de cette semaine !

Avant de commencer, vous avez besoin...

D'un accès FTP à votre site
Votre logiciel d'édition de texte

Ce que nous allons faire

Modifier le pied de page par défaut de WordPress avec lien/ contenu personnalisé
Déplacer la navigation principale avant l’en-tête
Créer une description de la page à l’aide de champs personnalisés

En guise d’introduction, j’ai besoin d’expliquer un peu plus les templates dans un thème WordPress et comment ils fonctionnent dans le cadre d’un thème enfant. Parce que, vous vous souvenez peut-être qu'à ce stade notre thème ne comprend en fait aucun template PHP.

Peut-être que je m’avance. Vous ne pourriez pas même être au courant du système de templates, n'est-ce pas ? Donc pour des explications détaillées, vous pourriez commencer ici :

Référence

Toutefois, la version courte et directe, permettez-moi de citer le Codex comme je ne pourrais pas le dire mieux moi-même :

Les templates sont les fichiers qui contrôlent la façon dont votre site WordPress s’affichera sur le Web. Ces fichiers tirent des informations de votre base de données WordPress MySQL et génèrent le code HTML qui est envoyé au navigateur web. Grâce à son puissant système de Thème, WordPress vous permet de définir aussi peu qu'autant de templates que vous souhaitez sous un Thème

Maintenant, si vous regardez votre thème, vous remarquerez qu’il n’existe effectivement pas que tous les templates dans votre répertoire de thème pour le moment. Avez-vous besoin que je vous rappelle pourquoi ?

Je ne crois pas. Vous n’oubliez pas que notre thème est un « thème enfant » et par conséquent, tous les modèles pour notre thème sont rangés dans le répertoire du thème parent.

Ainsi, la question est donc celle-ci, comment accéder et modifier ces fichiers sans mettre en danger le thème parent, le développeur de thème devrait-il mettre à jour le thème ?

Je suis heureux que vous posiez la question ! C’est facile, il nous suffit simplement de copier le template que nous voulons modifier à partir du répertoire parent vers le répertoire de notre thème enfant. WordPress est assez intelligent pour rechercher des modèles tout d’abord dans le répertoire de notre thème enfant et s’il ne trouve pas un fichier requis il il va automatiquement chercher au niveau du parent. Donc, quoi que nous copions dans le répertoire du thème enfant aura la priorité.

OK, c’est le fond. Maintenant, nous passons sur les trucs qui vont nous permettre d’effectuer les changements structurels que nous voulons.

Création/copie de fichiers dans votre thème enfant

Pour commencer, il y a plusieurs façons d’obtenir une copie des templates que nous voulons éditer à partir du thème parent dans le thème de l’enfant.

Méthode 1

Vous pouvez glisser et déposer à partir du serveur distant vers le serveur local dans votre client FTP.

Dans FileZilla faites glisser les copies des templates que vous modifiez dans le thème parent, sur votre bureau (ou tout autre local sur votre ordinateur), puis faites-la remonter à votre serveur dans le répertoire du thème enfant :

Cela ne supprime rien sur le serveur distant, mais crée simplement une copie sur votre ordinateur local qui vous copiez à nouveau sur le serveur distant dans un emplacement différent.

Méthode 2

Nous pouvons également établir un signet pour notre serveur FTP dans Text Wrangler donc nous pouvons sauvegarder les emplacements secondaires (comme le thème enfant) comme ceci :

Dans Text Wrangler allez à Text Wrangler » Configuration
Dans l’Onglet Signets, appuyez sur le signe + en bas à gauche pour créer un nouveau signet

Remplissez les champs avec vos données FTP, les mêmes informations d’identification que vous avez utilisées lorsque nous configurions FileZilla.

Avec ceci mis en place, lorsque vous êtes dans FileZilla et que vous souhaitez copier un fichier vous pouvez ainsi faire clic-droit sur le fichier sur votre serveur (dans notre cas, footer.php) et choisissez édition afin qu’il s'ouvre dans Text Wrangler.

Puis, dans le menu Fichier de Text Wrangler, choisissez Enregistrer une copie sur serveur FTP/SFTP. (Si vous choisissez FTP et que le programme dit que vous devrez autoriser une exception de sécurité car vous choisirez à chaque fois permet de procédez à l’enregistrement du fichier - vous aurez seulement à faire cela une fois).

Dans la fenêtre qui s’ouvre ensuite, vous pouvez naviguer ensuite jusqu’au répertoire de votre thème enfant et enregistrer le nouveau footer.php dans votre thème enfant.

Cela aussi déplace le fichier sur le serveur et l'enregistre à nouveau vers ce nouvel emplacement sur le serveur, c’est un peu plus compliqué mais je pense que c’est un processus plus propre pour que vous ne finissez pas avec des fichiers orphelins sur votre bureau. En tout cas, peu importe comment vous choisissez de le faire, nous avons besoin d’avoir une copie de footer.php (ou n’importe quel fichier que nous sommes en train de modifier) dans notre thème enfant afin que nous puissions lui apporter des modifications !

Modifier le pied de page pour modifier les détails d’information du site

Le premier changement que me demande généralement de faire chaque fois que mes stagiaires arrivent à ce niveau du cours c'est comment faire pour modifier la valeur par défaut du pied de page Twenty Thirteen.

Pour la plupart ils veulent ajouter une notice de copyright, ou ils peuvent vouloir le changer complètement, quoi qu’il en soit cela ne vous surprendra probablement pas de savoir que tripoter cette partie de votre site Web peut être fait dans le template de pied de page (footer.php) - donc, sur la base des informations contenues dans la section ci-dessus, ouvrez la copie du footer.php de votre thème enfant dans votre éditeur de texte.

Alors, avant que nous éditions quoi que ce soit, nous allons décomposer ce que nous cherchons.

Tout en haut de la page, nous allons voir une balise de code qui ressemble à ceci. Ceci indique que le texte à suivre est PHP, un langage qui est interprété et exécuté par le serveur avant que la page soit servie au client (navigateur) - qui est la substance intelligente de la technologie web, nous n’avons plus à utiliser des fichiers muets qui se reposent statiquement sur le serveur tout simplement servi en réponse à une demande de navigateur. Le script côté serveur, ce qu'est PHP, permet bien plus encore qu’une technologie intelligente et dynamique qui anime de nombreux produits sur le web aujourd'hui (il y a aussi d'autres langages, mais WordPress est écrit en PHP et est donc notre objectif ici).

PHP n’est pas HTML, mais ça marche dans et autour de HTML, parce que c’est ce que les navigateurs lisent. Les navigateurs ne peuvent pas lire ou interpréter PHP, alors tout se passe sur le serveur (et c'est pourquoi lorsque vous avez commandé votre hébergement à l'épisode 2 il fallait vous assurer que votre hôte proposait un serveur avec PHP ce que, bien sûr, la grande majorité d'entre eux font).

En tout cas, en lisant en bas de la page vous verrez le texte suivant :

La balise PHP d’ouverture
Les commentaires à propos de ce template qui indique sa place dans la structure du site dans son ensemble (contient le contenu du pied de page, ferme également la div du contenu principal)
La balise PHP de fermeture
Quelques balises HTML - avec commentaires utiles...
Quelques balises HTML - avec commentaires utiles... La </div> de fermeture Main, la section d’ouverture du <footer>
Quelques balises PHP e.g.<?php get_sidebar('main') ; ?>
Plus des balises de fermeture HTML

Le code publié en fait ressemble à ceci :

Vous remarquerez qu’il y a seulement du HTML sur la page. Toutes les différentes parties du templates ont été tirées soit à partir du thème (sidebar.php et footer.php etc.) ou de WordPress lui-même wp_footer(); et compilées dans une page HTML. Chaque page ou article sur votre site que vous visitez a été compilée de la même manière à partir de n’importe quelle partie du thème est appelée, selon où vous vous trouvez dans votre site.

Si vous êtes sur la page d’accueil il peut tirer dans un home.php ou un template front-page.php, si vous êtes sur le blog, ce sera probablement un template archive.php. Tous les templates dans votre thème sont rassemblés (par le serveur), au besoin, lorsqu’un client (navigateur) fait une demande au serveur pour visualiser votre site.

Donc, pour revenir à ce que nous sommes désireux de réaliser dans cet exercice, retournez à votre éditeur de texte et commencez à vous faire une idée de quels parties de ce code de template de pied de page, vous pourriez être désireux de modifier.

Si vous regardez attentivement, vous verrez une longue balise PHP qui semble contenir tous les éléments que vous pourriez être désireux de changer. Tout d’abord, nous pouvons voir que cet extrait de code entier est un lien vers WordPress.org :

  <?php do_action( 'twentythirteen_credits' ); ?>
		<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentythirteen' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentythirteen' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentythirteen' ), 'WordPress' ); ?></a>

Maintenant, comme vous vous sentez à l’aise avec ce genre de code vous pouvez ruser comme vous voulez, vous pouvez vouloir supprimer cet article dans l’ensemble, auquel cas vous pouvez tout supprimer de :

<div class="site-info">to</div>
<!-- .site-info -->

et voir toute la section disparaitre et votre site termine par le bas du pied de page widgetised (sidebar.php).

Mais dans ce cas, ce que nous sommes désireux de faire est de changer l’URL de mon site Web et mettre un crédit pour moi, le développeur, et une notice de copyright pour décourager les gens de réutiliser mon contenu.

Tout d’abord, nous changeons les références dans cet extrait de code de twentythirteen à mytheme (le nom de notre thème) et :

<?php do_action( 'mytheme_credits' ); ?>
	<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'mytheme' ); ?>"><?php printf( __( 'Proudly powered by %s', 'mytheme' ), 'WordPress' ); ?></a>

Puis nous changeons l’URL de wordpress.org pour thewebprincess.com -, alors il conduira vers ma page :

<?php do_action( 'mytheme_credits' ); ?>
	<a href="<?php echo esc_url( __( 'http://thewebprincess.com/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'mytheme' ); ?>"><?php printf( __( 'Proudly powered by %s', 'mytheme' ), 'WordPress' ); ?></a>

Puis on va changer le titre du lien de la « Semantic Personal Publishing Platform » pou « Web Development and WordPress Training » (il s’agit d’un lien vers moi, nous allons dire à Google ce que je peux faire) :

<?php do_action( 'mytheme_credits' ); ?>
	<a href="<?php echo esc_url( __( 'http://thewebprincess.com/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Web Development and WordPress Training', 'mytheme' ); ?>"><?php printf( __( 'Proudly powered by %s', 'mytheme' ), 'WordPress' ); ?></a>

Puis nous changer le texte « Proudly Powered by » à « Lovingly Crafted by »

<?php do_action( 'mytheme_credits' ); ?>
	<a href="<?php echo esc_url( __( 'http://thewebprincess.com/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Web Development and WordPress Training', 'mytheme' ); ?>"><?php printf( __( 'Lovingly Crafted by %s', 'mytheme' ), 'WordPress' ); ?></a>

Ensuite, nous changeons le mot « WordPress » par l’expression « The Web Princess » :

<?php do_action( 'mytheme_credits' ); ?>
	<a href="<?php echo esc_url( __( 'http://thewebprincess.com/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Web Development and WordPress Training', 'mytheme' ); ?>"><?php printf( __( 'Lovingly Crafted by %s', 'mytheme' ), 'The Web Princess' ); ?></a>

Enfin, nous voulons le personnaliser avec notre avis de copyright, ajouter le nom du client après notre lien et une balise PHP pour afficher la date, et nous utilisons PHP parce que cela s'affichera automatiquement quelle que soit l’année en cours !

<?php do_action( 'mytheme_credits' ); ?>
	<p><a href="<?php echo esc_url( __( 'http://thewebprincess.com/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Web Development and WordPress Training', 'mytheme' ); ?>"><?php printf( __( 'Lovingly Crafted by %s', 'mytheme' ), 'The Web Princess' ); ?></a> for The Site Owner &copy; <?php echo date('Y'); ?>

Et voilà ! Un nouveau pied de page sur mesure pour notre site.

Par ailleurs, c’était plutôt une tâche de longue haleine pour y arriver. En faisant ça de cette manière, nous avons conservé tous les éléments qui font qu’il est possible d’internationaliser ce thème, qui, dans un scénario de monde réel de peaufiner juste pour vous-même (plutôt que de préparer votre thème pour une plus large distribution) vous pourriez simplement faire sauter tout le code ci-dessus remplacé par ce qui suit :

<a title="Web Development and WordPress Training" href="http://thewebprincess.com/">Lovingly Crafted by The Web Princess</a> for The Site Owner &copy; 2013

Déplacer la navigation principale avant l’Image d’en-tête

Alors, la prochaine chose que nous allons faire est de déplacer la navigation principale de sa maison actuelle sous la bannière pour le dessus. Ensuite, nous allons créer une nouvelle zone de navigation sous la bannière. Vous le savez, simplement parce que nous pouvons.

Alors cette fois, vous avez besoin de copier le header.php du thème parent dans votre thème enfant et d’ouvrir la version enfant dans votre éditeur.

Sélectionnez le code depuis le début de :

<div id="navbar">to the closing tag of the same</div>
<!-- #navbar -->

C’est l’une des choses cool sur Twenty Thirteen, tous ces bons commentaires pour vous aider à trouver où vous êtes. Prenez note et de faites de même dans vos propres thèmes, de telle sorte que les gens qui passent après vous peuvent trouver leur chemin dans vos thèmes.

Coupez ce code et collez-le au-dessus de la ligne <header class="homelink"> Assurez-vous de le garder au sein de la <div>

Enregistrez le fichier et actualisez la vue publiée de votre site afin que vous puissiez voir vos modifications :

Remarquez comment la photo de la bannière est un peu plus courte qu’elle ne l'était et l’écart entre la bannière et le titre de la page un peu large. Si nous vérifions dans l’inspecteur, nous pouvons voir que la section d’en-tête a toujours la même hauteur. Ce qui se passe, c’est que l’image d’en-tête étant masquée par la nav, ainsi nous allons déplacer l’image vers le bas en conséquence.

Donc, pour ce faire, nous allons modifier un peu de CSS. De la même manière que nous l’avons fait dans notre tutoriel précédent, inspectez le code jusqu'à ce que vous trouviez ceci :

body .site-header {
	background-position: 0px 45px;
}

La raison pour laquelle que nous avons mis le sélecteur de corps avec .site-header est d’augmenter la spécificité des CSS. Sans cela nous pourrions mettre le code dans notre feuille de style et ne verrions pas les résultats que nous voulons parce que le CSS pour .site-header est défini ailleurs dans le thème et est la priorité (vient après notre feuille de style dans la cascade). Notre ajout de la balise body rend le CSS plus spécifiques et signifie qu'il est prioritaire et ce titre le site reflétera nos modifications.

Enregistrez et actualisez le site publié !

Ça a l'air bien !

Ajout d’une description de page dans nos template de page à l’aide de champs personnalisés

Enfin, la dernière chose que nous allons faire est de modifier notre template page.php pour nous permettre d’ajouter dans un champ de description de page sous le titre de la page. Nous ferons tout cela en utilisant les champs personnalisés (voir le Codex pour plus de détails sur eux).

Nous allons commencer en définissant notre champ personnalisé sur notre page de Services.

Tout d’abord, vous devrez sans doute modifier les Options de l’écran pour vous assurer que vous avez accès au panneau de Champs personnalisés, vérifiez que la case à cocher Champs personnalisés est activée :

Cela ouvre un nouveau panneau en-dessous de l’éditeur de page. Cliquez sur Entrer nouveau pour créer un nouveau champ personnalisé et mettez « page description » dans le champ Nom, entrez la description de votre page dans la zone Valeur.

Maintenant que nous l'avons fait nous avons besoin d’ajouter du code à notre modèle de page, alors copiez page.php du thème parent dans notre répertoire de thème enfant et ouvrez page.php du thème enfant dans votre éditeur. Nous mettons ce code dans le modèle après le titre de niveau (<h1>) et avant la fin de l’en-tête de l’article.

<h5 class="page-description"><?php echo get_post_meta($post->ID, 'page description', true); ?></h5>

Nous avons obtenu le code que nous avons utilisés pour cette page de la page du Codex sur les champs personnalisés - Regardez dans la section Template functions - nous avons simplement troqué leur « key » avec la nôtre, qui est « page description ». Enregistrez et envoyez votre fichier et actualisez la page publiée :

Là vous y allez, les débuts de la modification des templates de thème.

Conclusion

Trouver votre chemin autour des modèles du thème peut être un peu intimidant, heureusement, partir d’un thème comme Twenty Thirteen est un départ vraiment utile en raison de comment bien commenté il est dans l’ensemble.