FormationWordPress DZ WebDays

1

Par Olivier Gobet

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

2Qui ?

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

http://profile.to/oliviergobet/

http://twitter.com/gd6d

http://www.viadeo.com/fr/profile/olivier.gobet

http://www.flickr.com/photos/gd6d/ http://www.dailymotion.com/gd6d

Olivier Gobet

Sarl Gd6d • InnoParc • 32000 Auch

olivier.gobet@gmail.com

www.gd6d.fr

http://www.pinterest.com/gd6d/

Quoi ? 3

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

Le puzzle wordpress4

texte Photos

thème plugins

formulaire, référencementBlog, immobilier,

photographe...

web 2.0

Twitter, Facebook, Google +

service

Lecture PDF, GoogleMap, Youtube,

boutique...

pages et articles

Administration wordpress

services tiers

5

Exemples de personnalisation

6

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 WordPress

8

✤ Logiciel gratuit

✤ Société AUTOMATTIC

✤ Nouvelles versions

✤ Offre de plugins

✤ Le back-office convivial

✤ Présence du blog

✤ Choix de thèmes impressionnant

✤ Google aime WordPress

✤ Sites accessibles aux standards

✤ Site évolutif

Différence entreWordPress.com / .ORG

9

WordPress.com 10

✤ Géré par Automattic✤ Hébergé sur le cloud✤ Pas de configuration✤ Très simple et convivial✤ Maintenances automatiques✤ Fonctionnalités supplémentaires✤ Import / export

✤ Pas de monétisation✤ Peu de thèmes disponibles limités✤ Pas de modification du thème✤ Fonctionnalités limitées

Avantages Inconvénients

gd6d.wordpress.com

WordPress.org 11

Avantages Inconvénients

✤ Géré par vous, ✤ Hébergement libre✤ Simple et convivial✤ Pas de restrictions✤ Thèmes libres✤ Modifications / personnalisation✤ Facilité d’exportation

✤ Coût hébergement✤ Maintenance technique✤ Gestion mise à jour et surveillance

Installation de WordPress

12

Par FTP

✤ Configurer

✤ Récupérer WP

✤ Installation 5 mn

Par Interface hébergeur

✤ Configurer

✤ Récupérer WP

✤ Installation 5 mn

Objectif : faire un site PRO

13

Découverte de 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

14

Niveaux de compétence

15

• 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 entrearticle & page

•Possèdent une date de publication

•Contenus de blog

•Appartiennent à des catégories

• tags, date et auteur

•Un article seul pas en page d’accueil

•Apparaissent dans flux RSS

•Arborescence

•Comme une page «à propos»

•Peut dépendre d’une Page mère

•Peut être en page d’accueil

• «Statique», pas souvent modifiée

16

ARTICLES PAGES

Le Back-office 17

Men

u

Résumé de votre site

Liens entrants

Commentairesrécents

Ecriture rapide d’un article

Ecrire une page 18M

enu

TitrePublier

Zone d’éditionAttribut de

page

Image à la une

Ecrire sa 1ère page

•Connection au back-office

•Ajout d’une page

•Mention du titre «Accueil»

• Ecriture de contenu

•Publication

19

texte page1.txt

Anatomie d’une page20

En-tête Header

Colonne latéraleSidebar

Pied de page Footer

ContenuContent

Mise en formele contenu

• Eviter les blocs

•Découverte de la barre d’outils

• Très important : les styles !!!

21

Objectif : rendre son site attractif

texte page2.txt

Mettre en formeson contenu

22

H3

GRAS

liste à puces

citation

lien

Insertion caractère spécial

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

23

Les widgets

• Activer le plugin «Hello Dolly»

• Désactivation & suppression

• Recherche d’un plugin / extension pour faire des formulaires

• Installation et configuration

24

Extension «SLIMJETPACK»

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

25

Organisation du site

• Les réglages de lecture

• Les pages

•Des widgets pour la page d’accueil

• Le menu

26

Modi!cation de la page d’accueil

Modèle page accueil

Création d’un menu, des pages de contenu, sous pages et catégories

Organiser son site• Ajout d’une «image à la une»

• Ajout de widgets

• Utiliser le widget en HTML: texte avec une image

• Background

27

Personnalisation

Revue de web... 28

Merchant Catalyst

DT Slash Crown

La partie «actualités /blog» : Ecrire un article

29M

enu

TitrePublier

Zone d’édition Format

Catégories

Mots clés

Image à la une

Différence entreCatégorie & Tags

• Les catégories sont visibles dans le plan du site.

•Aident à identifier l’objet du blog

•Aident le lecteur savoir si il est au bon endroit.

•Aident à comprendre le contenu

•Pas de catégories avec un seul article

•Possibilité de sous-catégories

• Les tags sont des mots clés de votre site.

•Sont des micro-données ou des métadonnées

•Normalement plus de tags que de catégories.

30

CATÉGORIES TAGS

La partie «blog»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

31

actu tour de France + pdf + image

Choisir un thème 32

Blog

Magazine Photoblog

Business Portfolio

Créatif Children

E-commerce Corporate

Small Business Music

Valid XHTML / CSS Visible IE6

Framework Fichier psd joint

Jquery Well Documented

Support Page theme Option

Menu déroulant Responsive

Translation ready

Menu WordPress 3 Template

Page shortcode Dummy Text

Galerie images Bouton d’action

Gestion espaces publicitaires

Optimisé plugins Social linkbar

Place de marché 33

Des thèmes pour...

34

Book en ligne

Agent immobilierConsultant

Blog d’entreprise Magazine

...Et les e-boutiques ?

Thème Premium 35

Personnaliser un thème36

Thème Premium 37

Les thèmes responsives38

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://4h18.com/

+ http://wpchannel.com/

39

+ http://www.geekeries.fr/

+ http://wpchannel.com/

+ http://www.wordpress-fr.net/

Des Questions ??

40