给WordPress添加说说功能及修改其样式

半个月之前给博客添加了说说功能，缘由是在淘气’s Blog看到了一段漂亮的CSS说说代码，便想着拿过来用了。而仅写一个html页面太不方便了，每次添加新说说都需要重新编辑html代码。

还好，经过参考(拷贝)王柏元博客的这篇文章以及觉唯设计的《WordPress自定义文章类型的分页列表调用问题》一文,最终东拼西凑完成了这个能够在wordpress后台发表说说的玩意儿。

因本博遵循的CC BY-SY-NC 要求“相同方式共享”，与上一篇文章一样，我把这些内容发表在这里。

原理及需求

wordpress内容的发表除了页面就是文章，因此我们发表说说也跳不出这两个东西。说说对象的结构一致，因此采用自定义文章类型的形式来保存每一条说说。显示说说就很简单了，在一个页面中写查找方法，把自定义文章类型下的所有文章按格式打印即可。当然，由于说说文章数量可能过多，因此理应实现翻页功能。总结，我的需求有三个：1、后台发表说说；2、显示说说；3、说说内容分页

开始添加

1.注册自定义文章类型

这些代码不难理解，无需解释。将其拷贝到主题的funcion.php即可。

//转载自王柏元的博客
//http://wangbaiyuan.cn
//注册说说类型文章
add_action('init', 'my_custom_init');
function my_custom_init()
{ $labels = array( 'name' => '说说',
'singular_name' => '说说', 
'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, 
'exclude_from_search' =>true,
'query_var' => true, 
'rewrite' => true, 'capability_type' => 'post',
'has_archive' => false, 'hierarchical' => false, 
'menu_position' => null, 'supports' => array('editor','author','title', 'custom-fields') );
register_post_type('shuoshuo',$args); 
}
//结束

如果得法，你已经可以在wp后台见到说说发表与控制。

2.添加说说页面模板

因我们需要在页面中打印说说列表，因此创建一个页面模板。页面模板的创建方法很简单，只要在页面前声明Template Name: XX 即可。

为了能够与主题样式一致，因此可以复制一份主题目录下的page.php,观察其结构，一般都为get_header开始，get_footer结束。二者中间会有一个主div容器,例如
<div class=”content”>,其内你可以找到查询与打印页面内容对应的php代码。而根据其结构可知，我们需要修改的是页面内容PHP代码。

好了，思路就是1、声明页面模板；2、修改内容查询代码。

假设你已经复制了一份page.php并将其命名为其他名称，例如page-shuoshuo.php。

2.1声明页面模板

我将其写在了PHP首行。

<?php /*
Template Name: 说说
author: yetu
url: http://www.azimiao.com
*/
get_header(); ?>

2.2修改内容查询代码

我们自定义一个查询来查询对应文章，并将其打印即可。这里拷贝了淘气博客的说说CSS样式，并参考了味觉设计的自定义查询与分页代码。

<div class="content">
	<link rel="stylesheet" href="//css.azimiao.com/shuoshuo.css" type="text/css">
        <div id="article">
			<h1><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title();
?></a></h1>
            <div class="position">当前位置：<a href="<?php echo get_option('home'); ?>/">首页</a> &raquo;
说说</div>
             <div id="article_content">
			<ul class="cbp_tmtimeline"> 
				<?php
$temp = $wp_query;
$wp_query = null;
$wp_query = new WP_Query();
$show_posts = 4;//每页显示的页数
$permalink = 'Post name';// Default, Post name
$post_type = 'shuoshuo';//Know the current URI
$req_uri = $_SERVER['REQUEST_URI'];//Permalink set to default
if ($permalink == 'Default') {
	$req_uri = explode('paged=', $req_uri);
	if ($_GET['paged']) {
		$uri = $req_uri[0] . 'paged=';
	} else {
		$uri = $req_uri[0] . '&paged=';
	}
	//Permalink is set to Post name
} elseif ($permalink == 'Post name') {
	if (strpos($req_uri, 'page/') !== false) {
		$req_uri = explode('page/', $req_uri);
		$req_uri = $req_uri[0];
	}
	$uri = $req_uri . 'page/';
}
//Query
//echo 'showposts='.$show_posts.'&post_type='. $post_type .'&paged='.$paged;
$wp_query->query('showposts=' . $show_posts . '&post_type=' . $post_type . '&paged=' . $paged);
//count posts in the custom post type
$count_posts = wp_count_posts('projects');
while ($wp_query->have_posts()):
    $wp_query->the_post();
?>
						<li> 
							<time class="cbp_tmtime">
								<span><?php the_time('y-n-j');
?></span>
							</time> 
    							<div class="cbp_tmlabel"> 
     								<p><?php the_content();
