（二）一个漂亮的主题+看板娘+播放器配置+雪花效果
1. 安装一个好看的主题
搭建一个自己的博客怎么能没有一个漂亮的主题呢？虽然WordPress后台有主题安装功能，但是奈何里面没有自己想要的主题呢QAQ。。。
这里推荐一个找主题的网站：http://www.2zzt.com/tag/wordpress%E4%B8%BB%E9%A2%98这个网站上也有很多WordPress的主题。
这里推荐一个主题Siren，个人感觉是一个不错的主题，可以从上面的网站中下载，也可以从这里下载，提取码：535i
下载下来之后可以在WordPress后台上传主题，启用之后差不多是以下的效果。当然是没有看板娘，雪花，和播放器的啦。这些我们后面一点点配置。
问：这个主题上的头像和背景怎么改呀？
答：可以在博客后台的外观->主题设置中修改
问：那个黑框框里的那句话怎么改呀？
答：找到这个主题下的layouts文件，你的wordpress的路径/wp-content/themes/Siren/layouts，修改里面的imgbox.php中的一段代码，具体操作如下
|
1 2 |
cd 你的wordpress的路径/wp-content/themes/Siren/layouts vi imgbox.php |
修改打开后的代码第13行为
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<?php $image_file = get_random_bg_url() ? 'background-image: url('.get_random_bg_url().');' : ''; $bg_style = akina_option('focus_height') ? 'background-position: center center;background-attachment: inherit;' : ''; ?> <figure id="centerbg" class="centerbg" style="<?php echo $image_file.$bg_style ?>"> <?php if ( !akina_option('focus_infos') ){ ?> <div class="focusinfo"> <?php if (akina_option('focus_logo')):?> <div class="header-tou"><a href="<?php bloginfo('url');?>" ><img src="<?php echo akina_option('focus_logo', ''); ?>"></a></div> <?php else :?> <div class="header-tou" ><a href="<?php bloginfo('url');?>"><img src="<?php bloginfo('template_url'); ?>/images/avatar.jpg"></a></div> <?php endif; ?> <div class="header-info"><p><?php echo "你想要说的话"; ?></p></div> <div class="top-social"> <?php if (akina_option('wechat')){ ?> <li class="wechat"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/sns/wechat.png"/></a> <div class="wechatInner"> <img src="<?php echo akina_option('wechat', ''); ?>" alt="微信公众号"> </div> </li> <?php } ?> <?php if (akina_option('sina')){ ?> <li><a href="<?php echo akina_option('sina', ''); ?>" target="_blank" class="social-sina" title="sina"><img src="<?php bloginfo('template_url'); ?>/images/sns/sina.png"/></a></li> <?php } ?> <?php if (akina_option('qq')){ ?> <li class="qq"><a href="//wpa.qq.com/msgrd?v=3&uin=<?php echo akina_option('qq', ''); ?>&site=qq&menu=yes" target="_blank" title="Initiate chat ?"><img src="<?php bloginfo('template_url'); ?>/images/sns/qq.png"/></a></li> <?php } ?> <?php if (akina_option('qzone')){ ?> <li><a href="<?php echo akina_option('qzone', ''); ?>" target="_blank" class="social-qzone" title="qzone"><img src="<?php bloginfo('template_url'); ?>/images/sns/qzone.png"/></a></li> <?php } ?> <?php if (akina_option('github')){ ?> <li><a href="<?php echo akina_option('github', ''); ?>" target="_blank" class="social-github" title="github"><img src="<?php bloginfo('template_url'); ?>/images/sns/github.png"/></a></li> <?php } ?> <?php if (akina_option('lofter')){ ?> <li><a href="<?php echo akina_option('lofter', ''); ?>" target="_blank" class="social-lofter" title="lofter"><img src="<?php bloginfo('template_url'); ?>/images/sns/lofter.png"/></a></li> <?php } ?> <?php if (akina_option('bili')){ ?> <li><a href="<?php echo akina_option('bili', ''); ?>" target="_blank" class="social-bili" title="bilibili"><img src="<?php bloginfo('template_url'); ?>/images/sns/bilibili.png"/></a></li> <?php } ?> <?php if (akina_option('youku')){ ?> <li><a href="<?php echo akina_option('youku', ''); ?>" target="_blank" class="social-youku" title="youku"><img src="<?php bloginfo('template_url'); ?>/images/sns/youku.png"/></a></li> <?php } ?> <?php if (akina_option('wangyiyun')){ ?> <li><a href="<?php echo akina_option('wangyiyun', ''); ?>" target="_blank" class="social-wangyiyun" title="CloudMusic"><img src="<?php bloginfo('template_url'); ?>/images/sns/wangyiyun.png"/></a></li> <?php } ?> <?php if (akina_option('twitter')){ ?> <li><a href="<?php echo akina_option('twitter', ''); ?>" target="_blank" class="social-wangyiyun" title="Twitter"><img src="<?php bloginfo('template_url'); ?>/images/sns/twitter.png"/></a></li> <?php } ?> <?php if (akina_option('facebook')){ ?> <li><a href="<?php echo akina_option('facebook', ''); ?>" target="_blank" class="social-wangyiyun" title="Facebook"><img src="<?php bloginfo('template_url'); ?>/images/sns/facebook.png"/></a></li> <?php } ?> <?php if (akina_option('googleplus')){ ?> <li><a href="<?php echo akina_option('googleplus', ''); ?>" target="_blank" class="social-wangyiyun" title="Google+"><img src="<?php bloginfo('template_url'); ?>/images/sns/googleplus.png"/></a></li> <?php } ?> <?php if (akina_option('jianshu')){ ?> <li><a href="<?php echo akina_option('jianshu', ''); ?>" target="_blank" class="social-wangyiyun" title="简书"><img src="<?php bloginfo('template_url'); ?>/images/sns/jianshu.png"/></a></li> <?php } ?> <?php if (akina_option('zhihu')){ ?> <li><a href="<?php echo akina_option('zhihu', ''); ?>" target="_blank" class="social-wangyiyun" title="知乎"><img src="<?php bloginfo('template_url'); ?>/images/sns/zhihu.png"/></a></li> <?php } ?> <?php if (akina_option('csdn')){ ?> <li><a href="<?php echo akina_option('csdn', ''); ?>" target="_blank" class="social-wangyiyun" title="CSDN"><img src="<?php bloginfo('template_url'); ?>/images/sns/csdn.png"/></a></li> <?php } ?> </div> </div> <?php } ?> </figure> <?php echo bgvideo(); //BGVideo |
2.给你的博客添加好看的live2d看板娘
傻瓜式添加
可以直接傻瓜式的添加，在WordPress后台找到外观，选择主题编辑器
然后编辑当前所使用的主题，找到当前所使用的主题的header.php，在<head>标签中插入以下代码
|
1 2 3 |
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"> <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script> |
刷新之后就可以在你的博客左下角看到一个萌萌的看板娘了φ(゜▽゜*)♪
另一种添加方式
直接添加上面三行代码的方式之外，也可以采用另一种方式添加。
首先下载live2d看板娘所需要的各种组件，这里已经打包好了，点击这里下载，提取码：gptm
将下载下来的压缩包上传至你的博客的根目录，如果你是跟随我的教程来搭建的博客的话，也就是上传至/var/www/html/，上传的方法可以采用Xftp软件，请自行百度。
上传到根目录后进行解压，解压方式如下
1）通过ssh连接服务器
2）进入live2d.zip所在的文件夹
|
1 |
cd /var/www/html |
3）解压缩
|
1 |
unzip live2d.zip |
然后在当前所使用的主题的header.php中的<head>标签中添加如下代码
|
1 2 3 |
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"> <script src="/live2d/autoload.js"></script> |
添加后保存更改，刷新博客，就可以看到博客左下角出现萌萌的看板娘了φ(゜▽゜*)♪
问：为什么你的看板娘在右下角？我也想在右下角
答：请自行摸索修改live2d文件夹中的waifu.css（我才不告诉你把里面的left都修改成right呢
3.给博客加一个播放器
首先点击这里下载所需要的组件，提取码：hc4d
将下载下来的压缩包上传至你的博客的根目录，然后解压。
然后在当前使用的主题的页脚文件footer.php的<body>标签结束前添加以下代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<link rel="stylesheet" href="http://你的博客服务器IP/Aplayer/APlayer.min.css"> <script src="http://你的博客服务器IP/Aplayer/APlayer.min.js"></script> <div class="aplayer" data-id="2507749822" <!--这里可以改成你想要听的网易云歌单的id--> data-fixed="true" data-server="netease" data-volume="0.4" data-type="playlist" data-autoplay="true"> <!--改为false关闭自动播放--> </div> <script src="http://你的博客服务器IP/Aplayer/Meting.min.js"></script> |
保存修改，刷新博客，可以看到博客左下角出现播放器φ(゜▽゜*)♪
4.添加雪花飘落效果
在当前使用的主题的页脚文件footer.php的<body>标签结束前添加以下代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
<script type="text/javascript"> /* 控制下雪 */ function snowFall(snow) { /* 可配置属性 */ snow = snow || {}; this.maxFlake = snow.maxFlake || 200; /* 最多片数 */ this.flakeSize = snow.flakeSize || 10; /* 雪花形状 */ this.fallSpeed = snow.fallSpeed || 3; /* 坠落速度 */ } /* 兼容写法 */ requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(callback) { setTimeout(callback, 1000 / 60); }; cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.msCancelAnimationFrame || window.oCancelAnimationFrame; /* 开始下雪 */ snowFall.prototype.start = function(){ /* 创建画布 */ snowCanvas.apply(this); /* 创建雪花形状 */ createFlakes.apply(this); /* 画雪 */ drawSnow.apply(this) } /* 创建画布 */ function snowCanvas() { /* 添加Dom结点 */ var snowcanvas = document.createElement("canvas"); snowcanvas.id = "snowfall"; snowcanvas.width = window.innerWidth; snowcanvas.height = document.body.clientHeight; snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;"); document.getElementsByTagName("body")[0].appendChild(snowcanvas); this.canvas = snowcanvas; this.ctx = snowcanvas.getContext("2d"); /* 窗口大小改变的处理 */ window.onresize = function() { snowcanvas.width = window.innerWidth; /* snowcanvas.height = window.innerHeight */ } } /* 雪运动对象 */ function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) { this.x = Math.floor(Math.random() * canvasWidth); /* x坐标 */ this.y = Math.floor(Math.random() * canvasHeight); /* y坐标 */ this.size = Math.random() * flakeSize + 2; /* 形状 */ this.maxSize = flakeSize; /* 最大形状 */ this.speed = Math.random() * 1 + fallSpeed; /* 坠落速度 */ this.fallSpeed = fallSpeed; /* 坠落速度 */ this.velY = this.speed; /* Y方向速度 */ this.velX = 0; /* X方向速度 */ this.stepSize = Math.random() / 30; /* 步长 */ this.step = 0 /* 步数 */ } flakeMove.prototype.update = function() { var x = this.x, y = this.y; /* 左右摆动(余弦) */ this.velX *= 0.98; if (this.velY <= this.speed) { this.velY = this.speed } this.velX += Math.cos(this.step += .05) * this.stepSize; this.y += this.velY; this.x += this.velX; /* 飞出边界的处理 */ if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) { this.reset(canvas.width, canvas.height) } }; /* 飞出边界-放置最顶端继续坠落 */ flakeMove.prototype.reset = function(width, height) { this.x = Math.floor(Math.random() * width); this.y = 0; this.size = Math.random() * this.maxSize + 2; this.speed = Math.random() * 1 + this.fallSpeed; this.velY = this.speed; this.velX = 0; }; // 渲染雪花-随机形状（此处可修改雪花颜色！！！） flakeMove.prototype.render = function(ctx) { var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size); snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)"); /* 此处是雪花颜色，默认是白色 */ snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */ snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)"); /* 找16进制的RGB 颜色代码。 */ ctx.save(); ctx.fillStyle = snowFlake; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); ctx.restore(); }; /* 创建雪花-定义形状 */ function createFlakes() { var maxFlake = this.maxFlake, flakes = this.flakes = [], canvas = this.canvas; for (var i = 0; i < maxFlake; i++) { flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed)) } } /* 画雪 */ function drawSnow() { var maxFlake = this.maxFlake, flakes = this.flakes; ctx = this.ctx, canvas = this.canvas, that = this; /* 清空雪花 */ ctx.clearRect(0, 0, canvas.width, canvas.height); for (var e = 0; e < maxFlake; e++) { flakes[e].update(); flakes[e].render(ctx); } /* 一帧一帧的画 */ this.loop = requestAnimationFrame(function() { drawSnow.apply(that); }); } /* 调用及控制方法 */ var snow = new snowFall({maxFlake:60}); snow.start(); </script> |
保存修改，刷新博客就可以看到有一片片雪花飘落了φ(゜▽゜*)♪
至此，我们就完成了一个漂亮的博客的搭建了φ(゜▽゜*)♪
叨叨几句... NOTHING