...
Actualités WEB et WordPress, thèmes, plugins. Ici, nous partageons des conseils et les meilleures solutions de sites Web.

Comment personnaliser votre thème avec CSS personnalisé

15

Vous voulez un contrôle total sur la conception de votre site ?

Bien qu’il existe de nombreux outils de personnalisation conviviaux pour WordPress, un peu de CSS peut vous aider énormément.

Par exemple, vous pouvez augmenter la taille de la police des titres des articles ou modifier la couleur de vos liens. Il semble exagéré d’installer un tout nouveau plugin pour quelque chose d’aussi simple.

CSS est la solution.

Avec quelques lignes de CSS, vous pouvez rapidement vous occuper de petites personnalisations de style. Et bien qu’il s’agisse de code, ce n’est pas aussi complexe qu’un langage de programmation comme Javascript ou PHP.

Si vous avez écrit un peu de CSS ici et là, vous bénéficierez grandement de ce guide, mais même les débutants peuvent trouver ici quelques conseils pratiques.

Psst ! Lisez jusqu’à la fin si vous êtes un client de Compete Themes. Nous avons un cadeau bonus pour vous (particulièrement utile pour les débutants).

Une introduction rapide à CSS

Si vous êtes déjà familier avec CSS, je ne veux pas vous déranger avec un long aperçu. Si vous n’avez jamais travaillé avec CSS ou si vous n’êtes même pas sûr de ce qu’est CSS, veuillez d’abord consulter notre article sur le sujet :

Qu’est-ce que CSS et comment cela affecte-t-il WordPress ?

Cela couvrira les bases de la raison pour laquelle CSS est utilisé pour styliser les sites et comment il est appliqué.

Comment ajouter du CSS à votre site WordPress

Il y a une grosse erreur que font les utilisateurs de WordPress qui débutent avec CSS :

Ils personnalisent les fichiers de thème.

Par exemple, une personne utilisant le thème Challenger peut placer ses modifications CSS directement dans le fichier style.css accessible depuis le menu Apparence > Éditeur.

Comment personnaliser votre thème avec CSS personnalisé

WordPress inclut désormais un avis vous avertissant de ne pas modifier ici

Le problème avec la modification du fichier style.css est que vous perdrez toutes vos modifications si vous mettez à jour vers une nouvelle version de Challenger. Croyez-moi, perdre des modifications de code qui ont pris beaucoup de temps à faire peut être incroyablement décourageant.

Une meilleure façon

Il existe une meilleure façon d’ajouter du CSS à votre site où il ne sera jamais écrasé. De plus, ce code est ajouté à votre site de manière à faciliter le remplacement des styles du thème.

Pour ajouter du CSS à votre site, vous souhaitez ouvrir le Customizer (Apparence > Personnaliser) et cliquer sur la section CSS supplémentaire.

Comment personnaliser votre thème avec CSS personnalisé

C’est généralement la dernière section du Customizer

Si vous ouvrez cette section, vous verrez une zone de texte où vous pouvez ajouter votre code. WordPress inclura quelques conseils ici, mais vous pouvez cliquer sur le lien Fermer pour le supprimer et n’afficher que l’entrée de code.

Comment personnaliser votre thème avec CSS personnalisé

Vous pouvez entrer et enregistrer n’importe quel CSS que vous souhaitez ajouter ici.

Comment personnaliser votre thème avec CSS personnalisé

Le code que vous ajoutez ici mettra immédiatement à jour l’apparence du site dans l’aperçu. Une fois que vous êtes satisfait de vos modifications, vous pouvez enregistrer vos modifications.

L’avantage supplémentaire de placer CSS ici est que vous pouvez regarder les mises à jour en direct, vous pouvez donc tester rapidement différents codes pour savoir ce que vous aimez.

Maintenant que vous avez vu comment ajouter du CSS en toute sécurité à votre site, couvrons les bases de l’écriture CSS !

Conseil de pro : ne vous inquiétez pas de casser votre site. Si vous faites une mauvaise modification, vous pouvez simplement supprimer le CSS que vous avez ajouté. Il est impossible de casser entièrement votre site ou de perdre l’accès au menu admin en ajoutant du CSS de cette manière.

Comment trouver des sélecteurs CSS

Si vous avez déjà écrit du CSS, vous savez que la première étape consiste à choisir un sélecteur pour indiquer au navigateur quel élément du site vous ciblez. Dans la capture d’écran ci-dessus, je cible tous les éléments qui ont la classe "site-title".

