メディアライブラリの.icoファイルを表示する方法

.icoWordPressサイトにMIMEタイプを追加し、ファビコンファイルをアップロードできるようになりました。ただし、メディアライブラリは、default.pngこれらのイメージのイメージとカスタマイザーのみを表示します。メディアライブラリとカスタマイザで、これらのファビコン画像をWordPressで表示するにはどうすればよいですか？

media-library favicon

— アランP
ソース

更新：これは5.0以降でサポートされるようです。チケット＃43458を参照

デフォルト

これは、ファビコン（.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は空です。

方法1）`wp_mime_type_icon`フィルターの使用

ファビコンの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_srcas の3番目のパラメーター$icon = false（デフォルト）を保持することです！

ファビコンは次のように表示されます。

修正バージョン＃1

方法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 );

そして、次のように表示されます。

変更＃2

我々は唯一設定することをお知らせurl一部ではなくwidth、heightとorientation。wp_get_attachment_image_src()たとえば、関数を使用して、このデータを追加するソリューションをさらに拡張できます。しかし、私はそれをあなたに任せます;-)

いくつかの`$response`例：

ファイルの$response配列の例を次に示しfavicon.icoます。

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] => 
    [caption] => 
    [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']これらの例の一部に特に興味があります。

— バージール
ソース

メディアライブラリの.icoファイルを表示する方法

デフォルト

方法1）wp_mime_type_iconフィルターの使用

方法2）wp_prepare_attachment_for_jsフィルターの使用

いくつかの$response例：

方法1）`wp_mime_type_icon`フィルターの使用

方法2）`wp_prepare_attachment_for_js`フィルターの使用

いくつかの`$response`例：