Catégories
Site web - Tutoriels Site Web WordPress Thème WordPress

Comment personnaliser un thème WordPress : Thème enfant WordPress

Vous ne trouvez pas de thème qui correspond à vos goûts et à vos besoins?  Avec une certaine habileté en CSS, HTML et une base en PHP, il est possible de tenter l’aventure de la conception de son propre thème.

L’anatomie d’un thème WordPress

Joost de Valk de yoast.com a très bien représenté sa notion d’anatomie d’un thème WordPress en images (référence : http://yoast.com/wordpress-theme-anatomy/)

Alors, avant de commencer à concevoir un thème, il est pertinent d’examiner son fonctionnement sur WordPress. D’abord, il faut faire la différence entre thèmes et modèles templates. Un thème WordPress est composé de répertoires de fichiers modèles templates qui contrôlent une partie spécifique du thème. Il représente également la collection de fichiers modèles précisant l’apparence de la page au navigateur.

En résumé, un thème peut se composer des fichiers suivants, mais on peut aussi utiliser uniquement les fichiers style.css et index.php pour créer un thème :

  • sytle.css
  • index.php
  • single.php
  • page.php
  • archive.php
  • category.php
  • tag.php
  • comments.php
  • functions.php

Une façon simple de personnaliser l’aspect d’un site : le thème enfant « child-theme »

WordPress.org définit le thème enfant comme

« un thème qui hérite des fonctionnalités d’un autre thème, appelé parent et qui vous permet de modifier et/ou d’ajouter des nouvelles fonctionnalités au thème parent.»

L’utilisation d’un thème enfant peut vraiment accélérer le processus de développement, car on démarre avec la base d’un thème existant. Par exemple,  Twenty Eleven, le thème de base qui vient d’office avec WordPress peut faire une excellente base pour un thème enfant. Avec un autre thème, il faut s’assurer que le code est bien construit, il est préférable de partir d’une bonne base.

NOTE : Notons en outre que pour chaque personnalisation d’un thème WordPress, il vaut mieux partir d’un thème enfant et ne jamais éditer le code du thème lui-même. De cette façon, lors d’une mise à jour du thème original les modifications ne seront pas effacées.

La façon la plus rapide, pour commencer la conception de votre thème enfant, est d’utiliser un plugin One-Click Child Theme (http://wordpress.org/extend/plugins/one-click-child-theme/). En activant d’abord le thème parent choisi, il sera ensuite permis d’installer et d’activer le plugin, puis de cliquer sur CHILD THEME sous le menu APPARENCE du tableau de bord WordPress.

Évidemment, il est également possible de partir de zéro et d’éditer le code soi-même. Il faut alors ouvrir votre éditeur de codes habituel et y entrer les informations suivantes (le thème Twenty Eleven sert ici de thème parent) :

/*
Theme Name:     Nom de votre thème enfant
Description:    La description de votre thème.
Author:         Votre nom
Author URI:      http://www.votresiteweb.com/
Template:       twentyeleven
*/
@import url("../twentyeleven/style.css");

La personnalisation de base des CSS

Éditer le fichier style.css peut se fairedirectement dans l’éditeur de WordPress ou en installant un meilleur éditeur de code comme Advanced Code Editor (http://wordpress.org/extend/plugins/advanced-code-editor/). Il s’agit d’un plugin qui affiche les fichiers .php et .css avec un code de couleurs, ce qui simplifie la modification du code. Bien entendu, un éditeur de codes (comme NotePad++) peut aussi être utilisé.

Toutefois, il importe de laisser le code @import url (« ../twentyelevent/style.css)  dans le haut du fichier css, sinon l’importation des styles du thème parent ne seront pas utilisés.

Une fois l’éditeur choisi,  certains éléments de base, comme la couleur de fond,  le menu principal, la typographie et d’autres éléments qui donneront un nouveau look au thème enfant, pourront être définis.

Il pourrait être utile d’installer un plugin comme Firebug (http://getfirebug.com/) pour Firefox ou l’inspecteur Web inclus dans Google Chrome, en vue de bien identifier les parties du thème à changer. Cela permet de cliquer sur une partie de la page et afficher le div et les CSS qui définissent le style. Les modifications du CSS directement dans Firebog et la visualisation des résultats instantanément dans votre navigateur deviennent ainsi possibles. Lorsque le résultat convient, un copier-coller de votre code dans le fichier sytle.css peut être exécuté.
Thème enfant WordPress

Couleur de fond du contenu principale

À titre d’exemple, ce CSS qui modifie la couleur de fond du contenu principale qui utilise un drop shadow (http://www.css3.info/preview/box-shadow/)  :

#page {
    background: #ffffff;
    -moz-box-shadow: 0 0 10px #67949c;
    -webkit-box-shadow: 0 0 10px #67949c;
    box-shadow: 0 0 10px #67949c;
}

Typographie

Une touche de créativité peut être apportée simplement en ajoutant une typographie différente de ce qu’on est habitué de voir. Un grand choix de typographies gratuites et optimisées pour le Web se trouve chez Google Web fonts (http://www.google.com/webfonts).

Pour ce faire, il suffit de trouver le lien de la Google font (par exemple : http://fonts.googleapis.com/css?family=Mako);) et de l’ajouter comme une importation de CSS dans le fichier style.css

Cet exemple avec deux Google font choisies (Mako et Great Vibes) le démontre bien:

@import url(http://fonts.googleapis.com/css?family=Mako|Great+Vibes);

Le  fichier style.css devrait maintenant ressembler à cela :

/*
Theme Name:     bleu
Description:    child-theme modifier par Annie
Author:         admin
Template:       twentyeleven

(optional values you can add: Theme URI, Author URI, Version)
*/

@import url("../twentyeleven/style.css");
@import url(http://fonts.googleapis.com/css?family=Mako|Great+Vibes);

#page {
    background: #ffffff;
    -moz-box-shadow: 0 0 10px #42565C;
    -webkit-box-shadow: 0 0 10px #42565C;
    box-shadow: 0 0 10px #42565C;
}
body, input, textarea, p {
    color: #000000;
    font-family: 'Mako', arial, serif;
}
p {
    font-size: 14px;
    line-height: 24px;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Great Vibes', arial, serif;
}

Déplacer le menu de navigation principale

Une autre personnalisation intéressante est de déplacer le menu de sa position originale, sous l’image, vers le haut à droite, près du titre du blogue.  Ce code doit alors être ajouté :

#access {
    clear: both;
    display: block;
    float: right;
    margin: 0 auto 6px;
    position: relative;
    top: -410px;
    width: 600px;
    background: none;
    box-shadow: none;
}
#access a {
    font-family: 'Great Vibes', 'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 30px;
    line-height: 40px;
    padding: 12px 18px 10px;
    color:#D1DC00;
}

#access li {
 background-color: #283E42;
    margin-right: 10px;
}
#access li:hover > a, #access a:focus {
    background: #D1DC00;
    color: #65BC46;
    -moz-box-shadow: 0 0 3px 3px #42565C;
    -webkit-box-shadow: 0 0 3px 3px #42565C;
    box-shadow: 0 0 3px 3px #42565C;
}

Par la suite, pour suivre la stylique (design graphique) du menu, il est opportun de changer la typographie de la sidebar  et d’ajouter une couleur de fond avec les coins arrondis,  ce qui pourrait ressembler à :

#secondary {
    background-color: #283E42;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin-right: 4%;
    padding: 22px;
    width: 17.5%;
}
.widget a {
    font-weight: 400;
    font-family: 'Mako', sans-serif !important;
    color:#D1DC00;
}
.widget-title {
    color: #ffffff;
    line-height: 1.5em;
    text-transform: none;
    font-size:28px;
}
.widget ul li {
    color: #c7c7c7;
}

Il apparaît essentiel de souligner que l’ajout du code !important à la fin d’une déclaration CSS, donne plus de poids à cette valeur. La raison pour laquelle, il est utilisé vient du fait qu’un CSS attribue un poids à chacun des styles en fonction de l’endroit où il apparaît dans le fichier .css. Donc, !important indique que la propriété de ce style deviendra la valeur la plus important, surclassant toutes les autres valeurs du fichier .css

La création d’un thème enfant s’avère beaucoup plus simple que celle d’un original. En effet, il suffit que de quelques notions de CSS pour créer le  thème désiré. De plus,  cette façon évite la traduction, car le thème Twenty Eleven possède déjà ses fichiers fr_FR.po et fr_FR.mo.

Un bon thème WordPress c’est rarement un thème gratuit

En bout de ligne, il  n’est pas si simple de trouver le thème idéal dans la langue de son choix et avec des fonctionnalités qui répondent aux besoins. Pour ceux qui ne veulent pas investir de leur temps pour créer leur propre thème enfant, il peut être avantageux de payer pour un thème de qualité. Mais, comme le dit si bien le site de WordPress.org :  « Pourquoi devriez-vous construire votre propre thème WordPress? C’est la vraie question.

  • C’est une occasion pour en apprendre davantage sur les CSS,HTML et PHP.
  • C’est une occasion de mettre votre expertise avec CSS, HTML,PHP et de travailler.
  • C’est créatif.
  • C’est amusant (la plupart du temps).
  • Si vous décidez de le distribuer gratuitement au public, vous aurez le sentiment de partager et de donner quelque chose en retour à la Communauté WordPress (ok, et le droit de se vanter un peu) »

Ressources :

Catégories
Site web - général Site web - Tutoriels Site Web WordPress

Comment améliorer la lisibilité sur WordPress – offrez une expérience de lecture confortable

J’ai découvert une façon vraiment confortable de lire des articles Web sur le blog de Jeffrey Zeldman. Il utilise le service Readability qui permet, entre autres de lire les articles dans une mise en page simple qui élimine tous les éléments de la page sauf le texte et les photos.

Site web Readability - améliore la lisibilité

J’ai donc cherché à trouver une solution similaire pour mon blog WordPress et je l’ai trouvée chez labnol.org. Donc dans le but d’offrir une expérience de lecture améliorée j’ai suivi la marche à suivre, pour un blog WordPress, offerte par Amirt Agarwal. Voici la traduction (libre) :
Étape 1 : Ajouter une nouvelle Page via le tableau de bord WordPress : PAGE > AJOUTER
Le titre de cette page : lecture conviviale

ajouter une page dans le tableau de bord WordPress

Étape 2 : Il faut modifier le PERMALIEN et mettre /read/ et cliquer sur le bouton PUBLIER
NOTE : Ne mettez aucun texte pour cette page.

Étape 3 : Ouvrir le fichier .htaccess et ajouter cette ligne de code (au début du fichier) :

RewriteRule ^read/([0-9]+)/?$ /read/?u=$1 [QSA,L]

Étape 4 : Téléchargez le fichier page-read.php.txt (ma version en français) ou la version originale (anglais) dans le répertoire du thème que vous utilisez. Dans mon cas j’ai copié le fichier dans le répertoire /wp-content/themes/canvas2/
Ensuite il faut renommer le fichier page-read.php

Image de Filezila - fichier page-read.php

Étape 5 : La dernière étape consiste à insérer un lien pour permettre à l’internaute de voir notre version « reader-friendly« . Il faut bien connaître votre thème pour savoir à quel endroit il faut mettre ce fameux lien. Généralement c’est dans le fichier single.php où il faut insérer le code suivant :
ma version en français :

<a href="/read/<?php the_ID(); ?>/">
Lire cet article en mode confort "Reader-Friendly" </a>

version originale :

<a href="/read/<?php the_ID(); ?>/">Read story without the clutter</a>

Est-ce que vous voulez implémenter cette solution? ou peut-être utiliser Readability?

Catégories
Site web - Tutoriels WordPress Multisites

Configurer WordPress Multisite pour utiliser différents noms de domaine

Le but de cet exemple est de démontrer comment utiliser une seule installation de WordPress sur un serveur et faire fonctionner plusieurs sites web ou blog WordPress qui ont chacun leur nom de domaine.
Ce que ça prend

  • WordPress version à jour (février 2011 = version 3.0.5)
  • PHP version 4.3 ou plus
  • MySQL version 4.0 ou plus
  • Apache mod_rewrite (Hébergement linux recommandé)
  • Wildcard CNAME record pour les sous-domaines
  • Marche à suivre pour faire l’activation du Multisite avec l’option sous-domaine
  • Plugin : WordPress MU Domain Mapping
  • Accès à l’interface de gestion des DNS

Étape 1 Activer la fonction multisite avec sous-domaine

Vous pouvez utiliser cette marche à suivre pour activer le multisites sous WordpPress 3.0.5 (avec l’option sous-domaine).

Étape 2 Créer les sites et faire le choix des noms domaine

Dans mon exemple le blog principale sera : www.babillard-scolaire.org et j’ai déjà créé un 2e site qui est testmapping.

  • mon premier site (qui sera gérer sous le même WordPress que babillard-scolaire.org sera :
    testmapping.babillard-scolaire.org et le nom de domaine que je « mapperai » sera www.babillardscolaire.com

WordPress Multisite mapping

Étape 3 Installer le plugin WordPress MU Domain mapping

Vous pouvez télécharger le plugin sur le site de WordPress.org

  1. Créer le répertoire mu-plugins en dessous du répertoire wp-content
  2. Copier le fichier sunrise.php (du plugis WordPress Mu Domain mapping) dans le répertoire wp-content
  3. Copier le fichier domain_mapping.php (du pluginWordPress Mu Domain mapping) dans le répertoire mu-plugins
  4. Éditer le fichier wp-config.php (je suggère d’utiliser NotePad++) et ajouter la ligne suivante:
    define( ‘SUNRISE’,’on’);
    juste au-dessus de la ligne « /* C’est tout, ne touchez pas à ce qui suit ! Bon blogging ! */ »

WordPress Multisites création du répertoire mu-pluginsWordPress Multisites configuration wp-config sunrise

Étape 4 Configuration du mapping dans Super Admin (via le tableau de board)

Note : vous devez connaitre l’adresse IP correspondant à votre site web (le mien dans cette exemple est 174.122.132.8). Vous pouvez aussi utiliser un CNAME selon les informations du plugin

Cliquer sur Domain mapping sous Super Admin et entrer l’adresse IP dans le champ Server IP Address et cocher:

  • User domain mapping page
  • Redirect administration pages to site’s original domain (remote login disabled if this redirect is disabled)

WordPress Multisites domain mapping configuration sous Super Admin

Étape 5 Mapper le nom de domaine sur le site

Je veux donc mapper le domaine www.babillardscolaire.com sur le site que j’ai créé testmapping.babillard-scolaire.org.

Aller dans l’administration du site testmapping.babillard-scolaire.org en cliquant sur Sites sous Super Admin et ensuite sur le lien Administration qui est directement sous testmapping.

Wordpress Multisite administration du site

Ceci fait ouvrir le tableau de bord pour la gestion du site testmapping.

Dans ce tableau de bord cliquer sur Domain Mapping sous Outils

WordPress Multisite Domaine mapping du site

et faire l’ajout du domaine que veut mapper

Dans mon exemple je veux mapper le domaine www.babillardscolaire.com c’est donc l’information que j’ai entré dans la champ http:// et on coche Primary domain for this blog et on clique sur le bouton Add.

WordPress Multisites ajout du domaine pour mapping

WordPress Multisites Adminsitration domain mapping

Étape 6 configure le domaine dans CPanel

Pour que le domaine www.babillardscolaire.com fonctionne je dois aussi faire la configuration via CPanel. En utilisant Parked Domains dans la section Domains.

WordPress Multisites parked domain dans Cpanel

On entre le domaine (ici c’est www.babillardscolaire.com) et on clique sur le bouton Add DomainWordpress Multisites parked domain Cpanel add

Note : Il faut au préalable que la zone DNS de votre domaine (mon exemple : www.babillardscolaire.com) pointe vers l’adresse IP où est hébergé votre site web

Je peux maintenant faire la gestion du site www.babillard-scolaire.org et le site www.babillardscolaire.com (testmapping.babillard-scolaire.org) dans le même tableau de bord. Je peux ajouter autant de sites qu’on veut.

WordPress Multisites mapping domain gestion

Catégories
Site web - Tutoriels WordPress Multisites

Configurer WordPress Multisite en utilisant des sous-domaines

Les pré requis :

  • Avoir la version de WordPress la plus récente (ici WordPress version 3.0.5 est dernière version en français – février 2011)
  • Idéalement un WordPress qui n’a pas encore été utilisé, donc une nouvelle installation de WordPress
  • Si possible avec un hébergeur qui vous offre la possibilité d’utiliser CPanel (et non PLESK)(PLESK fonctionne aussi mais il peut y avoir des différences au niveau de la configuration, j’y reviendrai). référence en anglais
  • un hébergeur qui supporte le « wildcard subdomain » référence en anglais
  • Accès à la configuration de vos zones DNS
  • Utile : logiciel FTP (moi j’utilise FileZila c’est gratuit et il fonctionne très bien)
  • Un éditeur qui permet d’enregistrer les fichiers sans créer d’espace « BOM » (ce qui créé des bugs) (moi j’utilise Notepad++ )

Donc je débute mon exemple pour créer une installation multisites WordPress avec un WordPress qui vient tout juste d’être installé. Je ne l’ai pas encore utilisé. Mon exemple est un multisites avec des sous-domaines du genre : ecole1.babillard-scolaire.org, ecole2.babillard-scolaire.org, etc.

Étape 1 – créer un fichier .htaccess

J’ai besoin de créer un fichier .htaccess et pour qu’il se créé automatiquement je vais modifier les Permaliens (ce que je suggère de faire lors d’un installation WordPress). Ceci permet d’avoir des liens plus compatibles pour les moteurs de recherche comme google. Nous allons avoir des liens du genre www.babillard-scolaire.org/2011/02/monsujet AU LIEU DE www.babillard-scolaire.org/?page_id=100.

Donc dans le tableau de bord on clique sur PERMALIENS qui est situé sous la catégorie RÉGLAGES et par le suite je choisis « mois et titre » (j’aurais pus prendre n’importe lequel sauf valeur par défaut) et on clique sur le bouton ENREGISTRER LES MODIFICATIONS:

WordPress Multisites étape 1

En utilisant FileZilla, je me suis connecté sur le serveur et je vois maintenant le fichier .htaccess directement dans le répertoire racine de mon site web WordPress (il est possible que vous ne puissiez pas voir le fichier .htaccess à ce moment il faudrait communiquer avec votre hébergeur pour voir quelles sont les solutions pour pouvoir le modifier) :

Wordpress Multisites listes fichiers

Étape 2 activation de la fonction Multisites – allow multisite

Il faut éditer le fichier wp-config.php (qui est situé juste à la racine au même endroit que le fichier .htaccess) et ajouter ceci :

define('WP_ALLOW_MULTISITE', true);

Juste au-dessus de la note qui dit /* C’est tout, ne touchez pas à ce qui suit ! Bon blogging ! */ (j’ai la version française de WordPress – en anglais il faut chercher la phrase /* That’s all, stop editing! Happy blogging. */)

Note : pour éviter les problèmes d’édition de fichier PHP, je vous suggère d’utiliser Notepad++ qui est un éditeur qui permet d’enregistrer les fichier sans créer de « BOM » comme le fait le NotePad de Windows. Les « BOM » sont des espaces (non visibles dans le bloc-note « Notepad ») qui sont créés pour spécifier certaines choses pour des fichiers. Donc pour s’éviter des problèmes je recommande l’utilisation de Notepad ++ (ou autre éditeur qui permet de spécifier No bom).

Éditer et enregistrer wp-config.php

WordPress multisites modification du fichier wp-config.php

Étape 3 – Configurer le « Réseau » via le tableau de bord de notre WordPress

Dans le tableau de bord de notre WordPress cliquer sur RÉSEAU (qui vient tout juste de s’ajouter) sous la catégorie OUTILS.

  • Choisir Sous-domaines
  • Entrer le nom de votre choix pour le réseau : moi j’ai choisi Réseau babillard scolaire
  • Entrer une adresse courriel valide dans le champ Adresse contact de l’administrateur
  • Cliquer sur le bouton INSTALLER

WordPress multisites activer sous-domaine

Étape 4 – 2ieme modification des fichiers wp-config.php et .htaccess

Après avoir cliqué sur le bouton INSTALLER, vous obtenez des informations qui ressemblent à ceci :

Wordpress Multisites configuration sous-domaine

Édition du fichier wp-config.php

Il s’agit de suivre les instructions soit de copier le texte de la boîte pour le copier dans le fichier wp-config.php. Juste au-dessus du texte /* C’est tout, ne touchez pas à ce qui suit ! Bon blogging ! */

define( 'MULTISITE', true );
define( 'SUBDOMAIN_INSTALL', true );
$base = '/';
define( 'DOMAIN_CURRENT_SITE', 'babillard-scolaire.org' );
define( 'PATH_CURRENT_SITE', '/' );
define( 'SITE_ID_CURRENT_SITE', 1 );
define( 'BLOG_ID_CURRENT_SITE', 1 );

WordPress Multisites édition du fichier wp-config

Édition du fichier .htaccess

La 2ième boîte est pour la modification du fichier .htaccess :

WordPress Multisites fichier htaccess modifié

Une fois les fichiers wp-config.php et .htaccess modifiés, cliquer sur le lien Se connecter qui apparait juste dans le bas sous les instructions qui nous a permis de modifier les fichiers.

Étape 5 – Configurer le votre zone DNS pour le « wildcard »

  • Il faut connaître l’adresse IP du serveur où votre site web est hébergé dans mon cas c’est 174.122.132.8
  • Mes DNS sont gérés chez DurableDNS. Je suis donc modifier la zone dns afin que mon domaine babillard-scolaire.org accepte les sous-domaines ( *.babillard-scolaire.org):

WordPress Multisites modification de la zone DNS

Il faut aussi faire l’ajout d’un sous-domaine « wildcard » via le panneau de contrôle (dans mon cas CPanel).

Dans la section DOMAINS, cliquer sur subdomains et faire l’ajout du sous-domaine *.votredomaine.com et choisir le répertoire où est votre fichier wp-config.php (ici c’est /public_html/

WordPress Multisite CPanel wildcard

Étape 6 – ajouter les sites

Vous vous reconnectez au tableau de bord avec votre identifiant et votre mot de passe.

WordPress Multisites Tableau de bord Super Admin

C’est dans la section Super Admin que vous pourrez faire la gestion des différents sites de votre réseau.
Pour ajouter un nouveau blog cliquer sur le lien Créer un nouveau site :
Entrer l’adresse du nouveau site pour mon exemple c’est testmapping.babillard-scolaire.org et mon titre est Je fais un test (original n’est-ce pas?)WordPress Multisite créer un nouveau site

Ressources :