1




Formation
WordPress
DZ WebDays

Par Olivier Gobet



 Organisme de formation enregistré sous le n°73.32.00310.32 auprès du préfet de région de Toulouse
2
Qui ?


  http://twitter.com/gd6d

                                                                                          Sarl Gd6d • InnoParc • 32000 Auch



  http://profile.to/oliviergobet/

                                                                                          olivier.gobet@gmail.com



  http://www.linkedin.com/in/oliviergobet



                                                                                          www.gd6d.fr
                                                   Olivier Gobet
  http://www.viadeo.com/fr/profile/olivier.gobet




  http://www.pinterest.com/gd6d/                     http://www.flickr.com/photos/gd6d/   http://www.dailymotion.com/gd6d
3
Quoi ?
          Conception de site depuis 2000

          Webmaster, gérant SARL

          Spécialiste WordPress depuis 2007

          Formateur

          Conseil WordPress : choix de thèmes,
         plugin, accompagnement
         d’entreprises...

          Auteur de 2 formations vidéo
         Elephorm
4
 Le puzzle wordpress

         texte                 pages et articles   Photos




 thème                Administration wordpress                 plugins

                                                                  formulaire,
Blog, immobilier,
                                                                référencement
 photographe...




           service               services tiers    web 2.0

            Lecture PDF,
         GoogleMap, Youtube,                       Twitter, Facebook,
             boutique...                                Google +
5
Exemples de        6

personnalisation
7




Traduction libre :
A quoi bon créer un site web partir de zéro alors que l’on a à
notre disposition d’innombrables ressources. Travaillons
simplement à réaliser le meilleur assemblage...
10 raisons d’utiliser                                       8

    WordPress

✤   Logiciel gratuit          ✤   Présence du blog

✤   Société AUTOMATTIC        ✤   Choix de thèmes impressionnant

✤   Nouvelles versions        ✤   Google aime WordPress

✤   Offre de plugins          ✤   Sites accessibles aux standards

✤   Le back-office convivial   ✤   Site évolutif
Différence entre       9

WordPress.com / .ORG
10
WordPress.com

Avantages                                 Inconvénients

✤   Géré par Automattic               ✤   Pas de monétisation
✤   Hébergé sur le cloud              ✤   Peu de thèmes disponibles limités
✤   Pas de configuration               ✤   Pas de modification du thème
✤   Très simple et convivial          ✤   Fonctionnalités limitées
✤   Maintenances automatiques
✤   Fonctionnalités supplémentaires
                                            gd6d.wordpress.com
✤   Import / export
11
WordPress.org
Avantages                                 Inconvénients

✤   Géré par vous,                    ✤   Coût hébergement
✤   Hébergement libre                 ✤   Maintenance technique
✤   Simple et convivial               ✤   Gestion mise à jour et surveillance
✤   Pas de restrictions
✤   Thèmes libres
✤   Modifications / personnalisation
✤   Facilité d’exportation
Installation de                                 12

WordPress

Par FTP                 Par Interface hébergeur

✤   Configurer           ✤   Configurer

✤   Récupérer WP        ✤   Récupérer WP

✤   Installation 5 mn   ✤   Installation 5 mn
Objectif :          13
faire un site PRO
Découverte de                                   14

WordPress
+ Fonctionnement : notion de client / serveur
   + Installation
   + Coût
   + Evolution : mise à jour, thème, plugins
+ Tour d’horizon
   + Ce que l’on peut faire
   + Plus difficile (php, css)
   + Standard, compatibilité
+ Notions de base
   + Différences blog / site
Niveaux de                              15

compétence


 • Ecrire une actualité
 • Mettre à jour le contenu
 • Insérer un lien
 • Mettre en forme le contenu
 • Optimiser le référencement
 • Installer un plugin
 • Changer de thème
 • Modifier la présentation (css, php)
Différence entre                                                16

article & page

ARTICLES                        PAGES

• Possèdent une date de         • Arborescence
  publication
                                • Comme une page «à propos»
• Contenus de blog
                                • Peut dépendre d’une Page
• Appartiennent à des            mère
  catégories
                                • Peut être en page d’accueil
• tags, date et auteur
                                • «Statique», pas souvent
• Un article seul pas en page    modifiée
  d’accueil

