半个月之前给博客添加了说说功能,缘由是在淘气’s Blog看到了一段漂亮的 CSS,便拿过来用了。经过多方参考,最终完成了这个能够在后台发表说说的玩意儿。

因本博遵循的CC BY-SY-NC,与上一篇文章一样,我把这些内容发表在这里。

原理及需求

WordPress 发表文字不是页面就是文章,因此发表说说也跳不出这两个东西。

说说对象的结构一致,因此采用自定义文章类型的形式来保存每一条说说。

显示说说时,通过查找对应文章类型下的所有文章,并按需输出内容即可。

当然,由于说说文章数量可能过多,因此理应实现翻页功能。

总结,我的需求有三个:

  1. 后台发表说说;
  2. 显示说说;
  3. 说说内容分页

开始添加

1.注册自定义文章类型

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

//转载自王柏元的博客
//注册说说类型文章
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">,其内可以找到查询与打印内容的代码。

根据其结构可知,我们需要修改的是页面内容代码。

好了,思路是:1. 声明页面模板;2. 修改内容查询代码。

2.1声明页面模板

假设你已经复制了一份page.php并将其命名page-shuoshuo.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> »说说</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容器。本人添加在了

后。

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

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

<?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>";
}
?>

/*
分页导航样式
转载自王柏元博客
*/
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 0.2s linear;
  -moz-transition: background 0.2s linear;
  -ms-transition: background 0.2s linear;
  -o-transition: background 0.2s linear;
  transition: background 0.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自定义文章类型的分页列表调用问题

梓喵出没博客(azimiao.com)版权所有,转载请注明链接:https://www.azimiao.com/2941.html
欢迎加入梓喵出没博客交流群:313732000

吐槽 野兔

*

*

0位绅士参与评论

  1. 文曦12-07 11:31 回复

    我想换wp了 🙁

  2. 淘气12-07 12:05 回复

    真能啄磨 🙂

    • 野兔12-07 17:45 回复

      哈哈,只是个搬运工啦 😛

  3. 岁月小筑12-08 21:55 回复

    太长,不看23333

  4. 熊猫小A01-04 11:04 回复

    好看好看~扒走啦,一些简短的牢骚就发在说说页面挺好

  5. txh01-12 15:04 回复

    😀 😀 好羞射,文章真的好赞啊,顶博主!

  6. 后宫学长01-16 14:00 回复

    懒癌发作,懒得添加功能了

  7. 北海01-16 19:04 回复

    emmm来个ty的说说功能

  8. 蝉时雨01-17 09:36 回复

    阿梓喵~,你的首页文章排序怎么乱了,之前的都跑上面来了。
    还有不知道什么原因,每次打开你的首页都特慢,都要好几分钟 emmmmm~~

    • 野兔01-17 11:15 回复

      网络问题我也不知道咋回事…我找了江苏的朋友,海南的朋友,以及我自己的河北电信移动联通都试着访问了一下,速度还可以 😕

    • 蝉时雨01-17 11:23 回复

      难道是我用了代理的原因?可我在家在公司速度也没多快啊,之前都是秒开的,深思~~

      • 野兔01-17 11:27 回复

        你访问这个静态页面试试?www.azimiao.com/special/star/