跨域共享CSS样式表

Question

我正在处理两个不同的WordPress网站，它们在许多方面相似，但外观不同。

例如，假设我正在处理两个“杂志”网站，它们共享相同的CSS布局，如网格系统、边距等，但不同的CSS装饰属性，如渐变、颜色、阴影等。

那么，最好的方法是什么，可以使它们共享相同的基本CSS布局，但具有不同的装饰性CSS呢？

起初，我认为可以使用……

<link rel="stylesheet" type="text/css" media="all" href="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 -->

对我来说，这似乎不是特别干净的。但我承认，这里也有一个非常类似的问题。

这仍然被认为是最好的方法吗？ 链接到另一个域有什么缺点吗？我读过这可能甚至是一个优势，因为跨域加载。

- SparrwHawk

---

加载跨域样式表的唯一缺点是，如果该域名关闭，则样式表将无法加载。主要优点是它将被缓存，因此只需要加载一次，就可以为使用它的所有站点提供服务。 - Pete

另一个优点是浏览器每个域名只允许有有限数量的同时连接，因此将资源放在另一个域中将允许您同时加载更多资源，从而使您的网站更快。参见此问题：https://dev59.com/a3NA5IYBdhLWcg3wYMt- - Michiel

Answer 1

你提出的建议很好。我不确定是否有一种称为“跨域加载”的优势，但在另一个服务器上托管你的样式表是一种非常普遍的做法。这个服务器被称为CDN或内容交付网络。以下是关于CDN及其优势的一些信息：

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

---

此外，专业提示：如果您要使用单独的域来托管文件，请进行DNS预取。操作非常简单：

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

- Ayman Safadi

Answer 2

尝试将布局结构和模板分开，并从同一域调用所有内容。

<link rel="stylesheet" type="text/css" media="all" href="fileserverdomain/css/structure.css" />
<link rel="stylesheet" type="text/css" media="all" href="fileserverdomain/css/firsttamplatename.css" />

或者

<link rel="stylesheet" type="text/css" media="all" href="fileserverdomain/css/structure.css" />
<link rel="stylesheet" type="text/css" media="all" href="fileserverdomain/css/secondtamplatename.css" />

这个解决方案的好处是，您可以额外提供切换模板的选项 :D

- tkeram

---

谢谢您的回答，但是从同一个域调用所有内容是否有任何优势？例如速度？顺便说一下，他们永远不需要将主题切换到另一个主题，因为它们是分开的杂志。 - SparrwHawk

有几个好处：速度-浏览器会缓存来自同一域的文件，分离和性能-此域可以指向单独的文件服务器，如果您使用文件服务器存储js、css和图像，则可以节省Web服务器上的数据传输。 - tkeram

Answer 3

您可以使用此过滤器来过滤任何条件或替代输出 href 字符串的样式，例如：

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

- PayteR