Cours 2

1. Cours 2 Installer un thème visuel Personnaliser le thème Créer nos pages Créer nos menus Personnaliser l’accueil Créer notre blogue

2. Installer WordPress sur un MAC • La documentation officielle de WordPress : https://codex.wordpress.org/Installing_WordPress_Locally_on_Your_Mac_With_MAMP • La documentation officielle pas disponible pour Windows

3. thème Visuel Installer Customizr

4. Les thèmes visuels Thèmes préfabriqués Thèmes personnalisés Couteux en temps ou en argent Nécessite des connaissances en HTML, CSS, JavaScript, PHP, MySQL Aucun limite Site unique Ma suggestion : Faites affaire avec des professionnels • Peu coûteux ou gratuit • Grand choix • Limité au niveau de la personnalisation • Faire attention à trouver un thème « responsive » • Difficile de juger de la qualité du thème sans connaissances techniques. • Ma suggestion : themeforest.net

5. Où télécharger des thèmes? • Site officiel de WordPresshttp://wordpress.org/themes/ • Beaucoup de choix • Installation facile pour les thèmes gratuits • ThemeForesthttp://themeforest.net/ • Beaucoup de choix • Thèmes habituellement de qualité • Plusieurs avis d’acheteurs précédents • WooThemeshttp://www.woothemes.com/ • Collection de thème de commerce électronique pour le module WooCommerce • ElegantThemeshttp://www.elegantthemes.com/ • Accès 87 thèmes pour un prix assez bas

6. Installer un thème manuellement • Télécharger les fichiers du thème (dossier au nom du thème) • Dirigez-vous dans votre installation de WordPress. • C:\ • Program Files (x86)\ • EasyPHP-DevServer-14.1VC11\ • modules\ • Wordpress380x140216193045(ce nom va changer selon votre installation) • Dirigez-vous ensuite dans \wp-content\themes. • C’est la que sont conservés tous les thèmes disponibles pour votre site. • Il suffit de déposer le dossier du thème à cet endroit pour le rendre accessible.

7. Activer un thème visuel • Connectez-vous au panneau d’administration de votre site. • Dans le menu de droite, survoler le menu Apparence puis cliquez sur Thèmes. La liste des thèmes installés va apparaitre. • Survolez avec la souris l’image du thème que vous désirez activer. Puis cliquez sur le bouton Activer. • Le thème actif affiche une barre noir avec la mention Activé et un bouton permettant de personnaliser le thème.

8. Customizr Thème populaire Gratuit Flexible Responsive (S’adapte aux plateformes mobiles) Compatible avec WooCommerce (commerce électronique) Compatible avec bbPress (forum)

9. Installer le thème Customizr sans intervention manuelle • Dans l’administration, allez dans le menu Apparence / Thèmes. • Cliquez sur le bouton Ajouter à la droite du titre de la page dans le haut. • Dans la boite de recherche, entrer le mot Customizrpuis cliquez sur le bouton Recherche.

10. Installer le thème Customizr • Le thème Customizr apparaitra comme résultat. Cliquez sur Installer maintenant.

11. Installer le thème Customizr • Une fois installé, cliquez sur Activer. • Une fois activé, cliquez ensuite sur Voir le site.

12. Personnaliser Customizr • Dans le haut du site, dans la barre d’administration, cliquez sur le bouton Customiz’it! pour accéder aux options de personnalisation du thème.

13. Options à changer • Thème • Choisir Bleu • Cocher Afficher la bordure en haut de page • Logo & Favicon • Aller chercher les images sur michaeladam.ca • Titre de site et description • Titre : WP Construction • Slogan : La construction sans la corruption! • Page d’accueil • On y viendra plus tard!

14. Options à changer • Navigation • On y viendra plus tard! • Disposition des pages • Cocher Afficher le fil d’Ariane • Choisir la structure globale par défaut : Pas de barres latérales : pleine largeur • Choisir la structure par défaut des billets : Barre latérale à droite • Choisir la structure par défaut des pages : Pas de barres latérales : pleine largeur • Commentaires • S’assurer de ne pas autoriser les commentaires sur les pages. • Liens sociaux • Entrer vos page de média sociaux ici au besoin.

