- 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
- Name
- Shou Arisaka / 有坂 翔
- 情報技術者 / Z世代プログラマー / 米大学院にてデータサイエンスを学ぶ
- ITプロフェッショナルとして活動しています。React.js等のモダンなウェブ制作・アプリ開発を得意としており、Java・Python・Rust等のプログラミング言語を用いたソフトウェア開発全般を行っています。
- Github 🐙StackOverflow 🔥Qiita 📝
- TechFreeTools 🔧About.me 👤