為特定文章/頁面增添CSS

使CSS僅在指定的文章/頁面生效。

Add Unique Custom Styles to One WordPress Page or Post

Amethyst Website Design

每個文章/頁面都有單獨的class,應用在兩處:

  • <body class="">
    • 負責整個畫面
    • 文章classpostid-xxx
    • 頁面classpage-id-xxx
  • <article class="">
    • 負責內文部份
    • 文章/頁面class均為post-xxx

找到目標文章/頁面的ID,填入xxx的位置。

方法一

「控制台 > 文章/頁面」查看連結中的post=xxx

方法二

打開欲增添CSS的文章/頁面,再打開Chrome的開發人員工具,找到<body class="">以及<article class="">


確認之後就可以開始增添特定CSS樣式,假定ID為123,則:

/*文章*/
.postid-123 {
     color: #fff;
}
/*頁面*/
.page-id-123 {
     color: #fff;
}
/*文章&頁面内文*/
.post-123 {
     color: #fff;
}

為ID-123的文章/頁面單獨建立CSS樣式,完成。