プログラミング

WordPressでページIDなどごとに動的にCSSを生成するには

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

Theme Customizer – Dynamic CSS PHP File – WordPress Development Stack Exchange

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

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

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

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

<body class="post-template-default single single-post postid-1521 single-format-standard oceanwp-theme sidebar-mobile default-breakpoint has-sidebar content-right-sidebar post-in-category-programming has-topbar has-breadcrumbs" itemscope="itemscope" itemtype="http://schema.org/WebPage">

トップページのbodyは、

<body class="home blog oceanwp-theme sidebar-mobile default-breakpoint has-sidebar content-right-sidebar has-topbar has-breadcrumbs" itemscope="itemscope" itemtype="http://schema.org/WebPage">

のようになっています。

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的には優先度が高いみたいなので、これでも平気だと思います。

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

PHP in CSS file? – WordPress Development Stack Exchange

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です