WordPress 如何在媒體庫中顯示.ico 檔案

問題描述

我已經在我的 WordPress 網站新增了一個.ico mime 型別，我可以上傳 favicon 檔案。但媒體庫僅顯示這些影像的 default.png 影像，還可以在定製程式中顯示。如何讓 WordPress 在媒體庫和定製工具中顯示這些圖示？

最佳解決方案

預設值

這是如何在媒體網格檢視中顯示的圖示 (.ico) 檔案：

這是微模板的對應部分：

<# } else if ( 'image' === data.type && data.sizes ) { #>
    <div class="centered">
        <img src="{{ data.size.url }}" draggable="false" alt="" />
    </div>
<# } else { #>
    <div class="centered"> 
        <# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
           <img src="{{ data.image.src }}" class="thumbnail" draggable="false" />
        <# } else { #>
            <img src="{{ data.icon }}" class="icon" draggable="false" />
        <# } #>
    </div>
    <div class="filename">
        <div>{{ data.filename }}</div>
    </div>
<# } #>

其中 data.sizes 對於 favicons 是空的。

方法 1) 使用 `wp_mime_type_icon` 過濾器

favic 的 mime 型別是 image/x-icon 。

我設法在 Media Grid 檢視中顯示.ico 檔案：

add_filter( 'wp_mime_type_icon', function( $icon, $mime, $post_id )
{
    if( $src = false || 'image/x-icon' === $mime && $post_id > 0 )
        $src = wp_get_attachment_image_src( $post_id );

    return is_array( $src ) ? array_shift( $src ) : $icon;
}, 10, 3 );

這裡重要的是將 wp_get_attachment_image_src 的第三個引數保留為 $icon = false(預設情況下)，以避免無限迴圈！

然後，favicons 將顯示如下：

方法 2) 使用 `wp_prepare_attachment_for_js` 過濾器

載入媒體網格檢視時，我們呼叫 wp_ajax_query_attachments 處理程序。它執行以下附件查詢：

$query = new WP_Query( $query );
$posts = array_map( 'wp_prepare_attachment_for_js', $query->posts );

在這個 wp_prepare_attachment_for_js 功能中，各種資訊被新增到 WP_Post 的帖子中，它們被過濾：

return apply_filters( 'wp_prepare_attachment_for_js', $response, $attachment, $meta );

其輸出為 $response 陣列。

我們可以使用此過濾器新增缺少的空格：

add_filter( 'wp_prepare_attachment_for_js', function( $response, $attachment, $meta )
{
    if( 'image/x-icon' === $response['mime'] 
         && isset( $response['url'] )
         && ! isset( $response['sizes']['full'] )
    )
    {
            $response['sizes'] = array( 'full' => array( 'url' => $response['url'] ) );
    }   
   return $response;
}, 10, 3 );

他們會顯示如下：

請注意，我們只設定 url 部件，而不是 width，height 和 orientation 。例如，在 wp_get_attachment_image_src()功能的幫助下，我們可以進一步擴充套件解決方案來新增這些資料。但我離開了你;-)

一些 `$response` 的例子：

以下是 favicon.ico 檔案的 $response 陣列示例：

Array 
(
    [id] => 803
    [title] => favicon
    [filename] => favicon.ico
    [url] => http://example.tld/wp-content/uploads/2015/02/favicon.ico
    [link] => http://example.tld/?attachment_id=803
    [alt] => 
    [author] => 11
    [description] => 
     => 
    [name] => favicon
    [status] => inherit
    [uploadedTo] => 0
    [date] => 1423791136000
    [modified] => 1423791136000
    [menuOrder] => 0
    [mime] => image/x-icon
    [type] => image
    [subtype] => x-icon
    [icon] => http://example.tld/wp-includes/images/media/default.png
    [dateFormatted] => February 13, 2015
    [nonces] => Array
        (
            [update] => 4fac983f49
            [delete] => efd563466d
            [edit] => df266bf556
        )

    [editLink] => http://example.tld/wp-admin/post.php?post=803&action=edit
    [meta] => 
    [authorName] => someuser
    [filesizeInBytes] => 1406
    [filesizeHumanReadable] => 1 kB
    [compat] => Array
        (
            [item] => 
            [meta] => 
        )

)

以下是 WordPress-Logo.jpg 影像的示例：

ps：我們對這些例子中的 $response['size']有一定的興趣。

參考文獻

How to display .ico files in the media library

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

WordPress 如何在媒體庫中顯示.ico 檔案