2018-02-26 记自己的WordPress优化记录

1.开始

2018年2月25日我拿到了自己一直想要的begin主题包，立马安装上了开始搞，经历了48小时的磨练，不断百度，不断摸索，主题效果初见雏形，废话不多说，下面开始干货奉献。

2.页眉与页脚（感谢梵天博客提供源代码）

首先是效果图：

页眉

页脚

1.页眉（感谢梵天博客提供源代码）

修改begin主题根目录下inc/user/user-profile.php，具体路径为wp-content/themes/begin/inc/user/user-profile.php，在文件中文件末尾倒数三行左右的<div class=”clear”></div>上面添加如下代码：

<!–顶部显示时间–><div class=”top-time”><script type=”text/javascript”>today=new Date();var day; var date; var hello;hour=new Date().getHours();if(hour < 6){ hello=’凌晨好!’;}else if(hour < 9){ hello=’早上好!’;}else if(hour < 12){ hello=’上午好!’;}else if(hour < 14){ hello=’中午好!’;}else if(hour < 17){ hello=’下午好!’;}else if(hour < 19){ hello=’傍晚好!’;}else if(hour < 22){ hello=’晚上好!’;}else{ hello=’夜深了!’;}function GetCookie(sName) { var arr = document.cookie.match(new RegExp(“(^| )”+sName+”=([^;]*)(;|$)”)); if(arr !=null){return unescape(arr[2])}; return null;}var Guest_Name = decodeURIComponent(GetCookie(‘author’));var webUrl = webUrl;if (Guest_Name != “null” && Guest_Name != “” ){ hello = Guest_Name+’ , ‘+hello+’ 欢迎回来。’;}document.write(‘ ‘+hello);</script><span id=”localtime”><script type=”text/javascript”>today=new Date(); var tdate,tday, x,year; var x = new Array(“星期日”, “星期一”, “>星期二”, “星期三”, “星期四”, “星期五”,”星期六”);var MSIE=navigator.userAgent.indexOf(“MSIE”);if(MSIE != -1){ year =(today.getFullYear());} else { year = (today.getYear()+1900);} tdate= year+ “年” + (today.getMonth() + 1 ) + “月” + today.getDate() + “日” + ” ” + x[today.getDay()];document.write(tdate);</script></span><span >  <strong>求内推和实习</strong></span></div>

”求内推和实习“这几个字可以自行修改自己想要的内容。

2.页脚

安装好begin主题之后，进入用户后台，外观——主题选项——SEO设置，下拉找到页脚设置。

第二行内容不能在可视化窗口中编辑，要点击文本，然后输入以下代码：

<span id=”runtime_span”></span><script type=”text/javascript”>function show_runtime(){window.setTimeout(“show_runtime()”,1000);X=new Date(“2/10/2018 0:00:00″);Y=new Date();T=(Y.getTime()-X.getTime());M=24*60*60*1000;a=T/M;A=Math.floor(a);b=(a-A)*24;B=Math.floor(b);c=(b-B)*60;C=Math.floor((b-B)*60);D=Math.floor((c-C)*60);runtime_span.innerHTML=”博客已运行”+A+”天”+B+”小时”+C+”分”+D+”秒”}show_runtime();</script>

代码中的 ”2/10/2018 0:00:00“是你博客的开始时间，月/日/年 时分秒，点击保存即可。

3.鼠标点击特效

添加鼠标点击特效，出现自由、和谐等等等字样，需要在wp-content/themes/begin/footer.php中最后的<?php wp_footer();?>前面加上下面代码：

