使用类Twenty19_SVG_Icons向Twenty19个子主题添加额外的SVG

时间:2019-04-01 作者:Duarte Nunes

我正在尝试更改移动菜单中省略号的svg。它在这个文件中被调用:模板函数。phpso我在我的孩子主题函数上做了一个钩子。php来取代它,如下所示:

function replace_ellipses() {
    if ( function_exists(\'twentynineteen_add_ellipses_to_nav\') ) {
        remove_filter( \'wp_nav_menu\', \'twentynineteen_add_ellipses_to_nav\', 10, 2 ); 
    }
    function twentynineteen_add_new_ellipses_to_nav( $nav_menu, $args ) {

        if ( \'menu-1\' === $args->theme_location ) :

            $nav_menu .= \'<div class="main-menu-more">\';
            $nav_menu .= \'<ul class="main-menu">\';
            $nav_menu .= \'<li class="menu-item menu-item-has-children">\';
            $nav_menu .= \'<button class="submenu-expand main-menu-more-toggle is-empty" tabindex="-1" aria-label="More" aria-haspopup="true" aria-expanded="false">\';
            $nav_menu .= \'<span class="screen-reader-text">\' . esc_html__( \'More\', \'twentynineteen\' ) . \'</span>\';
            $nav_menu .= twentynineteen_get_icon_svg( \'new_arrow_drop_down_ellipsis\' );
            $nav_menu .= \'</button>\';
            $nav_menu .= \'<ul class="sub-menu hidden-links">\';
            $nav_menu .= \'<li id="menu-item--1" class="mobile-parent-nav-menu-item menu-item--1">\';
            $nav_menu .= \'<button class="menu-item-link-return">\';
            $nav_menu .= twentynineteen_get_icon_svg( \'chevron_left\' );
            $nav_menu .= esc_html__( \'Back\', \'twentynineteen\' );
            $nav_menu .= \'</button>\';
            $nav_menu .= \'</li>\';
            $nav_menu .= \'</ul>\';
            $nav_menu .= \'</li>\';
            $nav_menu .= \'</ul>\';
            $nav_menu .= \'</div>\';

        endif;

        return $nav_menu;
    }
    add_filter( \'wp_nav_menu\', \'twentynineteen_add_new_ellipses_to_nav\', 10, 2 );
}
add_action( \'wp_enqueue_scripts\', \'replace_ellipses\', 0 );
然后我换了一行:$nav_menu .= twentynineteen_get_icon_svg( \'arrow_drop_down_ellipsis\' );

要引用新的:$nav_menu .= twentynineteen_get_icon_svg( \'new_arrow_drop_down_ellipsis\' );

该函数可以工作,但svg没有加载。图标在文件中定义为svg代码class-twentynineteen-svg-icons.php 在…内classes 文件夹我认为用新的svg代码复制子主题中的classes文件夹是行不通的。

在二十世纪十九年代,还有文件inc/icon功能。php函数:

function twentynineteen_get_icon_svg( $icon, $size = 24 ) {
    return TwentyNineteen_SVG_Icons::get_svg( \'ui\', $icon, $size );
}
是否需要挂接到此函数?

1 个回复
SO网友:Duarte Nunes

好的,这就是我所做的:首先,我复制了类/类219个svg图标。php到子主题。重命名为class-mytheme-svg-icons.php.

添加了扩展New_SVG_Icons 类别:

class New_SVG_Icons extends TwentyNineteen_SVG_Icons {

    /**
     * Gets the SVG code for a given icon.
     */
    public static function get_svg( $group, $icon, $size ) {
        if ( \'ui\' == $group ) {
            $arr = self::$ui_icons;
        } elseif ( \'social\' == $group ) {
            $arr = self::$social_icons;
        } else {
            $arr = array();
        }
        if ( array_key_exists( $icon, $arr ) ) {
            $repl = sprintf( \'<svg class="svg-icon" width="%d" height="%d" aria-hidden="true" role="img" focusable="false" \', $size, $size );
            $svg  = preg_replace( \'/^<svg /\', $repl, trim( $arr[ $icon ] ) ); // Add extra attributes to SVG code.
            $svg  = preg_replace( "/([\\n\\t]+)/", \' \', $svg ); // Remove newlines & tabs.
            $svg  = preg_replace( \'/>\\s*</\', \'><\', $svg ); // Remove white space between SVG tags.
            return $svg;
        }
        return null;
    }

    /**
     * User Interface icons – svg sources.
     *
     * @var array
     */
    static $ui_icons = array(
        \'new_drop_down_ellipsis\' => /* custom – ao_drop_down_ellipsis */ \'
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path fill="none" d="M0 0h24v24H0V0z"/>
    <path d="M2 2v20h20V2H2zm4 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm6 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm6 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
</svg>\',

    );
}
返回函数。子主题的php我添加了复制文件的路径:

function include_extra_svg() {
    require_once get_theme_file_path( \'classes/class-mytheme-svg-icons.php\' );
}
add_action( \'wp_enqueue_scripts\', \'include_extra_svg\' );
然后,我在之前的函数和类上引用了该函数和类:

function replace_ellipses() {
    if ( function_exists(\'twentynineteen_add_ellipses_to_nav\') ) {
        remove_filter( \'wp_nav_menu\', \'twentynineteen_add_ellipses_to_nav\', 10, 2 );
    }
    function twentynineteen_add_new_ellipses_to_nav( $nav_menu, $args ) {

        function mytheme_get_icon_svg( $icon, $size = 24 ) {
            return New_SVG_Icons::get_svg( \'ui\', $icon, $size );
        }

        if ( \'menu-1\' === $args->theme_location ) :

            $nav_menu .= \'<div class="main-menu-more">\';
            $nav_menu .= \'<ul class="main-menu">\';
            $nav_menu .= \'<li class="menu-item menu-item-has-children">\';
            $nav_menu .= \'<button class="submenu-expand main-menu-more-toggle is-empty" tabindex="-1" aria-label="More" aria-haspopup="true" aria-expanded="false">\';
            $nav_menu .= \'<span class="screen-reader-text">\' . esc_html__( \'More\', \'twentynineteen\' ) . \'</span>\';
            $nav_menu .= mytheme_get_icon_svg( \'ao_drop_down_ellipsis\' );
            $nav_menu .= \'</button>\';
            $nav_menu .= \'<ul class="sub-menu hidden-links">\';
            $nav_menu .= \'<li id="menu-item--1" class="mobile-parent-nav-menu-item menu-item--1">\';
            $nav_menu .= \'<button class="menu-item-link-return">\';
            $nav_menu .= twentynineteen_get_icon_svg( \'chevron_left\' );
            $nav_menu .= esc_html__( \'Back\', \'twentynineteen\' );
            $nav_menu .= \'</button>\';
            $nav_menu .= \'</li>\';
            $nav_menu .= \'</ul>\';
            $nav_menu .= \'</li>\';
            $nav_menu .= \'</ul>\';
            $nav_menu .= \'</div>\';

        endif;

        return $nav_menu;
    }
    add_filter( \'wp_nav_menu\', \'twentynineteen_add_new_ellipses_to_nav\', 10, 2 );
}
add_action( \'wp_enqueue_scripts\', \'replace_ellipses\', 0 );
瞧!我不确定这是否是最好的方法,但它确实有效。

相关推荐

在前端获取上传的SVG维度

在第三方插件(如Daryll Doyle的Safe SVG)的帮助下,通过WordPress的后端媒体上传器成功上传了一个SVG图像,如何获得存储在SVG文件中的图像尺寸width, height, 或viewBox 要在前端与WordPress函数一起使用的属性,例如wp_get_attachment_image_src() ?与PNG和JPEG等其他类型的图像不同,WordPress不将SVG图像的尺寸存储到其系统中。以下是一个常规PNG:这是一个SVG图像:也许我们可以在theme的function