如何实现我自己的图标而不是使用SVG图标系统

时间:2018-01-20 作者:klewis

在WordPress 4.9.2中,我为2017年创建了一个儿童主题。我注意到它在页面底部带有自己的SVG图标系统,用于社交媒体图标。我看到一些代码是在site-info.php 文件,在wp_nav_menu().

<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( \'Footer Social Links Menu\', \'twentyseventeen\' ); ?>">
<?php
    wp_nav_menu( array(
        \'theme_location\' => \'social\',
        \'menu_class\'     => \'social-links-menu\',
        \'depth\'          => 1,
        \'link_before\'    => \'<span class="screen-reader-text">\',
        \'link_after\'     => \'</span>\' . twentyseventeen_get_svg( array( \'icon\' => \'chain\' ) ),
    ) );
?>

我也看到了svg-icons.svg 是与进程关联的另一个文件。

我想使用我自己的自定义图标与页脚中关联的自定义链接进行对话。什么样的模板技术可以很好地替代这个SVG系统?(同样,如果我使用自己的自定义图标,目标是.png 图像)

2 个回复
最合适的回答,由SO网友:Liam Stewart 整理而成

您可以这样替换获取svg图像的函数:

<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( \'Footer Social Links Menu\', \'twentyseventeen\' ); ?>">
                    <?php
                        wp_nav_menu( array(
                            \'theme_location\' => \'social\',
                            \'menu_class\'     => \'social-links-menu\',
                            \'depth\'          => 1,
                            \'link_before\'    => \'<span class="screen-reader-text">\',
                            \'link_after\'     => \'</span><img src="\'.get_home_url().\'/path/to/image.png">\',
                        ) );
                    ?>
                </nav><!-- .social-navigation -->

SO网友:Nathan Johnson

您可以使用wp_nav_menu_args 滤器

namespace StackExchange\\WordPress;

add_filter( \'wp_nav_menu_args\', __NAMESPACE__ . \'\\wp_nav_menu_args\' );
function wp_nav_menu_args( array $args ) : array {
  if( \'social\' === $args[ \'theme_location\' ] ) {
    $args[ \'link_after\' ] = \'</span>\' . get_icon( [ \'icon\' => \'chain\' ] );
  }
  return $args;
}
function get_icon( array $args ) : string {
  return \'use-args-to-return-some-html-to-display-your-icon.png\';
}

结束

相关推荐

如何使Customize Theme页面接受SVG?

我目前正在开发一个主题,使用户可以通过自定义主题页面上传徽标。我希望用户能够上传SVG作为徽标。默认情况下,Wordpress不允许上载SVG。因此,我使用了一段代码来启用de media uploader中的SVG。function cc_mime_types( $mimes ){ $mimes[\'svg\'] = \'image/svg+xml\'; return $mimes; } add_filter( \'upload_mimes\', \'cc