Guide de démarrage pour les CSS personnalisés de WordPress : 5 extraits de code à apprendre absolument

Sur un site WordPress, lorsque vous souhaitez embellir la page mais que vous ne voulez pas utiliser de plugins encombrants ? CSS personnalisé est un moyen puissant et efficace pour vous dePas besoin de modifier le fichier du thèmeVous pourrez ajuster avec précision les polices, les couleurs, les boutons, l'espacement et d'autres styles.

Ce guide s'adresse aux utilisateur noviceLe dernier ajout à la liste est une nouveauté, qui vous permettra de vous tenir au courant de l'évolution de la 5 extraits de code CSS à apprendre absolumentIl est très simple pour vous aider à optimiser l'apparence de votre site web WordPress.

1. ajustement des styles de titres (police, taille, couleur)

Le thème WordPress par défaut n'est peut-être pas en mesure de satisfaire vos besoins en matière de titres esthétiques.Mais avec CSS, vous pouvez facilement personnaliser H1-H6 TitreLe style.

segment de code

/* Ajustez la police, la taille et la couleur des titres H1-H6 */
h1 {
    taille de la police : 36px ;
    couleur : #ff6600 ; /* orange vif */
    font-weight : bold ;
    text-transform : uppercase ; /* convertir en majuscules */
}

h2 {
    taille de la police : 30px ;
    colour : #0073aa ; /* WordPress Classic Blue */
    font-weight : bold ;
    border-bottom : 2px solid #0073aa ; /* Ajouter une bordure inférieure */
}

h3 {
    taille de la police : 26px ;
    couleur : #333.
    font-weight : normal ;
}

Aperçu de l'effet

• H1 : Titre orange de grande taille, en majuscules
• H2 : Titre bleu en gras avec bordure inférieure
• H3 : Titre foncé de taille normale, convient pour le corps du texte.

Scénarios applicables: :

Appliquer aux titres des articles de blog, embellir la structure hiérarchique du contenu

se rapporterpage produitAméliorer la lisibilité

2. embellir le style des boutons

