[Nouveau] Les sauvegardes dans le Cloud deviennent plus simples - Duplicator Cloud élimine le stockage par des tiers
Joella Dunn
Joella Dunn
John Turner
John Turner
Vous êtes-vous déjà demandé comment fonctionnent les sites web ?
Cela peut sembler magique, mais il y a un langage derrière chaque page web que vous voyez. Ce langage s'appelle HTML.
Le langage HTML est l'élément de base de l'internet.
Même une petite connaissance du langage HTML peut vraiment vous aider à améliorer votre site WordPress. J'ai vu de mes propres yeux comment cela aide les gens à rendre leurs sites WordPress encore meilleurs.
Dans cet article, je vais expliquer ce qu'est le HTML, pourquoi il est important, et comment vous pouvez ajouter du code HTML personnalisé à votre site WordPress.
Vous pourriez être surpris de constater à quel point il est facile et utile de concevoir un site web efficace !
HTML est l'abréviation de HyperText Markup Language (langage de balisage hypertexte). Fondamentalement, le HTML est le langage qui structure le contenu du web. Il s'agit du squelette d'une page web.
Le langage HTML utilise ce que l'on appelle des "balises". Les balises indiquent au navigateur web la nature de chaque partie de votre contenu.
Par exemple, les balises peuvent indiquer au navigateur qu'un élément est un titre, un paragraphe ou une image. Les navigateurs lisent ces balises pour afficher les pages web comme elles devraient l'être.
HTML n'est pas un langage de programmation. Il s'agit plutôt d'un moyen d'organiser l'information pour que les navigateurs puissent la comprendre.
WordPress est très facile à utiliser. Vous pouvez créer un site web complet sans connaître le moindre code. Alors, pourquoi s'embêter avec le HTML ?
Le HTML vous permet de mieux contrôler votre contenu. Parfois, l'éditeur WordPress classique ne suffit pas.
Imaginons que vous souhaitiez ajouter un attribut spécifique à une image. Ou peut-être voulez-vous créer un style de liste vraiment unique. Le langage HTML vous permet de faire ce genre de choses.
HTML est également une aide précieuse pour le dépannage.
Vous avez déjà eu un problème de formatage bizarre avec WordPress ? Regarder le code HTML peut vous aider à trouver rapidement le problème et à le résoudre. C'est beaucoup plus rapide que de deviner avec l'éditeur visuel.
De plus, le langage HTML vous offre une grande souplesse. Vous souhaitez ajouter des personnalisations avancées ? Comme des classes personnalisées pour le style ou des mises en page plus complexes ? Le langage HTML ouvre ces possibilités.
Et voici un élément important : la protection de l'avenir.
WordPress est en constante évolution. Mais HTML ? C'est une compétence web fondamentale qui sera toujours utile.
Je l'ai constaté à maintes reprises : la compréhension du langage HTML vous permet de mieux vous adapter au monde du web.
Parlons des éléments constitutifs du langage HTML. On les appelle des balises.
Les balises sont des instructions qui indiquent au navigateur ce qu'il doit faire de votre contenu. La plupart des balises sont présentées par paires : une balise d'ouverture et une balise de fermeture.
Par exemple, si vous voulez créer un paragraphe, vous utilisez la fonction <p> pour le démarrer et </p> pour y mettre fin.
Vous voyez la barre oblique dans la balise de fermeture ? C'est ainsi que l'on sait que c'est la fin.
Examinons quelques balises HTML courantes que vous utiliserez souvent :
Les titres sont destinés aux titres et aux sous-titres. Vous avez <h1>, <h2>, <h3>, <h4>, <h5>et <h6>.
<h1> est le titre le plus important (généralement le titre principal), et <h6> est le moins important.
Les liens sont ce qui fait du web, et bien, un web ! Les <a> crée des liens. <a> signifie ancrage.
Vous voulez montrer des images ? L'image <img> Le tag est votre ami. <img> est l'abréviation d'image.
Besoin de dresser une liste de choses ? Le langage HTML est là pour ça. Il en existe deux types principaux :
<ul> pour les listes non ordonnées (puces). "ul" signifie "unordered list" (liste non ordonnée).<ol> pour les listes ordonnées (listes numérotées). "ol" signifie "liste ordonnée".Et à l'intérieur des deux <ul> et <ol>vous utilisez <li> pour chaque élément de la liste. "li" signifie "élément de la liste".
Les balises peuvent également avoir des attributs. Les attributs donnent des informations supplémentaires sur une balise.
Par exemple, le <a> a besoin d'une balise href pour lui indiquer où créer un lien. Comme ceci : <a href="https://example.com">Link text</a>. Les href contient l'adresse du site web.
Et le <img> a besoin d'une balise src pour lui indiquer où trouver le fichier image. Elle doit également comporter un attribut alt pour le "texte alternatif", qui est important si l'image ne peut pas être chargée ou pour l'accessibilité.
Comme ceci : <img src="image.jpg" alt="Descriptive text">.
Voici un exemple très simple de HTML en action :
<h1>Welcome to My Blog</h1>
<p>This is my first paragraph of content. It's going to be awesome!</p>
<a href="https://duplicator.com">Check out Duplicator!</a>Ce code crée un titre principal, un paragraphe et un lien sur une page web.
Lorsque j'ai commencé à apprendre le HTML, ces balises de base étaient mon point de départ. Et honnêtement ? Elles sont toujours à la base de presque tout ce que je fais en ligne. Ces balises simples sont puissantes !
Alors, comment utiliser le HTML dans WordPress ? Voyons quelques exemples.
Vous voulez mettre du texte en gras ou en italique ? Le langage HTML le permet.
Utilisation <strong> et </strong> pour mettre le texte en gras. Vous pouvez également utiliser les balises <b> et </b> elles mettent également le texte en gras.
Comme ceci : <strong>This text is bold</strong>.
Pour l'italique, utilisez <em> ou <i>. Comme ceci : <em>This text is italic</em>.
Ces balises vous permettent de mettre en valeur des mots et des phrases dans votre contenu.
Nous avons parlé de la <a> tag. Vous pouvez l'utiliser pour créer un lien vers d'autres pages de votre site ou vers d'autres sites web.
Vous pouvez lier du texte, des images ou même des boutons. Il s'agit d'utiliser la fonction <a> avec la bonne étiquette href attribut.
Vous souhaitez ajouter une vidéo YouTube ou Vimeo à votre site WordPress ? La plupart des plateformes vidéo fournissent des codes d'intégration. Ces codes sont généralement des codes HTML, utilisant souvent <iframe> étiquettes.
Il suffit de copier le code d'intégration de YouTube (ou de l'endroit où votre vidéo est hébergée) et de le coller dans WordPress. WordPress sait ce qu'il doit en faire.
Besoin d'une liste à puces ? Utiliser <ul> balises. Pour une liste numérotée, utilisez <ol> et <li> étiquettes.
Vous souhaitez ajouter une ligne pour séparer des sections de votre contenu ? L'outil <hr> crée une règle horizontale. C'est un moyen simple de briser visuellement votre texte.
Il ne s'agit que de quelques exemples, mais vous pouvez voir comment le HTML peut être vraiment utile dans WordPress. Il s'agit d'ajouter un peu de structure et des fonctionnalités supplémentaires au contenu de votre site web.
Vous vous dites : "D'accord, le HTML a l'air utile, mais comment l'apprendre ?". Bonne question ! Heureusement, il existe des tonnes de ressources intéressantes.
Voici quelques endroits où vous pouvez commencer à apprendre le langage HTML dès maintenant.
MDN Web Docs est une sorte d'encyclopédie du développement web. Il est réalisé par Mozilla (les créateurs de Firefox) et il est très complet et fiable.
Si vous aimez l'apprentissage interactif, Codecademy est génial. Ils proposent des cours où vous écrivez du code directement dans votre navigateur.
W3schools est un site web populaire pour les tutoriels de développement web. Il contient des tonnes d'exemples et de références HTML.
Vous voulez savoir comment le HTML est utilisé spécifiquement dans WordPress ? Consultez la documentation officielle de WordPress destinée aux développeurs. Elle est un peu plus technique, mais c'est une excellente ressource pour se familiariser avec le langage.
Quelle que soit la ressource choisie, le plus important est de s'entraîner. C'est sérieux. Vous n'apprendrez pas le langage HTML en vous contentant de lire. Vous devez écrire du code et voir ce qui se passe.
Expérimentez ! N'ayez pas peur de casser les choses. C'est ainsi que l'on apprend.
Il y a plusieurs façons d'utiliser le HTML dans WordPress. Passons-les en revue une par une.
Si vous utilisez l'éditeur de blocs (Gutenberg) dans WordPress, vous pouvez utiliser un bloc spécial juste pour le HTML. C'est ce qu'on appelle le bloc HTML personnalisé.
Pour l'utiliser, il suffit d'ajouter un nouveau bloc à votre page ou article WordPress. Recherchez "HTML" dans la barre de recherche du bloc. Vous verrez apparaître le bloc HTML personnalisé.
Cliquez dessus pour l'ajouter à votre contenu. La procédure est la même que pour l'ajout de n'importe quel autre bloc. Vous pouvez même le faire glisser et le déposer là où vous voulez qu'il aille.
Une fois le bloc ajouté, vous verrez une boîte dans laquelle vous pourrez taper ou coller votre code HTML WordPress. Mettez votre code HTML à l'intérieur.
Cliquez sur Aperçu pour voir à quoi ressemble votre code HTML sur la page sans le publier.
C'est très pratique pour vérifier votre code.
Saviez-vous que vous pouvez éditer n'importe quel bloc WordPress en HTML ? Oui, même les blocs de paragraphes ordinaires.
Cette fonction est utile si vous souhaitez apporter de petites modifications HTML à un bloc déjà existant.
Tout d'abord, cliquez sur le bloc que vous souhaitez modifier. Ensuite, cherchez les trois points dans la barre d'outils du bloc. Cliquez dessus.
Un menu apparaît. Dans ce menu, cliquez sur le bouton Editer en HTML.
Soudain, le bloc se transforme ! Au lieu de l'éditeur visuel habituel, vous verrez le code HTML personnalisé pour ce bloc. Vous pouvez désormais modifier directement le code HTML.
Cette option est idéale pour les petites modifications. Vous souhaitez peut-être ajouter une classe spécifique à un paragraphe pour le styliser ultérieurement. Ou bien vous avez besoin de corriger un petit problème de mise en forme qui est plus facile à gérer en HTML.
Une fois que vous avez fini de modifier le code HTML, vous pouvez cliquer sur Modifier visuellement dans la barre d'outils du bloc pour revenir à l'éditeur visuel normal.
Pour ceux qui sont à l'aise avec le code, l'éditeur de blocs de WordPress dispose d'une vue complète de l'éditeur de code. Cette vue vous montre le code HTML de l'ensemble de votre article ou de votre page.
Pour passer à l'éditeur de code, regardez en haut à droite de l'écran de votre éditeur Gutenberg. Vous y verrez également trois points - le menu d'options principal pour l'ensemble de l'éditeur. Cliquez sur ces points.
Dans ce menu, vous verrez une option appelée Éditeur de code. Cliquez dessus.
Vous verrez les balises et la structure de l'ensemble de votre page sous forme de code.
Cet éditeur HTML de WordPress est vraiment destiné aux utilisateurs avancés qui préfèrent travailler directement dans le code. Si vous aimez coder et que vous voulez voir la structure HTML de votre page dans son ensemble, l'éditeur de code est fait pour vous.
Mais attention ! Si vous faites des erreurs dans le code HTML, vous risquez de perturber la présentation de votre page. Il est important de comprendre le langage HTML si vous comptez utiliser l'éditeur de code de manière intensive.
Si vous souhaitez revenir à l'éditeur visuel normal, il vous suffit de retourner dans le menu en haut à droite et de cliquer sur Éditeur visuel.
L'éditeur classique de WordPress comporte deux onglets : Visuel et Texte. L'onglet Texte est l'endroit où vous pouvez entrer dans le code.
Lorsque vous cliquez sur Texte, vous verrez apparaître tout le code HTML de votre message. C'est ici que vous pouvez écrire ou coller le code HTML directement.
Après avoir ajouté ou modifié votre code HTML, vous pouvez revenir à l'onglet Visuel pour voir à quoi il ressemble. Il vous montrera la version rendue de votre HTML.
Parfois, vous souhaitez ajouter de petits éléments HTML, CSS ou JavaScript à votre site WordPress. Vous souhaitez peut-être ajouter un code de suivi personnalisé ou un style spécial pour une certaine partie de votre site.
Vous pouvez modifier les fichiers de votre thème pour ce faire, mais cela peut être risqué. De plus, si votre thème est mis à jour, vos modifications risquent d'être écrasées.
C'est là qu'interviennent les plugins d'extraits de code. Ces plugins vous permettent d'ajouter des extraits de code directement dans votre tableau de bord WordPress.
Ils permettent d'organiser votre code et de le séparer des fichiers de votre thème. C'est beaucoup plus sûr et plus facile à gérer, surtout si vous n'êtes pas un expert en code.
Mon plugin d'extraits de code préféré est WPCode (anciennement "Insert Headers and Footers"). Cet outil vous permet d'ajouter du HTML, du CSS et du JavaScript à votre site web.
De plus, il existe des tonnes de snippets pré-fabriqués que vous pouvez utiliser si vous n'avez pas l'habitude de coder.
L'utilisation d'un plugin d'extraits de code est beaucoup plus sûre que la modification directe des fichiers du thème. Il est également plus facile de garder une trace de votre code personnalisé.
WordPress dispose d'un widget intégré appelé "custom HTML". Pour le trouver, allez dans votre tableau de bord WordPress et cliquez sur Apparence puis sur Widgets.
Vous verrez différentes zones de widgets, comme la barre latérale ou le pied de page. Ces zones dépendent de votre thème WordPress.
Ajoutez le widget HTML personnalisé dans la zone de widget où vous souhaitez ajouter votre HTML.
Tapez ou collez votre HTML dans cette case.
Vous pouvez ajouter toutes sortes de choses avec HTML dans les widgets. Texte personnalisé, images, liens, et même codes d'intégration - tout fonctionne !
Après avoir ajouté votre code HTML, cliquez sur le bouton Mettre à jour dans les paramètres du widget.
Voilà, c'est fait ! Votre code HTML sera désormais présent dans la zone de widget de votre site web.
Vous pouvez en effet aller directement dans les fichiers de votre thème WordPress et y modifier le code HTML. Cela vous donne un grand contrôle sur la structure de votre site, mais cela comporte aussi des risques importants.
La modification directe des fichiers du thème peut endommager votre site web si vous ne faites pas attention. Une petite erreur dans le code peut entraîner des problèmes majeurs.
Bon, les avertissements mis à part, voici comment vous pouvez modifier les fichiers de thème. Dans votre tableau de bord WordPress, allez dans Apparence puis dans Editeur de fichiers de thème (parfois appelé Editeur de thème).
Sur le côté droit, vous verrez une liste des fichiers de votre thème. Ces fichiers contrôlent la structure et la mise en page de votre site web.
Voici quelques fichiers courants qui contiennent du HTML :
Vous pouvez modifier le code HTML directement dans l'éditeur de fichiers du thème. Il vous suffit de cliquer sur un fichier pour l'ouvrir, de trouver le code HTML que vous souhaitez modifier et d'effectuer vos modifications. Cliquez ensuite sur Mettre à jour le fichier pour enregistrer vos modifications.
N'oubliez pas: Ne modifiez les fichiers du thème que si vous savez vraiment ce que vous faites, utilisez toujours un thème enfant et ayez une copie de sauvegarde.
D'après mon expérience, je ne modifie les fichiers de thème que pour des personnalisations très spécifiques qui ne peuvent pas être effectuées d'une autre manière. Et même dans ce cas, je suis très prudent. Les thèmes enfants et les sauvegardes Duplicator font toujours partie de mon flux de travail lorsque je touche à des fichiers de thème.
FTP signifie File Transfer Protocol (protocole de transfert de fichiers). Il vous donne l'accès le plus direct pour modifier les fichiers de votre thème WordPress (et d'autres fichiers également).
Pour utiliser le protocole FTP, vous avez besoin de quelques éléments :
Une fois que vous les avez, ouvrez votre client FTP et entrez vos identifiants FTP pour vous connecter à votre serveur.
Une fois la connexion établie, vous verrez une vue à deux faces. Un côté montre les fichiers sur votre ordinateur, et l'autre côté montre les fichiers sur votre serveur web.
Naviguez jusqu'aux fichiers de votre thème WordPress sur le serveur. Le chemin est généralement quelque chose comme /wp-content/themes/votre-nom-de-thème/.
Une fois que vous avez effectué la sauvegarde et que vous vous trouvez dans le dossier de votre thème via FTP, vous pouvez télécharger les fichiers HTML du thème sur votre ordinateur ou les modifier directement.
Il suffit de cliquer avec le bouton droit de la souris sur le fichier dans votre client FTP et de choisir Télécharger ou Afficher/Modifier.
Modifiez ensuite le fichier téléchargé sur votre ordinateur à l'aide d'un éditeur de code. Les bons éditeurs de code sont VS Code, Sublime Text, Atom ou Notepad++.
Ouvrez le fichier dans votre éditeur de code et effectuez vos modifications HTML.
Lorsque vous avez terminé d'ajouter le code HTML, enregistrez le fichier. Cliquez avec le bouton droit de la souris sur le fichier dans votre client FTP et choisissez Télécharger. Vous remplacerez ainsi le fichier original sur votre serveur par la version modifiée.
Le protocole FTP est un outil puissant, mais il nécessite certaines connaissances techniques. Et il est important d'être responsable lorsque vous l'utilisez. Vérifiez toujours vos modifications avant de les télécharger et préparez toujours une copie de sauvegarde.
Ajoutez du code HTML dans Elementor en utilisant le widget HTML. Faites glisser le widget dans votre mise en page, puis collez votre code HTML dans la boîte de contenu. Cette méthode vous permet d'insérer du code HTML personnalisé n'importe où sur votre page sans modifier les fichiers du thème.
Add HTML code in WordPress headers by inserting it into the <head> section using a plugin like WPCode. Install the plugin and find the Header & Footer tab. Add HTML code into the header code box and save your changes. This avoids editing theme files directly.
Le meilleur plugin d'éditeur de code WordPress est WPCode (anciennement Insert Headers and Footers). WPCode vous permet d'ajouter en toute sécurité du code personnalisé à votre site sans modifier les fichiers du thème. Il supporte l'ajout de CSS, HTML, JavaScript et PHP. De plus, il inclut une protection contre les erreurs et une logique conditionnelle pour un placement ciblé du code.
WordPress est construit principalement avec PHP, qui s'exécute sur le serveur pour générer un contenu dynamique. Il utilise également HTML, CSS et JavaScript pour rendre et styliser les pages web dans le navigateur. PHP gère la logique du backend, tandis que HTML structure le contenu affiché aux utilisateurs.
Trouvez des modèles HTML WordPress sur des places de marché telles que ThemeForest ou TemplateMonster. Ces plateformes proposent des modèles HTML conçus par des professionnels qui peuvent être adaptés au développement de WordPress. Téléchargez-les, personnalisez-les et convertissez-les à l'aide d'un constructeur de pages ou d'un cadre de thème.
Apprendre ne serait-ce qu'un peu de HTML peut vraiment ouvrir un nouveau monde de possibilités avec WordPress. Cela vous donne plus de contrôle, plus de flexibilité et une meilleure compréhension du fonctionnement des sites web.
N'ayez pas peur de continuer à apprendre et à expérimenter. Plus vous jouerez avec le code, plus vous serez à l'aise.
Explorez les ressources que j'ai mentionnées, essayez les différentes façons d'ajouter du HTML dans WordPress et voyez ce que vous pouvez créer !
Et n'oubliez pas de toujours sauvegarder votre site avant d'y apporter des changements importants ! Des outils comme Duplicator facilitent les sauvegardes et peuvent vous éviter bien des maux de tête.
Pendant que vous êtes ici, je pense que vous aimerez ces autres guides WordPress :
Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, il se peut que nous recevions une commission. Nous ne recommandons que des produits dont nous pensons qu'ils apporteront une valeur ajoutée à nos lecteurs.
