[[CMS: WordPress]]
 
Piste: • Long Hai LE HUYNH • CMS: WordPress
Vous êtes ici: Formations » iesa » WordPress » CMS: WordPress

CMS: WordPress

  • Quelques rappels
  • CMS: Content Management System
  • Système de Gestion de Contenu
  • Outil pour créer des sites internet
  • But de l'Editeur:
  • Publier du contenu multimedia sur internet
  • Texte
  • Images
  • Musique
  • Videos
  • Documents et Fichiers (ex: PDF, etc…)
  • Technologies du navigateur:
  • HTML5, CSS3, JavaScript
  • Technologies du serveur (LAMP):
  • PHP5
  • MySQL5
  • Apache2
  • Linux
  • Construire un site internet
  • ⇒ Utiliser toutes ces technologies pour publier le contenu multimedia
  • Sites Statiques:
  • Le texte a été transformé en HTML et est enregistré dans un fichier
  • Le serveur web envoie au navigateur le fichier HTML enregistré
  • Sites Dynamiques:
  • La page HTML est créé à la demande par le programme PHP
  • Le serveur web envoie au navigateur le produit du programme PHP
  • CMS: WordPress
  • Application PHP pour gérer les aspects techniques
  • Editeur fournit le contenu multimedia
  • WordPress crée dynamiquement les pages web à partir de ces contenus
  • Webmaster:
  • ⇒ Facile pour les débutants
  • ⇒ Indispensable pour les sites avec beaucoup de contenu
  • Un bon CMS doit:
  • aider l'éditeur à publier du contenu
  • plaire aux visiteurs (contenu, navigation, graphisme, interactivité)
  • plaire aux moteurs de recherche (contenu indexé par Google, Bing, etc…)

WordPress.com vs WordPress.org

  • WordPress.com est une plateforme de blogs
  • Il suffit de créer un compte
  • ⇒ On obtient un site gratuitement et immédiatement :-)
  • http://monsite.wordpress.com/
  • ⇒ Certains services sont payants :-/
  • WordPress.org est le logiciel libre
  • Il faut l'installer sur son propre hébergement
  • ⇒ Il faut donc louer un nom de domaine et un espace d'hébergement :-/
  • ⇒ Plus de liberté :-)
  • Possibilité d'exporter/importer son contenu de WordPress à WordPress
  • Fichier Export XML
  • WordPress.com ⇒ site hébergé avec son nom de domaine et WordPress(.org)

Construire un site avec WordPress

  • WordPress est un CMS (Content Management System)
  • Dans les étapes pour construire un site avec WordPress:
  • On commence par ajouter du contenu
  • Des pages
  • Un menu pour la navigation
  • Des medias (photos, PDF, etc…)
  • Pour améliorer le référencement du site, on ajoute ensuite:
  • Des articles
  • On associe des tags et/ou des catégories aux articles

Pages vs Articles

  • Pour fidéliser les visiteurs:
  • Les tags et catégories facilitent aussi la navigation par centre d'intérêt
  • Les commentaires permettent aux visiteurs d'interagir
  • Les flux RSS permettent aux moteurs de recherche et aux visiteurs de suivre l'actualité du site
  • http://monsite.com/feed/
  • Pour Google:
  • La structure du contenu des pages est important
  • Pour les visiteurs:
  • Le graphisme du site est aussi important
  • ⇒ WordPress est un moteur
  • ⇒ La production de la page web est gérée par le thème activé
  • Le thème est donc un élément important!!!

Choisir un thème dans le catalogue WordPress.org

  • Ces thèmes sont sous licence GPL
  • Le code et les éléments graphiques sont librement utilisables
  • NOTE: ces thèmes ne contiennnent pas de code malveillant
  • WARNING: Mais il se peut qu'ils soient mal codés
  • …et donc avec des bugs ou failles de sécurité
  • WARNING: La plupart de ces thèmes sont en anglais!
  • +1.400 thèmes disponibles ?!
  • Il y a un écran pour définir de critères de sélection pour trouver le thème adapté

