プラグインを使わずWordPressで個別記事ごとにCSSを適用する簡単な方法

追加コード

footer.php

<script> 
    (function() {
        var doc = document;
        var wpCss = doc.getElementsByClassName('wpcss');
        var wpCssL = wpCss.length;
        for (i=0; i < wpCssL; i++) {
            var wpStyle = doc.createElement('style');
            wpStyle.textContent = wpCss[i].textContent.replace(/\s{2,}/g,"");
            doc.head.appendChild(wpStyle);
        }
    })()
</script>
 
</body> //この真上に追加

追加する場所は </body> の真上が最適です。いわゆる後読みの JavaScript なので処理も軽いです。

追加したい CSS はそのまま記事部分に書きます。具体的には WordPress のテキストモードで

図のように追加したいCSSを<div class="wpcss">と</div>で囲います。

投稿テキストモード

<div class="wpcss">
body {
    background-color:#888;
}
</div>

改行等はいくら入っても構いません。この場合であれば、body の背景色が灰色（#888）なります。div である必要はないですが、class は「wpcss」にする必要があります。

前述の「CSS を紹介するときに楽が出来る」理由は、「記事に書いたものをそのまま適用できる」事です。CSS を紹介する際、このクラスさえ与えれば自動でヘッダ内にスタイルタグを作ってくれるので、カスタムフィールドなどを利用したものは記事とカスタムフィールド2箇所に同じものを書かなくてはいけませんが、これなら1つで済みます。楽ちんですね！

for で回して全ての wpcss を拾ってくるので何個あっても全て適用されます。

記事にそのまま載ってしまうため、紹介などの目的がない場合は邪魔な文章になってしまいますが、その場合は

投稿テキストモード

<div class="wpcss none">
body {
    background-color:#888;
}
</div>

など「none」クラスを追加して、CSS に

CSS

.none{display:none}

を追加します。これで記事上からは消えて見えなくなります。CSS で見えなくする感じです。（ソースには残りますが）

この記事でもこの記事だけの CSS（背景色が灰色）を適用してみました。背景色が出てる部分が両脇しか無いので、若干わかりづらいですが灰色になってますね！

ほぼ同じ原理で JavaScript も実行することが出来るので、そのへんの記事もおいおい書きます。