Dieser Artikel erklärt, wie man dynamisch CSS für jede Seiten-ID, Klasse und mehr in WordPress mit PHP und JavaScript generiert.
Wie man dynamisches CSS für jede Seiten-ID in WordPress generiert
Das Erste, was mir in den Sinn kommt, ist die direkte Manipulation von PHP.
Theme Customizer - Dynamic CSS PHP File - WordPress Development Stack Exchange
Hmm, ich bin mir nicht ganz sicher. Ich mache oft etwas Ähnliches in Bash, wo ich Python- oder Ruby-Dateien mit Here-Documents generiere, sie von Bash aus ausführe und die Ausgabe empfange - eine Art Metaprogrammierung. Dies ist dem aktuellen Thema etwas ähnlich, aber bei Seiten mit hohem Traffic wie Blogs würden wiederholte I/O-Operationen wahrscheinlich Warnungen vom Mietserver zur Folge haben, also sollte man es besser nicht tun…
Also dachte ich daran, JavaScript zu verwenden, um HTML zu lesen und CSS zu generieren.
WordPress generiert Klassen in HTML-Tags, besonders im Body-Tag.
Zum Beispiel ist der Body einer Beitragsseite:
<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”>
Der Body der Startseite ist:
<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”>
Die Idee ist, dass man Informationen aus diesen Klassen abrufen kann, ähnlich wie bei PHP-Funktionen wie is_post oder is_home.
Also sieht es speziell so aus:
$(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);
}
});Damit können Sie CSS hinzufügen, das Sie nur auf die Startseite anwenden möchten.
In letzter Zeit scheint auch mit JavaScript generiertes HTML eine hohe Priorität in Bezug auf SEO zu haben, also sollte dies in Ordnung sein.
Ich habe gerade dies gefunden und es sieht nützlich aus: