Initiation ++ pour le

(1)

 Initiation ++

(2)

 Tech‐App : Présentation

 Présentation de WordPress

 Installation de WordPress

 Manipulation des thèmes WordPress

 Gestion des contenus

 Catégories et mots clés

 Galerie de photo, vidéos

 Créer des formulaires

(3)

 Le web à tout prix : le sur‐mesure n’est pas un luxe

 Conseil et accompagnement

 Mobilité, portabilité, pour quel métier ?

(4)

• Qu’est‐ce qu’un CMS ?

• Pourquoi choisir WordPress parmi les CMS ? Avantages et inconvénients.

• Quelques exemples de sites utilisant WordPress

• Le site officiel de WordPress

(5)

• Qu’est‐ce qu’un CMS ?

• Pourquoi choisir WordPress parmi les CMS ? Avantages et inconvénients.

• Quelques exemples de sites utilisant WordPress

• Le site officiel de WordPress

Un outil de « CMS » (Content Management System, en français Gestion de contenu) est un site web disposant de fonctionnalités de publication et

offrant en particulier une interface d'administration (back‐office) permettant à un administrateur de site de créer ou organiser les différentes rubriques.

Les articles et le contenu du site sont en principe stockés dans un base de

données, tandis que des templates (modèles de pages) permettant de définir

la présentation du contenu.

(6)

• Facile à installer, plus lourd à gérer

• Configuration assez poussée possible

• Bon équilibre entre les options en natif et plug‐ins disponibles

• Nombreux templates sont disponibles pour débuter avec Joomla

• Très puissant pour les projets légers, statiques ou contributifs (blogs)

• Respectueux des standards

• Rapide à installer

• Ergonomique

• Performance

• Modules haut de gamme

• « Customisation » poussée possible

• Stable et sécurisé, mais nécessite une expérience

18%

14%

25%

(7)

Médias

‐CNN

‐New York Times

‐Le Monde

‐La Presse

‐CBS

‐Time

‐Owni

‐L’actualité

‐ONF

‐The New York Observer

‐Radio Okapi

‐Radio Canada

‐Wall Street Journal

‐Wired

‐TechCrunch

‐GigaOm

‐BoingBoing

‐Forbes

Entreprises

‐Ebay

‐Flickr

‐Yahoo!

‐Ford

‐Sony

‐GE

‐Samsung

‐UPS

‐VW

‐GM

Éducation – HEC Montréal

‐CSDM

‐MIT

‐Harvard

‐Cornell

‐Berkeley

Je choisis …

• Pour un site simple

(sinon, on peut aussi, mais il faut y passer beaucoup plus de temps ou se faire aider)

• Pour un blog

• Lorsqu’on a du temps à y consacrer

• Si thème répond 100% à mes besoins

(8)

www.wordpress‐fr.net/

… et les incontournables :

theme.wordpress.com

www.wp‐business‐theme.com

themeforest.net/category/wordpress Thème

vs

Extension (= « plugin »)

(+ )

(  2600 ) (  32000 )

(9)

 Installer l'environnement de travail en local

 Paramétrage de base

 Installation chez un hébergeur

 Tour d'horizon du tableau de bord

(10)

 Installer l'environnement de travail en local

 Installation chez un hébergeur

 Tour d'horizon du tableau de bord

Apache IIS

fr.wordpress.org/txt‐install  « Installer en 5mn »

Installer WordPress Manuellement sur son serveur

Installer WordPress Automatiquement via les modules hébergeurs Installer WordPress en

Local avec WAMP, MAMP, XAMPP ou Instant WP

MySQL PHP

Langage d’exécution

Base de données Serveur

Fichiers PHP, CSS, JS, HTML

(1)

2

3

(11)

Internet, serveurs, hébergeurs

Je souhaite afficher la page www.gogol.fr

Serveur de noms de domaines Serveur web cher l’hébergeur

Ikoula 1and1 HostPapa OVH

PLanetHoster Infomaniak Amen Gandi Page HTML de www.gogol.fr

Correspond à l’IP 101,233,105,23

CLIENT

FTP

(12)

(13)

http://192.168.1.53/wordpress8

(14)

Le menu d’administration de base

Types de contenu par défaut

