如果 <a> 链接是 PDF 文件，请相应地设置样式

Question

我正在为一个客户开发一个网站，他是一个考试委员会。他们有许多内容页面，其中包含有关其教学大纲的摘要详细信息，并且需要从文本中直接链接到 PDF 教学大纲文件。还有一个专门用于 PDF 文件的页面，我目前正在 WordPress 中制作这些自定义帖子类型，但那些有自己的图标设置，我不希望受到我将要描述的 PHP 规则的影响。（这更像是一个 PHP 问题而不是一个 WordPress 问题，所以别担心。）

假设我有一个链接，新教学大纲。使用 WordPress，如果不了解 HTML，就无法向链接添加类，而对于我的客户及其老派员工而言，HTML 是不存在的。他们将看到如何使用 WordPress 文章或页面编辑器中的“添加媒体”按钮添加指向 PDF 文件的链接，这将简单地创建指向 .pdf 文件的链接。这里的问题是它只是一个链接，客户希望用户立即知道它是一个 PDF 文件，而不是一个页面，以便更容易找到相关的教学大纲文件。因此，我建议创建一个规则，在链接到 .pdf 文件的任何链接旁边添加一个 .png 图标，它也会更改链接颜色。

有谁知道我如何实现这一目标？我一直在寻找可以自动执行此操作的 WordPress 插件，但它们要么已经过时，要么难以使用（即，员工需要 HTML 知识来重新设置链接的样式。）

我在网上找到了这个代码片段，但不知道它是否是正确的方向。

$whitelist = array(".pdf");

foreach ($whitelist as $item) {

    if (preg_match("/$item\$/i", $_FILES['uploadfile']['name'])) {

    }
    else {

        redirect_to("index.php");
    }
}

想法？

Answer 1

这可以只用 CSS 来完成，它支持包括 IE7+ 在内的所有主要浏览器。无需添加任何额外的类或<img>元素。

下面的 CSS 将针对 a 的任何链接.pdf，更改链接颜色，给它一些左填充并在创建的空间中应用背景图像：

a[href$=".pdf"] {
    background: url(images/pdf-icon.png) no-repeat 0 50%;
    padding-left: 25px;
    color: red;
}

演示：http : //jsfiddle.net/xuBpG/1/