Tous les thèmes WordPress appliquent généralement des styles différents à chaque type de contenu. Les publications, les pages, les taxonomies, les profils et tout autre élément de contenu ont des feuilles de style différentes dans chacun d’eux. Et il en va de même pour les plugins et tous les autres aspects de WordPress.

Cependant, en raison de la flexibilité de WordPress, vous pouvez également utiliser différentes feuilles de style pour une page et des types de publication spécifiques. Mais regardons pourquoi vous devrez peut-être leur ajouter du CSS avant de passer par le processus.

Pourquoi appliquer le CSS à une page ou à un article spécifique

L’ajout de CSS à des pages et des articles spécifiques est très utile si vous êtes créer un site Web ou concevoir votre site Web. CSS est généralement utilisé pour personnaliser l’apparence visuelle du site Web. Ainsi, l’utilisation de CSS sur votre site Web dans son ensemble peut être très utile pour présenter vos pages Web exactement comme vous le souhaitez pour les visiteurs de votre site Web.

Il peut y avoir une page particulière ou un type de message qui nécessite un modèle unique par rapport à d’autres pages ou publications sur votre site Web. Dans ce cas, l’une de vos meilleures options consiste à appliquer le CSS sur la page spécifique ou la publication. Ces pages ou messages sont généralement ajoutés aux menus de votre site Web. Mais ils peuvent également inclure d’autres pages et publications uniques telles que la page de la boutique, la page du produit ou même la page d’accueil.

Par exemple, même chez QuadLayers, nous avons utilisé CSS sur des pages spécifiques comme Portfolio et À propos pour les différencier des autres pages ou types de publication. Maintenant, sans plus tarder, passons au processus.

Comment appliquer le CSS sur une page ou un article spécifique

Il existe différentes manières d’ajouter des CSS appliqués sur une page ou un article spécifique. Mais voici les 3 les plus courantes:

  1. Utilisation de l’identifiant ou de la classe HTML
  2. Ajouter une fonction PHP
  3. Inclure le fichier CSS sur une page ou un article spécifique

Toutes ces approches peuvent être utilisées pour appliquer CSS à des fins multiples. Nous allons passer en revue toutes ces approches dans cet article avec un didacticiel pas à pas approprié.

1. Utilisation de l’identifiant ou de la classe HTML

C’est l’une des approches les plus courantes et les plus largement acceptées si vous souhaitez appliquer CSS sur une page ou un article spécifique. Tout ce que nous devons faire est saisir un identifiant unique qu’une page ou un article aura. Ensuite, cette classe ou cet identifiant HTML nous permet de cibler tous nos scripts CSS sur la page ou la publication souhaitée.

1.1. Trouver la classe HTML ou l’identifiant de la page

Tout d’abord, vous devez trouver l’identifiant ou la classe à utiliser pour le script CSS. Cela peut être facilement trouvé à l’aide de l’outil d’inspection du navigateur.

Ouvrez simplement la page où vous souhaitez appliquer le CSS et clic-droit sur l’élément que vous souhaitez modifier. Cliquez ensuite sur Inspecter.

Ici, vérifiez la balise HTML body. Cela varie en fonction du thème que vous utilisez.

Nous avons utilisé le thème Twenty Twenty dans tous les exemples suivants. Voici donc ce que vous verrez lorsque vous inspecterez la page d’accueil d’un site Web utilisant le thème Twenty Twenty :

Dans la capture d’écran ci-dessus, l’identifiant unique de la page d’accueil est le « domicile » classer. Par conséquent, si vous souhaitez appliquer certaines règles CSS uniquement à la page d’accueil, vous devez utiliser cette classe dans vos sélecteurs.

Par exemple, disons que nous voulons appliquer un style au logo uniquement sur la page d’accueil. Ensuite, outre la classe d’accueil, nous avons également besoin du sélecteur d’image de logo. Encore une fois, cela peut être obtenu à partir de l’outil d’inspection du navigateur.

Dans ce cas, nous utiliserons le classe « logo personnalisé » pour appliquer notre style au logo. Maintenant, rassemblons-les avec la classe saisie à l’étape précédente. Enfin, nous pouvons appliquer notre script uniquement sur la page d’accueil en utilisant le sélecteur CSS suivant :

.home .custom-logo{ /*your CSS here */}

Noter: Vous n’avez pas besoin de suivre toutes les balises HTML intermédiaires et de les inclure dans votre sélecteur. Vous pouvez tous les ignorer même si l’élément que vous souhaitez styliser est éloigné du sélecteur de page unique.