• Apparaissent dans flux RSS
17
Le Back-office


        Résumé de votre    Ecriture rapide
             site            d’un article
 Menu




         Commentaires
           récents

          Liens entrants
18
Ecrire une page

            Titre
                          Publier
Menu




       Zone d’édition
                         Attribut de
                            page




                        Image à la une
19
Ecrire sa 1ère page


     texte page1.txt



• Connection au back-office
• Ajout d’une page
• Mention du titre «Accueil»
• Ecriture de contenu
• Publication
20
Anatomie d’une page

      En-tête Header



                              Colonne
    Contenu                   latérale
    Content                   Sidebar




        Pied de page Footer
Mise en forme                       21
le contenu

• Eviter les blocs
• Découverte de la barre d’outils
• Très important : les styles !!!

        texte page2.txt



   Objectif : rendre son site
          attractif
Mettre en forme                                22
   son contenu


H3



            GRAS



liste à
puces




                                       citation




  Insertion caractère spécial

                                lien
23
Nomenclature
+ Les pages du site (contenu) : articles et Pages
+ Les thèmes (templates)
   + Site institutionnel : page accueil statique
   + Blogs : mots clés / catégories...
   + Magazine
   + Thème premium
+ Les widgets
+ Les plugins (extensions)
+ Les options de thème
Les widgets                                      24




• Activer le plugin «Hello Dolly»
• Désactivation & suppression
• Recherche d’un plugin / extension pour faire
  des formulaires

• Installation et configuration


      Extension «SLIMJETPACK»
25
Les widgets

+ Répertoire + de 24 000 !
   + Pour chaque besoin, il y a un plugin !
   + Ne pas surcharger
   + Choisir, tester, vérifier
   + Faire développer
+ Tendances
   + Plugins «premium»
   + Mega Plugins
26
Organisation du site




• Les réglages de lecture       Modification de la page d’accueil



• Les pages      Modèle page accueil



• Des widgets pour la page d’accueil

• Le menu     Création d’un menu, des pages de
              contenu, sous pages et catégories
27
Organiser son site
• Ajout d’une «image à la une»
• Ajout de widgets
• Utiliser le widget en HTML:
  texte avec une image

• Background




       Personnalisation
28
Revue de web...




   Merchant       Catalyst




   DT Slash       Crown
La partie «actualités /blog» :           29
Ecrire un article

           Titre
                        Publier
Menu




       Zone d’édition    Format


                        Catégories


                        Mots clés

                        Image à la une
Différence entre                                                    30

Catégorie & Tags
CATÉGORIES                             TAGS

• Les catégories sont visibles         • Les tags sont des mots clés
  dans le plan du site.                 de votre site.

• Aident à identifier l’objet du        • Sont des micro-données ou
  blog                                  des métadonnées

• Aident le lecteur savoir si il est   • Normalement plus de tags
  au bon endroit.                       que de catégories.

• Aident à comprendre le
  contenu

• Pas de catégories avec un
  seul article

• Possibilité de sous-catégories
La partie «blog»                                  31
en pratique

• Ecrire une actualité
• Créer une catégorie
• Créer une page pour les articles
• Ajouter des tags
• Insérer une image et un pdf
• Options : <more>, brouillon, mettre en avant,
  programmer

     actu tour de France
     + pdf + image
32
Choisir un thème

Blog             Valid XHTML / CSS     Menu WordPress 3
Magazine         Visible IE6          Template
Photoblog        Framework             Page shortcode
Business         Fichier psd joint     Dummy Text
Portfolio        Jquery                Galerie images
Créatif          Well Documented       Bouton d’action
Children         Support               Gestion espaces
E-commerce       Page theme Option   publicitaires
Corporate        Menu déroulant        Optimisé plugins
Small Business   Responsive            Social linkbar
Music            Translation ready
33
Place de marché
Des thèmes             34

pour...



Book en ligne
Agent immobilier
Consultant
Blog d’entreprise
Magazine
...
Et les e-boutiques ?
35
Thème Premium
36
Personnaliser un thème
37
Thème Premium
38
Les thèmes responsives
39
Ressources
+ Thèmes
   + http://www.wp-business-theme.com/

   + http://themeforest.net/

   + http://www.woothemes.com/

   + http://www.elegantthemes.com/

