www.bxart.be wp niveau 1 Installation Introduction Wordpress est un CMS ce qui signifie : système de gestion de contenu (Content Management System). Il y a d autres CMS mais c est de loin le plus populaire. Sa popularité lui permet de bénéficier du travail de plein de participant qui lui rajoute des fonctions auxquels vous pouvez avoir accès généralement gratuitement. Comment installer wordpress Pour créer un site WordPress professionnel, voici ce dont vous avez besoin : Un nom de domaine Un hébergement Une base de données Dès que ceux-ci sont réunis, vous pouvez copier votre site via FTP. Ensuite lancer l installation. Voila c est fait il ne reste plus qu à personnaliser votre site. En tappant votre URL (www... xxx) vous pouvez déjà voir votre site, sans son contenu bien entendu. Aupparavant, pour créer votre site, vous aviez besoin de beaucoup de connaissances abstraite sur le fonctionnement d internet en général. A présent il ne reste que l installation qui demande des bases en informatique. Pour ce cours, nous avons déjà réaliser cette petite partie. Si vous voulez l apprendre, rendez-vous au niveau 2. Interface Pour vous connecter à votre espace administrateur aussi appelé Back Office, vous devez tapper www.votresite.com/wp-admin. Lorsque vous encodez votre nom et mot de passe, vous vous retrouverez sur le tableau de bord. En haut vous avez la barre d administration, qui est toujours visible même quand vous navigué sur le site(uniquement par vous si vous êtes logger). A gauche le menu avec les fonctions de base. Afin de modifier votre site. Vous avez ensuite le Tableau de bord qui vous propose des raccourci vers les liens les plus important et un résumé de votre site. Quelque soit la page où vous vous trouvez dans votre backoffice, vous avez le bouton «Option de l écran» qui vous permet de modifier ce qui sera visible à l écran. Cliquez dessus et désactiver les «Nouvelles de WordPress» pour l essayer. 1
Installation Theme Le thème est le look de votre site. Il vaut mieux trouver un look proche car la personnalisation n est pas toujours facile. Heureusement il y a des milliers de thèmes gratuit disponible. Cliquez dans le menu de gauche sur «apparence», puis ajouter un thème. Si vous êtes toujours sur la page d accueil vous pouvez aussi appuyer sur «changer complètement de thème». Dans le cadre du cours, nous allons installer Customizr, un des rares à être simple et gratuit mais efficace. Dans la barre de recherche il vous suffira de tapper Customizr, il s affichera et il faudra cliquer sur installer puis sur Activer. Un autre look? Les thèmes gratuits sont généralement médicore aussi il est conseillé si vous souhaitez en utiliser un de tapper par exemple «Top 10 free wedding template wordpress» sur Google afin d éviter les mauvais. Les thèmes payants sont généralement gage de qualité et vous permettent d obtenir directement des fonctions spécifiques : crownfunding, prise de rendez-vous, description de produit,... Themeforest (http://themeforest.net/) est probablement la meilleure ressource pour des thèmes payant. Nous allons travailler avec celui-ci pour des raisons pratique. Rien ne vous empêche d en changer chez vous. Nous allons travailler sur les modifications du theme (aka template) au niveau 1. Au Niveau 2, nous apprenons comment faire des modifications en profondeur grâce au CSS. 2
www.bxart.be wp niveau 1 Menu de gauche Introduction Le menu sur votre gauche permet d accèder à toutes les fonctions qui vous permetteront de réaliser et mettre à jour Articles et pages Les pages et les articles permettent de proposer aux visiteurs de votre site du contenu visuel : photo, vidéo et texte. Les pages sont statiques, ce qui signifie qu elles restent sans Médias Les médias sont les images et documents présents sur votre site. En cliquant dessus, vous pouvez les les afficher ou en Commentaire A la base WordPress était prévu pour du blogging, progressivement il a été possible de réaliser des sites complet avec mais les commentaires sont encore très présent. Apprarence Vous pouvez ici choisir votre thème et le personnaliser. Nous verons les menus et les widgets plus loin. Extensions Les extensions, aussi appelées plugins, permettent de rajouter des fonctions. Nous allons juste Ajouter Google Maps et Contact form 7, afin d avoir une carte et un formulaire de contact sur le site. Pour installer une extension, cliquez sur ajouter, tapper le nom Utilisateurs Ce menu permet de créer des utilisateurs et de determiner leurs roles. Dans le cas d une boutique en ligne, les clients se votre site. Nous avons déjà vu le tableau de bord, il est temps de parler des autres. changer pendant plusieurs années. Les articles sont les news, le blog de votre site. Leurs places sur le site changera en fonction des nouveautés. ajouter. Néanmoins nous ne travaillerons pas par cette méthode fastidieuse. Ce système est utile pour la gestion de fichier. Si vous souhaitez créer une communauté importante et faire réagir votre publique, ce qui n est pas chose aisée, vous pouvez ici accepter ou refuser les commentaires. Attention ne touchez pas à l éditeur. de l extension ou un mot clé, cliquez sur installer et n oubliez pas d activer. Dans extension installée, vous pouvez activer ou désactiver l une ou l autre extension afin de déterminer si elle rend le site instable par exemple. retrouveront eux aussi ici. Règlage Règler les paramètrs de Wordpress et de certains plugin. (Page suivante) 3
Structure et règlage Règlages de base Nous allons à présent optimiser quelques règlages de base. Cliquez sur réglages dans le menu, vous aurez de nombreuses options. Nous n allons parler que de celles qui sont vraiment utiles tous les jours : Dans Général : vous pourrez déterminer le Titre du site et le Slogan. Dans Lecture, vous pouvez déterminer si la page d accueil affiche - Une page statique : votre page d accueil - Une page dynamique avec des articles dont vous pouvez déterminer la quantité qui s affiche par page. Vous pouvez aussi activer ou non votre visibilité pour les moteurs de recherche, vous devrez activer cette option dès que votre site est terminé. Dans écriture, vous pouvez choisir la catégorie de base, évitez «Non classé» car ce terme d affichera dans la barre de Structure La structure générale du menu d un site est la suivante : - Accueil : soit un système de blogging avec les nouveaux articles soit des infos sur le projet présenté sur le site. L interêt d avoir les derniers articles et que les visiteurs verront que le site bouge, et ainsi ils aurront plus facilement envie de revenir. recherche. C est à règler par après car nous n avons pas encore les catégories. Dans option de discussion, vous pouvez déterminer les possibilités d interaction qu ont les visiteurs. Sur la plupart des sites standards, autoriser les visiteurs à publier des commentaires sur les derniers articles n est pas activé. Dans permaliens vous pouvez déterminer les termes qui s afficheront dans la barre de recherche. Les autres options ne sont pas déterminantes pour le moment. - Des informations qui nous sommes, notre environement, des prix gagnés, des détails sur notre matériel, nos inspirations,... - Ce que nous proposons - Un page de contact avec une carte Google Maps Pages ou articles Dans le menu de gauche, vous avez Articles et Pages. En cliquant dessus, vous pourrez voir le titre de toutes vos pages ou articles. La différence entre une page et un article réside dans le fait qu une page est statique et un article est dynamique. Par statique entendez que la page ne changera pas régulièrement, c est là que vous pouvez mettre vos informations personnelles, adresses,... Sur les articles, vous mettrez des événements, des humeurs,... 4
www.bxart.be wp niveau 1 personnalisation des contenus Introduction Lorsque vous écrivez un article, il ne suffit pas d écrire un texte continu. Il faut le mettre en page grâce à l alignement, le style du texte et des médias. Vous avez une liste d effet que vous pouvez Mise en valeur Pour mettre en valeur du texte, il est important d utiliser les titres. Séléctionner du texte, cliquez sur paragraphe puis choisissez la taille de titre souhaité. appliquer nous n allons citer dans que ceux qui fonctionent différement que sur Word. L utilisation du gras à l intérieur du texte peut aussi être utile pour la visibilité. Evitez par contre les couleurs, c est moche. images et alignement Pour rajouter une photo, vous pouvez la glisser sur le contenu. Elle se rajoutera ainsi automatiquement sur le texte. Les options sur la fenêtre qui va s ouvrir sont importantes : L alignement, la taille et le lien. L alignement permet de déterminer si la photo d affiche à droite ou à gauche ou en plein milieu, favoriser des images qui s intègrent au texte. La taille en pixel permet de déterminer la taille d affichaage de l image. Le lien est impérativement à changer, personne ne veut que quand on clique sur l image celle-ci s affiche en mode bibliothèque. Galerie & vidéo Lorsque vous rajouter des photos, vous avez à gauche l option galerie qui vous permet de créer un diaporama. Favorisez la lightbox : un système qui permet de foncer les cotés et de faire Image à la une En bas à droite vous avez l option image à la une, qui vous permet de déterminer quel image s affichera lors de l apercu défiler facilement les photos. Pour rajouter une vidéo : il suffit de copier l url sur le contenu de l article. Visuel et texte Si les modifications que vous réalisées ne correspondent pas à ce que vous souhaitez, vous pouvez passer en mode Texte grâce au bouton en haut à droite de la fenêtre de contenu. Vous verez alors (une partie) du code HTML. Ainsi vous remarquerez que les titres sont des <H> et les listes des <ul><li>. Ce genre de chose se voit en profondeur au niveau 2. Lors du cours n hésitez pas à demander au professeur. 5
Modifier le theme Introduction Vous pouvez modifier à peu près tout mais dans une certaine limite. En cliquant dans le menu de gauche sur Apparence > Reglage globaux Modifier titre et description du site, si ce n est pas déjà fait. Logo et favicon sont important. Le logo se retrouvera à la place du Titre, attention à respecter le format conseillé sous peine de déformation. Le Favicon est la petite icone qui se retrouve à coté du titre de l onglet de votre navigateur. Dans thème, vous pouvez changer la couleur générale. Google Polices vous permet de choisir la typographie, celle-ci aura un impact important sur le mood de votre site. Il s agit de police utilisées directement sur le serveur de google et donc compatible avec tous les ordinateurs. Haut de page Aussi appelé Header, il comprend le logo et le menu. Dans sa version traditionnelle, vous pouvez ainsi enlever les liens sociaux et la description et le voir apparaitre en une seule ligne. Via Design et règlages. Contenu de page Page d accueil est une étape importante tant c est celle qui modifiera le plus le look général de votre site. Nous vous conseillons de garder le template : Slider > 3 images > articles. Complètez les textes, afin de choisir les 3 images vous devez barre latérales Voir widget plus loin pied de page et widgets Le pied de page, aussi appelé footer se divise ici en trois, il vous permet de placer des widget et ainsi obtenir du contenu en bas widgets, menus & options avancées Pas nécessaire pour le moment Personnaliser, vous verez s afficher la page à votre droite. Une série d options triées par lieu où elles apparaissent sur chaque page du site. Il ne manque ici que le slider, nous y reviendrons. Les liens sociaux s afficheront où vous le demanderez. Le reste peut rester tel quel pour le moment. Une autre version du menu est d inclure plus d option et alors le faire passer en deux ligne. Dans Menus, vous pouvez peut-être réactiver le mode Horizontale a la place du verticlae. utiliser des images à la une sur les pages. Disposition des pages et des billets permet de déterminer si vous utiliser des barre latérales ou non de page sur toutes les pages. 6
www.bxart.be wp niveau 1 Menu et widget Menu En cliquant sur apparence puis sur menus Vous pouvez à présent déterminer dans quel ordre vous voulez que les pages apparaissent dans le menu, sans quoi les élements se rajouteront de manière automatique. A gauche vous avez les élements que vous pouvez rajouter. A droite, dans structure du menu, les élements présents (vide pour le moment). Vous allez prendre les pages que vous avez créer et les ajouter dans le menus. Si vous utilisez un blog, rajoutez une catégorie afin que cela génère une page avec les derniers articles de celle-ci. Déterminez enfin dans les règlages du menu, son emplacement. N oubliez pas de cliquer sur enregistrer le menu lorsque vous avez terminé. Widgets Les widgets sont des petites fonctionnalités que vous pouvez rajouter dans votre footer ou dans les fameuses barres latérales. De base de nombreuses fonctions sont activées, vous pouvez les glisser sur le coté gauche pour les désactiver et placer celle dont vous avez besoin. A l inverse si vous voulez rajouter une fonction il suffit de la glisser dans la zone souhaitée. Si vous souhaitez que les barres latérales s affichent, vous devez les règler dans votre thème. 7
Note Prise de note 8