WordpressでページIDやクラスなどごとに動的にCSSを生成する方法について、PHPやJavaScriptを使用して解説します。

WordpressでページIDなどごとに動的にCSSを生成する方法

ぱっと思いつくのが、PHP直接いじってやる方法です。

んー、よくわからない。僕はよくbashなんかで、pythonとかrubyのファイルをヒアドキュメントで生成してbashから実行して出力を受け取ってーみたいな一種のメタプログラミングみたいな、本件にも似るところがあることをやったりするのですが、ブログのようにアクセスが多い場合はいちいちI/Oとかしてたらレンサバからメールがきそうですからやらないほうがいいですよね…。

それで考えたのが、JavaScriptで、HTMLを読み取ってCSSを生成するってことです。

WordPressはHTMLタグ、特にbodyタグにクラスを生成します。

例えばある投稿のページのbodyは、

トップページのbodyは、

のようになっています。

PHPでいう、is_postとかis_homeみたいなのは、ここから情報を取ることができるという寸法です。

そこで具体的には、こんなかんじです。

$(document).ready(function(){

  if ( document.querySelector('body').classList.contains('home') ){

    var css = document.createElement("style");
    css.type = "text/css";
    css.innerHTML = `
    h2 {
        font-size: 20px !important;
        font-weight: bold !important;
    }

    a {
        font-weight: 100;
    }
    `;
    document.body.appendChild(css);

  }

});

これで、トップページだけに追加したいCSSを追加することができました。

最近はJavascriptで生成されたHTMLもSEO的には優先度が高いみたいなので、これでも平気だと思います。

今見つけたけどこれは使えそうです。