如何显示媒体库中的.ico文件

时间:2015-02-13 作者:AlanP

我添加了一个.ico mime输入我的WordPress网站,我就可以上传favicon文件了。但媒体库仅显示default.png 这些图像的图像以及自定义程序中的图像。如何让WordPress在媒体库和自定义程序中显示这些favicon图像?

1 个回复
最合适的回答,由SO网友:birgire 整理而成

更新:看起来这将在5.0以上版本中得到支持。参见票证#43458

默认设置是这样的(.ico) 文件显示在媒体网格视图中:

default

这是微模板的相应部分:

<# } 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 筛选器favicons的mime类型为image/x-icon.

我设法显示.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 (默认情况下)以避免无限循环!

然后,图标显示如下:

Modifed version #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 大堆

我们可以使用此筛选器添加favicons缺少的大小:

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 );
然后他们会这样出现:

Modification #2

请注意,我们只设置url 部分而非width, heightorientation. 我们可以在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 图片:

Array
(
    [id] => 733
    [title] => WordPress-Logo
    [filename] => WordPress-Logo.jpg
    [url] => http://example.tld/wp-content/uploads/2015/02/WordPress-Logo.jpg
    [link] => http://example.tld/2015/02/10/test/wordpress-logo/
    [alt] => 
    [author] => 1
    [description] =>
    [caption] =>
    [name] =>  wordpress-logo
    [status] => inherit
    [uploadedTo] => 784
    [date] => 1423314735000
    [modified] => 1423571320000
    [menuOrder] => 0
    [mime] => image/jpeg
    [type] => image
    [subtype] => jpeg
    [icon] => http://example.tld/wp-includes/images/media/default.png
    [dateFormatted] => February 7, 2015
    [nonces] => Array
        (
            [update] => cb6a4bca10
            [delete] => 068a4d3897
            [edit] => 14b7d201ff
        )

    [editLink] => http://example.tld/wp-admin/post.php?post=733&action=edit
    [meta] => 
    [authorName] => someuser
    [uploadedToLink] => http://example.tld/wp-admin/post.php?post=784&action=edit
    [uploadedToTitle] => 20150209021847
    [filesizeInBytes] => 127668
    [filesizeHumanReadable] => 125 kB
    [sizes] => Array
        (
            [thumbnail] => Array
                (
                    [height] => 150
                    [width] => 150
                    [url] => http://example.tld/wp-content/uploads/2015/02/WordPress-Logo-150x150.jpg
                    [orientation] => landscape
                )

            [medium] => Array
                (
                    [height] => 184
                    [width] => 300
                    [url] => http://example.tld/wp-content/uploads/2015/02/WordPress-Logo-300x184.jpg
                    [orientation] => landscape
                )

            [full] => Array
                (
                    [url] => http://example.tld/wp-content/uploads/2015/02/WordPress-Logo.jpg
                    [height] => 620
                    [width] => 1010
                    [orientation] => landscape
                )

        )

    [height] => 620
    [width] => 1010
    [orientation] => landscape
    [compat] => Array
        (
            [item] => 
            [meta] => 
        )

)
ps:我们对$response[\'size\'] 这些示例的一部分。

结束

相关推荐

Can't delete unwanted favicon

我有一个favicon,它是wordpress主题停用后的残余。我在主题文件夹中找不到favicon文件,也找不到wordpress或服务器根目录。我已将自己的引用添加到一个新的favicon,但仍显示旧的favicon。<;link rel=“icon”type=“image/png”href=”http://www.steve.doig.com.au/wordpress/wp-content/themes/grid-focus-public-10/images/favicon.ico“>我的