L'apparence

Vous êtes ici : >> WORDPRESS / L'apparence
Temps d'étude : 45 min. Niveau : Facile.
Tags : L'apparence
Fichier(s) utile(s) pour ce cours : /

Thème et design

Le Menu Apparence > Thèmes

Apparence> Themes> Le thème représente le design du site

explications wordpress

Apparence> Themes> Ajouter

explications wordpress

La case de recherche à côté permet de saisir directement le nom d'un thème si vous savez déjà ce que vous recherchez.

Vous pouvez faire votre choix parmi les thèmes proposés (un aperçu est disponible)
Vous pouvez également trier par les thèmes mis en avant (à l'honneur), les thèmes populaires (appréciés des administrateurs wp), ou tout simplement les derniers en date...

explications wordpress

Les filtres vous permettent de choisir un thème par couleur, arrangement, fonctionnalité, Thème

explications wordpress

  • Les couleurs vous permettront de viser la tendance que vous avez en tête

  • L'arrangement permet de définir le zoning de votre site web, plutôt responsive design ? combien de colonnes ?

  • Certains thèmes incluent déjà certaines fonctionnalités, même si c'est le rôle des plugins d'ajouter une fonctionnalité, il est évident que tous les thèmes ne se prêtent pas à faire une boutique ecommerce (par exemple).

  • Vous pouvez prendre un thème sur un thème, de quoi comptez vous parler ? Mode, cuisine ?

fléche Informations
Pour une boutique ecommerce, inscrivez le mot-clé "shop" pour isoler des thèmes cohérents avec votre activité.


Lorsque vous avez trouvé votre bonheur, cliquez sur "installer". Pour la suite du cours nous prendrons Twenty Twelve :

explications wordpress

N'oubliez pas d'activer votre thème. il se retrouve dans la liste, vous pouvez possèder plusieurs thèmes mais un seul doit être actif (c'est le design de votre site web) :

explications wordpress

Pour preuve, si vous retournez sur votre site web en FRONT, le design aura changé :

explications wordpress

explications wordpress

fléche Informations
Nous garderons Twenty Twelve pour la suite du cours car il est simple et constitue une bonne première base pour apprendre wordpress simplement, efficacement et avec les mêmes comportements.

Le Menu Apparence > En-tête

Dans cette partie-là nous pouvons modifier l'entête du site (par exemple ajouter une image), cela est similaire à Apparence > Twenty Twelve > Personnaliser

Le Menu Apparence > Arrière plan

Dans cette partie-là nous pouvons modifier l'arrière plan du site (par exemple changer les couleurs), cela est similaire à Apparence > Twenty Twelve > Personnaliser

Menu : Apparence > Personnaliser

Cliquez sur la partie "Personnaliser" :

explications wordpress

Vous pourrez notamment modifier le titre de votre site et décider de retirer ou modifier le slogan du site web.
explications wordpress

Parmi les autres options nous retrouverons la possibilité de modifier les couleurs (texte et arrière plan).
Ce thème nous laisse la possibilité de modifier l'image d'entête et l'image d'arrière plan (background).
Une autre bonne option consiste à changer le ciblage de la page d'accueil (nous y reviendrons plus tard) :

explications wordpress

Par défaut la page d'accueil présente les derniers articles ajoutés

Les widgets

Menu : Apparence > Widgets

Les widgets sont des zones d'informations qui se placent dans des régions du site. Une région est un emplacement sur la page web (cela peut être une <div>)

Avoir un thème composé de plusieurs régions (comme la sidebar) permet une meilleure personnalisation. Ce n'est pas le cas de notre thème Twenty Twelve qui propose uniquement "Main Sidebar", nous en profiterons donc pour apprendre à créer des régions un peu plus tard.

explications wordpress

Il est possible de retirer ou d'ajouter des widgets, par un simple "glisser > déposer" en maintenant le clic gauche de la souris enfoncé :

Choisissez le widget Texte : Texte ou code HTML arbitraire

explications wordpress

Pour tester et voir les changements, retournez sur l'onglet de votre site web en FRONT et actualisez :

explications wordpress

Pour la suite du cours nous déplacerons en zone inactive : commentaires récents, archives, Meta

Nous reviendrons sur cette partie afin d'approfondir les widgets qui représentent une partie importante de wordpress.

Les menus

Le Menu Apparence > Menus

C'est à cet endroit que se gèrent les menus dans Wordpress. Nous y reviendrons plus tard dans la mesure où nous n'avons pas encore assez de contenu pour construire notre premier menu.

L'éditeur

Le Menu Apparence > Editeur

L'éditeur permet d'avoir accès à l'arborescence rapidement depuis le BackOffice.

Avantages Inconvénients
Facile d'accès en production, cela évite de se connecter par ftp pour effectuer une modification Pas de coloration syntaxique comme pour un logiciel éditeur de texte/code

Créer et modifier un thème

Pour modifier un thème existant et ainsi obtenir un design personnalisé, il faut se rendre dans l'installation de wordpress

explications wordpress

Ensuite se rendre dans la partie /www/wordpress/wp-content/themes/

Copier/Coller le dossier nommé : twentytwelve

Renommez ce dossier en : monthemeperso

fléche Attention
pas d'accent, pas d'espace, pas de majuscule, que des noms stricts en informatique.


explications wordpress

Ouvrez le fichier screenshot.png et le modifier pour donner un aperçu différent (ce fichier représente un aperçu du thème) puis enregistrez.

Ouvrez le fichier style.css et modifiez les premières lignes en commentaires : Thème Name, Thème Auteur, etc.

  • Theme Name: Mon Theme Perso (Nom de votre thème)

  • Theme URI: (Url où l'on pourra télécharger votre thème, si vous souhaitez le partager)

  • Author: Votre Nom Votre Prenom (Nom de l'auteur)

  • Author URI: (Site web de l'ateur)

  • Description: Voici ma description (Description de votre thème)

  • Version: 1 (Version de votre thème, s'il y a des mises à jour, ce chiffre est suceptible d'évoluer)

  • License: GNU General Public License v2 or later (Type de licence)

  • License URI: http://www.gnu.org/licenses/gpl-2.0.html (Url contrat de licence)

  • Tags: (Mot-clé que l'on devra saisir pour trouver votre thème)

  • Text Domain: monthemeperso (Nom informatique de votre thème)

Dans votre BackOffice, retourner dans à l'endroit de Apparence > Thème et activer "monthemeperso".

explications wordpress

Si vous êtes à l'aise avec les langages Html et Css, vous pouvez également vider tout le code qui se trouve dans la feuille de style (fichier style.css) et reconstruire un nouveau design.

Pour cela, il serait préférable d'avoir un outil type firebug pour attraper une zone dans la page, repérer son nom, et la reporter dans le fichier style.css afin de la personnaliser.

explications wordpress

Par exemple, vous pourriez écrire :
style.css
		#page{
		margin: 0 auto;
		width: 960px;
		padding: 0 20px;
		box-shadow: 1px 1px 6px;
		}
		a{ color: #336699; text-decoration: none; }	
Et ainsi reconstruire petit à petit votre thème.

Une propriété peut être "surchargé" en précisant son chemin complet :

body #main #container #content .entry-title{} prendra le dessus comparé à : .entry-title{} 


Il est également possible d'utiliser
{propriete: valeur !important;}


fléche Attention
Les copier/coller permettent de gagner du temps lors de la création d'un thème mais dans l'idéal il est préférable de partir d'un dossier vierge ou d'effectuer un thème enfant.