一、修改主题的SVG文件
WordPress使用的是SVG Sprite技术,将图标图形整合在同一个SVG文件里,使用的时候准确显示特定图标。TwnetySeventeen使用的SVG文件的位置为:
wp/content/themes/twentyseventeen/
assets/images/svg-icons.svg
该文件里面包含了网站使用的所有SVG图标。使用编辑器或记事本打开该文件,会看到如下格式的代码:
我们将自己制作或者网上下载的SVG文件使用编辑器或记事本打开后,代码格式如下:
我们要将自己的代码添加进SVG文件中。修改方法就按照文件已经有的格式复制一遍,然后修改id, viewBox和d值为我们自己的代码。
viewBox值有4个数字:这个宽度和高度代表对图标的截取,如果没有调整到合适的值可能只截取了部分图标,因此建议大家直接填写自己SVG文件里面的viewBox值。
viewBox=”x, y, width, height” // x:左上角横坐标,y:左上角纵坐标,width:宽度,height:高度
viewBox值不合适的效果图
这里推荐两个可以免费下载SVG图标的网站:
二、修改icon-functions.php文件
TwnetySeventeen使用的icon-functions.php文件的位置为:
wp-content/themes/twentyseventeen/inc/icon-functions.php
在该文件里找到函数:
function twentyseventeen_social_links_icons()
在该函数中按照格式添加需要链接的网站。
function twentyseventeen_social_links_icons() {
// Supported social links icons.
$social_links_icons = array(
‘behance.net’ => ‘behance’,
‘codepen.io’ => ‘codepen’,
‘bilibili.com’ => ‘bilibili’,
‘weibo.com’ => ‘weibo’,
三、在社交菜单里添加自定义链接
在网络社交菜单中选择添加自定义链接 http://weibo.com
bing每日一图API
- 自动跳转到每日一图(当天) https://api.kdcc.cn/img/
- 指定日期跳转 https://api.kdcc.cn/img/?day=2020/06/06 (按格式修改红色部分日期,指定2020/04/26之后的日期)
- 随机跳转图片 https://api.kdcc.cn/img/rand.php
- 直接跳转到每日一图(必应服务器,速度快) https://api.kdcc.cn/img/jump.php
调用方式
<img src=”https://api.kdcc.cn/img/” />
PHP核心代码,其他的根据自己的需求修改即可
<?php
$str = file_get_contents('https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1'); //读取必应api
$str = json_decode($str,true); //接受JSON 编码的字符串并且把它转换为 PHP变量
$imgurl = 'https://cn.bing.com'.$str['images'][0]['url']; //获取图片url
header("Location: {$imgurl}"); // 跳转至目标图像
?>
移动端网页点击链接出现蓝色背景如何解决
css中加入如下代码即可解决:
*{-webkit-tap-highlight-color:rgba(0,0,0,0);}
说明:*号表示应用与所有的元素。
可能有的小伙伴对这个属性表示很陌生,我们来对这个属性做一下简单的介绍~
-webkit-tap-highlight-color介绍:
当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色,想要禁用这个高亮,设置颜色的alpha值为0即可。
这也意味着你同样可以通过这个属性来改变链接背景的显示颜色。
如果你要设置为透明的,就使用-webkit-tap-highlight-color:rgba(0,0,0,0)
如果你想设置高亮色为50%透明的红色:-webkit-tap-highlight-color: rgba(255,0,0,0.5);
去掉a(超链接)下划线
a:hover{text-decoration:0;
border-bottom:0;
box-shadow:0;
-webkit-box-shadow:0}
a:focus{outline:0!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;}
再不行就每个后面加上 !important