Bien sûr, si vous avez besoin d’un sélecteur plus spécifique, vous pouvez utiliser le sélecteur de chemin CSS complet. Mais cela est assez écrasant et ne sera pas nécessaire dans la plupart des cas.

Par exemple, il s’agit d’un sélecteur très spécifique pour styliser le même élément de logo que nous avons vu auparavant :

html body.home div#page.site header#masthead div.site-branding div.site-logo span.custom-logo-link img.custom-logo{ /*your CSS here */}

1.2. Trouver la classe HTML ou l’identifiant de la publication

Semblable aux pages, il devrait également y avoir une classe HTML unique pour chaque publication. Encore une fois, inspectez simplement l’élément sur le message que vous souhaitez appliquer CSS à l’aide de l’outil de développement du navigateur. Ensuite, vous pourrez voir l’identifiant unique comme avec le postid attribut.

Pour le post suivant avec le thème Twenty Twenty, la classe qui identifie ce post est postid-557.

post id inspect appliquer css sur une page spécifique

De même, vous pouvez faire la même chose avec n’importe quelle autre page d’un site Web. Utilisation de la classe unique qui identifie une page. Si vous regardez la capture d’écran suivante, vous pouvez voir que la classe qui identifie la page est id-page-357.

id de page inspecter appliquer CSS sur une page spécifique

Enfin, créez votre propre sélecteur CSS qui répond aux besoins de votre site Web, tout comme l’exemple de logo personnalisé. Ensuite, vous pouvez appliquer le CSS sur la page ou le message spécifique en l’ajoutant dans Apparence > Personnaliser > CSS supplémentaire. Si vous avez besoin de plus d’aide, vous pouvez consulter notre guide sur la façon d’appliquer CSS à WordPress ou appliquer CSS à l’aide de l’outil de développement de navigateur.

2. Ajouter une fonction PHP

La méthode précédente est adéquate pour appliquer notre CSS personnalisé à des publications ou des pages spécifiques. Cela suffira pour la plupart des personnalisations dont vous pourriez avoir besoin. Mais dans certains cas, il peut y avoir des limites :

  • Votre thème n’a pas de classe ou d’identifiant HTML unique pour le contenu que vous devez styliser.
  • Vous avez une longue liste de règles CSS et devez les enregistrer dans des fichiers séparés.
  • Vous souhaitez appliquer une autre condition en plus de la page actuelle.

Si vous rencontrez des problèmes similaires lorsque vous souhaitez appliquer CSS à une page ou à un article spécifique, utiliser une fonction PHP serait mieux.

Mais avant de commencer, assurez-vous de sauvegarder votre site Web WordPress ou de créer un thème enfant pour cette approche. Nous allons éditer des fichiers délicats sur votre site Web. Ainsi, toute modification inutile pourrait entraîner d’autres problèmes avec votre site Web.

Si vous avez besoin d’aide, vous pouvez même utiliser l’un des meilleurs plugins de thème enfant pour WordPress pour créer un thème enfant.

2.1. Trouver la page/l’identifiant de la publication

La première étape consiste à vérifier l’identifiant de la page ou de la publication où nous voulons appliquer nos styles. Vous remarquerez peut-être que les valeurs d’id sont les mêmes que celles de l’étape précédente. Cependant, ce n’est pas le même identifiant HTML que nous avons utilisé auparavant.

L’identifiant auquel nous faisons référence maintenant est une variable PHP qui identifie les publications et les pages. Alors que l’identifiant de l’approche précédente identifie une classe HTML.

Heureusement, il est très facile de trouver la page et l’identifiant de publication sur votre site Web. Vous pouvez voir l’identifiant des pages et des publications sur le tableau de bord de l’administrateur principal lorsque vous ouvrir l’éditeur. L’identifiant de la publication ou de la page est mentionné sur l’URL de votre navigateur.

URL d'identification de la page appliquer le CSS sur une publication de page spécifique

Une autre façon d’obtenir l’identifiant d’une page ou d’un article consiste à utiliser le script suivant sur le functions.php fichier du thème enfant. Allez juste à Apparence > Éditeur de thème et ouvrez le fonctions.php fichier.

Ensuite, collez l’extrait suivant dans l’éditeur et Mettre à jour le fichier. Il imprimera l’identifiant de la page sur le front-end.

add_action('wp_head',function(){
    $page_id = get_queried_object_id();
    echo $page_id;
});

id de page frontal comment appliquer le CSS sur une page / publication spécifique

Une fois que vous connaissez l’identifiant PHP de la publication ou de la page à laquelle vous devez appliquer le CSS, vous pouvez simplement imprimer le CSS sur la tête. Vous pouvez utiliser le même crochet que nous avons utilisé auparavant, c’est-à-dire, wp_head().

