使用 CSS Sprites 将社交媒体图标添加到 WordPress
已发表: 2015-05-12虽然有许多插件可以帮助您将社交媒体图标添加到您的网站，但并非所有插件都是平等的。 其中一些可能会消耗您的服务器，更不用说可定制性较低了。
幸运的是，有一个替代方案可以帮助您的网站保持闪电般的速度：CSS sprites。
通常，为每个社交媒体链接将单独的图像添加到站点。 虽然这被认为是合理的编码，但它确实意味着当访问者加载页面时对每个图像的额外服务器请求。 当然，页面的服务器请求越多，加载时间就越长。
CSS sprites 的美妙之处在于它们可以包含社交媒体图标的所有图像，同时仍能适当地映射所有相应的链接。 这意味着更少的服务器请求，节省带宽和快速加载页面。 一个双赢的局面！
在本教程中，我将向您展示如何使用 CSS 为您的 WordPress 网站制作您自己的完全可定制的社交媒体图标，包括为您节省一些时间并使该项目更容易完成的代码。
继续阅读，或使用以下链接跳转：
- 创建您的图像
- 将链接和图像添加到您的站点
- 添加您的图标和样式
创建您的图像
创建自己的 CSS 精灵的第一步是使用您希望使用的社交媒体图标创建图像。 它应该有两个紧密堆叠的层：
- 顶层- 将在页面上可见的图标
- 底层——鼠标悬停时可见的图标
这是您的图标应该是什么样子的示例：
请记住，我没有为此图像使用透明背景，以便在本教程中清楚地显示它们。 理想情况下，图像的背景应该是透明的，这样即使您更改了主题的样式和背景颜色，您也可以使用这些图标。
您也不需要在每个图像之间添加空格，因为稍后可以使用 CSS 添加它。 这完全取决于你。
在此示例中，图标将在站点上显示为灰色，但是当鼠标悬停在其上时，将显示其彩色版本。
创建自己的社交媒体图标集后，您就可以进行下一步了。
在继续之前，您需要知道每个符号的宽度和高度（以像素为单位），因此请务必记下它。 图像编辑程序可以帮助您识别这些信息。
将链接和图像添加到您的站点
将图像上传到您的站点并记下图像的位置，以便稍后在代码中调用它。
接下来，您需要将社交媒体链接添加到您的网站，以使这些图标发挥作用。 您可以使用 HTML 执行此操作：
这是您的链接所需的基本结构。 通过替换上面示例中的socialSite实例和Name of Social Media Site添加您希望链接到的站点的实际名称。 还要确保替换 URL。
为您创建的图像顶行中的每个图标重复上面代码中的第二行，沿途替换虚拟文本。 您也可以选择将div id的名称更改为更适合您需要的名称。
放置此代码的最佳位置是直接在您希望图标出现的主题文件中。 例如，您可以将链接添加到sidebar.php 、 footer.php 、 header.php或页面模板文件。
也不要害羞。 随意添加带有描述性标题或您希望的任何其他代码的标题文本。 完成后不要忘记保存。
完成后，您不会看到您的网站有任何不同，但这没关系，因为我们接下来要添加图片。 您也可以稍后再考虑样式、填充和间距。
我在我的测试站点上的链接中添加了标题，以向您显示链接的位置。
添加您的图标和样式
是时候用 CSS 添加你的图标了。 如果您愿意，可以将代码添加到主题的style.css文件或通过自定义 CSS 插件。
这是您需要添加的代码：
用您自己的类以及图像路径替换这些类。 可以根据您的文件将主题标签替换为正确的值，但不要更改零 - 它们需要保持完整才能使图标正确显示。
您还可以为要添加的每个其他社交媒体图标复制和粘贴类socialSiteTwo 。 您还可以更改位置、边距、填充和顶部以满足您的特定样式需求。
下面是这个 CSS 示例的细分，以便快速参考：
-
#social a.social {height:#px;}- 将主题标签替换为每个图标的高度，而不是图像的总高度。 -
#social a.socialSiteOne {left:0px;}– 这是您的第一个符号从图像最左侧开始的位置。 -
#social a.socialSiteOne {width:#px;}- 这是您的第一个社交媒体图标的宽度。 对于所有其他图标，此数字也应该相同。 -
#social a.socialSiteOne {background:url('your-image.png') 0 0;}- 图像被调用，左侧和顶部位置的位置都设置为零像素。 -
#social a.socialSiteTwo {left:#px;}– 将主题标签替换为图像中第二个图标开始位置的像素值。 如果你的第一个图标是 50px 宽，那么这个值就是 51px。 -
#social a.socialSiteTwo {background:url('your-image.png') -#px 0;}- 将主题标签替换为第二个符号从图像最左侧开始计数的像素数。
如果您在创建的图像中的图标之间包含间距，则左侧和背景位置选择器将是相同的。 如果您最初没有添加间距，则左侧选择器应该大于您的背景位置选择器，因为您需要考虑要添加的间距，以像素为单位。
现在您可以添加将在悬停时显示的图像。 为了简单起见，您可以像我在这里所做的那样在上面的示例下方添加以下代码，或者将它们混合在一起：
就像我们在上一个示例中所做的那样，将主题标签替换为正确的值。 第一个值是图标从左侧算起的像素数，第二个值是从顶部算起的像素数。
完成后，保存文件并查看结果。
结论
您可能需要对您的 CSS 样式表进行一些额外的调整以实现您想要的外观，但是您已经开始使用此处介绍的代码了。
如果您想了解更多关于 CSS 来帮助设置图标样式的信息，请查看我们的一篇文章从 WordPress 初学者到专业人士：200 多种职业提升资源和 35 多种资源，以成为一名出色的 WordPress 开发人员。
如果您有兴趣提升您的网站或网络的社交分享，请查看我们的其他一些帖子：使用这 5 个免费 WordPress 社交媒体插件增加您的分享，50 个最佳 WordPress 社交媒体插件（2020 年）。
编者注：这篇文章已经更新，以确保准确性和相关性。
[最初发布：2015 年 5 月 / 修订：2022 年 4 月]