在WordPress的社交图标菜单中添加自定义SVG图标

时间:2019-08-21 作者:Kelly

我有麻烦了adding custom SVG icons to the Social Icon Menu in WordPress 2017儿童主题。菜单可以很好地处理主题中包含的所有预打包SVG,但我无法将自定义SVG添加到子主题中。

以下是我迄今为止所做的添加"Etsy" SVG 至社交图标菜单:

复制/assets/img/svg-icons.svg 将文件粘贴到子主题中Etsy SVG\'s 进入的路径svg-icons.svg 包含所有其他图标的文件

Screenshot adding Etsy SVG path to the svg-icons.svg file in WordPress TwentySeventeen child theme


复制/inc/icon-functions.php 将文件放入子主题中添加“etsy”。连接到一系列社交媒体网站

Adding etsy.com to the array of social media sites registered with the twentyseventeen_social_links_icons() function


然后我“呼叫”了/inc/icon-functions.php 在儿童主题的底部functions.php

add icon-functions.php to the functions.php file

这不管用。WordPress Core建议使用get_template_part 中的函数New WordPress Functions and Hook Behaviors for WordPress4.7, 但我也尝试过:

  • get_theme_file_uri()

  • get_theme_file_path()

  • get_template_directory()

  • get_template_directory_uri()

  • get_stylesheet_directory()

  • get_stylesheet_directory_uri()


一切都没有用。网站上唯一显示的是“断开的链接”图标。

我还尝试使用require 而不是包含,但这抛出了一个505错误,并表示“站点停止维护”

所有的缓存都被清除了。知道我做错了什么吗?

这些文章提到了非常相似的问题,但没有一篇文章特别解决了我的问题:

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

您不需要复制inc/icon-functions.php 文件和include/require 它来自儿童主题—请记住,父主题也将加载相同的文件/函数,如果未重命名复制文件中的函数,则会导致PHP错误。

因此,请尝试以下方法:

(正如我所见,您已经正确地完成了这一步。但为了完整起见,我包括了这一步。)复制SVG文件(assets/images/svg-icons.svg) 到您的子主题并粘贴Etsy\'s SVG path 对此svg-icons.svg 文件

<!-- In wp-content/themes/your-theme/assets/images/svg-icons.svg -->
<symbol id="icon-etsy" viewBox="0 0 24 24">
<path ...></path>
</symbol>
复制twentyseventeen_include_svg_icons() 功能到您的孩子主题functions.php 文件,然后重命名函数。解开挂钩twentyseventeen_include_svg_icons 从…起wp_footer, 然后将重命名的函数挂接到wp_footer:

function my_theme_include_svg_icons() {
    // Define SVG sprite file.
    $svg_icons = get_stylesheet_directory() . \'/assets/images/svg-icons.svg\';

    // If it exists, include it.
    if ( file_exists( $svg_icons ) ) {
        require_once( $svg_icons );
    }
}
remove_action( \'wp_footer\', \'twentyseventeen_include_svg_icons\', 9999 );
add_action( \'wp_footer\', \'my_theme_include_svg_icons\', 9999 );
twentyseventeen_social_links_icons 钩子将Etsy图标添加到图标数组:

add_filter( \'twentyseventeen_social_links_icons\', function ( $icons ) {
    $icons[\'etsy.com\'] = \'etsy\';
    return $icons;
} );
保存主题功能文件,重新加载浏览器缓存(如有必要),并检查Etsy图标是否如预期的那样出现。(但它应该……))

顺便说一句,您不必将SVG文件保存在assets/images, 但出于测试目的,只需使用该默认路径即可。

此外,请确保您的“社交链接”菜单中的菜单项etsy.com 在链接URL中。但您也可以手动显示“E”符号,如下所示:

echo twentyseventeen_get_svg( array( \'icon\' => \'etsy\', \'title\' => __( \'Testing Etsy symbol\', \'my-theme\' ) ) );