WordPress est un CMS (Content Management System), c'est-à-dire une plateforme de création et d'hébergement de sites web, dont l'objectif est de permettre à l'utilisateur d'administrer et de modifier son site facilement et gratuitement. Son intérêt repose sur le fait qu'elle vous permet d'éviter de devoir construire le back-end de votre site (base de données, pages de connexion, communication des données).
Dit plus simplement, WordPress accélère grandement la création d'un site internet, car il n'y a pas besoin de s'embêter à créer toute la structure qui fera fonctionner votre site. Lorsque vous configurez votre site avec WordPress, vous avez accès à un panneau de contrôle qui vous permet de quasiment tout modifier sans code.
Cerise sur le gâteau, WordPress est entièrement gratuit à l'utilisation !
Pourquoi WordPress et pas un autre CMS ?
WordPress n'est pas le seul système de création qui existe. On peut notamment citer Drupal et Joomla, qui sont des alternatives intéressantes, et il existe de nombreux autres CMS bien conçus. Voici néanmoins pourquoi nous avons choisi de nous concentrer sur WordPress :
La diversité : WordPress est conçu pour de nombreuses applications. Le logiciel est certes un peu plus ardu à prendre en main que d'autres CMS, mais il peux répondre à quasiment tous les besoins que vous pourriez avoir.
La documentation : WordPress dispose d'une des plus grandes bases d'utilisateurs au monde, et il existe donc une documentation quasi infinie. Si vous rencontrez un problème, quelqu'un y a probablement déjà répondu.
Les extensions : De la même manière, il existe énormément de logiciels tiers qui peuvent venir se greffer sur votre site et en augmenter les capacités.
WordPress.org et WordPress.com : deux services très différents.
Il est important de comprendre que la plateforme se compose en réalité de deux services distincts, et pas forcément complémentaires, qui ne s'adressent pas aux mêmes profils de personne, et il est parfois ardu de faire la différence.
WordPress.org
C'est le service principal, qui vous permet de construire votre site rapidement et de bénéficier de l'interface d'administration. WordPress.org est open source, ce qui signifie que vous pouvez y accéder librement sans débourser le moindre centime. C'est la partie de WordPress majoritairement utilisée par les développeurs. Cependant, si vous êtes motivé, sachez qu'il est possible de créer son site sans coder en utilisant un template. WordPress.org est un CMS (Content Management System); c'est-à-dire qu'il permet d'administrer votre site et d'en modifier les contenus sans avoir à toucher au code (La fameuse interface ont nous parlions tout-à-l'heure). Lorsqu'une personne vous parle du CMS WordPress, c'est à ce service qu'elle fait référence. En revanche, ce logiciel ne vous permet pas d'héberger votre site. Il faudra ici louer un serveur et installer WordPress.org dessus.
WordPress.com
C'est un service complémentaire proposé par la société, qui vous propose d'héberger votre site WordPress et de vous fournir un site déjà préparé, moyennant finances. Dans cette formation, nous n'abordons pas cet aspect.
Cet article fait suite à la notion de menu order abordé dans le cours sur le répéteur
Assurez-vous que l'option order by de votre répéteur est bien sur menu order et sauvegardez
Comme vous le savez déjà, Oxygen remplace le thème de votre site. Cette particularité implique néanmoins un aspect à prendre en compte : lorsque que vous écrivez des informations directement via WordPress, que ce soit via une page ou une article, les données ne s'afficheront pas sur la page.
En effet, quand vous créez une page, Oxygen se charge de créer dans le même temps une page blanche qui attends d'être remplie par vos soins. C'est cette page qui s'affichera par défaut, et pas ce que vous écrivez directement sur WordPress.
Cependant, cela ne veut pas dire qu'il est inutile de se servir de WordPress. En effet, il est bien plus simple d'écrire vos articles ou de remplir les produits de votre boutique sans devoir sortir l'artillerie lourde à chaque fois. C'est dans ce but qu'on été créées les données dynamique, afin de vous permettre d'utiliser des données de WordPress directement sur Oxygen.
NB : Ce n'est pas recommandé, mais si vous avez pour une raison ou une autre besoin de désactiver Oxygen sur certaines page, vous pouvez consulter cet article
Exercice pour apprendre à insérer des données dynamiques
Pour commencer, assurez-vous d'avoir sous la main un article ou une page remplie directement avec WordPress. Si ce n'est pas le cas, voici comment faire :
Les marges s'éditent à l'aide de l'onglet size & spacing
Insérons maintenant notre 1ère donnée dynamique. Insérez à nouveau un élément, mais sélectionnez cette fois-ci l'onglet WordPress, puis Dynamic Data
Cliquez sur Title pour ajouter votre 1er champ dynamique
Comme vous pouvez le voir, le champ a automatiquement intégré le contenu du titre de l'article. Si vous modifiez par le suite le titre directement sur Oxygen modifiera également le contenu du titre. Veillez cependant à ne pas modifier le champ text content, car il contient les informations qui lui permettent de récupérer les données sur WordPress.
Vous remarquerez également que le champ titre est devenu un conteneur avec un élément span a l'intérieur, utilisé en temps normal pour insérer de très court blocs de textes. C'est l'unique cas où un élément de texte ou d'image peut contenir lui-même un élément. De même, ne modifiez pas le contenu du span. Vous pouvez en revanche renommer les champs si vous le souhaitez
Sélectionnez le conteneur parent (dans notre exemple, la Div(#3) et insérez les éléments dynamiques featured image et content
Insérer des données dynamique multiples
Les données dynamiques peuvent également être utilisée pour des champs multiples. Imaginons par exemple que vous souhaitiez faire un blog sur votre site. Une fois votre template créé, il vous suffit d'ajouter ces même champs pour que tous vos articles les intégrent sans que vous ayez besoin de configurer chacun d'entre eux.
Si vous avez besoin d'un exemple concret, consultez le cours expliquant comment créer un blog
Vous pouvez également insérer des données dynamique dans un répéteur
Insérer des données plus complexes
Vous l'aurez remarqué, nous n'avons pas intégré l'extrait de la page, car ce champ n'est pas dans l'onglet dynamic data. Pour intégrer des champs moins souvent utilisés, la méthode est un peu différente :
Insérez un élément de texte et remplissez-le avec du texte au hasard
Cliquez sur l'élément à l'écran et sélectionnez tout le texte à l'aide de la souris ou en faisant CTRL+A
On vous l'accorde, c'est un peu compliqué à sélectionner correctement
De nouvelles options apparaissent sur la barre supérieures. Cliquez sur l'icône Insert data
Cliquez sur Exerpt
Si ça n'a pas fonctionné, c'est probablement que le texte que vous avez écrit n'étais pas entièrement sélectionné.
Liste des principaux éléments dans l'onglet insert data
Post
Title : Titre de la page, produit ou article
Content : Contenu de la page, produit ou article
Exerpt : Extrait de page ou article ou description courte de produit
Date : Date
Categories, Tags, Taxonomies : catégories et autres tags associés à la page, produit ou article
Meta / Custom Field : Si vous avez rempli un champ personnalisé
Featured image
Title : titre de l'image
Caption : description de l'image
Alt : Alt image
Author
Display name : nom de l'auteur de la page, produit ou article
Bio : Biographie de l'auteur
Current User
Idem que Author, mais pour l'utilisateur actuel.
etc ...
Ajouter un mot de passe pour un article
Pour commencer, ouvrez l'article que vous souhaitez éditer
Dans le bloc de droite, dirigez-vous sur l'onglet visibilité et cliquez sur publique
Si l'option n'apparaît pas, vérifiez que l'onglet article est bien sélectionné
Sélectionnez protégée par mot de passe et et entrez votre mot de passe, puis mettez l'article à jour
Ajouter un mot de passe pour une page avec Oxygen
Etant qu'Oxygen supprime le thème WordPress, les plugins de mot de passe sont inutilisables sur les pages. Il faut donc recourir à une solution personnalisée :
Créer le code personnalisé
Pour commencer, cliquez sur ce lien pour télécharger le fichier comprenant le code nécessaire.
Ouvrez ensuite Advanced Script et importez le fichier que vous venez de télécharger
Une fois le fichier uploadé, activez le bloc de code
A présent, nous allons utiliser Fluent Forms et créer un nouveau formulaire
Si vous utilisez un autre plugin, cela devrait fonctionner tant que vous pouvez générer un shortcode (voir ci-dessous)
Ajoutez un texte simple
Dans le libellé de l'élément, mettez quelque chose du genre "entrez votre mot de passe"
Dans le champ obligatoire, cochez oui
Ajoutez un bouton
Dans le libellé de l'élément, mettez quelque chose du genre "soumettre" ou "se connecter"
Sauvegardez vos modifications avec le bouton save form en haut à droite de la page
Cliquez sur le bouton Réglages et Intégrations juste au-dessus
Cliquer sur le bouton custom URL. Cela ouvrira un champ custom URL.
A droite du champ custom URL, cliquez sur l'icône en forme de trois points.
Parmi les options, sélectionner HTTP Referer URL
Cocher la case Pass Filed Data Via Query String. Un nouveau champ va s'ouvrir
Entrer access= dans le champ
Cliquer sur les trois points à droite du champ et sélectionner le champ dans l'onglet input option
Le nom est variable en fonction de comment vous avez nommé le texte simple.
Pour finir, Sauvegardez votre formulaire
Vous pouvez également renommer votre Formulaire pour pouvoir l'identifier plus facilement en cliquant sur le champ d'édition en haut à gauche de la page.
Configurer la page à protéger
Le formulaire de mot de passe
Rendez-vous sur l'interface Oxygen de la page que vous souhaitez protéger.
Créez un conteneur au niveau du inner content (au body) en ajoutant une div.
N'hésitez pas à la renommer si vous souhaitez pouvoir l'identifier plus facilement
Insérez l'élément fluent forms dans votre conteneur
Bouton Plus en haut à gauche
Tapez fluent dans la barre de recherche
Cliquez sur le shortcode et sélectionnez votre formulaire dans la barre d'édition (à gauche)
Le formulaire que nous sélectionnons s'appelle Accès Membre car nous l'avons renommé ainsi au préalable
N'hésitez pas à personnaliser votre conteneur en ajoutant un titre, en changeant les couleurs ...
Sélectionnez le conteneur parent et cliquez sur le bouton Conditions Settings (en haut à gauche de l'écran). Le bouton comporte une icône de croix et une une icône cochée
Cliquez sur set conditions
Cliquez sur add your first condition
Dans le champ choose conditions sélectionnez Access Code
L'avant-dernière option
Dans le champ du milieu, sélectionnez !=
Dans le champ de droite, entrez le mot de passe que l'utilisateur devra entrer
Cliquez sur la croix en haut à droite pour fermer la fenètre
Enregistrez vos modifications
Une fois cette étape terminée, vous pouvez rendre le composant réutilisable si vous souhaitez le dupliquer sur d'autre page. Il faudra simplement refaire l'étape avec le champ choose conditions.
Configurer le reste de la page
Il est important que le formulaire de mot de passe soit dans un conteneur séparé du reste de la page
Le reste de la page dans être contenu dans un conteneur
Vous pouvez utilisez wrap with div (bouton d'édition de l'élément) pour faire apparaître un conteneur parent sur le contenu que vous voulez ranger.
Voici à quoi doit ressembler votre page
Suivez la même procédure que précédemment avec le conteneur body ( ou le nom que vous avez donné à votre conteneur parent) avec set conditions, sauf pour le champ du milieu où vous mettrez
Les catégories servent à différencier les articles et les pages en leur attribuant une dénomination. Elle servent principalement à deux choses :
Trier ses pages et articles : Lorsque vous vous cliquez sur l'onglet pages ou articles via le panneau de contrôle, vous pouvez afficher uniquement les articles qui correspondent à votre catégorie
Afficher uniquement les éléments d'une catégorie : Il est possible que vous ayez besoin d'afficher sur certaines pages uniquement les articles ou pages d'une certaines catégorie, notamment via le template de pages légales, ou via l'utilisation d'un répéteur.
Procédure
Dans le panneau de contrôle, dirigez-vous sur l'onglet Articles ou Pages, puis sur catégories
Vous arrivez ensuite sur la page vous permettant d'entrer de nouvelles catégories. Entrez le nom de votre catégorie et cliquez sur le bouton ajouter une catégorie
Le slug est le code qui sera utilisé pour que votre site identifie la catégorie. Par défaut, il est identique à votre titre avec des tirets pour les espaces, mais vous pouvez lui donner une autre appellation, tant que vous remplacez les espaces par des tirets.
Vous pouvez également modifier une catégorie en vous dirigeant sur les catégories et en cliquant sur modifier ou modification rapide,ou supprimer si vous n'en avez plus besoin.
Ajouter des sous-catégories
Dans certains cas, vous pouvez avoir besoin d'assigner des sous-catégories à une catégorie déjà existante, par exemple si vous avez beaucoup d'articles dans une catégorie et que vous souhaitez faire un tri à l'intérieur.
Créer ou modifiez une catégorie.
Nous allons la transformer en sous-catégorie. Dans l'onglet Catégorie parente, choisissez la catégorie à laquelle votre sous-catégorie sera associée, et cliquez sur le bouton ajouter ou mettre à jour.
Vous remarquerez que l'organisation de vos catégoire a été légèrement modifiée :
Ici, arts et techniques du web et bases du code sont les sous-catégorie associées à la catégorie fondamentaux
Le site n'affiche pas les catégories pour les pages
Par défaut, les pages de WordPress n'ont pas de catégories. Il faut pour cela installer l'extension Create And .Assign Categories For Pages. Pour Installer une extension, consultez le guide dédié.
Intro
Si vous avez acquis cette formation ou que nous avons réalisé votre site, vous avez accès à une licence à vie du logiciel Fluent Forms., une extension WordPress particulièrement puissante. Nous avons donc construit ce guide en nous basant sur ce logiciel.
Vous êtes néanmoins bien entendu libre de choisir un autre logiciel si vous le souhaitez. La plupart des logiciels de formulaire fonctionnent plus ou moins sur le même principe, et le méthode d'intégration à Oxygen est toujours la même.
Exceptionnellement, nous laissons sur cette partie de la formation la main à l'éditeur de l'extension, qui vous explique tout aussi bien, sinon mieux comment fonctionne l'extension. Vous pouvez également consulter la documentation officielle. Les tutoriels sont en anglais, mais vous pouvez traduire une page directement sur votre navigateur.
Ouvrez la page ou souhaitez intégrer le formulaire avec Oxygen, et sélectionner le conteneur dans lequel vous souhaitez le mettre.
A défaut, sélectionnez le conteneur inner content.
Cliquez sur le + dans la barre d'édition (à gauche)
Cliquez sur l'onglet Fluent Forms, puis à nouveau sur le champ fluent forms
ou tapez fluent forms dans la barre de recherche
Sélectionnez l'élément de formulaire dans la barre de structure (à droite)
Dans la barre d'édition (à gauche), sélectionnez votre formulaire.
Patientez le temps que votre formulaire se charge
Les champs de la barre d'édition vous permettent de personnaliser certains aspect de votre formulaire. Ils fonctionnent globalement selon le même principe que ce que vous avez vu jusque là. Attention, vous pouvez juste personnaliser l'apparence des champs, pas la structure du formulaire.
Un site conçu sur WordPress fonctionne selon un concept précis : Une structure, ou squelette du site web, comportant tous les fichiers importants, et un habillage visuel, qui met en forme les contenus du site. En temps normal, WordPress se charge de la structure, et le thème se charge de l'habillage visuel.
En quelque sorte, un thème WordPress est une apparence prédéfinie pour votre site, dans lequel vous intègrerez vos contenus.
Oxygen builder vient cependant bouleverser ce système en désactivant complètement les thèmes de votre site, et en repartant de zéro. On parle d'installation "from scratch".
Les thèmes sont donc un concept inutiles sur un site web équipé d'Oxygen, car c'est ce dernier qui va se charger de l'habillage visuel.
Vous pouvez donc en profiter pour supprimer les thèmes de votre site, ce qui permettra d'économiser du code, c'est toujours ça de pris :
Dans votre panneau de contrôle, dirigez-vous vers l'onglet Apparence, puis cliquez sur thèmes
Vous accédez ensuite à une liste des thèmes actuellement enregistrés sur votre site. Supprimez-les en cliquant pour chacun sur détails du thème, puis supprimer (en bas)
Vous ne pouvez pas supprimer le thème actuellement sélectionné, ce qui fait qu'il vous restera toujours un thème sur votre site, même s'il est désactivé par Oxygen.
Sur Oxygen
Pour changer la couleur d'un texte : Sélectionnez le texte à modifier et dirigez-vous vers l'onglet Typography dans le panneau d'édiction de l'interface Oxygen (à droite).
Pour changer la couleur de tous les textes : Utilisez les paramètres de styles d'Oxygen
Sur WordPress
Gardez à l'esprit que ce que vous écrivez via un article ou une page directement sur l'interface WordPressne s'affichera pas sur votre site si le contenu n'est pas intégré de manière dynamique.
Sur la page ou article que vous êtes en train d'éditer, à droite, un onglet couleur vous permet de changer le couleur du texte
Notez que le mode d'édition (onglet tout en haut) est sur Bloc
Afin d'offrir la meilleure expérience possible, nous utilisons des technologies telles que les cookies pour stocker et/ou accéder aux informations des appareils. Le fait de ne pas consentir ou de retirer son consentement peut avoir un effet négatif sur certaines caractéristiques et fonctions.
