Integration Et Personnalisation De Theme

Retirer la phrase « un site utilisant wordpress »

Pour retirer la phrase « un site utilisant wordpress » sous le titre de votre site, il suffit de se rendre dans la partie Réglages (colonne de gauche) de votre BackOffice.

Vous pouvez également vous rendre dans la partie Apparence > Thèmes et sur le thème actif cliquez sur « Personnaliser ».

Retirer le « fièrement propulsé par wordpress »

Cette phrase « Fierement propulsé par wordpress » se trouve dans le fichier footer.php de votre thème.



Le plus important n'est pas de savoir où se trouve cette phrase mais de savoir comment localiser une phrase ou un affichage dans Wordpress

Tout d'abord il vous est nécessaire d'ouvrir l'extension FireBug avec la touche F12 de votre clavier.

Ensuite cliquez sur le selecteur de Firebug :


Capturez la zone concernée :



Ensuite ouvrez un onglet vide via l'éditeur notepad, puis rendez vous dans la partie "recherche" pour trouver la chaine "site-info" :

Vous devrez vous trouver dans l'onglet "Recherche dans les fichiers d'un dossier" et choisir le bon dossier cible où se trouve l'installation de votre wordpress et plus précisément au niveau du dossier thème étant actif. N'oubliez pas de cocher la case "sous dossier" pour que la recherche soit complète.



Les résultats de recherche permetttent d'identifier la zone qui contient la partie que nous souhaitons supprimer, pour s'y rendre il suffit de double cliquer dessus :



Dans le fichier footer.php du thème actif (par exemple : C:\wamp\www\wordpress\wp-content\themes\monthemeperso) il est possible de supprimer les lignes 14 à 17.

Les fichiers templates

Pour avoir le contrôle sur notre site Wordpress il est important de savoir intégrer du code Html et Css.

En effet, beaucoup de thèmes (graphisme) sont proposés par la communauté Wordpress, néanmoins il est toujours utile de créer son propre thème (ou de modifier un thème existant). Un template est un modèle de page, c'est un fichier qui peut présenter potentiellement plusieurs contenus
S'il y a 100 contenus sur un site, il n'y a pas 100 fichiers correspondant pour autant.

Les contenus sont enregistrés dans une base de données, et seulement quelques fichiers appelés "template" peuvent potentiellement présenter ces contenus. Par exemple, lorsqu'une adresse url est demandée :



Si vous n'avez pas activé la réécriture d'url ou les permaliens, cette adresse url ?p=10 désigne :

• ? = demande (en quelque sorte)


• p = post


• 10 = contenu ayant l'id n°10

Avec le gestionnaire PhpMyAdmin, nous pouvons voir que ce contenu correspond à un enregistrement dans la base de données :

Description des fichiers templates

Pour un seul affichage, généralement, 3 a 4 fichiers sont sollicités :

• header.php = Fichier permettant d'afficher le haut de site


• page.php = Fichier permettant d'afficher le contenu d'une page


• sidebar.php = Ce fichier peut éventuellement être sollicité pour la colonne de droite (région / zone à widget).


• footer.php = Fichier permettant d'afficher le bas de site

Dans le dossier d'un thème, nous pouvons remarqué la présence d'autres fichiers template, voici quelques descriptions. :

• single.php = Fichier permettant d'afficher un contenu de type article


• sidebar.php = Fichier permettant d'afficher la région / colonne de droite


• /page-templates/ full-width.php = Fichier permettant d'afficher le contenu sur toute la largeur (si vous avez choisi modèle pleine largeur sans barre latérale lors de la création d'une page)


• 404.php = Fichier permettant d'afficher une adresse url ou page non trouvée


• category.php = Fichier permettant d'afficher le contenu d'une catégorie


• comments.php = Ce fichier permet d'afficher le formulaire de commentaires


• functions.php = Fichier permettant d'ajouter des traitements ou des parties techniques dans Wordpress du type : zones de widgets, des taxonomies, des types de contenu personnalisés, etc.


• search.php = Fichier permettant d'afficher le formulaire / case de recherche

Il est également possible d'ajouter des fichiers templates :

• Pour la page d'accueil : front-page.php


• Type de contenu personnalisé : single-{post_type}.php


• Contenu particulier : page-{id}.php


• Categorie particulière : category-{id}.php

Ces listes ne sont pas exhaustives. Plus d'informations sur le site officiel : http://codex.wordpress.org/Template_Hierarchy

Comment le contenu du site s'affiche t'il ?

Nous pouvons distinguer deux présentations différentes :

Comment créer un nouveau fichier template pour personnaliser l'affichage de notre site wordpress ?

Imaginons que nous souhaitons faire des présentations différentes en fonction de nos contenus (page, article, etc.), voici quelques wireframe / mockup :











Pour créer un nouveau fichier template sur Wordpress, nous pouvons nous rendre à la racine du thème ou dans le dossier /page-templates/ et créer le fichier suivant :