Thèmes

Ajouter des fonctionnalités Rôles – privilèges ‐workflows

Paramétrage de base

(15)

 Création d'une page à partir d'un thème spécifique

 Ecriture et paramétrage d'un article

 Ajout d’un menu

 Personnaliser la page d'accueil

(16)

 Création d'une page à partir d'un thème spécifique

 Ajout d’un menu

 Personnaliser la page d'accueil

http://thewordpress.info/top‐wordpress‐theme/

1. Activer / installer un thème

2. « Jouer avec les widgets »

3. Modifier l’en‐tête

4. Choisir un thème responsive

1. Ajeeban 2. Customizr 3. Custom Community 4. Attitude

5. Mantra 6. Clean Retina

7. Spun

8. Asteria Lite 0.8

…etc

5. Personnaliser l’affichage des widgets selon les pages:

1. Display Widgets 2. Widgetize pages Light 3. Custom sidebars 4. Widget Instance

Critères de choix d’un thème

• Fonctionnalités (ex : portfolio, site marchand, blog avec podcasts, etc)

• Grands types de contenu

• Disposition des zones de widgets

• Responsive design ou non

NE PAS CHOISIR pour la typo, les couleurs, les tailles…

TESTER au maximum la configuration du thème :

• Apparence > Personnaliser

• Apparence > options

• Apparence > Widgets

• Explorer les fonctionnalités

DESACTIVER puis DESINSTALLER si tout ne correspond pas à vos attentes Méthode 1 :

Rechercher et installer

via l’admin Méthode 2 :

Installer le zip via l’admin

Méthode 3 :

Dézipper dans /wp‐content/themes

Méthode 4 :

En ligne de commande Rechercher sur les sites recommandés, ex wordpress.org

(17)

1. Créer un menu à partir des pages et catégories

2. Hiérarchiser le menu

3. Insérer un menu personnalisé dans une page spécifique

(18)

1. Choisir une page statique

2. Désactiver les commentaires

(19)

 Rédiger des articles

 Les différences entre les articles et les pages

 Les outils pour modifier le texte et le contenu

 Comment importer du texte de Microsoft Word dans WordPress

 Comment optimiser vos articles pour Google

(20)

 Rédiger des articles

 Les différences entre les articles et les pages

 Les outils pour modifier le texte et le contenu

 Comment importer du texte de Microsoft Word dans WordPress

 Comment optimiser vos articles pour Google

1. Rédiger des articles

2. Modifier des articles par lot

3. Créer quelques pages

4. Changer de thème

5. Ex de personnalisation :masquer les

« meta‐infos »

a) Avec l’extension GENESIS SIMPLE EDITS b) Dans le thème

c) Dans le PHP (templates) d) Avec les CSS

6. Intégrer une vidéo Youtube

7. « Outils > Publier un article »

8. Importer du contenu

(21)

1. Date, auteur

2. Article : Catégories Liste

3. Page : Parent hiérarchique, modèle

(22)

1. Notions HTML : Firebug ou Chrome Inspect

2. CSS : décryptage

(23)

1. Exemple simple

2. Tableau

3. Custom post type

(24)

1. Images

2. Taxonomies

3. Réglages > Permaliens

4. L’extension SITEMAP

(25)

 Comprendre les catégories et mots‐clés

 Comment gérer/ajouter/supprimer les catégories et

mots‐clés

(26)

 Comprendre les catégories et mots‐clés

 Comment gérer/ajouter/supprimer les catégories et mots‐clés

1. Création d’un lexique de mots clés

2. Création de catégories

3. Menu d’après catégories / widget liste déroulante

4. Association d’articles à des catégories

5. Page catégorie

(27)

 Comprendre les catégories et mots‐clés

 Comment gérer/ajouter/supprimer les catégories et mots‐clés

1. Pourquoi choisir des catégories ou des mots clés

2. Le mode hiérarchique

(28)

 Comment ajouter des images à partir de votre ordi ou d’un lien URL dans vos articles et pages

 Comment modifier et placer les images dans vos articles et pages

 Créer, ajouter une galerie

(29)

 Comment ajouter des images à partir de votre ordi ou d’un lien URL dans vos articles et pages

 Comment modifier et placer les images dans vos articles et pages

 Créer, ajouter une galerie

1. Bibliothèque de médias

2. Modifier la taille maximale de fichier (.htaccess)

3. Modifier les tailles d’affichage

(30)

1. Ajouter des visuels à la bibliothèque d’images

2. Qualifier les images :

1. Manuellement

2. Avec WordPress SEO For Image ou SEO‐Friendly Images

(31)

1. Choisir une extension

1. NextGen Gallery 2. Lightbox Gallery 3. FlippingBook Gallery 4. Responsive Photo Gallery

(32)

 Créer, ajouter un formulaire de contact

 Gérer le formulaire, tester l'envoi

(33)

 Créer, ajouter un formulaire de contact

 Gérer le formulaire, tester l'envoi

(34)

 Créer, ajouter un formulaire de contact

 Gérer le formulaire, tester l'envoi

1. Config du serveur SMTP:

1. Easy SMTP Mail 1.2 2. WP SMTP

2. Newsletter 3.5.9

(35)

 Au cœur des fichiers template PHP et feuilles de style CSS

 Présentation des extensions les plus utilisées (GetSocial, Jetpack, Akismet, All in One SEO Pack, Wptouch…)

 Atelier : Choix d’une extension ou d’une personnalisation dans

le code (PHP/CSS)

(36)

 Au cœur des fichiers template PHP et feuilles de style CSS

 Présentation des extensions les plus utilisées (GetSocial, Jetpack, Akismet, All in One SEO Pack, Wptouch…)

 Atelier : Choix d’une extension ou d’une personnalisation dans le code (PHP/CSS)

1. Parcourir le « ROOT » WP

1. Wp‐settings.php 2. Wp‐config.php

2. Les principaux constituants d’un thème :

1. Page.php 2. Page‐blog.php 3. Sidebar.php 4. Header.php 5. Footer.php 6. 404.php 7. Single.php 8. Functions.php

3. Feuilles de style CSS

(37)

 Présentation des extensions les plus utilisées

 SAUVEGARDE – SÉCURITÉ

1. Sauvegarde : WP‐DB‐Backup 2. Akismet

3. Fast Secure Contact Form 4. SI CAPTCHA Anti‐Spam

 SEO

1. WordPress SEO by Yoast 2. Google Analyticator 3. SEO Ultimate 4. Google XML sitemaps 5. Landing sites 6. All in One SEO Pack

 DESIGN

1. Custom Backgrounds for WP 2. Royal Slider

3. WPtouch Mobile (> responsive) 4. NextGEN Gallery

5. Lightbox

 OUTILS DIVERS

1. Live Chat 2. Search and Replace 3. Configurable tag Cloud 4. Widget Logic 5. All In One Favicon

 PERFORMANCES

1. W3 Total Cache 2. WP Performance Pack

 E‐COMMERCE, i18n 1. WP‐eCommerce 2. Woocommerce 3. Cart66Lite 4. Quick Shop

5. qTranslate for WordPress 6. WP‐i18n

 SOCIAL

1. GetSocial 2. Jetpack

(38)

 Présentation des extensions les plus utilisées

(39)

Quelques bonnes pratiques

• Installer / Tester / Désinstaller

• Sauvegarder régulièrement les données (outils > exporter ou via phpMyAdmin)

• Sauvegarder l’ensemble du code avant chaque mise à jour du cœur ou installation d’extension lourde

• Si vous modifiez les CSS du thème ou du cœur, commentez ce que vous supprimez (mieux : surcharge par un CSS

personnalisé, souvent géré par le thème)

Quelques outils

Les extensions CHROME : PLUGIN

SNIFFER et WORDPRESS THEME SNIFFER SublimeText ou Brackets pour l’édition des fichiers CSS / HTML

Client FTP type Filezilla ou CuteFTP

Astuces

• Vider le cache (actualiser la page en vidant les fichiers temporaires) : CTRL + F5 / MAC : ⌘+ R sur Chrome ou commande + option + E sur Safari

• Options cachées

• Ajouter le « Bookmarklet » à votre navigateur

• Si vous n’arrivez plus à afficher le menu administrateur, ajoutez simplement « /wp‐admin » à l’URL de votre site