Si vous ne savez pas comment utiliser les sélecteurs CSS, consultez cette excellente introduction aux sélecteurs CSS de SitePoint.

Maintenant, voici la chose…

Même de nombreux utilisateurs expérimentés de WordPress tentent de trouver des sélecteurs tout faux. Ils vérifient le fichier style.css pour trouver un sélecteur déjà utilisé par le thème. C’est fastidieux et vous risquez même de ne pas trouver de sélecteur approprié pour faire votre personnalisation.

Permettez-moi de vous proposer un processus beaucoup plus productif.

Comment les pros de WP trouvent les sélecteurs CSS

Lors de l’écriture CSS, vous avez d’abord besoin d’un sélecteur pour indiquer au navigateur quel élément vous souhaitez modifier. Bien que vous puissiez vérifier la feuille de style dans votre thème, il est beaucoup plus facile d’utiliser simplement les outils de développement Web de votre navigateur pour les trouver.

Voici un exemple de ce que je veux dire :

Comment personnaliser votre thème avec CSS personnalisé

Ceci est une capture d’écran de Chrome avec ses outils de développement ouverts

Vous pouvez voir les classes et les ID de chaque élément dans les outils de développement ouverts. Vous pouvez ensuite utiliser n’importe quelle combinaison de classes et d’ID disponibles pour écrire vos propres sélecteurs personnalisés.

J’entre dans les détails beaucoup plus profonds de ce processus dans ce tutoriel :

Comment trouver des sélecteurs CSS sur les sites WordPress

Vous apprendrez comment accéder aux outils de développement de votre navigateur, comment naviguer dans le code HTML et comment trouver les sélecteurs CSS dont vous avez besoin.

Propriétés et valeurs CSS

Maintenant que vous disposez d’un moyen beaucoup plus rapide d’obtenir le sélecteur de votre choix et que vous savez comment ajouter du code dans la section CSS supplémentaire du personnalisateur, il ne vous reste plus qu’à choisir les propriétés que vous souhaitez modifier.

Par exemple, si vous souhaitez cibler le titre du site dans Challenger et agrandir la police, vous pouvez le faire avec la font-sizepropriété. Cette déclaration CSS pourrait ressembler à ceci :

.site-title {
  font-size: 32px;
}

Si vous n’êtes pas très familier avec CSS, vous trouverez cette liste de propriétés CSS particulièrement utile. Vous pouvez rechercher dans cette liste la qualité que vous souhaitez modifier (couleur d’arrière-plan, taille de police, bordures, etc.).

CSS pré-écrit GRATUIT pour nos utilisateurs

Débutant ou maître CSS, j’ai quelque chose que je pense que vous aimerez…

Si vous utilisez l’un de nos thèmes, vous adorerez les bibliothèques d’extraits CSS pré-écrites que nous avons créées. Par exemple, la collection d’extraits CSS Tracks contient des dizaines d’extraits que vous pouvez copier et coller dans la section CSS supplémentaire pour personnaliser votre site :

Comment personnaliser votre thème avec CSS personnalisé

Cela rend très facile la personnalisation de votre site avec CSS, même si vous n’avez jamais écrit CSS auparavant. Vous pouvez simplement copier et coller n’importe quel extrait de code que vous voulez, puis modifier la valeur comme vous le souhaitez.

Pour trouver les extraits CSS de votre thème, visitez le Centre d’assistance et sélectionnez le thème que vous utilisez. Cliquez ensuite sur le bouton Afficher les extraits CSS en bas de la barre latérale :

Comment personnaliser votre thème avec CSS personnalisé

Vous trouverez un tas d’extraits pré-écrits sur la page suivante pour le thème que vous avez sélectionné.

Conclusion

Je ne m’attends pas à ce que tous les utilisateurs de Compete Themes soient des maîtres CSS et pour quelqu’un qui maîtrise toujours les bases de WordPress, je comprends à quel point ce tutoriel a pu être intimidant.

Cela dit, il est certainement utile de connaître les possibilités de personnalisation avec CSS. De plus, les collections d’extraits permettent de s’y plonger très facilement avec du code copier-coller.

Vous pourriez y revenir à l’avenir lorsque vous vous sentirez mieux préparé à personnaliser votre site avec du code. Dans ce cas, marquez cette page pour plus tard afin que vous puissiez revenir et essayer.

Source d’enregistrement: www.competethemes.com

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails