如果<a>链接是PDF文件，则样式相应

Question

我正在为一个客户的网站工作，他是一个考试委员会。它们有一些内容页面，其中包含关于其教学大纲的摘要详细信息，并且需要从文本中直接链接到PDF教学大纲文件。还有一个仅供PDF文件使用的页面，我目前正在WordPress中创建那些自定义Post类型，但是它们有自己的图标设置，我不希望受到我将要描述的PHP的影响。(这更像是一个PHP问题，而不是一个WordPress问题，所以不要担心。)

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

有谁知道我是怎么做到的吗？我一直在寻找自动实现这个功能的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将针对指向.pdf的任何链接，更改链接颜色，给它一些左填充，并在创建的空间中应用背景图像：

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

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

Answer 2

试试这个：

将此代码添加到functions.php文件中。

add_filter('media_send_to_editor'，'my_filter_pdf'，20，3)；

function my_filter_pdf($html, $id) {
    $attachment = get_post($id); //fetching attachment by $id passed through

    $mime_type = $attachment->post_mime_type; //getting the mime-type
    if ($mime_type == 'application/pdf') { //checking mime-type
        $src = wp_get_attachment_url( $id );

        $html = '<a href="'.$src.'" class="any-class-for-pdf-files">File</a>';
        return $html; // return new $html    
    }
        return $html;
}

这是一个函数，当您将pdf文件插入post时，它将向.pdf锚标记文件中添加一个类。

Answer 3

使用@tw16的答案提供了一种简单而类似的方式来使用字体、令人惊讶的图标，而不是静态的图像。对于那些希望使用Fontawesome或其他支持unicode的图标库的人，请尝试如下：

/* MIME TYPE ICONS */
a[href$=".pdf"]::after {
  font-family: "fontawesome";
  content: "\0020\f1c1";
  color: inherit
}
a[href$=".doc"]::after {
  font-family: "fontawesome";
  content: "\0020\f1c2";
  color: inherit
}
a[href$=".xls"]::after {
  font-family: "fontawesome";
  content: "\0020\f1c3";
  color: inherit
}

当然，您可以使用::before或::after伪类，这取决于您希望图标放置的位置(左或右)。

感谢tw16对此的简化方法。