Warning: Declaration of action_plugin_popularity::register(&$controller) should be compatible with DokuWiki_Action_Plugin::register($controller) in /homepages/5/d372632784/htdocs/formation.applh.com/website/lib/plugins/popularity/action.php on line 11

Warning: Declaration of action_plugin_safefnrecode::register(Doku_Event_Handler &$controller) should be compatible with DokuWiki_Action_Plugin::register($controller) in /homepages/5/d372632784/htdocs/formation.applh.com/website/lib/plugins/safefnrecode/action.php on line 66

Warning: Cannot modify header information - headers already sent by (output started at /homepages/5/d372632784/htdocs/formation.applh.com/website/lib/plugins/popularity/action.php:11) in /homepages/5/d372632784/htdocs/formation.applh.com/website/inc/auth.php on line 377

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/5/d372632784/htdocs/formation.applh.com/website/inc/auth.php on line 656

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/5/d372632784/htdocs/formation.applh.com/website/inc/auth.php on line 656

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/5/d372632784/htdocs/formation.applh.com/website/inc/auth.php on line 656

Warning: Cannot modify header information - headers already sent by (output started at /homepages/5/d372632784/htdocs/formation.applh.com/website/lib/plugins/popularity/action.php:11) in /homepages/5/d372632784/htdocs/formation.applh.com/website/inc/actions.php on line 187
ociensa:wordpress:start [Applh.com Formation]

Outils d'utilisateurs

Outils du Site


ociensa:wordpress:start

