• <tbody id="w3vxa"></tbody>

    <dd id="w3vxa"></dd>
      1. <rp id="w3vxa"></rp><rp id="w3vxa"></rp>
        當前位置:
        首頁 > WordPress教程 > WordPress 4.3 新增的站點圖標功能

        WordPress 4.3 新增的站點圖標功能

        WordPress 4.3 新增了一個站點圖標功能,允許站長設置網站在桌面或手機中的網站圖標(favicon)。站點圖標這個功能是獨立于主題的,也就是無需修改主題來支持。

        站點圖標的默認尺寸

        WordPress 站點圖標默認支持以下4種尺寸:

        • 32x32px favicon.圖標
        • 180x180px iOS蘋果圖標,支持 iPhone 6+
        • 192x192px 安卓/谷歌瀏覽器圖標 Android/Chrome app icon
        • 270x270px Windows系統中等圖標

        站點圖標的API

        公開API也非常簡單:

        • wp_site_icon() 顯示所有可用的 favicon 圖標和 app 圖標
        • get_site_icon_url() 返回當前站點圖標的url,或者缺省時的默認值
        • site_icon_url() 顯示當前站點圖標的轉義版本的url
        • has_site_icon() 返回當前網站是否設置了站點圖標

        在這一點上,我們希望主題作者不要使用站點圖標作為網站前端的Logo標志(站點圖標不同于Logo)。因為這樣做不符合站點圖標的目的。

        自定義站點圖標

        插件作者可以添加自定義尺寸的站點圖標,可以通過 site_icon_image_sizes 和 site_icon_meta_tags 這兩個過濾鉤子來實現,代碼樣例如下:

        1. <?php
        2. 
          
        3. function prefix_custom_site_icon_size( $sizes ) {
        4.    $sizes[] = 64;
        5. 
          
        6.    return $sizes;
        7. }
        8. add_filter( 'site_icon_image_sizes', 'prefix_custom_site_icon_size' );
        9. 
          
        10. function prefix_custom_site_icon_tag( $meta_tags ) {
        11.    $meta_tags[] = sprintf( '<link rel="icon" href="%s" rel="external nofollow"  sizes="64x64" />', esc_url( get_site_icon_url( null, 64 ) ) );
        12. 
          
        13.    return $meta_tags;
        14. }
        15. add_filter( 'site_icon_meta_tags', 'prefix_custom_site_icon_tag' );

        自定義控件

        Nick Halsey 已經發布了一篇 關于在新的自定義控件里管理站點圖標 的文章。新的控件可以為主題和插件作者提供需要裁剪圖標的自定義功能,比如,管理Logo。

        1. $wp_customize->add_control( new WP_Customize_Cropped_Image_Control( $wp_customize, 'cropped_image', array(
        2.     'section'     => 'background_image',
        3.     'label'       => __( 'Croppable Image' ),
        4.     'flex_width'  => true, // Allow any width, making the specified value recommended. False by default.
        5.     'flex_height' => false, // Require the resulting image to be exactly as tall as the height attribute (default).
        6.     'width'       => 1920,
        7.     'height'      => 1080,
        8. ) ) );

        參考資料:https://make.wordpress.org/core/2015/07/27/site-icon/

        WordPress 4.3 新增的站點圖標功能:等您坐沙發呢!

        發表評論

        您必須 [ 登錄 ] 才能發表留言!