如果一個<a>鏈接是一個PDF文件，風格相應

我正在爲客戶，誰是考試委員會的網站上工作。他們有許多內容頁面，其中包含有關他們的教學大綱的摘要細節，並且需要直接鏈接到文本內的PDF大綱文件。還有一個頁面僅用於PDF文件，目前我正在WordPress中製作這些自定義帖子類型，但這些頁面有自己的圖標設置，我不希望受到我將要描述的PHP規則的影響。（這是一個比WordPress問題更多的PHP問題，所以請不要擔心。）如果一個<a>鏈接是一個PDF文件，風格相應

假設我有一個鏈接，即New Syllabus。使用WordPress時，無法在鏈接中添加類，而不瞭解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"); 
    } 
}

想法？

來源

2013-08-22 tristanojbacon

你的客戶打算從'添加媒體'按鈕添加'.pdf'文件？你想要將某個類添加到該.pdf文件鏈接？ –

這可以用CSS完成，它支持所有主流瀏覽器，包括IE7 +。沒有必要添加任何額外的類或元素。

的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/

來源

2013-08-22 10:55:03 tw16

完美的工作謝謝你！ – tristanojbacon

試試這個：

在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錨標記文件的功能。

來源

2013-08-22 10:38:55

使用@ 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爲此簡單化的方法。

來源

2016-10-13 15:52:31

如何阻止這出現在帶鏈接的圖片之後，現在正在逃離我......任何想法？ –

如果一個<a>鏈接是一個PDF文件，風格相應

回答

相關問題