Blocksy主题自带各种社交媒体账号,市面上大部分主流的社交媒体,像facebook、inst、wechat、tiktalk、youtube等等都有,添加展示起来非常方便。但是国内的一些主流社交媒体是没有的,比如B站、头条、西瓜视频、小红书等。这时候如果我们想在网站展示,就需要手工自定义添加了。本文自由超就来跟大家分享下如何添加自定义的社交媒体账号图标,以B站为例,其他图标操作方法类似。
1.准备SVG格式图标
首先我们要找到B站的SVG格式的图标文件。这个大家从网上找一找,注意版权。
2.获取SVG图标代码
我们用记事本打开上面获取的SVG格式的图标,就可以看到B站图标对应的SVG代码。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path fill="#1e88e5" d="M36.5,12h-7.086l3.793-3.793c0.391-0.391,0.391-1.023,0-1.414s-1.023-0.391-1.414,0L26.586,12 h-5.172l-5.207-5.207c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414L18.586,12H12.5C9.467,12,7,14.467,7,17.5v15 c0,3.033,2.467,5.5,5.5,5.5h2c0,0.829,0.671,1.5,1.5,1.5s1.5-0.671,1.5-1.5h14c0,0.829,0.671,1.5,1.5,1.5s1.5-0.671,1.5-1.5h2 c3.033,0,5.5-2.467,5.5-5.5v-15C42,14.467,39.533,12,36.5,12z M39,32.5c0,1.378-1.122,2.5-2.5,2.5h-24c-1.378,0-2.5-1.122-2.5-2.5 v-15c0-1.378,1.122-2.5,2.5-2.5h24c1.378,0,2.5,1.122,2.5,2.5V32.5z"/><rect width="2.75" height="7.075" x="30.625" y="18.463" fill="#1e88e5" transform="rotate(-71.567 32.001 22)"/><rect width="7.075" height="2.75" x="14.463" y="20.625" fill="#1e88e5" transform="rotate(-18.432 17.998 21.997)"/><path fill="#1e88e5" d="M28.033,27.526c-0.189,0.593-0.644,0.896-1.326,0.896c-0.076-0.013-0.139-0.013-0.24-0.025 c-0.013,0-0.05-0.013-0.063,0c-0.341-0.05-0.745-0.177-1.061-0.467c-0.366-0.265-0.808-0.745-0.947-1.477 c0,0-0.29,1.174-0.896,1.49c-0.076,0.05-0.164,0.114-0.253,0.164l-0.038,0.025c-0.303,0.164-0.682,0.265-1.086,0.278 c-0.568-0.051-0.947-0.328-1.136-0.821l-0.063-0.164l-1.427,0.656l0.05,0.139c0.467,1.124,1.465,1.768,2.74,1.768 c0.922,0,1.667-0.303,2.209-0.909c0.556,0.606,1.288,0.909,2.209,0.909c1.856,0,2.55-1.288,2.765-1.843l0.051-0.126l-1.427-0.657 L28.033,27.526z"/></svg>
3.自定义社交媒体代码
在code snipets插件中添加以下自定义代码,红色的部分是可以修改的部分:
- id:可以任意自定义名称,这个就是后面会显示的图标名称,也可以是中文
- icon:这段代码就是上面获取的社交媒体账号的SVG图标代码
注意:因为找的图标素材不是很规范,修改了viewBox、width、height参数。大家可以试试修改这几个参数都会是什么样的效果!
add_filter('blocksy:social-box:dynamic-social-networks', function ($networks) {
$networks[] = [
'id' => 'Bilibili',
'name' => __('Bilibili', 'blocksy'),
'icon' => ' <svg xmlns="http://www.w3.org/2000/svg" viewBox="8 8 33 30" width="20px" height="20px"><path fill="#1e88e5" d="M36.5,12h-7.086l3.793-3.793c0.391-0.391,0.391-1.023,0-1.414s-1.023-0.391-1.414,0L26.586,12 h-5.172l-5.207-5.207c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414L18.586,12H12.5C9.467,12,7,14.467,7,17.5v15 c0,3.033,2.467,5.5,5.5,5.5h2c0,0.829,0.671,1.5,1.5,1.5s1.5-0.671,1.5-1.5h14c0,0.829,0.671,1.5,1.5,1.5s1.5-0.671,1.5-1.5h2 c3.033,0,5.5-2.467,5.5-5.5v-15C42,14.467,39.533,12,36.5,12z M39,32.5c0,1.378-1.122,2.5-2.5,2.5h-24c-1.378,0-2.5-1.122-2.5-2.5 v-15c0-1.378,1.122-2.5,2.5-2.5h24c1.378,0,2.5,1.122,2.5,2.5V32.5z"/><rect width="2.75" height="7.075" x="30.625" y="18.463" fill="#1e88e5" transform="rotate(-71.567 32.001 22)"/><rect width="7.075" height="2.75" x="14.463" y="20.625" fill="#1e88e5" transform="rotate(-18.432 17.998 21.997)"/><path fill="#1e88e5" d="M28.033,27.526c-0.189,0.593-0.644,0.896-1.326,0.896c-0.076-0.013-0.139-0.013-0.24-0.025 c-0.013,0-0.05-0.013-0.063,0c-0.341-0.05-0.745-0.177-1.061-0.467c-0.366-0.265-0.808-0.745-0.947-1.477 c0,0-0.29,1.174-0.896,1.49c-0.076,0.05-0.164,0.114-0.253,0.164l-0.038,0.025c-0.303,0.164-0.682,0.265-1.086,0.278 c-0.568-0.051-0.947-0.328-1.136-0.821l-0.063-0.164l-1.427,0.656l0.05,0.139c0.467,1.124,1.465,1.768,2.74,1.768 c0.922,0,1.667-0.303,2.209-0.909c0.556,0.606,1.288,0.909,2.209,0.909c1.856,0,2.55-1.288,2.765-1.843l0.051-0.126l-1.427-0.657 L28.033,27.526z"/></svg>',
];
return $networks;
});
4.主题自定义添加账号
添加完上面的代码之后,我们在Blocksy主题自定义里面【常规】找到【社交网络账户】,拉到最底部,会发现里面就比原来多了1个我们自定义添加的名字叫【Bilibili】的设置项,把自己的B站账号地址添加进去即可。后面在需要展示的地方,直接添加即可。
本文作者:自由超
本文标题:《Blocksy主题01-添加自定义社交媒体图标及账号(B站、头条、小红书等)》
本文链接:https://freechao.com/5124.html
发布日期:2022年12月25日 19:13:47
更新日期:2024年03月06日 20:17:26
版权声明:除特殊注明,均为作者原创内容,遵守CC-BY-NC 4.0版权协议,转发请保留原文链接!
免责声明:文中如涉及第三方资源,均来自互联网,仅供学习研究,禁止商业使用,如有侵权,联系我们24小时内删除!
本文标题:《Blocksy主题01-添加自定义社交媒体图标及账号(B站、头条、小红书等)》
本文链接:https://freechao.com/5124.html
发布日期:2022年12月25日 19:13:47
更新日期:2024年03月06日 20:17:26
版权声明:除特殊注明,均为作者原创内容,遵守CC-BY-NC 4.0版权协议,转发请保留原文链接!
免责声明:文中如涉及第三方资源,均来自互联网,仅供学习研究,禁止商业使用,如有侵权,联系我们24小时内删除!