modele-trois-colonnes.php
(Eviter les espaces ou les accents sur les noms de fichiers).

	/**
	* Template Name: Modele avec 3 colonnes.
	*/
	<?php get_header(); ?>
	<div class="modele-trois-colonne-colonne-gauche"> ... </div>
	<div id="primary" class="site-content modele-trois-colonne-colonne-centrale">
		<div id="content" role="main">

			<<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', 'page' ); ?>
				<?php comments_template( '', true ); ?>
			<?php endwhile; // end of the loop. ?>

		</div><!-- #content -->
	</div><!-- #primary -->
	<div class="modele-trois-colonne-colonne-droite"> ... </div>
	<div class="clear"></div>
	<?php get_footer(); ?>
	

En ce qui concerne le fichier style.css :

	.modele-trois-colonne-colonne-gauche{
	float: left;
	width: 160px;
	border-right: 1px solid #c0c0c0;
	padding: 20px;
	min-height: 700px;
	}
	.modele-trois-colonne-colonne-centrale{
	float: left;
	width: 500px;
	padding: 20px;
	min-height: 700px;
	}
	.modele-trois-colonne-colonne-droite{
	float: left;
	width: 160px;
	border-left: 1px solid #c0c0c0;
	padding: 20px;
	min-height: 700px;
	}
	.clear{
	clear: both;
	}
	

Lors de la création de la page, vous pouvez retrouver votre fichier template en proposition de modèle à utiliser pour vos futurs contenus.



Les zones apparaissent bien sur le site :



N'hesitez pas à créer une page de test pour vérifier que votre template s'applique bien lors de l'affichage.

Si vous avez pu en arriver jusque là : Félicitations ! :-)

C'est vrai que nos colonnes à gauche et à droite sont vides, mais il est tout à fait possible de les remplir, avec des régions par exemple.

Créer des régions (zones à widgets)

Imaginons que nous souhaitons avoir une région / zone à widget dans le footer de notre site pour pouvoir afficher des informations de notre choix

Pour cela il y a 2 étapes à suivre :

1. Déclarer la région
2. Afficher la région

Pour déclarer la région à widget, il faut se rendre dans le fichier functions.php de votre thème (exemple : C:\wamp\www\wordpress\wp-content\themes\twentytwelve\functions.php).

Une fois que vous avez ouvert ce fichier, il faut localiser la fonction php : function twentytwelve_widgets_init()

Cette fonction s'ouvre avec une accolade " { " et se referme avec une accolade " } ". Nous allons donc nous positionner entre ces deux symboles.

Faites attention à ne pas retirer le code PHP se trouvant à l'intérieur et ajoutez votre code, par exemple :

	register_sidebar( array(
		'name' => __( 'Zone du bas', 'twentytwelve' ),
		'id' => 'zonedubas',
		'description' => __( 'Cette région apparait en bas de site.', 'twentytwelve' ),
		'before_widget' => '',
		'before_title' => '
',
		'after_title' => '
',
	) );	

• name : le name correspond au nom de la région


• id : l'id correspond au nom informatique de la région (attention à ne pas mettre d'espace ni de caractère accentué). De plus, nous en aurons besoin plus tard pour afficher la région.


