CSS-Stylesheets über verschiedene Domains hinweg teilen

Ich arbeite an zwei verschiedenen WordPress-Sites, die sich in vielerlei Hinsicht ähneln, aber unterschiedliche Skins haben.

Nehmen wir zum Beispiel an, ich arbeite an zwei „Magazin“-Sites, die das gleiche CSS-Layout haben, z. B. Rastersystem, Ränder usw., aber unterschiedliche CSS-Dekorationseigenschaften, z. B. Farbverläufe, Farben, Schatten.

Was ist der beste Weg, um sie dazu zu bringen, dasselbe Basis-CSS-Layout, aber unterschiedliche Dekorations-CSS zu teilen?

Anfangs dachte ich sowas wie…

<link rel="stylesheet" type="text/css" media="all" href="https://stackoverflow.com/questions/15340222/LINK-TO-BASE-CSS-ON-PRIMARY-DOMAIN.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/style.css" /> <!-- This would be the 'top-up' CSS -->

Besonders sauber erscheint mir das aber nicht. Ich gebe aber zu, auch hier gibt es eine sehr ähnliche Frage.

Wird dies immer noch als der beste Weg angesehen? Gibt es Nachteile bei der Verlinkung auf eine andere Domain? Ich habe gelesen, dass dies sogar eine sein kann Vorteil wegen domänenübergreifendem Laden.

Was Sie vorgeschlagen haben, ist in Ordnung. Ich bin mir nicht sicher, ob es eine gibt Vorteil wird als “domainübergreifendes Laden” bezeichnet, aber das Hosten Ihrer Stylesheets auf einem anderen Server ist eine sehr gängige Praxis. Dieser andere Server wird als CDN oder Content Delivery Network bezeichnet. Hier einige Informationen zu CDNs und ihren Vorteilen:

http://www.sitepoint.com/7-reasons-to-use-a-cdn/

Auch Pro-Tipp: tun Sie einige DNS-Vorabruf wenn Sie eine separate Domain zum Hosten Ihrer Dateien verwenden. Es ist so einfach wie:

<link rel="dns-prefetch" href="https://myexternalcdn.com" />

Versuchen Sie, Layoutstruktur und Vorlagen zu trennen und alles aus derselben Domäne aufzurufen

<link rel="stylesheet" type="text/css" media="all" href="https://stackoverflow.com/questions/15340222/fileserverdomain/css/structure.css" />
<link rel="stylesheet" type="text/css" media="all" href="fileserverdomain/css/firsttamplatename.css" />

ODER

<link rel="stylesheet" type="text/css" media="all" href="https://stackoverflow.com/questions/15340222/fileserverdomain/css/structure.css" />
<link rel="stylesheet" type="text/css" media="all" href="fileserverdomain/css/secondtamplatename.css" />

Vorteil dieser Lösung ist, dass man zusätzlich Schaltvorlagen anbieten kann 😀

Sie können diesen Filter verwenden, um Stile mit einer beliebigen Bedingung oder einem alternativen Href-String herauszufiltern, Beispiel:

add_filter( 'style_loader_src', function($href){
if(strpos($href, "name-of-allowed.css") !== false) {
return $href;
}
return false;
});