15. Arborescence Créer nos pages et notre menu

16. Premier étape : L’arborescence • L’arborescence est le plan de base de notre site. • On y liste nos pages et on les regroupe en section. • C’est important de faire une arborescence au tout début du projet. • On pourra la modifier en cours de projet au besoin.

17. Notre arborescence

18. Configurer les Permaliens • Aussi appelé • Adresse de la page • URL • Menu Réglages / Permaliensdans le panneau d’administration. • Cocher Nom de l’article puis Enregistrer les modifications. • Cette méthode est meilleurs pour le SEO (Optimisation pour les moteurs de recherche) • C’est la page magique! Si jamais les menus de votre site cessent de fonctionner, allez réenregistrer cette page. Il se peut que cela rétablisse la situation.

19. Créer nos pages • Section Pages de l’administration de WordPress • Entrez le titre de la page dans le champ tout en haut. • Le permalien de la page se génère automatiquement à l’aide du titre. Vous pouvez l’éditer pour l’optimiser au niveau des moteurs de recherche. • Vous pouvez choisir la mise en page de la page à l’aide du bloc Option de structure à droite. • Habituellement, la mise en page est gérée par le bloc Attributs de la page et le champ Modèle. Le bloc Option de structure est propre au thème Customizr. • Le champ Parent permet d’organiser votre liste de pages et de générer automatiquement des menus dans le cas d’un site sur mesure.

20. Options de l’écran • En haut à droite, vous trouverez un petit onglet nommé Options de l’écran. • Vous pouvez cocher des options pour faire apparaitre des champs supplémentaires. • Cliquez sur Discussion. Un nouveau bloc Discussion apparait dans le bas de la page. • Décochez Autoriser les commentaires.

21. L’éditeur de texte • Les pages sont gérées à l’aide d’un éditeur de texte. • Le mode Visuel permet de prévisualiser la mise en page alors que le mode Texte permet de voir le code. • Cliquez sur le dernier icone de la barre d’outil pour afficher tous les outils de l’éditeur. • Formatage de base (gras, italique, barré, soulignée) • Liste à puces (ordonnées et non ordonnées) • Alignement du texte (gauche, centre, droite, justifié) (toujours à gauche SVP!) • Liens • Titre et paragraphe • Couleurs du texte • Coller du texte à partir de Word • Insérer une image ou un document

22. Publier notre page • État • Brouillon (pas visible) • En attente de relecture (pas visible) • Publiée (visible) • Visibilité • Public (tout le monde peut voir la page) • Protégé par un mot de passe (on doit entrer le mot de passe pour afficher la page) • Privé (on doit être connecté pour voir la page) • Publier • Permet de choisir une date à l’avance pour afficher une nouvelle page ou des modifications à une page. (exemples.: lancement d’une promo, concours, campagne de publicité, annonce qui doit être faite à une date précise)

23. Créer les pages • Supprimez la page Sample Page avant commencer. • Les pages supprimées se retrouve dans la corbeille. • Utilisez le site lipsum.com pour remplir temporairement vos pages. • Il n’est pas nécessaire de créer la page d’accueil et de blogue pour l’instant. On y reviendra. • Utilisez la structure Pas de barres latérales : pleine largeur. • Choisissez bien le bonne pageparente pour chacune des pages. • N’oubliez pas de ne pas autoriser les commentaires.

24. Notre arborescence

25. Créer le menu • Dans le panneau d’administration, dirigez-vous dans Apparence/Menus. • Par défaut, toutes les pages créées jusqu’à maintenant seront listées. Il ne reste qu’à les réorganiser. Utiliser la méthode « glissez-déposez » pour réorganiser l’ordre des menus et des sous-menus. • Cochez ensuite Emplacements du thème : Menu principalpour indiquer à WordPress que l’on veut utiliser ce menu à l’emplacement du prévu pour le menu principal dans le thème. • Une fois cela fait, renommer le menu Menu principal et cliquez sur Créer le menu.