?></p> 
    							</div> 
    						</li>
					<?php  endwhile;
?>
					</ul>
            </div>
			<?php comments_template();
?>	
		</div>
	</div>

2.3实现分页

上述代码已经实现了分页核心功能。按照代码中给定的查询参数，其只会打印出规定条数的说说，且不同页数用/page/2类型url进行翻页。但由于此时还没有写翻页按钮，即没有页码导航及对应按钮，因此不能显式翻页。

在上文文章模板所需位置，添加翻页区域div容器。本人添加在了</ul>后。

<!-- 分页 -->
<div class="pagination">
    <?php  by_pagenavi(); ?>
</div>

分页导航显示方法及对应的css样式，转载自王柏元的博客，将其放置在合适的位置即可。

//分页导航显示方法
//转载自王柏元博客
//http://wangbaiyuan.cn
<?php
function by_pagenavi($before = '', $after = '', $p = 2) {
    if (is_singular()) return;
    global $wp_query, $paged;
    $max_page = $wp_query->max_num_pages;
    if ($max_page == 1) return;
    if (empty($paged)) $paged = 1;
    echo $before;
    if ($paged > 1) by_p_link($paged - 1, '上一页', '<span class="pg-item pg-nav-item pg-prev">', '上一页');
    if ($paged > $p + 1) by_p_link(1, '首页', '<span class="pg-item">', 1);
    for ($i = $paged - $p;$i <= $paged + $p;$i++) {
        if ($i > 0 && $i <= $max_page) $i == $paged ? print "<span class='pg-item pg-item-current'><span class='current'>{$i}</span></span>" : by_p_link($i, '', '<span class="pg-item">', $i);
    }
    if ($paged < $max_page - $p) by_p_link($max_page, '末页', '<span class="pg-item"> ... </span><span class="pg-item">', $max_page);
    if ($paged < $max_page) by_p_link($paged + 1, '下一页', '<span class="pg-item pg-nav-item pg-next">', '下一页');
    echo $after;
}
function by_p_link($i, $title = '', $linktype = '', $prevnext = '') {
    if ($title == '') $title = "浏览第{$i}页";
    if ($linktype == '') {
        $linktext = $i;
    } else {
        $linktext = $linktype;
    }
    echo "{$linktext}<a style = 'border-bottom:1px solid #eaeaea !important;' href='", esc_html(get_pagenum_link($i)), "' title='{$title}' class='navbutton'>{$prevnext}</a></span>";
}
?>

 

/*
分页导航样式
转载自王柏元博客
http://wangbaiyuan.cn
*/
div.pagination {
	padding: 0px;
	margin: 25px 0 40px;
	text-align: center;
	font-size: 15px;
	line-height: 17px;
	position: relative;
}

.pagination .pg-filler-1 {
	width: 35%;
}

.pagination .pg-filler-2 {
	width: 40%;
}

.pagination .pg-item a, .pagination .pg-item .current,.pagination .pg-dots, .pagination .pg-item .disabled {
	display: inline-block;
	color: #666;
	padding: 9px 13px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	text-decoration: none;
	margin: 0 1px;
	min-width: 10px;
}

.pagination .pg-item a {
	-webkit-transition: background .2s linear;
	-moz-transition: background .2s linear;
	-ms-transition: background .2s linear;
	-o-transition: background .2s linear;
	transition: background .2s linear;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
}

.pagination .pg-next {
	position: absolute;
	right: 20px;
}

.pagination .pg-prev {
	position: absolute;
	left: 20px;
}

.pg-nav-item {
	text-transform: uppercase;
}

.pagination .pg-item .current, .pagination .pg-item a:hover {
	background: #FF5E52;
	color: #fff;
}

div.pagination span.current, div.pagination a {
	padding: 0px;
	text-decoration: none;
}

div.pagination a.navbutton {
	margin: 0 2px;
	border: 1px solid #eaeaea;
}

使用方法及效果

后台发表一个页面，页面模板选择说说，页面链接不要设为shuoshuo，页面链接不要设为shuoshuo，页面链接不要设为说说，不然你的分页可能会出现404哦~如果页面链接与注册文章类型冲突，可能会有意想不到的问题出现哦~。
后台发表几条说说，访问上面的页面看看效果吧~

友情提醒

想要修改输出内容的话也非常简单哦，如添加点击说说跳转到说说详情，只需要在查询时把链接拿出来，给单条说说套一个a标签就好啦！

引用资料

1、[内容]【王柏元的博客】王柏元 在wordpress上写说说/短微博
2、[内容]【淘气’s Blog】淘气’s Blog 抄了个说说页面
3、[内容]【觉唯设计】觉唯设计 WordPress自定义文章类型的分页列表调用问题