好的,这就是我所做的:首先,我复制了类/类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 );
瞧!我不确定这是否是最好的方法,但它确实有效。