26. Personnaliser l’accueil • Créez une nouvelle pages dans le site nommée Message d’accueil avec le contenu suivant :[Logo – aligné à gauche] WP Construction est une entreprise spécialisée dans le design, la conception et la réalisation de gratte-ciels, de skyscrapers et de tours à bureau. • Dirigez-vous dans Apparence/Personnaliser. • Page d’accueil • Affichages de la page d’accueil : Une page statique • Page d’accueil : Message d’accueil • Régler la structure de la page d’accueil : Pas de barres latérales : pleine largeur

27. Diaporama (carrousel) de l’accueil • Allez sur michaeladam.catélécharger les 3 grandes images d’édifices. • Dirigez-vous ensuite dans la section Médias/Ajouter du panneau d’administration et envoyer dans la bibliothèque les 3 images. • Cliquez sur Modifier l’image Buildings1. • À la section aux Options du diaporama, sélectionnez YES à la question Ajouter à un diaporama.

28. Slide Architecture • Texte du titre : Pour des édifices plus beau! • Texte complémentaire : Le design architectural est au cœur de nos préoccupations. • Couleur du titre et du texte : Noir • Texte du bouton : Services d’architecture offerts • Choisir une page : {page} Architecture • Choisir un diaporama : Carrousel d’accueil • Cliquez sur Mettre à jour

29. Slide Génie Civil • Texte du titre : Pour des édifices mieux conçus! • Texte complémentaire : Nos ingénieurs ont pensé des centaines de projets en tout genre. • Couleur du titre et du texte : Noir • Texte du bouton : Services de génie civil offerts • Choisir une page : {page} Génie civil • Choisir un diaporama : Carrousel d’accueil + Ajouter un diaporama • Cliquez sur Mettre à jour

30. Slide construction • Texte du titre : Pour des édifices mieux construits! • Texte complémentaire : La construction est notre spécialité. • Couleur du titre et du texte : Blanc • Texte du bouton : Services de construction offerts • Choisir une page : {page} Construction • Choisir un diaporama : Carrousel d’accueil • Cliquez sur Mettre à jour

31. Choisir le carrousel de l’accueil • Dirigez-vous dans Apparence/Personnaliser. • Page d’accueil • Choisir un diaporama pour la page d’accueil : Carrousel d’accueil • Cochez Diaporama en pleine largeur • Délai entre les diapos : 3000 (1000 = 1 seconde)

32. Pages mises de l’Avant • Sous le carrousel, nous avons la possibilité de mettre 3 pages de l’avant. • Dans la section Personnaliser, activez Afficher des pages en avant sur la page d’accueil. • Cochez Afficher les images. (Gérées avec les Images à la une des pages) • Page à la une No 1 : Gratte-ciel • Page à la une No 2 : Skyscraper • Page à la une No 2 : Tour à bureau • Vous pouvez préciser le texte à afficher sur l’accueil pour les 3 pages en utilisant les 3 champs Texte de la page à la une No X. Par défaut, le thème va prendre le début du texte de la page. • Aller ajouter une image à la une dans chacune des 3 pages pour compléter l’accueil.

33. Créer le blogue • Aller dans Articles/Catégories. • Ajouter une nouvelle catégorie nommé Blogue. • Laissez les autres champs vides et cliquez sur Ajouter une nouvelle catégorie. • Dirigez-vous dans Apparence/Menus. • Ajouter la catégorie Blogue au menu. • Pour ce faire, cliquez sur Catégories à gauche puis sur l’onglet Afficher tout. • Cochez Blogue et cliquez sur Ajouter au menu. • Déplacez le menu Blogue où vous souhaitez l’avoir et cliquez sur Enregistrer le menu.

34. Entrez des articles dans le blogue • Allez dans Articles/Ajouter. • Nommez l’article Mon premier article. • Copiez du Loremipsumpour le texte. • Cochez la catégorie Blogue. • Choisissez une Image à la une quelconque. • Cliquez sur Publiez. • Attention! Tous vos articles devront avoir la catégorie blogue cochée pour apparaitre dans la section Blogue. • Ajoutez un deuxième article pour le plaisir.

35. Programmer la page contact • Au prochain cours!

36. Devoir pour le prochain cours • Designer un logo et un favicon • Créer votre arborescence • Écrire vos textes • Choisir quelques images