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

2018年2月26日20:46:25 1 117 views

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>上面添加如下代码:

  1. <!--顶部显示时间-->
  2. <div class="top-time">
  3. <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>
  4. <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 style="color:red">&nbsp;&nbsp;<strong>求内推和实习</strong></span>
  5. </div>

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

2.页脚

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

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

  1. <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();?>前面加上下面代码:

  1. <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后面加上以下代码:

//说说

  1. 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,代码如下:

  1. <?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(2552552550.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(0000.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(255125730.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(0000.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(0000.15) !important    }    .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {        background: RGBA(255125730.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(255125730.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" style="">    <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后台新建页面,标题写“我的说说”,模版选择“说说”,发布,大功告成,之后可通过后台发表说说了。

未完待续······

  • 我的微信
  • 快来和我聊天吧
  • weinxin
  • 我的QQ号
  • 快来和我交流吧
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  0   博主  1

    • avatar 博主 博主

      欢迎各位赏脸评论!