Collez simplement l’extrait suivant sur le fonctions.php déposer une nouvelle fois.

add_action('wp_head','my_head_css');
function my_head_css(){
    $page_id = get_queried_object_id();
    if($page_id==97){
        echo "<style>    /* your CSS here */    </style>";
    }
}

Assurez-vous d’ajouter votre CSS dans la section « votre CSS ici » et Mettre à jour le fichier.

3. Inclure le fichier CSS sur une page ou une publication spécifique

Les méthodes précédentes conviennent à l’ajout de petits morceaux de CSS pour la personnalisation de base requise par une publication ou une page spécifique. Mais pour les scripts CSS plus volumineux, vous devez suivre les bonnes pratiques et télécharger un fichier CSS séparé. où tous vos CSS personnalisés doivent être rassemblés.

3.1. Créer un fichier CSS à l’aide de l’éditeur de code

Tout d’abord, vous devez créer le fichier CSS séparé avec tous les scripts CSS nécessaires à l’aide d’un éditeur de code. Des éditeurs tels que Visual Studio Code, Sublime text ou tout autre support prenant en charge les fichiers CSS peuvent être utilisés.

Ensuite, créez un nouveau fichier avec l’extension CSS et collez votre code ici. Nous avons nommé le fichier mon-style.css pour ce tutoriel.

3.2. Téléchargez le fichier CSS dans le dossier du thème enfant

Maintenant, le fichier CSS que vous avez créé doit être téléchargé dans le répertoire du thème enfant. Pour cela, vous pouvez utiliser un client FTP comme FileZilla pour télécharger le fichier. Vous pouvez même le télécharger dans le répertoire principal du thème enfant lui-même.

3.2. Mettez en file d’attente votre fichier CSS personnalisé

Maintenant, vous pouvez mettre en file d’attente votre fichier CSS personnalisé sur votre site Web WordPress en ajouter un extrait de code sur votre functions.php fichier.

Dans le script suivant, nous utiliserons le wp_enqueue_script() hook, qui est la bonne façon d’appliquer des fichiers CSS à un site Web WP. Dans la fonction, nous enregistrons et mettons en file d’attente notre fichier CSS (my-styles.css) uniquement si la condition est remplie. C’est la même utilisation que l’exemple précédent.

Puis le get_queried_object_id() La fonction récupérera l’identifiant de la page ou de la publication en cours. Tout ce que vous avez à faire est d’ajouter le script suivant au fonctions.php déposer à nouveau et Mettre à jour ce.

add_action( 'wp_enqueue_scripts', 'my_theme_styles' );

function my_theme_styles() {
    if(get_queried_object_id()==97){
        wp_register_style( 'my-styles', get_stylesheet_directory_uri() . '/my-styles.css');
        wp_enqueue_style( 'my-styles', get_stylesheet_directory_uri() . '/my-styles.css');
    }
}

Noter: Dans l’exemple de script ci-dessus, nous nous référons à la même référence d’ID que celle que nous avons utilisée dans les exemples précédents, à savoir 97.

Si vous souhaitez plus d’informations sur l’ajout d’un fichier CSS, veuillez consulter notre guide détaillé pour appliquer CSS à WordPress.

Conclusion

Ce sont toutes les différentes méthodes par lesquelles vous pouvez appliquer CSS à une page ou à un article spécifique. Cela peut vous aider beaucoup à créer des conceptions uniques pour des pages et des publications particulières pour votre site Web. Pour résumer, il existe 3 façons les plus courantes d’ajouter du CSS à des pages et des articles spécifiques :

  • Utilisation de l’identifiant ou de la classe HTML
  • Ajouter une fonction PHP
  • Inclure le fichier CSS sur une page ou un article spécifique

L’approche la plus simple consiste à utiliser l’identifiant ou la classe HTML pour les sélecteurs CSS. Cependant, si votre thème a des limites, votre meilleure option consiste à ajouter une fonction PHP pour appliquer le CSS. Enfin, si vous devez appliquer de gros scripts CSS pour une page ou un article spécifique, les inclure dans un fichier CSS est l’approche la plus appropriée pour vous.

Si vous souhaitez utiliser plus de CSS sur votre site web, nous avons également des tutoriels pour personnaliser le menu Divi avec CSS ou éditer la boutique WooCommerce par programmation. De même, vous pouvez également personnaliser encore plus vos pages et vos publications à l’aide de nos guides pour créer des publications et des pages par programmation, transformer une publication en page, créer un type de publication personnalisé ou même ajouter des publications à une page dans WordPress.