• description : Le texte saisi apparaitra dans l'interface d'administration BackOffice (dans l'idéal nous devrions le noter en Anglais et le traduire)


• before_widget : balise qui sera placée avant vos widgets


• after_widget : balise qui sera placée après vos widgets


• before_title : balise qui sera placée avant vos titres de widgets


• after_title : balise qui sera placée après vos titres de widgets

Si vous vous rendez dans votre interface d'administration BackOffice dans la partie Apparence > Thème, vous trouverez la présence de votre région :



Avant de placer des widgets à l'intérieur, nous devons demander à la région de s'afficher sur notre site web.

Pour cela, nous allons naturellement nous diriger vers notre fichier footer (car il s'agit d'une région que nous souhaitons faire apparaitre en bas de notre site web) pour écrire quelques lignes de code supplémentaires :

	<div id="zonedubas" class="zonedubas" role="complementary">
        <?php dynamic_sidebar( 'zonedubas' ); ?>
    </div>	

La fonction dynamic_sidebar permet d'afficher la région ainsi que les widgets présents à l'intérieur.

Vous remarquerez que dans les parenthèses de la fonction dynamic_sidebar, nous avons remis comme argument exactement le même nom de région correspondant à l'id lors de la création de notre région : zonedubas


Pour vérifier que notre région fonctionne correctement, allons dans "Apparence > Widget", prenons le widget texte et saisissons quelques lignes à l'intérieur tout en le plaçant dans la région : regionbas.

Actualiser la partie FRONT de votre site et vous verrez que celui-ci apparait.

Comment créer et mettre un menu administratif en bas du site ?

Généralement, dans le footer d'un site, nous retrouvons des liens administratifs type "Mentions Légales".

Allez dans la partie Apparence > Menu.
Cliquez sur le lien : Créez un nouveau menu.
Nom du menu : menu-administratif.
Après avoir cliqué sur "Créer le menu", vous pouvez (par exemple) ajouter les pages Mentions Légales, Informations, Contact, etc. puis enregistrez le menu.

Ensuite, dans la partie Apparence > Widgets : vous pouvez placer le widget Menu Personnalisé dans votre région zonedubas.

Pour finir, n'oubliez pas de selectionner le menu : menu-administratif. Si vous souhaitez que votre menu apparaisse d'une certaine manière (sur 1 ligne par exemple), il faudra selectionner le code html généré par wordpress avec l'aide de firebug et personnaliser ces éléments en conséquences grâce au code CSS.

Exercice : Créer une région en haut à doite du site !

Pour cet exercice, nous vous demandons d'afficher votre prénom et votre nom (par exemple) en haut à droite de votre site web.

Voici quelques indices , vous aurez besoin de :

• Créer une région dans le fichier functions.php avec la fonction register_sidebar


• Afficher la région dans le fichier header.php avec la fonction dynamic_sidebar


• Placez un widget dans la région que vous aurez créée grâce à l'interface d'administration BackOffice au niveau de Apparence > Widgets.


• Adapter le code CSS dans le fichier style.css si nécessaire.

Des régions, des régions et encore des régions !

Dans l'idéal et pour une personnalisation maximum, il est intéressant d'avoir le plus de régions possibles dans un site web.

Exemple :



Les zones en rouge représentent des emplacements de région possible pour avoir une personnalisation maximum sur la partie header et footer du site web.

Comment personnaliser la mise en forme de ses widgets ?

Nous pouvons ajouter le plugin WYSIWYG Widgets / Widget Blocks (Par Danny van Kooten).
Dans le BackOffice, une nouvelle partie apparait : Widget Blocks
Création d'un nouveau widget avec l'éditeur du nom de block1
Apparence>Widget> Le Widget nommé "Widget Blocks Widget" permet de placer les widgets créés avec l'éditeur dans une région de son choix (dans notre cas : il faut selectionner block1) pour que cela s'affiche.

Comment personnaliser l'affichage de ses widgets ?

Par défaut, lorsque nous plaçons un widget dans une région, il est affiché dans une région et si cette région apparait partout sur le site, le widget sera toujours affiché.

Il arrive parfois que nous voulions afficher un widget seulement sur certaines pages, seulement pour les utilisateurs connectés / non connectés ou pour certains types de contenu.

Pour cela nous pouvons ajouter le plugin DISPLAY WIDGETS. (Par Strategy11).
< Extension>Ajouter>DISPLAY WIDGETS : Ce plugin permet de pouvoir gérer la visibilité des widgets par page ou type de contenu.
Apparence>Widget> Automatiquement, tous vos widgets seront dotés de cases à cocher pour gérer l'apparition/disparition de vos widgets.
Ensuite, vous pouvez choisir le type de page ou sera caché ou affiché le widget en cochant la ou les cases de votre choix.

Divers :

• Front Page : correspond à la page d’accueil de votre site


• Blog Page : correspond à toutes les pages de votre site (par défaut)


• Archives Page : correspond à toutes les pages d’archives


• Billet Page : correspond aux pages d’article seul


• 404 Page : correspond à la page d’erreur 404


• Recherche Page : correspond aux pages de Recherche

L'option : "id des billets à séparer par une virgule" permet de gérer l'affichage de widget très précisément contenu par contenu.

Pour découvrir le numéro ID correspondant, vous devez en mode édition/modification articles ou pages, cliquer sur le bouton “Obtenir le lien court” et relevez le chiffre qui est inscrit après ?p=

Comment positionner un menu ?

Les menus peuvent etre integrés directement dans les widgets, ce qui rend le nombre de menu et d'emplacements de menus illimités.

Sinon, une autre méthode consiste à créer un emplacement de menu dans le template :
D'abord déclarer la zone de menu dans le fichier functions.php

		register_nav_menus( array(
			'principal'   => 'Navigation Principale',
			'secondaire' => 'Navigation Secondaire, dans le footer',
			'gauche' => 'Menu placé à gauche'
		) );
	

+ Placer l'emplacement de menu où l'on veut le faire apparaitre dans le template

<?php wp_nav_menu( array( 'theme_location' => 'principal', 'menu_class' => 'classe_css_perso' ) ); ?> 

classe_css_perso correspondra à la classe de l'ul du menu Autre possibilité dans functions.php :

<?php
	add_action('init', 'themeperso_add_menu');
	function themeperso_add_menu()
	{
		register_nav_menu('main_menu', 'Menu principal');
	}
	
	wp_nav_menu(array('theme_location' => 'main_menu'));
?>