Installer un thème en format .zip

  • En dehors du catalogue, il y a plein de thèmes gratuits et/ou payants
  • Ils sont fournis en format .zip
  • Il suffit de passer par le menu “Thèmes” > “Envoyer”
  • Uploader le fichier .zip
  • Ensuite WordPress va décompresser l'archive
  • et installer les fichiers dans le dossier /wp-content/themes/

Quelques pièges dans le choix du thème

  • La plupart du temps:
  • Un nouvel utilisateur veut faire un site rapidement
  • Le premier critère est donc de trouver un design visuellement attirant
  • ⇒ Choix à partir de la miniature

Un site demo est disponible pour chaque thème pour mieux apprécier le rendu final:

  • WARNING: Le thème est un habillage du contenu d'un site
  • Un site avec peu de contenu aura souvent un rendu médiocre
  • ⇒ Dans ses premiers choix, on a souvent des mauvaises surprises :-/

Thèmes: Options de personnalisation

  • WARNING: Les thèmes proposent souvent des options
  • exemples:
  • Options pour plusieurs layouts
  • Options pour plusieurs skins / jeux de couleurs
  • Options plus avancés (slideshow, etc…)
  • Toutes ces options ne sont pas visibles sur la “preview” :-/
  • Il faut lire les informations et tags donnés pour chaque thème
  • exemple: widgets, menus, image header, N layouts, etc…
  • Il faut donc installer et tester les options disponibles
  • NOTE: faire une recherche Google!
  • Il y a plein d'articles comparant les meilleurs thèmes suivant chaque utilisation

Thèmes: Exemples avec options

Thèmes Pro: Gratuits avec options

Thèmes: Exemples avec framework

  • Thematic
  • Carrington
  • …
  • Ces thèmes proposent une structure de base
  • Il faut des compétences techniques pour personnaliser le thème
  • Création d'un “Child Theme”
  • API WordPress
  • PHP5, HTML5, CSS3, Javascript, etc…

Thèmes: Personnaliser avec CSS

  • Généralement, le thème installé correspond à 80% au résultat désiré
  • ⇒ Il faut pouvoir personnaliser les 20% restants
  • RAPPEL pour une page web
  • Le contenu est structuré avec le code HTML
  • Le rendu visuel est fourni par les instructions CSS
  • Il faut pouvoir ajouter des règles CSS:
  • Installer le plugin Custom CSS
  • http://wordpress.org/extend/plugins/safecss/
  • Ce plugin ajoute un menu “Apparence” > “edit CSS”
  • cet écran permet d'ajouter son propre code CSS
  • Un thème bien réalisé doit produire un code HTML bien structuré
  • ⇒ Bonne Séparation entre HTML et CSS
  • ⇒ A vérifier avec FireBug

How to use FireBug to modify a WordPress theme from WooThemes on Vimeo.

Best Practices to modify a WordPress theme from WooThemes on Vimeo.

