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将定位到.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文件插入帖子时，它会为.pdf锚标记文件添加一个类。

Answer 3

使用@ tw16的回答提供了一种简单而类似的方式来使用Font Awesome图标而不是静态图像。对于那些希望使用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对此的简单方法。

如果是<a> link is a PDF file, style accordingly</a>

3 个答案: