Un utente ha chiesto
Categoria: Twenty Nineteen di WordPress
Domanda: Aggiungi/modifica icone SVG
Ciao,
Ho usato venti diciannove come tema principale e vorrei cambiare i percorsi SVG senza sovrascrivere i file principali.
Inoltre, qualcuno può dirmi la differenza tra percorsi svg “ui” e percorsi “social”?
grazie
Laura
-
(@anoktear)
Ciao @whonickedmyname.
Sto cercando di cambiare le ellissi svg per il menu mobile.
Si chiama in questo file: template-functions.phpQuindi ho collegato il mio tema figlio functions.php per sostituirlo, in questo modo:
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 );Ho quindi modificato la riga:
$nav_menu .= twentynineteen_get_icon_svg( 'arrow_drop_down_ellipsis' );a:
$nav_menu .= twentynineteen_get_icon_svg( 'new_arrow_drop_down_ellipsis' );new_arrow_drop_down_ellipsis è il codice svg che sto chiamando per l’icona.
Le icone sono impostate come codice svg nel file classe-novantanove-svg-icons.php dentro Classi cartella.
Quello che ho fatto è stato ricreare questa cartella e questo file nel tema del mio bambino e inserire il codice svg della nuova icona con il new_arrow_drop_down_ellipsis identificatore.La funzione funziona, ma l’SVG non si carica…
(@anoktear)
La domanda per me è come fare riferimento alle classi / class-twentynineteen-svg-icons.php nel tema figlio.
(@anoktear)
Ok, questo è quello che ho fatto:
Innanzitutto, ho replicato le classi / class-twentynineteen-svg-icons.php sul tema figlio.
Rinominato in class-mytheme-svg-icons.php.Aggiungere un’estensione con my New_SVG_Icons classificare:
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( "/([nt]+)/", ' ', $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>', ); }Tornando al file functions.php del tema figlio, ho aggiunto il percorso del file replicato:
function include_extra_svg() { require_once get_theme_file_path( 'classes/class-mytheme-svg-icons.php' ); } add_action( 'wp_enqueue_scripts', 'include_extra_svg' );Successivamente, faccio riferimento a questa funzione e classe a quelle che avevo prima:
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 );ed ecco qua!
Non so se questo è l’approccio migliore, ma funziona.
Hai risolto il tuo problema?
0 / 0