+ Plugins
   + Gratuits : http://www.wordpress.org/extend/plugins/

   + Premium : http://codecanyon.net/category/plugins/wordpress

+ Sites utiles
   + http://codex.wordpress.org/      + http://www.geekeries.fr/
   + http://4h18.com/                 + http://wpchannel.com/
   + http://wpchannel.com/            + http://www.wordpress-fr.net/
40




Des
Questions ??

Formation WordPress à Blida

  • 1.
    1 Formation WordPress DZ WebDays Par OlivierGobet Organisme de formation enregistré sous le n°73.32.00310.32 auprès du préfet de région de Toulouse
  • 2.
    2 Qui ? http://twitter.com/gd6d Sarl Gd6d • InnoParc • 32000 Auch http://profile.to/oliviergobet/ [email protected] http://www.linkedin.com/in/oliviergobet www.gd6d.fr Olivier Gobet http://www.viadeo.com/fr/profile/olivier.gobet http://www.pinterest.com/gd6d/ http://www.flickr.com/photos/gd6d/ http://www.dailymotion.com/gd6d
  • 3.
    3 Quoi ? Conception de site depuis 2000 Webmaster, gérant SARL Spécialiste WordPress depuis 2007 Formateur Conseil WordPress : choix de thèmes, plugin, accompagnement d’entreprises... Auteur de 2 formations vidéo Elephorm
  • 4.
    4 Le puzzlewordpress texte pages et articles Photos thème Administration wordpress plugins formulaire, Blog, immobilier, référencement photographe... service services tiers web 2.0 Lecture PDF, GoogleMap, Youtube, Twitter, Facebook, boutique... Google +
  • 5.
  • 6.
    Exemples de 6 personnalisation
  • 7.
    7 Traduction libre : Aquoi bon créer un site web partir de zéro alors que l’on a à notre disposition d’innombrables ressources. Travaillons simplement à réaliser le meilleur assemblage...
  • 8.
    10 raisons d’utiliser 8 WordPress ✤ Logiciel gratuit ✤ Présence du blog ✤ Société AUTOMATTIC ✤ Choix de thèmes impressionnant ✤ Nouvelles versions ✤ Google aime WordPress ✤ Offre de plugins ✤ Sites accessibles aux standards ✤ Le back-office convivial ✤ Site évolutif
  • 9.
    Différence entre 9 WordPress.com / .ORG
  • 10.
    10 WordPress.com Avantages Inconvénients ✤ Géré par Automattic ✤ Pas de monétisation ✤ Hébergé sur le cloud ✤ Peu de thèmes disponibles limités ✤ Pas de configuration ✤ Pas de modification du thème ✤ Très simple et convivial ✤ Fonctionnalités limitées ✤ Maintenances automatiques ✤ Fonctionnalités supplémentaires gd6d.wordpress.com ✤ Import / export
  • 11.
    11 WordPress.org Avantages Inconvénients ✤ Géré par vous, ✤ Coût hébergement ✤ Hébergement libre ✤ Maintenance technique ✤ Simple et convivial ✤ Gestion mise à jour et surveillance ✤ Pas de restrictions ✤ Thèmes libres ✤ Modifications / personnalisation ✤ Facilité d’exportation
  • 12.
    Installation de 12 WordPress Par FTP Par Interface hébergeur ✤ Configurer ✤ Configurer ✤ Récupérer WP ✤ Récupérer WP ✤ Installation 5 mn ✤ Installation 5 mn
  • 13.
    Objectif : 13 faire un site PRO
  • 14.
    Découverte de 14 WordPress + Fonctionnement : notion de client / serveur + Installation + Coût + Evolution : mise à jour, thème, plugins + Tour d’horizon + Ce que l’on peut faire + Plus difficile (php, css) + Standard, compatibilité + Notions de base + Différences blog / site
  • 15.
    Niveaux de 15 compétence • Ecrire une actualité • Mettre à jour le contenu • Insérer un lien • Mettre en forme le contenu • Optimiser le référencement • Installer un plugin • Changer de thème • Modifier la présentation (css, php)
  • 16.
    Différence entre 16 article & page ARTICLES PAGES • Possèdent une date de • Arborescence publication • Comme une page «à propos» • Contenus de blog • Peut dépendre d’une Page • Appartiennent à des mère catégories • Peut être en page d’accueil • tags, date et auteur • «Statique», pas souvent • Un article seul pas en page modifiée d’accueil • Apparaissent dans flux RSS
  • 17.
    17 Le Back-office Résumé de votre Ecriture rapide site d’un article Menu Commentaires récents Liens entrants
  • 18.
    18 Ecrire une page Titre Publier Menu Zone d’édition Attribut de page Image à la une
  • 19.
    19 Ecrire sa 1èrepage texte page1.txt • Connection au back-office • Ajout d’une page • Mention du titre «Accueil» • Ecriture de contenu • Publication
  • 20.
    20 Anatomie d’une page En-tête Header Colonne Contenu latérale Content Sidebar Pied de page Footer
  • 21.
    Mise en forme 21 le contenu • Eviter les blocs • Découverte de la barre d’outils • Très important : les styles !!! texte page2.txt Objectif : rendre son site attractif
  • 22.
    Mettre en forme 22 son contenu H3 GRAS liste à puces citation Insertion caractère spécial lien
  • 23.
    23 Nomenclature + Les pagesdu site (contenu) : articles et Pages + Les thèmes (templates) + Site institutionnel : page accueil statique + Blogs : mots clés / catégories... + Magazine + Thème premium + Les widgets + Les plugins (extensions) + Les options de thème
  • 24.
    Les widgets 24 • Activer le plugin «Hello Dolly» • Désactivation & suppression • Recherche d’un plugin / extension pour faire des formulaires • Installation et configuration Extension «SLIMJETPACK»
  • 25.
    25 Les widgets + Répertoire+ de 24 000 ! + Pour chaque besoin, il y a un plugin ! + Ne pas surcharger + Choisir, tester, vérifier + Faire développer + Tendances + Plugins «premium» + Mega Plugins
  • 26.
    26 Organisation du site •Les réglages de lecture Modification de la page d’accueil • Les pages Modèle page accueil • Des widgets pour la page d’accueil • Le menu Création d’un menu, des pages de contenu, sous pages et catégories
  • 27.
    27 Organiser son site •Ajout d’une «image à la une» • Ajout de widgets • Utiliser le widget en HTML: texte avec une image • Background Personnalisation
  • 28.
    28 Revue de web... Merchant Catalyst DT Slash Crown
  • 29.
    La partie «actualités/blog» : 29 Ecrire un article Titre Publier Menu Zone d’édition Format Catégories Mots clés Image à la une
  • 30.
    Différence entre 30 Catégorie & Tags CATÉGORIES TAGS • Les catégories sont visibles • Les tags sont des mots clés dans le plan du site. de votre site. • Aident à identifier l’objet du • Sont des micro-données ou blog des métadonnées • Aident le lecteur savoir si il est • Normalement plus de tags au bon endroit. que de catégories. • Aident à comprendre le contenu • Pas de catégories avec un seul article • Possibilité de sous-catégories
  • 31.
    La partie «blog» 31 en pratique • Ecrire une actualité • Créer une catégorie • Créer une page pour les articles • Ajouter des tags • Insérer une image et un pdf • Options : <more>, brouillon, mettre en avant, programmer actu tour de France + pdf + image
  • 32.
    32 Choisir un thème Blog Valid XHTML / CSS Menu WordPress 3 Magazine Visible IE6 Template Photoblog Framework Page shortcode Business Fichier psd joint Dummy Text Portfolio Jquery Galerie images Créatif Well Documented Bouton d’action Children Support Gestion espaces E-commerce Page theme Option publicitaires Corporate Menu déroulant Optimisé plugins Small Business Responsive Social linkbar Music Translation ready
  • 33.
  • 34.
    Des thèmes 34 pour... Book en ligne Agent immobilier Consultant Blog d’entreprise Magazine ... Et les e-boutiques ?
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
    39 Ressources + Thèmes + http://www.wp-business-theme.com/ + http://themeforest.net/ + http://www.woothemes.com/ + http://www.elegantthemes.com/ + Plugins + Gratuits : http://www.wordpress.org/extend/plugins/ + Premium : http://codecanyon.net/category/plugins/wordpress + Sites utiles + http://codex.wordpress.org/ + http://www.geekeries.fr/ + http://4h18.com/ + http://wpchannel.com/ + http://wpchannel.com/ + http://www.wordpress-fr.net/
  • 40.