Thèmes: Editeur de code

  • WordPress permet de modifier le code des fichiers d'un thème
  • Menu “Apparence” > “Editeur”
  • WARNING:
  • WordPress inclut un système de mise à jour automatique
  • Si on modifie un fichier d'un thème,
  • …la mise à jour automatique écrasera ces modifications! :-(
  • ⇒ Il ne faut alors plus faire de mise à jour automatique du thème :-/
  • L'éditeur de code donne la liste des fichiers du thème
  • Nombre de fichiers: de 2 à … plusieurs dizaines ???
  • ⇒ Complexité variable du code des thèmes!

CSS: modifier style.css (Quick and Dirty)

  • Il faut connaître le langage CSS
  • Il est plus propre d'utiliser le plugin Custom CSS

PHP: modifier les fichiers PHP (Quick and Dirty)

  • Il faut connaître le langage PHP
  • Il faut connaître l'architecture d'un thème WordPress
  • Il faut connaître l'API WordPress
  • http://codex.wordpress.org/
  • Méthode officielle:
  • Il est plus propre de créer un “Child Thème”
  • ⇒ WP3+ minimum
  • ⇒ Eviter les thèmes trop anciens

Thèmes: Structure de fichiers

  • Au minimum, un thème contient 2 fichiers:
  • style.css
  • index.php
  • Un thème WP se compose de plusieurs fichiers
  • WP reprend le même principe que les règles CSS pour appliquer le thème
  • Suivant la page demandée
  • WP teste une arborescence de fichiers PHP
  • Dès qu'il trouve le fichier adapté pour la page demandée
  • Il exécute le fichier PHP
  • NOTE: Ce sont les fichiers du thème qui produisent la page web

Thèmes WP: Layout simple

  • style.css
  • index.php
  • header.php
  • footer.php
  • sidebar.php
index.php
<?php get_header(); ?>
 
<div>
    <?php
    if (have_posts()) :
       while (have_posts()) :
          the_post();
          the_content();
       endwhile;
    endif;
?>
</div>
 
<div>
<?php get_sidebar(); ?>
</div>
 
<?php get_footer(); ?>

The Loop

  • Le code “moteur” qui construit le contenu de chaque page est appelé “The Loop”.
  • A partir de l'URL de la page demandée
  • WP retrouve les contenus associés
  • Dans la boucle, on effectue le traitement pour afficher les différents éléments
  • Titre
  • Contenu
  • Tags
  • Catégories
  • Dates
  • Auteur
  • etc…
index.php
    <?php
    if (have_posts()) :
       while (have_posts()) :
          the_post();
 
          the_title();
          the_content();
       endwhile;
    endif;
?>

header.php et footer.php

  • Les fichiers header.php et footer.php doivent construire le début et la fin de la page HTML
  • header.php
header.php
<!DOCTYPE  html>
<html>
<head>
...
</head>
<body>
...
  • footer.php
footer.php
...
</body>
</html>

Themes: Toolbox, Thème de base

Themes: Page Template

  • Utilisation:
  • Quand on crée une Page, il faut choisir les modèles disponibles dans la boite à droite
  • “Ajouter une Page” > “Attributs de la Page” > “Modèles”
  • Codage:
  • Dans le dossier du thème /mon-theme/
  • il suffit de créer un fichier PHP avec une ligne spéciale au début
  • ex:
  • Template Name: Mon Modèle
template-page.php
<?php
/*
Template Name: Snarfer
*/
?>
...

Themes: Post Formats

  • Un article peut être affiché
  • seul
  • en groupe
  • Un thème peut proposer plusieurs “Formats” pour afficher un article
  • Cela permet de rendre moins uniforme l'affichage des articles
  • Utilisation
  • il suffit de choisir le format (dans une boite à droite)
  • “Ajouter Article” > “Format”
index.php
...
if ( has_post_format( 'video' )) {
  echo 'this is the video format';
}
...

Themes: Champs Personnalisés

  • Il est possible d'étendre les informations associés à un article
  • Utilisation
  • “Ajouter un article” > “Options de l'écran” > “Champs personnalisés”
  • Une boite s'affiche en bas pour ajouter un couple “Variable” + “Valeur”
  • http://codex.wordpress.org/Custom_Fields
  • Codage
  • Un thème doit inclure du code PHP pour afficher ces informations
  • exemple:
index.php
<?php $key_1_value = get_post_meta($post->ID, 'key_1', true); ?>

Themes: Child Theme

  • WARNING:
  • Les mises à jour automatiques du code d'un thème écrasent le code existant
  • pas de sauvegarde :-(
  • ⇒ Il faut éviter de modifier directement le code d'un thème
  • Il faut créer un nouveau thème
  • Ajouter la déclaration de “Child Theme”
  • ex: Template: dossier-du-theme-parent
style.css
/*
Theme Name:     Twenty Eleven Child
Theme URI:      http: //example.com/
Description:    Child theme for the Twenty Eleven theme 
Author:         Your name here
Author URI:     http: //example.com/about/
Template:       twentyeleven
Version:        0.1.0
*/
  • En activant le “child theme” à la place du thème parent
  • le moteur WordPress cherche alors en 2 étapes:
  • dans le dossier du “child theme” le fichier PHP utilisable
  • sinon dans le dossier du “parent theme” le fichier PHP utilisable
  • Seuls les fichiers à modifier sont alors copiés dans le dossier du “child theme”
  • Les modifications sont effectuées sur les fichiers du “child theme”
iesa/wordpress/comment-choisir-un-theme-wp/start.txt · Dernière modification: 2012/02/05 22:04 par webmaster
 
Recent changes RSS feed Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki