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 style="color:red"> <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" 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后台新建页面，标题写“我的说说”，模版选择“说说”，发布，大功告成，之后可通过后台发表说说了。
网友评论