Les boutons par défaut de WordPress (par exemple Bouton de soumission de formulaire, bouton d'achat, bouton CTA) peutStyle uniqueVous pouvez utiliser le CSS Personnalisation de l'apparence des boutonsqui les rendent plus attrayants.

segment de code

/* Harmoniser les styles de boutons */
button, .button, input[type="submit"] {
    couleur de fond : #C0007A ; /* Magenta */
    couleur : blanc ;
    taille de la police : 16px ;
    padding : 12px 24px ;
    bordure : aucune ;
    border-radius : 5px ; /* coins arrondis */
    curseur : pointeur ;
    transition : toutes les 0,3 s de transition ;
}

/* Effet de survol du bouton */
button:hover, .button:hover, input[type="submit"]:hover {
    couleur de fond : #007ACC ; /* bleu ciel */
    transform : scale(1.05) ; /* léger zoom */
}

Aperçu de l'effet

État par défaut :Fond magenta + texte blanc
Au survol de la souris :Bleu ciel + léger zoom

Scénarios applicables: Applicable àBouton de soumission du formulaire de contact
se rapporterBoutons "Acheter" sur les sites de commerce électronique
se rapporterdes boutons CTA (call to action) pour augmenter le taux de clics

3. personnaliser la hauteur des paragraphes, la taille de la police et l'espacement

souhaitabletypographiquePour améliorer la lisibilité de votre site web, les thèmes WordPress par défaut ont généralement un espacement des lignes plus étroit. Nous pouvons donc utiliser le CSS pour améliorer la lisibilité de votre site web. Optimiser le texte des paragraphes.

segment de code

/* Ajuster l'espacement et la hauteur de ligne du texte du paragraphe */
p {
    font-size : 18px ; /* taille du texte */
    hauteur de ligne : 1.8 ; /* hauteur de ligne */
    couleur : #333 ; /* couleur foncée, contraste renforcé */
    margin-bottom : 20px ; /* augmenter l'espacement des paragraphes */
}

Aperçu de l'effet

• Un texte plus grand pour une lecture plus confortable
• Paragraphes modérément espacés pour réduire la fatigue visuelle

Scénarios applicablesAppliquer aux articles de blog pour en améliorer la lisibilité
Pour les sites d'information afin d'améliorer l'esthétique typographique

4. ajuster l'espacement des éléments de la page (marges et marges intérieures)

Dans les thèmes WordPress, certains éléments peuvent être trop serrés ou pas assez espacés. CSS permet d'ajuster facilement les marges extérieures (margin) et intérieures (padding).

segment de code

/* Harmonisation des marges entre les sections */
.section {
    margin : 40px 0 ; /* 40px d'espacement entre le haut et le bas */
    padding : 20px ; /* marge intérieure */
}

/* Ajustement de l'espacement des menus de navigation */
.nav-menu li {
    margin-right : 15px ; /* Espace entre les éléments du menu */
}

/* Ajuster l'espacement entre la zone de contenu et la barre latérale */
.content {
    marge-droite : 30px ;
}
.sidebar {
    padding-left : 20px ;
}

Aperçu de l'effet

• Améliorer la hiérarchie des pagesVoici un résumé du contenu du rapport du Comité pour l'élimination de la discrimination à l'égard des femmes.
• Augmenter l'espacement du menu de navigationpour éviter que les éléments de menu ne soient trop compacts
• Optimisez la typographie de la barre latéraleFaciliter la lecture du contenu

Scénarios applicablespour tous les sites WordPressOptimisation de la typographie
Convient à l'amélioration des blogs, des pages de produits, des pages de services deespacement

5. réglage des effets d'arrondi et d'ombre de l'image

Si vous le souhaitezDonnez aux photos un aspect plus moderneVous pouvez utiliser le CSS ajoute des coins arrondis et des ombres aux imagesLa mise en place d'un système d'alerte est nécessaire pour améliorer l'attrait visuel de l'appareil.

segment de code

/* Toutes les images ont des coins arrondis et des ombres par défaut */
img {
    border-radius : 10px ; /* coins arrondis */
    box-shadow : 0px 4px 8px rgba(0, 0, 0, 0, 0.2) ; /* ajouter une ombre */
    transition : transform 0.3s ease-in-out ;
}

/* Zoom sur l'image au survol de la souris */
img:hover {
    transformer : scale(1.05) ;
}

Aperçu de l'effet

état par défaut: :Images avec coins arrondis de 10px + ombrage
survol de la souris: :Les images sont légèrement agrandies pour renforcer le sentiment d'interaction.

Scénarios applicablesAppliquer aux images accompagnant les articles de blog afin d'améliorer l'expérience visuelle
Appliquer aux images de produits pour les rendre plus attrayantes
Convient à la présentation d'une équipe, à la présentation d'un cas et à d'autres contenus d'images.

Comment ajouter des feuilles de style CSS personnalisées dans WordPress

Méthode 1 : Utiliser le "Custom CSS" de WordPress

1. Connectez-vous au backend de WordPress
2. entrer dans Apparence → Personnalisation → Extra CSS

3. Collez le code CSS ci-dessus et cliquez sur poste

Méthode 2 : Utilisez "CSS personnalisé simple" Plug-ins Si votre thème ne permet pas d'ajouter des feuilles de style CSS directement, vous pouvez installer le fichier CSS personnalisé simple Plug-ins :

1. Installation des plug-ins → Recherche d'antécédents WordPress CSS personnalisé simple

2. Activation des plug-ins
3. Collez le code CSS dans l'interface du plugin et enregistrez les modifications.

Résumé : 5 codes CSS pour améliorer l'apparence de WordPress

L'adoption de ce guide à l'intention des 5 extraits de code CSS à apprendre absolumentVous pouvez facilement trouver plus d'informations à ce sujet dans la rubrique Site web WordPressPersonnalisez votre design sans dépendre de plugins encombrants ni modifier les fichiers du thème. Qu'il s'agisse de Ajuster le style du titreetBouton d'embellissementetOptimiser la mise en page des paragraphesou Réglage de l'espacement des pages répondre en chantant Réglage de l'effet d'imageTous ces codes simples peuvent vous aider à améliorer rapidement l'aspect et l'expérience utilisateur de votre site web.

Cliquez pour en savoir plus sur WordPress Méthodes d'aménagement paysager.