我是如何搭建的我的wordpress博客

前言

之前想了很久做个人网站但是只能做个静态的html放到那儿(大概是1月初在b站上看教程做好的),确实。。没多大用,当然还有一个原因是我太懒了orz。。

后面接触到了wordpress,就在我的腾讯云Linux主机上搞了一下,但是LAMP的环境配置太麻烦了,很多conf文件不会配置,MySQL的权限也整了好久,后面又把域名拿去备案了,就停止了倒腾。。(大概是寒假)

再到后面把内网穿透搭载好了又开始在Windows上搞,发现WAMP比较好配置,都是一键式操作。(3月初的时候)

刚好遇到部门上了php的反序列化的课,于是我在B站上看php语法的时候。。。又想起了我博客的事情,于是就开始了做个人博客的工作(3月20号左右)

在我域名备案期间在windows上倒腾了2天,差不多已经准备好了

3月25号,一觉睡醒发信息给我说域名备案好了,就开始直接上传文件了

搭载环境


首先我搭载了wordpress+WAMP(Windows+Apache2 + MySQL + PHP),下载主题,配置文件。大概是3月22号

搭建环境比较简单,但是下载的主题就只有个框架,虽然大多数实现的功能都是给你写好了的,但是要实现一些美化框架就要自己改代码

但是!!

php,css代码实在是看得我眼睛痛(其实除了对比别人的源码改改,我也不会写php,orz)

所以我在用同样主题的大佬们的个人博客找到了一些CSS,PHP配置(为了避免遗忘,放在文末)

在我云服务器上直接安装了BT面板(2月份就安装了)一键操作搭建wordpress,搭好了直接上传我在Windows上的wordpress主题文档,代码都是事先改好了的。

访问域名,Nice!!

注:本文内容参考的博客有:ukenn , Marshiro,等!

其他

wordpress的主题用的是 Sakura(这里感谢marshiro大佬设计并开源到Github上的主题!谢谢!)

这垃圾博客就用来记录自己的成长吧!!

写写自己的代码啥的,分享一些自己学的东西啥的

就这样吧!

(下面全是我复制粘贴的代码,别看了!)

部分功能实现的配置文件

打字简介

imgbox.php

 <div class="header-info">
 <script src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
     <i class="fa fa-quote-left"></i>
     <span class="element">快速编辑中....</span>
     <i class="fa fa-quote-right"></i>
     <span class="typed-cursor" style="animation-iteration-count: infinite;"></span>
     <script>
         var typed = new Typed('.element', {
         strings: ["    ","  ","  "], //输入内容, 支持html标签
        typeSpeed: 140,
        backSpeed: 50
     });
     </script>

banner_wave

style.css

 #banner_wave_1 {
     width: auto;
     height: 65px;
     background: url(http://localhost/wp-content/themes/Sakura/images/wave1.png) repeat-x;
     _filter: alpha(opacity=80);
     position: absolute;
     bottom: 0;
     width: 400%;
     left: -236px;
     z-index: 5;
     opacity: 1;
     transiton-property: opacity,bottom;
     transition-duration: .4s,.4s;
     animation-name: move2;
     animation-duration: 240s;
     animation-fill-mode: backwards;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
 }
 #banner_wave_2 {
     width: auto;
     height: 80px;
     background: url(http://localhost/wp-content/themes/Sakura/images/wave2.png) repeat-x;
     _filter: alpha(opacity=80);
     position: absolute;
     bottom: 0;
     width: 400%;
     left: 0;
     z-index: 4;
     opacity: 1;
     transiton-property: opacity,bottom;
     transition-duration: .4s,.4s;
     animation-name: move2;
     animation-duration: 160s;
     animation-fill-mode: backwards;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
 }
 
 ​
 
 @keyframes move1 {
   100%{
     background-position: 100% 0;
   }
 }
 
 @keyframes move2 {
   100%{
     background-position: -100% 0;
   }
 }

imgbox.php

 <style>.header-info::before{display: none !important;opacity: 0 !important;}</style>
 <div id="banner_wave_1"></div><div id="banner_wave_2"></div>

下拉箭头

imgbox.php

 echo bgvideo(); //BGVideo
 ?>
 <!-- 首页下拉箭头 -->
 <div class="headertop-down faa-float animated" onclick="headertop_down()"><span><i class="fa fa-chevron-down" aria-hidden="true"></i></span></div>
 <!-- 首页下拉箭头END -->
 {1}

style.css

 .headertop-bar::after {
     content: '';
     width: 150%;
     height: 4.375rem;
     background: #fff;
     left: -25%;
     bottom: -2.875rem;
     border-radius: 100%;
     position: absolute;
     z-index: 4;
 }
 
 .headertop-down {
     position: absolute;
     bottom: 50px;
     left: 50%;
     cursor: pointer;
     z-index: 5;
 }
 @media (max-width: 860px) {
     .headertop-down {
         display: none
     }
 }
 
 .headertop-down i {
     font-size: 28px;
     color: #fff;
     -ms-transform: scale(1.5,1); /* IE 9 */
     -webkit-transform: scale(1.5,1); /* Safari */
     transform: scale(1.5,1); /* Standard syntax */
 }

sakura_app.js

 function headertop_down() {
     var coverOffset = $('#content').offset().top;
     $('html,body').animate({
         scrollTop: coverOffset
     },
     600);
 }

评论

  1. 3年前
    2020-4-17 19:19:28

    是重邮的兄弟!

    • xiaoyaovo 博主
      3年前
      2020-4-25 16:59:25

      哈喽你好呀!你是南邮的吧我刚看了你的blog {{weixiao}}

  2. Ryunosuke
    4年前
    2020-3-25 8:30:08

    {{weixiao}} 可以,好看 {{dianzan}}

    • xiaoyaovo 博主
      4年前
      2020-3-25 9:03:28

      哈哈哈哈,谢谢!❀

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
下一篇