JP Coders

Published on

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

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

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
Authors
  • avatar
  • Name
  • 情報技術者 / Z世代プログラマー / 米大学院にてデータサイエンスを学ぶ

  • ITプロフェッショナルとして活動しています。React.js等のモダンなウェブ制作・アプリ開発を得意としており、Java・Python・Rust等のプログラミング言語を用いたソフトウェア開発全般を行っています。

お手伝いできますか? 🤝

他の方法でのご連絡をご希望ですか?
web制作ご依頼受付中

本記事で掲載している情報やコードは執筆時点のものであり、動作を保証するものではありません。 自己責任のもと、プログラムの実行や情報の利用にあたってはご注意ください。


本記事には提携する企業の広告が含まれる場合があります。