<script type=”text/javascript”>/* 鼠标特效 */var a_idx = 0;jQuery(document).ready(function($) {$(“body”).click(function(e) {var a = new Array(“富强”, “民主”, “文明”, “和谐”, “自由”, “平等”, “公正” ,”法治”, “爱国”, “敬业”, “诚信”, “友善”);var $i = $(“<span/>”).text(a[a_idx]);a_idx = (a_idx + 1) % a.length;var x = e.pageX,y = e.pageY;$i.css({“z-index”: 999999999999999999999999999999999999999999999999999999999999999999999,”top”: y – 20,”left”: x,”position”: “absolute”,”font-weight”: “bold”,”color”: “#ff6651”});$(“body”).append($i);$i.animate({“top”: y – 180,”opacity”: 0},1500,function() {$i.remove();});});});</script><?php wp_footer(); ?>

效果如下图：

4.页脚小工具（增强性文本）并列显示，合理分配宽度

修改主题文件夹下style.css文件，在文件中找到.footer-widget .widget，修改width属性，如果有四个则是25%，3个33%，依次类推。

5.配置主机smtp，别人注册博客时候收到你发送的邮件

1.主机服务器开启465端口

2.安装插件 wp-smtp

3.以qq邮箱为例，打开qq邮箱主页，点击设置——账户，下拉有两个选项，带smtp的都开启，然后再点击下面的生成授权码，加下授权码。

4.后台设置中选择wp smtp，填入你的邮箱信息，下面有测试按钮，保存设置之后就会实现发送邮件功能了！

6.为自己的博客添加说说、微语、微博功能，具体效果看以下地址：（感谢言曌博客 提供源代码）

说说页面

1.在主题文件夹下的funtions.php后面加上以下代码：

//说说 

add_action(‘init’, ‘my_custom_init’); function my_custom_init() { $labels = array( ‘name’ => ‘说说’, ‘singular_name’ => ‘singularname’, ‘add_new’ => ‘发表说说’, ‘add_new_item’ => ‘发表说说’, ‘edit_item’ => ‘编辑说说’, ‘new_item’ => ‘新说说’, ‘view_item’ => ‘查看说说’, ‘search_items’ => ‘搜索说说’, ‘not_found’ => ‘暂无说说’, ‘not_found_in_trash’ => ‘没有已遗弃的说说’, ‘parent_item_colon’ => ”, ‘menu_name’ => ‘说说’ ); $args = array( ‘labels’ => $labels, ‘public’ => true, ‘publicly_queryable’ => true, ‘show_ui’ => true, ‘show_in_menu’ => true, ‘query_var’ => true, ‘rewrite’ => true, ‘capability_type’ => ‘post’, ‘has_archive’ => true, ‘hierarchical’ => false, ‘menu_position’ => null, ‘supports’ => array(‘title’,’editor’,’author’) ); register_post_type(‘shuoshuo’,$args); }

2.在根目录里创建shuoshuo.php，代码如下：

<?php /*    Template Name: 说说    author: 秋叶    url: http://www.mizuiren.com/141.html    */    get_header(); ?><style type=”text/css”>    #shuoshuo_content {        background-color: #fff;        padding: 10px;        min-height: 500px;    }    /* shuo */    body.theme-dark .cbp_tmtimeline::before {        background: RGBA(255, 255, 255, 0.06);    }    ul.cbp_tmtimeline {        padding: 0;    }    div class.cdp_tmlabel > li .cbp_tmlabel {        margin-bottom: 0;    }    .cbp_tmtimeline {        margin: 30px 0 0 0;        padding: 0;        list-style: none;        position: relative;    }    /* The line */    .cbp_tmtimeline:before {        content: ”;        position: absolute;        top: 0;        bottom: 0;        width: 4px;        background: RGBA(0, 0, 0, 0.02);        left: 80px;        margin-left: 10px;    }    /* The date/time */    .cbp_tmtimeline > li .cbp_tmtime {        display: block;        /* width: 29%; */        /* padding-right: 110px; */        max-width: 70px;        position: absolute;    }    .cbp_tmtimeline > li .cbp_tmtime span {        display: block;        text-align: right;    }    .cbp_tmtimeline > li .cbp_tmtime span:first-child {        font-size: 0.9em;        color: #bdd0db;    }    .cbp_tmtimeline > li .cbp_tmtime span:last-child {        font-size: 1.2em;        color: #9BCD9B;    }    .cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {        color: RGBA(255, 125, 73, 0.75);    }    div.cbp_tmlabel > p {        margin-bottom: 0;    }    /* Right content */    .cbp_tmtimeline > li .cbp_tmlabel {        margin: 0 0 45px 65px;        background: #9BCD9B;        color: #fff;        padding: .8em 1.2em .4em 1.2em;        /* font-size: 1.2em; */        font-weight: 300;        line-height: 1.4;        position: relative;        border-radius: 5px;        transition: all 0.3s ease 0s;        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);        cursor: pointer;        display: block;    }    .cbp_tmlabel:hover {        /* transform:scale(1.05); */        transform: translateY(-3px);        z-index: 1;        -webkit-box-shadow: 0 15px 32px rgba(0, 0, 0, 0.15) !important    }    .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {        background: RGBA(255, 125, 73, 0.75);    }    /* The triangle */    .cbp_tmtimeline > li .cbp_tmlabel:after {        right: 100%;        border: solid transparent;        content: ” “;        height: 0;        width: 0;        position: absolute;        pointer-events: none;        border-right-color: #9BCD9B;        border-width: 10px;        top: 4px;    }    .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {        border-right-color: RGBA(255, 125, 73, 0.75);    }    p.shuoshuo_time {        margin-top: 10px;        border-top: 1px dashed #fff;        padding-top: 5px;    }    /* Media */    @media screen and (max-width: 65.375em) {        .cbp_tmtimeline > li .cbp_tmtime span:last-child {            font-size: 1.2em;        }    }    .shuoshuo_author_img img {        border: 1px solid #ddd;        padding: 2px;        float: left;        border-radius: 64px;        transition: all 1.0s;    }    .avatar {        -webkit-border-radius: 100% !important;        -moz-border-radius: 100% !important;        box-shadow: inset 0 -1px 0 #3333sf;        -webkit-box-shadow: inset 0 -1px 0 #3333sf;        -webkit-transition: 0.4s;        -webkit-transition: -webkit-transform 0.4s ease-out;        transition: transform 0.4s ease-out;        -moz-transition: -moz-transform 0.4s ease-out;    }    .zhuan {        transform: rotateZ(720deg);        -webkit-transform: rotateZ(720deg);        -moz-transform: rotateZ(720deg);    }    /* end */</style></head><body><div id=”primary” class=”content-area” >    <main id=”main” class=”site-main” role=”main”>        <div id=”shuoshuo_content”>            <ul class=”cbp_tmtimeline”>                <?php query_posts(“post_type=shuoshuo&post_status=publish&posts_per_page=-1″);if (have_posts()) : while (have_posts()) : the_post(); ?>                <li> <span class=”shuoshuo_author_img”><img src=”http://media.liuyanzhao.com/wp-content/uploads/2017/02/zhitianjiahui-e1489667385398.png” class=”avatar avatar-48″ width=”48″ height=”48″></span>                    <a class=”cbp_tmlabel” href=”javascript:void(0)”>                        <p></p>                        <p><?php the_content(); ?></p>                        <p></p>                        <p class=”shuoshuo_time”><i class=”fa fa-clock-o”></i>                            <?php the_time(‘Y年n月j日G:i’); ?>                        </p>                    </a>                    <?php endwhile;endif; ?>                </li>            </ul>        </div>    </main>    <!– .site-main –></div><script type=”text/javascript”>    $(function () {        var oldClass = “”;        var Obj = “”;        $(“.cbp_tmtimeline li”).hover(function () {            Obj = $(this).children(“.shuoshuo_author_img”);            Obj = Obj.children(“img”);            oldClass = Obj.attr(“class”);            var newClass = oldClass + ” zhuan”;            Obj.attr(“class”, newClass);        }, function () {            Obj.attr(“class”, oldClass);        })    })</script><?php get_sidebar(); ?><?php get_footer();?>

3.进入wordpress后台新建页面，标题写“我的说说”，模版选择“说说”，发布，大功告成，之后可通过后台发表说说了。

未完待续······