Initiation ++ pour le

Transcription

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 Extensions de WordPress

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 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 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 Performance Modules haut de gamme «Customisation» poussée possible Stable et sécurisé, mais nécessite une expérience 18% 14% Très puissant s projets légers, statiques ou contributifs (blogs) Respectueux des standards Rapide à installer Ergonomique 25%

7 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 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 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 fr.net/ et les incontournables : theme.wordpress.com business theme.com themeforest.net/category/wordpress Thème vs Extension (= «plugin») ( 2600 ) ( ) (+ )

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 PHP MySQL 3 2 (1) Serveur Langage d exécution Fichiers PHP, CSS, JS, HTML Base de données Installer WordPress en Local avec WAMP, MAMP, XAMPP ou Instant WP Installer WordPress Automatiquement via les modules hébergeurs Installer WordPress Manuellement sur son serveur fr.wordpress.org/txt install «Installer en 5mn»

11 Internet, serveurs, hébergeurs Installer l'environnement de travail en local Installation chez un hébergeur Tour d'horizon du tableau de bord Je souhaite afficher la page Correspond à l IP 101,233,105,23 CLIENT Serveur de noms de domaines FTP Page HTML de Serveur web cher l hébergeur Ikoula 1and1 HostPapa OVH PLanetHoster Infomaniak Amen Gandi

12 Installer l'environnement de travail en local Installation chez un hébergeur Tour d'horizon du tableau de bord

13 Installer l'environnement de travail en local Installation chez un hébergeur Tour d'horizon du tableau de bord

14 Installer l'environnement de travail en local Installation chez un hébergeur Tour d'horizon du tableau de bord 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 Méthode 1 : Rechercher et installer via l admin Méthode 2 : Installer le zip via l admin wordpress theme/ Rechercher sur les sites recommandés, ex wordpress.org Méthode 3 : Dézipper dans /wp content/themes Méthode 4 : En ligne de commande 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 et passer au suivant

17 Création d'une page à partir d'un thème spécifique Ajout d un menu Personnaliser la page d'accueil 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 Création d'une page à partir d'un thème spécifique Ajout d un menu Personnaliser la page d'accueil 1. Choisir une page statique 2. Désactiver les commentaires 3. Choisir un thème responsive

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 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. Date, auteur 2. Article : Catégories Liste 3. Page : Parent hiérarchique, modèle

22 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. Notions HTML : Firebug ou Chrome Inspect 2. CSS : décryptage

23 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. Exemple simple 2. Tableau 3. Custom post type

24 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. 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 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. 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 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. 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 1. Choisir une page statique 2. Désactiver les commentaires 3. Choisir un thème responsive

34 Créer, ajouter un formulaire de contact Gérer le formulaire, tester l'envoi 1. Config du serveur SMTP: 1. Easy SMTP Mail 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 php 7. Single.php 8. Functions.php 3. Feuilles de style CSS

37 Au cœur des fichiers template PHP et feuilles de style CSS Présentation des extensions les plus utilisées Atelier : Choix d une extension ou d une personnalisation dans le code (PHP/CSS) 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 Au cœur des fichiers template PHP et feuilles de style CSS Présentation des extensions les plus utilisées Atelier : Choix d une extension ou d une personnalisation dans le code (PHP/CSS) 1. Choisir une page statique 2. Désactiver les commentaires 3. Choisir un thème responsive

39 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 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