【WordPress 教程】为WordPress博客增加说说功能即微语功能
【使用方法:】
- 2、添加微语模板:新建一个template-weiyu.php文件,将下面代码复制进去,上传到你主题的pages目录。
展开
- <?php
- /*
- Template Name: 微言微语
- */
- ?>
- <?php get_header(); ?>
- <style type="text/css">
- .weiyu-header h1 {
- font-size: 12px;
- font-size: 1.6rem;
- line-height: 30px;
- text-align: center;
- margin: 0 0 15px 0;
- }
- .weiyu-title {
- font-size: 13px;
- margin: 10px -21px 10px -21px;
- padding: 0 15px;
- border-bottom: 1px solid #ebebeb;
- border-left: 5px solid #0088cc;
- }
- </style>
- <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
- <header class="weiyu-header">
- <h1 class="single-title"><?php the_title(); ?></h1>
- <h3 class="weiyu-title">目前有 <?php $count_posts = wp_count_posts('weiyu'); echo $published_posts = $count_posts->publish;?> 个微语,于<?php $last = $wpdb->get_results("SELECT MAX(post_modified) AS MAX_m FROM $wpdb->posts WHERE (post_type = 'weiyu')");$last = date('Y年n月j日', strtotime($last[0]->MAX_m));echo $last; ?>更新。
- </h3>
- </header>
- <main id="main" class="site-main" role="main">
- <!--noptimize-->
- <div class="weiyu">
- <ul class="archives-monthlisting">
- <?php $limit = get_option('posts_per_page');$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;query_posts('post_type=weiyu&post_status=publish&showposts=' . $limit=15 . '&paged=' . $paged);if (have_posts()) : while (have_posts()) : the_post(); ?>
- <li><?php echo get_avatar( get_the_author_email(), 40 ); ?>
- <div class="calendar-year">
- <div class="cal-year"><?php echo get_the_time('y') ?></div>
- </div>
- <div class="calendar">
- <div class="cal-month month-<?php echo get_the_time('m') ?>"><?php echo get_the_time('M') ?></div>
- <div class="cal-date"><?php echo get_the_time('j') ?></div>
- </div><em></em>
- <div class="weiyu-content"><?php the_content(); ?><br/><div class="weiyu-meta"><span><i class="fa fa-user-circle"></i>:<?php the_author() ?> <a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" title="<?php _e( '点赞', 'begin' ); ?>" class="dingzan<?php if(isset($_COOKIE['zm_like_'.$post->ID])) echo ' done';?>"><i class="fa fa-thumbs-o-up"></i>:(<i class="count"><?php if( get_post_meta($post->ID,'zm_like',true) ){
- echo get_post_meta($post->ID,'zm_like',true);
- } else {
- echo '0';
- }?></i>)</a></span></div>
- </div>
- <?php endwhile;endif; ?>
- </li>
- </ul>
- </div>
- <!--/noptimize-->
- </main><!-- .site-main -->
- </article><!-- #page -->
- <?php begin_pagenav(); ?>
- <?php get_footer(); ?>
- 3、创建一个新页面:进入Wordpress后台,创建一个新页面,在模板一栏中选择“微言微语”,没错,就是我们上一步添加到pages目录下的那个模板。然后确认新建即可。这时候,wordpress的微语功能就基本实现了。只要将新建的页面添加到你的菜单中,就可以正常发表微语了,但是样式是非常简陋的,所以下一步才是最关键的——选择适合自己CSS样式。
【CSS样式美化】
- 为微语页面添加CSS样式,复制以下代码加到你主题的style.css中。Begin主题可添后台添加,大家可以根据自己的情况进行修改。需要注意的是代码中/*波浪线*/bolangxian.png路径注意修改成自己的
展开
/*微语*/ strong { font-weight: normal;} .weiyu { position: relative; padding: 10px 0; } .weiyu li { padding: 8px 0; display: block; } .weiyu-content { box-shadow: 0 0 3px RGBA(0,0,0,.15); background-color: #f9f9f9; border:1px #ccc solid; border-radius: 4px; font-size: 1.0em; line-height:1.5em; margin:0 150px 0 150px; letter-spacing: 1px; padding: 20px 20px 0px 30px; color: #666; min-height:60px; position: relative; white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3.0 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP Printers */ word-wrap: break-word; /* IE 5+, 文本行的任意字内断开 */ } .weiyu-content p{margin:0;} /*作者*/ .weiyu-meta {text-align: right;letter-spacing: 0px;margin-top:-15px;} .weiyu-meta span{background-color:#f9f9f9;border-radius:3px;padding:2px 5px;font-size:13px} .weiyu-meta a {color: #666 !important;} /*年月日*/ .calendar{text-align:center;position:relative;margin-bottom:5px;margin-right:-5px;margin-top:0;border:1px solid #c9c9c9;-webkit-border-top-left-radius:7px;-webkit-border-bottom-right-radius:7px;border-radius-topleft:7px;border-radius-bottomright:7px;border-top-left-radius:7px;border-bottom-right-radius:7px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;top:20px;float:left;margin-left: 3px;-webkit-box-shadow:#c6c6c6 1px 1px 3px;box-shadow:#c6c6c6 1px 1px 3px} .calendar-year{text-align:center;position:relative;margin-bottom:5px;margin-right:-5px;margin-top:0;border:1px solid #c9c9c9;-webkit-border-top-left-radius:7px;border-bottom-left-radius:7px;top:39px;float:left;margin-left: 27px;} .cal-year{color:#b2b1b2;background-color:#e9e9e9;text-shadow:white -1px -1px 1px;-webkit-border-top-left-radius:6px;border-radius-bottomleft:6px;border-bottom-left-radius:6px;letter-spacing:-2px;font:bold 15px Helvetica,"Arial Rounded MT Bold",Geneva,sans-serif;padding:1px 4px 2px 0;text-align:center;border:1px solid #fff} .cal-month{-webkit-border-top-left-radius:6px;border-radius-topleft:6px;border-top-left-radius:6px;font-size:10px;font-weight:bold;color:#fff;letter-spacing:0;text-transform:uppercase;padding:3px 10px} .cal-date{color:#222;background-color:#e9e9e9;text-shadow:white -1px -1px 1px;-webkit-border-bottom-right-radius:6px;border-radius-bottomright:6px;border-bottom-right-radius:6px;letter-spacing:-2px;font:bold 21px Helvetica,"Arial Rounded MT Bold",Geneva,sans-serif;padding:1px 4px 2px 0;text-align:center;border:1px solid #fff} .month-01{background-color:#767c8f}.month-02{background-color:#345abe}.month-03{background-color:#37838d}.month-04{background-color:#55b06c}.month-05{background-color:#409ad5}.month-06{background-color:#be63c5} .month-07{background-color:#f79445}.month-08{background-color:#4e1e00}.month-09{background-color:#a04262}.month-10{background-color:#284461}.month-11{background-color:#4d1d77}.month-12{background-color:#af1919} /*波浪线*/ .weiyu li em{float:left;background:url("bolangxian.png") no-repeat;width:55px;height:10px;margin:42px 0 0 26px;} /*头像*/ .weiyu .avatar{border-radius: 50%;margin: 26px 35px 0 5px;float:right;padding: 0px;border: 1px #ddd solid;display: block;transition: .5s;width: 40px;height: 40px;overflow:hidden;} .weiyu li:hover .avatar { transform: rotate(360deg);-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);border-color: #0c0;} /*前面的轴*/ .weiyu:before { height: 100%; width: 2px; background: #eee; position: absolute; left: 105px; content: ""; top:0px; } .weiyu-content:before { position: absolute; top: 40px; bottom: 0px; left: -51px; background: #fff; height: 12px; width: 12px; border-radius: 6px; content: ""; box-shadow: inset 0 0 2px #0c0; } .weiyu-content:after { position: absolute; top: 42px; bottom: 0px; left: -49px; background: #ccc; height: 8px; width: 8px; border-radius: 6px; content: ""; } .weiyu li:hover .weiyu-content:after { background: #0c0; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); } .weiyu li:hover .weiyu-content:before {-webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3);} /*后面的轴*/ .weiyu:after { height: 100%; width: 2px; background: #eee; position: absolute; right: 100px; content: ""; top:0px; } .weiyu-meta:before { position: absolute; top: 42px; bottom: 0px; right: -56px; background: #fff; height: 12px; width: 12px; border-radius: 6px; content: ""; z-index:2; box-shadow: inset 0 0 2px #0c0; } .weiyu-meta:after { position: absolute; top: 44px; bottom: 0px; right: -54px; background: #ccc; height: 8px; width: 8px; z-index:2; border-radius: 6px; content: ""; } .weiyu li:hover .weiyu-meta:after { background: #0c0; } @media screen and (max-width: 550px) { .weiyu-content {margin:0 30px 0 30px;padding: 10px 3px 0px 8px;font-size:0.9em;} .calendar{left: -46px;top:8px;margin-right:-46px;} .cal-month{font-size:8px;padding:0px 3px} .cal-date{font:bold 13px Helvetica,"Arial Rounded MT Bold",Geneva,sans-serif;} .calendar-year{left: -46px;top:26px;} .cal-year{font:bold 9px Helvetica,"Arial Rounded MT Bold",Geneva,sans-serif;padding:0 1px 0 0;} .weiyu:before {left: 20px;} .weiyu-content:before {left: -16px;top:25px;} .weiyu-content:after {left: -14px;top:27px;} .weiyu:after {right: 20px;} .weiyu-meta:before {right: -16px;top:25px;} .weiyu-meta:after {right: -14px;top:27px;} .weiyu .avatar{margin: 16px -17px 0 5px;width: 30px;height: 30px;} .weiyu li em{float:left;width:10px;height:10px;margin:25px 0 0 -12px;} .weiyu-meta span{font-size:10px} }
【注意事项】
- 这个微语页面使用了Font Awesome字体图标,需要安装font awesome 4 menus插件(或者直接将Font Awesome字体放到网站目录下)才能正常显示。或自行修改成Iconfont-阿里巴巴矢量图标库的也可以,看自己选择。。
- template-weiyu.php文件内2段图标可自行修改
fa fa-user-circle fa fa-thumbs-o-up
继续阅读
- 我的微信
- 这是我的微信扫一扫
-
- 我的微信公众号
- 我的微信公众号扫一扫
-
2023年9月14日 18:18 113楼
哪里会有人喜欢孤独,不过是,不喜欢失望罢了。
2023年9月5日 20:39 112楼
看起来十分不错,试一下
2023年9月5日 20:35 111楼
同款主题,试试代码,感谢分享