Thèmes, styles et terminologie de base de WordPress | Togeppi
Résumé
Cet article est posté dans le but de faciliter la recherche de contenus inconnus dans d’autres articles à l’avenir, en vous permettant de vérifier dans la table des matières à droite.
Il n’est pas nécessaire de tout lire depuis le début jusqu’à la fin, il suffit d’examiner les thèmes et les styles, puis de vérifier les autres contenus lorsque vous rencontrerez des éléments peu familiers dans les articles ultérieurs. (Un lien sera ajouté)
De plus, le contenu ici sera régulièrement mis à jour si nécessaire.
Thème
Dans la page d’administration de WordPress, vous verrez sur la barre latérale gauche une option intitulée Apparence – Thèmes.
La version en coréen indique probablement Apparence comme ‘외모’, mais je l’utilise en anglais car la traduction en coréen rend les choses plus difficiles à comprendre.
Qu’est-ce qu’un thème ? WordPress n’est pas une plateforme comme un blog Naver. C’est un outil conçu pour faciliter la création de sites web.
Installer WordPress ne crée pas un modèle figé comme un blog Naver ; c’est un système où l’utilisateur doit construire tout élément par élément.
Il peut être difficile de tout construire depuis le début, c’est pourquoi les thèmes existent.
Les thèmes fournissent un cadre de base. Vous pouvez télécharger un thème qui vous plaît et l’intégrer, et ensuite le modifier à votre goût.
Chaque novice peut créer un site web fonctionnel et poster des articles en appliquant un thème. La méthode d’explication de WordPress par l’utilisateur ‘로알남’ utilise également des thèmes.
En cliquant sur ‘ajouter nouveau’ dans les Thèmes, vous pouvez télécharger et appliquer une multitude de thèmes. Une recherche est possible dans le coin supérieur droit, et si vous avez un thème, vous pouvez le télécharger pour l’utiliser.
Pour ma part, je n’utilise pas vraiment un thème particulier et j’apprécie de construire mes propres éléments, donc j’utilise le thème Kava Child fournit par Crocoblock.
Ne vous inquiétez pas si vous utilisez un autre thème. Les méthodes de base sont toutes les mêmes, et finalement, il ne s’agit que d’une question de personnalisation.
Voyez-vous le bouton Personnaliser ? C’est le bouton qui vous permet de définir la couleur de base du thème, le format du texte, le logo du site, etc. Vérifions cela ensemble.
Personnalisation du Thème
Voici l’écran de personnalisation de mon blog TogePi. Je vais expliquer brièvement chaque section.
(1) Identité du site
Vous pouvez définir le titre et le slogan de votre site.
(2) Paramètres généraux du site
Vous pouvez définir le favicon, la mise en page de la page, les fil d’Ariane, et le bouton de retour en haut.
Pour la mise en page, j’ai configuré en largeur complète, mais vous pouvez ajuster selon vos préférences, et cette configuration peut être modifiée ultérieurement lors de la modification de la page.
Je n’ai pas utilisé la fonction fil d’Ariane ici.
Le bouton de retour en haut apparaît lorsque vous faites défiler la page vers le bas et vous ramène en haut.
(3) Couleurs / Schéma de couleur
Vous pouvez définir la couleur de fond de la page, la couleur de texte de base, ainsi que la couleur appliquée aux liens.
Cela dit, cela peut généralement être réglé lors de la création de la page, donc il n’est pas nécessaire de tout ajuster ici.
(4) Typographie
Vous pouvez spécifier la taille, l’épaisseur, la largeur, la hauteur, etc., des différentes polices (H1 à H6).
Je n’ai spécifié que H1 à H6. Dans cet article, j’ai utilisé H1, H2 pour les titres et H5 pour le contenu.
Il est plus facile de régler les paramètres lors de l’écriture de l’article pour voir comment ils apparaissent.
(5) Paramètres de la page d’accueil
Vous pouvez définir quelle page sera votre page d’accueil, c’est-à-dire celle sur laquelle vous serez redirigé en cliquant sur le logo.
Les sections non mentionnées comme en-tête / image de fond / menus / widgets peuvent être configurées séparément, donc vous pouvez les ignorer pour l’instant.
Aussi, ce contenu est basé sur le thème Kava Child, donc les paramètres peuvent varier selon les thèmes.
Configuration détaillée des widgets
Il existe différents types de widgets. La capture ci-dessus montre un widget de bouton, mais il y a également du texte, des images, des icônes, etc. Les styles de ces différents widgets ont une certaine similitude, que je vais vous expliquer.
Pour l’explication de base, le widget de bouton semble le plus pratique et il est couramment utilisé.
Contenu
En cherchant un bouton dans la barre latérale gauche, vous obtiendrez plusieurs options. Généralement, j’utilise le bouton Crocoblock, mais pour l’explication, je vais utiliser le bouton de base de WordPress.
En cliquant sur le widget de bouton, la première fenêtre de contenu apparaît.
Le type peut rester sur la valeur par défaut.
(1) Texte
Vous pouvez changer le nom du bouton.
(2) Lien
Lorsque vous cliquez sur ce bouton, il vous redirigera vers le lien que vous avez configuré. Si le signe ‘#’ est présent, rien ne se passe.
Vous pouvez lier un lien vers votre propre site ou vers un autre. Pour un lien vers un autre site, il suffit de copier l’URL. Pour un lien vers votre site, en utilisant le slug, il suffit d’entrer ‘/slug/’ pour y accéder.
Il y a un bouton de réglage à droite et un bouton en forme de crêpe.
En cliquant sur le bouton de réglage (Options de lien), vous verrez apparaître des options supplémentaires.
Ouvrir dans une nouvelle fenêtre
Si vous activez la fonction Ouvrir dans une nouvelle fenêtre, en cliquant sur ce bouton, le lien s’ouvrira dans une nouvelle fenêtre, vous permettant de conserver la page affichée en arrière-plan.
C’est important pour le SEO car cela influence le temps que les visiteurs passent sur la page.
Add nofollow
Cette fonction est moins importante à cette étape. Si vous activez nofollow, cela n’impactera pas les scores SEO, mais cela signifie également que les visites ne comptent pas.
Lorsque vous cliquez sur le bouton en forme de crêpe (tags dynamiques), vous obtiendrez d’autres options.
Cette fonction peut sembler compliquée au début, mais elle devient très utile avec le temps.
La fonction dynamique est souvent utilisée dans des plugins comme Crocoblock et Elementor. Par exemple, si vous voulez afficher le titre d’un article que vous avez écrit, cette fonction facilite cela.
En cliquant sur Post URL, vous pouvez obtenir l’URL de l’article que vous visualisez en ce moment.
(3) Alignement
C’est pour déterminer de quel côté le bouton sera aligné. Je vais passer à la section de taille.
(4) Icône
Vous pouvez ajouter une icône avant le texte du bouton, et si vous ne mettez que l’icône, cela devient un bouton avec uniquement l’icône.
La fonction de l’espacement de l’icône vous permet d’ajuster l’espace entre l’icône et le texte.
Maintenant, je vais créer un bouton pour illustrer tous ces paramètres.
Le bouton ci-dessus utilise le thème personnalisé, ce qui fait qu’il apparaît en rose par défaut. Vérifiez ci-dessous.
En cliquant sur le bouton, vous vous rendrez aux paramètres affichés ci-dessus!
Style
Le carré rouge représente l’endroit où les styles sont définis.
Le style concerne la police, la couleur, la taille, l’arrière-plan, la largeur, les marges, et les bordures de ce qui est affiché.
Je vais expliquer cela en utilisant le widget de bouton.
(1) Typographie
Famille : Définit la police.
Taille : Définit la taille de la police.
Poids : Définit l’épaisseur de la police.
Transformation : Définit la casse du texte.
Style : Définit l’inclinaison du texte.
Décoration : Ajoute une ligne au texte.
Hauteur de ligne : Définit l’espacement vertical du texte.
Espacement des lettres : Définit l’espacement horizontal des caractères.
Espacement des mots : Définit l’espacement horizontal entre les mots.
Il pourrait y avoir de la confusion entre l’espacement des lettres et des mots, mais vous pouvez le voir clairement dans les exemples ci-dessous.
(2) Ombre du texte
C’est une fonction que je n’utilise pas beaucoup, mais elle ajoute une ombre au texte. Vérifiez l’exemple ci-dessous.
Il y a des variations dans la configuration, et pour montrer une différence significative, je vais exagérer les effets.
(3) Normal / Survol
Avez-vous déjà remarqué que la couleur des boutons change lorsque vous passez la souris dessus ? C’est ce que vous pouvez configurer ici.
Le terme ‘survol’ se réfère au passage de la souris au-dessus du bouton.
Normal détermine à quoi ressemblera le bouton lorsqu’il n’est pas touché, et Survol détermine à quoi il ressemblera lorsqu’il est survolé.
Couleur du texte : Définit la couleur du texte.
Type d’arrière-plan : Définit si l’arrière-plan est unicolore ou en dégradé.
Couleur : Définit la couleur de l’arrière-plan.
Couleur de la bordure : Définit la couleur de la bordure.
Animation de survol : Définit les effets lors du survol.
Voyez ci-dessous comment ce bouton a été configuré.
(4) Bordure
La bordure a été abordée, mais il s’agit essentiellement de définir la bordure de votre widget.
Voici comment vous pouvez régler la bordure.
Type de bordure : Définit le style de la bordure (pleine, pointillée, etc.).
Largeur : Définit l’épaisseur de la bordure.
Rayon de bordure : Définit l’arrondi des coins de la bordure.
Ombre de boîte : Similaire à la fonction d’ombre mentionnée précédemment.
Vérifiez ci-dessous pour voir les différences.
(5) Rembourrage
Ici, un nouveau concept entre en jeu. Le rembourrage renvoie à ce qui est utilisé pour rendre les vêtements plus chauds.
Le rembourrage ajoute de l’espace autour de votre widget.
Marge se réfère à un espace qui réduit la taille du widget.
Voyez ci-dessous comment ceci fonctionne.
Les chiffres à côté indiquent si vous ajustez en pixels ou en pourcentage.
L’icône de chaîne active la fonction de synchronisation pour ajuster les valeurs pour le haut, le bas, la droite, et la gauche.
Cela conclut l’explication de la section de style du widget de bouton.
Avancé
-Contenu à ajouter ultérieurement-
-Contenu à ajouter ultérieurement-
Ce post est une traduction de l’original.
Vous pouvez voir une image nette dans l’original.
Manager
태그