ぱっと思いつくのが、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的には優先度が高いみたいなので、これでも平気だと思います。
今見つけたけどこれは使えそうです。