<html> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"> </script> <script type="text/javascript"> /* <[!CDATA[ */ AppLH={}; AppLH.nbh1=0; AppLH.html_show='<a class="show_start" href="#"><img src="http://formation.applh.com/_media/arrow_curved_blue.png?w=50" /><span>START SLIDESHOW!</span></a>'; AppLH.html_banner2='<div class="show_banner2" style="position:fixed;bottom:0;left:0;width:100%;height:0%;opacity:0.8;background-color:#123456;"><img id="arrow" class="dragok" src="http://formation.applh.com/_media/arrow_curved_blue.png?w=50" style="resize:both;" draggable="true"/><span class="dragok" style="font-size:2em;">1</span><span class="dragok" style="font-size:2em;">2</span><span class="dragok" style="font-size:2em;">3</span></div>'; AppLH.jinit=function(){ jQuery(".page h1") .each(AppLH.count_h1pb) ; AppLH.nbh1=0; jQuery(".toc li.level1 a.toc") .each(AppLH.count_h1) ; jQuery(".page").prepend(AppLH.html_show); jQuery(".show_start").click(AppLH.show_start); jQuery("dl.code dt").prepend('<span class="on-off"><img src="/_media/12-hardware-keyboard.png"/></span>'); jQuery("dl.code dt span.on-off").click(function(){jQuery(this).parents("dl.code").find("dd pre.code").slideToggle();}); jQuery("dl.code dd pre.code").hide(); }; AppLH.show_start=function(){ jQuery(".show_start, .footerinc, .stylehead, .toc, .stylefoot, .license, .secedit").hide(); jQuery("body").animate({"font-size": "150%"}); jQuery(".page h1") .animate({"margin-top": '+240'}) .css({"page-break-before":"always"}) ; jQuery(".page").append(AppLH.html_banner2); jQuery(".show_banner2").animate({height: '10%'}); jQuery(".dragok").draggable(); }; AppLH.count_h1pb=function(){ AppLH.nbh1++; var html1=jQuery(this).html(); html1=AppLH.nbh1+'. '+html1; jQuery(this) .html(html1) ; if (AppLH.nbh1 >0) { jQuery(this) .css({"page-break-before":"always"}) } }; AppLH.count_h1=function(){ AppLH.nbh1++; var html1=jQuery(this).html(); html1=AppLH.nbh1+'. '+html1; jQuery(this).html(html1); }; if (jQuery) { jQuery(AppLH.jinit); } /* ]]> */ </script> </html> {{:ociensa.gif?nolink|}} ====== Formation sur WordPress ====== * Formation en 3 jours * => ~20 heures * Prérequis: HTML, CSS, PHP+MySQL * Formation en **3 parties**: * **Prise en main de WordPress** * **Personnalisation: Thèmes et Plugins** * **Développement: Créer son Thème WordPress** * Supports de formation * http://formation.applh.com/ociensa/wordpress/start ====== Contenu de formation ====== ===== Présentation de WordPress ===== * Principe des gestionnaires de contenu * (ou CMS - Content Management System) et des blogs * Fonctionnalités de WordPress ===== Installer WordPress ===== * Pré-requis pour installer WordPress * Installer WordPress en local ou chez un hébergeur ===== Administrer le site ===== * L'interface d'administration de WordPress * Le tableau de bord, paramètres du site et réglages ===== Rédiger le contenu du site ===== * Créer, modifier une page * Créer, modifier un article * Utiliser l'éditeur de texte * Mettre en forme le texte * Gérer les liens * Insérer des images et du contenu multimedia * Gérer les extraits d'article, les commentaires d'article, modération * Modification des pages de base, création de modèle de pages (spécifique intra) ===== Organiser le contenu du site ===== * Les articles et les pages * Les catégories d'articles : création, gestion * Notion de taxinomie * Gérer les mot-clés des articles ===== Enrichir le site avec les widgets ===== * Principe des widgets, la barre latérale * Installation, configuration et utilisation des widgets * Exemples : galerie de photo, formulaire de recherche, blogoliste, calendrier * Rendre une zone widgetisable (spécifique intra) ===== Gérer la navigation dans le site ===== * La barre de menu * Navigation latérale (widgets de navigation) ===== Enrichir le site WordPress ===== * Fonctionnement des extensions dans WordPress * Lister, chercher les extensions existantes * Rechercher, télécharger et installer une extension * Configurer une extension * Exemple : formulaire de contact ===== Personnaliser l'apparence d'un site WordPress ===== * Définition des thèmes dans WordPress, le thème par défaut * Télécharger et installer un thème * Modifier un thème prédéfini : styles CSS et images * Création de thème WordPress (insertion de son propre code html css) (spécifique intra) ===== Gérer le référencement dans les moteur de recherche ===== * Utiliser une extension pour améliorer le positionnement * Construire le plan du site (sitemap) ===== Administration avancée du site WordPress ===== * Administrer les utilisateurs, gérer les rôles et les droits * Mise à jour de WordPress * Gestion mode connecté non-connecté (spécifique intra) ====== WordPress ====== {{:blue-xl.png?120&nolink|}} * WordPress est un **CMS** (Content Management System) * => Système de Gestion de Contenu * C'est un outil qui permet de créer et gérer des sites web dynamiques * http://en.wordpress.com/stats/ * http://welovewp.com/ * http://wordpress.org/showcase/ * Technologies standards, open-source et gratuit * **Architecture LAMP** * Linux * Apache2 * **PHP5** * **MySQL5** {{:iesa:php-mysql:web-publish-php.png?direct&400|}} ====== Chiffres sur WordPress ====== {{ :ociensa:wordpress:wordpress-market-share.png?direct&300|}} * WordPress est actuellement le CMS le plus populaire * +60 millions de sites WP recensés * propulse +18% de tous les sites internet * occupe +55% en part de marché CMS * Principaux concurrents: Joomla, Drupal * => http://w3techs.com/technologies/overview/content_management/all * => http://trends.builtwith.com/cms * => http://royal.pingdom.com/2013/05/07/wordpress-top-100-blogs/ * L'équipe de développement est employée par l'entreprise **Automattic** * **Automattic** centralise l'écosystème **WordPress.com** * Equipe de développement de **WordPress.org** * => http://Automattic.com * => http://WordPress.com * **WordPress.com** est un plateforme de blogs basée sur **WordPress.org** * => 50 millions de dollars de revenus par an * [[http://allthingsd.com/20120425/automattic-grows-up-the-company-behind-wordpress-com-shares-revenue-numbers-and-hires-execs/|cf. article de All Things Digital (25/04/2012)]] * +200.000 lignes de code PHP * http://www.ohloh.net/p/wordpress {{:ociensa:wordpress:wordpress-code-2013.png?direct&500|}} ====== WordPress en Pratique ====== * WordPress a été créé en 2003 * Outil de Blog initialement * **Evolution en CMS** (depuis WP3.x) * Version en cours (Juin 2013): WP3.6 * 2 versions majeures par an et plusieurs versions mineures suivant les bugs * **WP est essentiellement un moteur CMS** * Il se complète par des **Thèmes** et des **Plugins** * Si on compare avec une voiture |**CMS** |**Voiture**| |WordPress|Moteur| |Theme |Carrosserie| |Plugins |Options| * **WARNING** * **Beaucoup de nouveautés avec la version WP3** * => Eviter les thèmes et plugins qui ne sont pas à jour Quelques liens utiles: * http://pinterest.com/visualoop/wordpress-infographics/ * http://codex.wordpress.org/History ====== Avantages de WordPress ====== * **Facile** à installer et à prendre en main * **Evolutif** suivant l'expérience du webmaster * Possibilité de créer des **sites très variés** * Beaucoup de **thèmes gratuits ou payants** * Beaucoup de **plugins gratuits ou payants** * Nombreux **tutoriels/supports gratuits ou payants** * Idéal pour les sites magazines (~1.000 pages) * Ecosystème très large * Interaction avec de nombreux services en ligne * Nombreux supports en ligne * En Français: * http://www.wordpress-fr.net/ * http://www.insidedaweb.com/wordpress-seo/debuter-avec-wordpress/comment-apprendre-wordpress/ * En Anglais (et aussi Français): * http://wordpress.com/ * http://www.wordpress.tv/ * http://codex.wordpress.org/ ====== Exemple: Choisir WP pour un site d'information ====== * **Videos sur WordPress** (en anglais mais aussi en français) * http://wordpress.tv/ * Un **retour d'expérience** intéressant sur un projet avec **WordPress** * http://www.youtube.com/watch?v=YXuRGPUkQTw <html> <iframe width="560" height="315" src="http://www.youtube.com/embed/YXuRGPUkQTw" frameborder="0" allowfullscreen></iframe> </html> ====== Limites de WordPress ====== * **Configuration** simple * ...mais assez vite **limitée** en passant par les **écrans d'administration** * Mieux si connaissance **PHP5**: le codage de **Plugins** et **Thèmes** est assez facile * **Performances** à améliorer (RAM recommandée +64Mo) * Langues et traductions: * Beaucoup de **Plugins et Thèmes** (**gratuits ou payants**) ne sont disponibles qu'en anglais * => **Bon niveau en anglais requis** ====== Installation Serveur Web en local (WAMPSERVER) ====== Architecture standard LAMP (Linux Apache2 MySQL5 PHP5) {{:lamp-linux-apache2-mysql5-php5.png?direct&200|}} <html> <div style="background-color:#123456;"> <img src="/_media/web/dev/logo-wampserver.png" /> </div> </html> Sur PC on aura WAMP: * Windows * Apache2 * MySQL5 * PHP5 {{:iesa:php-mysql:web-publish-php.png?direct&400|}} ====== Installation de WampServer ====== * http://www.wampserver.com/ * http://formation.applh.com/web/dev/start * Télécharger la dernière version * et puis lancer l'installation. * Dossier cible: C:\WAMP ou D:\WAMP * WARNING: * Eviter le dossier C:\Progam Files\ car il est protégé en écriture * et on aura besoin de de créer/modifier des fichiers après installation... ====== Installation sur hébergement ====== * **Hébergement mutualisé** avec nom de domaine inclus ? * Budget: Moins de 30 euros par an * http://ovh.fr * => Installation de WordPress simplifiée (Module) * http://guide.ovh.com/CommentInstallerVotreModule * De nombreux autres hébergeurs: * http://1and1.fr * etc... ====== Installation en localhost ====== * Télécharger le zip **(version française)** * http://fr.wordpress.org/ * http://fr.wordpress.org/latest-fr_FR.zip * Dézipper * Copier le dossier /wordpress/ * => C:\wamp\www\wordpress\ * Installation du site dans le dossier /wordpress/ * Ouvrir dans un navigateur un premier onglet: * http://localhost/wordpress/ * Un écran d'accueil s'affiche et nous guide pour l'installation de WordPress * Lire les informations * et ensuite appuyer sur le bouton * ... * Un écran nous demande les informations pour se connecter à la base de données MySQL * Ouvrir dans un navigateur un deuxième onglet: * **http://localhost/phpmyadmin/** * Créer la base de données **MySQL** (en charset **utf8_general_ci**) * => **wordpress** * Remplir le formulaire d'installation de WordPress * Host: **localhost** * Database: **wordpress** * User: root * Mot de passe: (vide sur Windows ou root sur Mac) * **Warning**: décocher le choix **site public** * => Il faudra rendre le site public une fois bien avancé * Le site est installé! * (habituellement toute la procédure prend moins de 10 minutes) :-) * **Espace Public** * http://localhost/wordpress/ * **Espace Webmaster** * http://localhost/wordpress/wp-admin/ ====== Wordpress: fichiers et dossiers ====== * Les fichiers et dossiers de wordpress sont presque tous préfixés avec **wp-** * Sauf /**index.php**, /**xmlrpc.php** (fichiers importants) * Sauf **readme.html**, **license.txt** (fichiers pour information) * Les 3 dossiers **/wp-admin/**, **/wp-includes/**, **/wp-content/** sont importants * le dossier **/wp-content/** contient les fichiers personnalisés du site (uploads, themes, plugins) * NOTE: * Il faudra sauvegarder ce dossier **/wp-content/** * **ET** la base de données **MySQL** * => pour avoir un **BACKUP** du site ====== WordPress: Espace public, espace admin ====== * Espace public: * http://localhost/wordpress/ Login (avec cookies) * Espace admin: * http://localhost/wordpress/wp-admin/ * Si le visiteur est identifié * => l'espace public est enrichi d'une barre d'outils et de liens utiles dans la page. ===== Exercices ===== * ** Se connecter** * => http://localhost/wordpress/wp-admin/ * ** Se déconnecter** * => Noter les différences sur la partie publique (barre d'outils, liens, ...) * **NOTE** * **WordPress propose souvent plusieurs liens pour effectuer la même action.** ====== Type de contenu ====== Le noyau WordPress propose de gérer différents types de contenu: * Pages * Menus * Articles * Images * Themes * Widgets * Plugins Généralement: * il y a un écran pour gérer la liste des éléments * et un autre écran plus détaillé pour gérer chaque élément individuellement. ====== Admin: Créer des pages ====== * WordPress est un Content Management System (CMS) * Etapes pour construire un site avec WP: - **D'abord ajouter le contenu** - **Ensuite habiller le contenu** * **Editeur de contenu** * => Formulaire pour gérer le contenu - Titre de la page - Texte de la page * **Barre d'outils** * **Visuel** => Mise en forme (gras, souligné, ...) avec des boutons * **HTML** => Accès direct au code ===== Exercices ===== * **Créer quelques pages** * **Naviguer entre les 3 écrans** * => liste des pages, formulaire de création d'une page et page publiée * **Modifier une page** * **Révisions: historique des modifications** * **Corbeille: Supprimer/Restaurer une page** ====== Admin: Créer des sous-pages ====== * **Organisation du contenu** * => **Hiérarchie de l'information** * A chaque page, on peut attribuer une page parente * Cela permet de créer des sous-pages * => Arborescence des pages ===== Exercices ===== * **Créer quelques sous-pages** * **Naviguer entre les 2 écrans: liste des pages et formulaire de création d'une page** ====== Réglages: Permaliens ====== * Pour améliorer le site, il est utile d'activer les Permaliens * Cela permet de créer des **URLs compréhensibles** au lieu de ?p=123 * ex: http://mon-site.com/ma-page/ * au lieu de http://mon-site.com/?p=123 ===== Exercices ===== * Activer les permaliens sous la forme /%postname%/ ====== Admin: Créer des menus ====== * **Organisation du contenu** * Webmaster => **Hiérarchie de l'information** * Visiteur => **Navigation dans le contenu** * Menus * => Hyperliens * => Liens entre les pages * WordPress tente de gérer les menus automatiquement * Souvent, il est plus simple de créer un menu personnalisé * Ecran avec Drag and Drop des menus * 'Drag and Drop' vers la droite pour créer des sous-menus * **En pratique:** * ** Plusieurs étapes pour mettre en place un menu** - **Créer** un **Menu** en lui donnant un nom - **Ajouter** des éléments au **Menu** - **Organiser** les éléments du **Menu** - **Activer** le **Menu** avec le **Thème** ===== Exercices ===== * **Créer un menu principal** * **Ajouter un sous-menu** ====== Contenus: Rich editor ====== * Barre d'outils * => pour effectuer la mise en page du contenu texte * ex: Gras, Listes, Couleurs, Hyperliens, ... ===== Exercices ===== * Créer une liste * Mettre en Gras certains textes * Ajouter un lien vers une autre page ====== Contenus: Ajouter des media ====== * En plus du texte, on a besoin de publier d'autres media * Ajouter des images (JPEG, PNG, GIF) * Ajouter des documents (ex: PDF) * **WARNING** * La plupart des hébergements ne sont pas adaptés pour le streaming video * Audio (~1 Mo) => OK * Le formulaire de gestion d'une page propose un bouton * => Ajouter/Inserer un media * => Ouvre un panneau avec plusieurs onglets ===== Exercices ===== * **Uploader une image depuis son ordinateur** * **et ensuite Insérer une image dans une page** * **Regarder l'Ecran pour le Gestionnaire de medias** ====== Gérer une galerie de photos ====== * Sur l'écran de création de page * Ajouter des images (JPEG, PNG, GIF) * Aller sur l'onglet Galerie * Il y a plusieurs options pour personnaliser la galerie * Il y a un écran pour aider à configurer les options ===== Exercices ===== * Uploader plusieurs images en meme temps * Insérer une galerie avec les panneaux ====== Gérer une galerie de photos [gallery] ====== * Sur l'écran de création de page * Ajouter des images (JPEG, PNG, GIF) * Ensuite, dans le contenu de la page, ajouter le **shortcode** * **[gallery]** * Il y a plusieurs options pour personnaliser la galerie * Il y a un écran pour aider à configurer les options ===== Exercices ===== * Uploader plusieurs images en meme temps * Insérer une galerie avec le code [gallery] ====== Personnaliser: les shortcodes ====== * **Problématique** * Comment insérer facilement dans le contenu d'une page un composant plus évolué ? * ex: formulaire, video, slideshow, etc... * Pour contourner les codes HTML potentiellement dangereux * Pour simplifier l'écriture de code * **[shortcode]** * => traduction: "Code Raccourci" * => WordPress remplace le shortcode à l'affichage par un bloc HTML * ex: **[gallery]** * => Insère une galerie des photos associées avec la **Page** ou l'**Article** * WordPress propose plusieurs shortcodes * Avec les **plugins**, il est possible d'ajouter ses propres shortcodes * Liens Utiles: * http://wp.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/ ====== Personnaliser: les Plugins ====== * Si on compare avec une voiture |**Site Web** |**Voiture**| |WordPress|Moteur| |Theme |Carrosserie| |**Plugins** |**Options**| * **En Pratique: 2 Etapes** * **Installation** des Plugins intéressants * **Activation** des Plugins utiles * **NOTE** * Souvent un Plugin ajoute un menu pour accéder a un écran de paramètres * Catalogue officiel de Plugins gratuits * http://wordpress.org/extend/plugins/ * Les Plugins du catalogue peuvent être installés directement depuis un écran d'administration. * => Code vérifié mais pas forcement testé * Les Plugins peuvent aussi être téléchargés en format .zip * WARNING: * => Code non vérifié * => Potentiellement dangereux!!! * Les Plugins populaires * http://www.insidedaweb.com/wordpress-seo/plugins-wordpress/wordpress-top-100-plugins/ * Plugins Gratuits ou Payants * La plupart des Plugins sont gratuits * Prix variables suivant la valeur ajoutée * **CONSEIL** * Eviter de trop alourdir le site avec trop de Plugins ===== Exercices ===== * http://wordpress.org/extend/plugins/ * Rechercher un plugin suivant les criteres proposes * Installer un plugin * Activer un plugin * Desactiver un plugin * Supprimer un plugin ====== Plugins utiles: Contact Form 7 ====== * WordPress propose des formulaire pour les commentaires * MAIS RIEN pour les formulaires de contact !!! * Contact Form 7 * http://wordpress.org/extend/plugins/contact-form-7/ * Grunion Contact Form * http://wordpress.org/extend/plugins/grunion-contact-form/ * **IMPORTANT** * Généralement le formulaire de contact est le but pour un site vitrine * => **Toujours vérifier que le formulaire fonctionne correctement!** ===== Exercices ===== * http://wordpress.org/extend/plugins/contact-form-7/ * Installer le Plugin Contact Form 7 * Activer le Plugin * Creer une Page Contact... * ...Et ensuite y ajouter un formulaire de contact ====== Plugins utiles: WParty ====== * Outils pour développeurs * http://wordpress.org/extend/plugins/wparty/ * [part widget="lorem"] ===== Exercices ===== * Ajouter le shortcode [part widget="lorem"] dans une page * Ajouter le shortcode [part widget="lorem" max="200"] dans une page ====== Personnaliser: les Thèmes ====== * Si on compare avec une voiture |**Site Web** |**Voiture**| |WordPress|Moteur| |**Theme** |**Carrosserie**| |Plugins |Options| * **WordPress délègue le rendu graphique au Thème actif** * => Le choix d'un Thème est donc très important * **NOTE** * Un seul Thème est actif pour un site * Un Thème ajoute souvent des fonctionnalités (comme les plugins) * ex: shortcodes supplémentaires * **WARNING** * Vérifier si il peut y avoir des conflits entre les plugins et le thème actif ====== Thèmes gratuits et payants ====== * Catalogue officiel de **Thèmes gratuits** * http://wordpress.org/extend/themes/ * Les **Thèmes** du catalogue peuvent être installés directement depuis un écran d'administration. * Les thèmes peuvent aussi être téléchargés en format .zip * **WARNING: Potentiellement dangereux!!!** * http://themeforest.net/category/wordpress * http://woothemes.com/ * http://www.woothemes.com/themes/free/ * http://www.insidedaweb.com/wordpress-seo/themes-template-wordpress/themes-wordpress-premium-top-90-des-boutiques-independantes/ * **Thèmes traduits en français** * http://www.niss.fr/modeles/ * http://www.niss.fr/telechargements/ ====== Thèmes: choisir un thème adapté ====== * Idéalement... * Un thème devrait fournir plus de **80% du rendu graphique souhaité** * **Objectif** * **Minimiser le travail** entre ce que propose le thème et le résultat attendu * **Suivant les compétences** des acteurs du projet * => Faudra-t-il changer le code du thème ? * **Premier Critère:** * La structure de la page d'accueil * => Composants * => Design * Si possible examiner la page d'accueil du thème avec FireBug * => Code **HTML** de qualité ? * => Code **CSS** personnalisable ? * => Zones de **Widgets** ? * ** Deuxième Critère:** * Combien de Modèles de Pages ? * Templates pour les Articles ? * Templates pour les Tags ? * Templates pour les Categories ? * Templates pour les Archives ? * ... * ** Troisième Critère:** * Page(s) Admin pour personnaliser le Thème ? * => couleurs, polices, composants, widgets, etc... * **Thèmes payants** * Autour de 30$ généralement * Beaucoup d'options * => Plus lourds et plus complexes à prendre en main * => Manuel détaillé ? (souvent en anglais) * => Avantage: Gain de temps sur le développement une fois maitrisé * **NOTE** * Il est souvent plus facile d'enlever des éléments inutiles que d'ajouter des éléments manquants ===== Exercices ===== * http://wordpress.org/extend/themes/ * Rechercher un Thème suivant les critères suggérés * Installer un Thème * Activer un Thème * Désactiver un Thème * Supprimer un Thème ====== Personnaliser: les Modèles de Pages ====== * Les Thèmes peuvent proposer des mises en page différentes * => Pages Templates * Il est alors possible d'associer une page à un Modèle de Page * **AVANTAGE** * **Très pratique** pour créer une page spéciale ===== Exercices ===== * Creer une page * Et associer la page avec un Modele de Page ====== Personnaliser: les widgets ====== * Autour du contenu des pages... * Des **Zones de widgets** peuvent être personnalisées par le webmaster * **IMPORTANT** * Chaque **Thème** définit ses **zones de widgets** * => Changer de Theme peut amener à re-organiser les widgets... * ex: Widget Texte * => Permet d'ajouter un code **HTML** personnalisé * => **Javascript** est aussi accepté dans une balise **<script>** * ex: ajouter un code **Google Analytics** * ex: ajouter une bannière publicitaire **Google Adsense** ===== Exercices ===== * Ajouter un widget Calendrier * Ajouter un Widget Texte * Ajouter un Widget Menu Personnalisé ====== Plugins utiles: Custom CSS ====== * Ce plugin permet d'ajouter son propre code CSS au thème * http://wordpress.org/extend/plugins/safecss/ * Avantages: * Permet de ne pas modifier le code du Thème * Historique des modifications * Correction automatique du code CSS * Limites: * Impossible d'ajouter certains code CSS3 ===== Exercices ===== * http://wordpress.org/extend/plugins/safecss/ * Installer et activer le Plugin * Aller sur la page de configuration du Plugin * Ajouter du code CSS pour modifier le rendu de la page d'Accueil ====== Ajouter des articles ====== * Pourquoi des Pages et des Articles ??? * Quelle est la différence entre les pages et les articles ??? * Comparaison * Différence entre les Livres et les Magazines/Journaux * Business Model typique des sites internet: * Insertion de panneaux publicitaires * Le public lit plus souvent des magazines que des livres * Pour le webmaster ou editeur de contenus: * Plus facile de produire des petits contenus régulièrement ====== Ajouter des tags ====== * Les **Tags** proposent aux visiteurs des itinéraires de lecture **suivant un centre d'intérêt** * Les **Tags** améliorent la **densité de mots-clé** dans les pages * **Optimisation du Référencement** (**SEO**) avec les moteurs de recherche * **Google** * **Bing** ====== Site Dynamique: Création automatique de pages ====== * WordPress est un CMS très apprécié car il crée des pages supplémentaires à partir du contenu des articles. * => Renforce le nombre de pages référencées par Google * => Renforce le Search Engine Optimization (SEO) ====== Ajouter des catégories ====== * Les Catégories proposent aux visiteurs des itinéraires de lecture suivant un centre d'intérêt * Les Catégories améliorent la densité de mots-clé dans les pages * En doublon avec les Tags... car historiquement présent dans WP avant les Tags ====== Gestion des commentaires ====== * WordPress propose une gestion fine des commentaires * ON/OFF au niveau du site (règle générale) * ON/OFF au niveau des articles (exceptions) * Threads ou discussion: les commentaires peuvent être hiérarchisés ====== Plugins utiles: Antispam Akismet ====== * Besoin d'une clé fournie avec un compte WordPress.com * http://wordpress.org/extend/plugins/akismet/ ====== DEV: Création Thème WordPress ====== * Créer un **Thème** pour WordPress est assez simple. * Il faut des compétences en **PHP, HTML, CSS et Javascript** * http://yoast.com/wordpress-theme-anatomy/ {{:ociensa:wordpress:anatomy-wordpress-yoast.png?direct&100|}} ====== DEV: Le minimum d'un thème WordPress ====== * Dans le dossier **wp-content/themes/**, il faut créer un nouveau dossier pour votre thème. * Par exemple: **mon-theme** <code> /wp-content/themes/mon-theme/ </code> * Ensuite, dans ce dossier **mon-theme** il faut au minimum 2 fichiers: * **style.css** * **index.php** <code> /wp-content/themes/mon-theme/style.css /wp-content/themes/mon-theme/index.php </code> * Le fichier **style.css** doit commencer par une entête spéciale: <code css style.css> /* Theme Name: Mon Thème Author: LH Version: 1.0 */ </code> * Ce sont ces informations qui seront détectées par WordPress et qui constituent la déclaration d'un thème. * D'ailleurs, On retrouvera ces informations dans l'écran administration des thèmes. * Le fichier **index.php** est utilisé pour afficher le contenu HTML de la page. * Pour le moment, le fichier **index.php** est vide, donc si on active le thème, la partie publique affichera ... une page vide :-P <code php index.php> </code> * Si on ajoute une ligne, on voit que toutes les pages vont afficher ce même contenu :-P <code php index.php> MON THEME </code> * VOILA! * C'EST LE MINIMUM POUR AJOUTER UN THEME A WORDPRESS :-) ====== DEV: Afficher le contenu dynamique ====== * Il n'y a pas grand intérêt à afficher le même contenu sur toutes les pages :-P * Il faut pouvoir maintenant afficher le contenu de la base de données (BDD). * WordPress fournit un ensemble de fonctions PHP pour réaliser simplement la génération dynamique de la page HTML. ====== API: The Loop ====== * Grâce à l'API de WP, * il faut écrire seulement quelques lignes de code pour générer le contenu dynamique :-) <code php loop.php> <?php if (have_posts()) : while (have_posts()) : the_post(); the_content(); endwhile; endif; ?> </code> * On mettra ce code dans le fichier loop.php <code> /wp-content/themes/mon-theme/loop.php </code> * (cf. http://codex.wordpress.org/The_Loop_in_Action) * Mais pour le moment, ce fichier loop.php n'est pas utilisé par le thème WP. * Il faut faire appel à une autre fonction de l'API WP: * **get_template_part** ====== API: get_template_part ====== La fonction get_template_part permet d'inclure d'autres fichiers du thème. Cela permet de construire de manière modulaire le thème. On pourra donc définir une charte graphique et ré-utiliser les éléments communs sans avoir à ré-écrire le code plusieurs fois. On utilise donc cette fonction dans le fichier index.php pour utiliser le fichier loop.php. Ce qui donne: <code php index.php> MON THEME get_template_part('loop'); </code> Maintenant, les pages publiques du site affichent le contenu dynamique, suivant chaque page ou article. :-) (cf. http://codex.wordpress.org/Function_Reference/get_template_part) Mais c'est encore un rendu trop simple et non conforme au format HTML. Il reste du travail pour créer une vraie page HTML... ====== Editeur de Thème WP ====== * Editeur intégré de code PHP pour les administrateurs * Possibilité de modifier le code des thèmes et des plugins * **WARNING** * IL NE FAUT PLUS FAIRE DE MISES A JOUR AUTOMATIQUES!!! * LES MODIFS DE CODE SONT ECRASEES :-/ * http://codex.wordpress.org/Theme_Development * **METHODE PROPRE** * CREER UN "CHILD THEME" * http://codex.wordpress.org/Child_Themes ====== DEV: hiérarchie des fichiers d'un thème WP ====== * http://codex.wordpress.org/Template_Hierarchy * style.css * index.php * functions.php * get_template_part() * get_header() * get_footer() * single.php * page.php * tag.php * etc... {{:wordpress:wp-template-hierarchy.png?direct&400|}} ====== DEV: Ajouter une Zone de Widgets ====== * **EN PRATIQUE: 2 Etapes** * **Declarer une zone de Widgets** * http://codex.wordpress.org/Function_Reference/register_sidebar * **Inserer la zone de Widgets** * http://codex.wordpress.org/Function_Reference/dynamic_sidebar * http://codex.wordpress.org/Widgetizing_Themes ===== Exercices ===== * Installer et activer le thème Toolbox * http://wordpress.org/themes/toolbox * Modifier le code pour ajouter une zone de Widgets ====== DEV: Creer un Modele de Page ====== * Pour effectuer une **mise en page différente** sur une page * Le plus simple est de créer un Modèle de Page * https://codex.wordpress.org/Page_Templates <code php template-page-custom.php> <?php /* Template Name: My Custom Page */ <h1>CUSTOM PAGE</h1> // get_header(); // get_template_part('loop'); // get_footer(); </code> ===== Exercices ===== * Partir d'un modele de Page du Theme ToolBox * Copier le code dans un nouveau fichier * Changer le nom du Template * Changer le code HTML, PHP, etc... ====== Plugins Avancés: Custom Post Types UI ====== * WordPress3.x propose d'étendre les types de contenu gérés * par défaut: pages, articles, media * Les thèmes spécialisés peuvent ajouter de nouveaux types de contenu * Certains plugins permettent de gérer des types de contenu personnalisés * Custom Post Type UI http://wordpress.org/extend/plugins/custom-post-type-ui/ * Types - Custom Fields http://wordpress.org/extend/plugins/types/ ====== WordPress: Sauvegarde du contenu ====== * WordPress garde le contenu du site dans 2 endroits * La base de Données MySQL * le dossier /wp-content/ * Le dossier /wp-content/ contient plusieurs sous-dossiers * /wp-content/uploads/ * /wp-content/themes/ * /wp-content/plugins/ * Pour faire un backup complet du site, il faut donc sauver * la Base de Données (BDD MySQL5) * et le dossier /wp-content/ ====== Plugins: WP DBManager ====== * Pour améliorer la sécurité de votre site internet, il faut faire une sauvegarde régulièrement. * Pour simplifier cette tâche, il y a des plugins... * ...pour créer une sauvegarde de la Base de Données (BDD) MySQL * http://wordpress.org/extend/plugins/wp-dbmanager/ * => Possibilité d'exporter la BDD dans un fichier * Crée un dossier /wp-content/backup-db/ * Il faut protéger ce dossier avec un fichier .htaccess * fichier à copier sur le serveur * et ensuite renommer .htaccess <code txt htaccess.txt> deny from all </code> * Permet d'envoyer par mail une copie de la Base de Données * Avantages: * Automatique (réglage ... tous les jours, semaines ou mois) * Copie en dehors du serveur * Copie sur le serveur * => Tout est dans le dossier /wp-content/ ====== Transfert de Localhost vers hébergement ====== * Souvent on développe un site en local (http://localhost) * Ensuite une fois finalisé, on veut le transférer sur un hébergement * Problèmes: * En local, généralement, on installe wordpress dans un dossier /wordpress/ * Sur l'hébergement, on veut y accéder directement * avec le nom de domaine http://mon-domaine.com/ :-) * et pas http://mon-domaine.com/wordpress/ :-( * Manipulations du fichier SQL * Prendre le fichier SQL créé par le plugin WP DBManager (cf. plus haut) * /wp-content/dbmanager/*.sql * Prendre le fichier .sql le plus récent * Ouvrir le fichier avec un éditeur de texte * Faire un rechercher+remplacer * de http://localhost/wordpress/ * en http://mon-domaine.com/ * Modifier le fichier /wp-config.php et y ajouter <code> ... define('WP_SITEURL', 'http://example.com'); define('WP_HOME', 'http://example.com'); ... /* That's all, stop editing! Happy blogging. */ </code> * On peut alors copier tous les fichiers sur le serveur * sur le serveur, se connecter à la partie administration * http://mon-domaine.com/wp-admin/ * Restaurer le dernier backup SQL * Conclusion: * C'est un peu compliqué et technique :-/ * Il vaut mieux installer le site sur le serveur dès le début... * ... et travailler directement sur le site en ligne !!! * WARNING * Certains plugins stockent des informations dans la table wp_options * PB avec la serialization des tableaux * => compression des donnees * => RECHERCHE+REMPLACE PROVOQUE DES ERREURS :-/ * Plugins Utiles pour la migration: * => http://wordpress.org/extend/plugins/wp-migrate-db/ * => http://wordpress.org/extend/plugins/wordpress-move/ * => http://wordpress.org/extend/plugins/duplicator/ * => http://ithemes.com/purchase/backupbuddy/ (PAYANT) ====== Mises a jour de WP, des Plugins et des Thèmes ====== * Il y a des corrections régulières suivant les problèmes découverts * Environ tous les 6 mois, il y a une mise a jour plus importante * Il est possible d'installer les mises a jour depuis l'interface d'administration ===== Exercices ===== * Aller sur la page des Mises à jour * Effectuer une Re-installation ====== Référencement: SEO ====== * Il est possible d'installer un Plugin pour le SEO * http://wordpress.org/plugins/wordpress-seo/ * ... il y en a d'autres... ====== Référencement: Sitemap ====== * Il est possible d'installer un Plugin pour creer le SiteMap * http://wordpress.org/plugins/google-sitemap-generator/ * ... il y en a d'autres... ====== WordPress: Multi-Users et Multi-Sites ====== * WordPress permet à une personne de créer et gérer son site internet * Pour produire plus de contenus... * ...il est souvent plus pratique de travailler en équipe * Il faut alors séparer les rôles * => Gestion d'un rôle par utilisateur * Administrateur * Editeur * Auteur * Contributeur * Abonné * Chaque rôle a les droits réservés * pour accéder à certaines parties de l'administration du site * Développeur => Administrateur * Graphiste => Editeur * Rédacteur en chef => Editeur * Auteur confirmé => Auteur * Auteur débutant => Contributeur * Membre => Abonné ====== WordPress MS: Installation Multi-Sites ====== * Avec une seule installation de WordPress * Il est possible de transformer son site en "plateforme" multi-sites * Exemple: http://wordpress.com * 2 modes possibles: * Sous Domaines: * http://site1.domaine.com * http://site2.domaine.com * etc... * Dossiers: * http://domaine.com/site1 * http://domaine.com/site2 * etc... * Tous les sites sont créés avec une seule Base de Données (BDD MySQL5) * WARNING: Il faut un hébergement solide pour plus de 100 sites !!! ====== Outils externes: XMLRPC API ====== * WordPress inclut une API XMLRPC * cette interface permet de contrôler un site WordPress depuis un outil externe * Il faut cocher cette options dans "Réglages" > "Ecriture" > cocher "XML-RPC" * http://en.support.wordpress.com/apps/ * PC * Mac * iOS * Android * Blackberry ====== Plugins: Forum BBPress ====== * BBPress permet d'étendre le site wordpress avec une section Forum * http://wordpress.org/extend/plugins/bbpress/ ====== Plugins: Réseau Social BuddyPress ====== * BBPress permet d'étendre le site wordpress avec les fonctions typiques d'un réseau social * http://wordpress.org/extend/plugins/buddypress/ * http://buddypress.org/


Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/5/d372632784/htdocs/formation.applh.com/website/inc/auth.php on line 656
ociensa/wordpress/start.txt · Dernière modification: 2013/05/27 09:10 par webmaster