WordPress - 添加短说说页面

June 27, 2018

385views

6681 words

当文章较短时，采用类似于微博，QQ说说，人人状态等的方式，能够得到更好的可视化体验. 网上搜索到相关的操作方式是，创建一个说说页面. 尝试了很多次，终于摆弄成功. 特此记录. 参考：wordpress如何加一个说说页面基于主题：Kratos.

说说页面的创建，主要处理三个文件：

修改 functions.php
新增 shuoshuo.php
新增 shuoshuo.css

其中，functions.php 是WordPress 主题自带函数文件.

<h2>1. 修改 function.php - 添加 shuoshuo 函数</h2>

在主题的 function.php 文件的最后，如 Kratos 主题文件夹中的 function.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' =&gt; $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); 
}

<h2>2. 新增 shuoshuo.php 文件</h2>

在主题目录文件夹中，如 Kratos 主题文件夹，新增 shuoshuo.php 文件，内容如下：

<?php /*
Template Name: 说说
url: https://www.aiuai.cn/shuoshuo
*/
get_header();
get_header('banner'); ?>
<link href="/wp-content/themes/Kratos/shuoshuo.css" rel="stylesheet">
<div class="shuoshuo">
  <ul class="archives-monthlisting">
    <?php query_posts("post_type=shuoshuo&post_status=publish&posts_per_page=-1");if (have_posts()) : while (have_posts()) : the_post(); ?>
  <li><span class="tt"><?php the_time('Y年n月j日G:i'); ?></span>
  <div class="shuoshuo-content"><?php the_content(); ?><br/><div class="shuoshuo-meta"></div></div><?php endwhile;endif; ?></li>
  </ul>
</div>
<?php get_footer();?>

这里，说说内容显示的文章格式的内容.
也可以替换 the_content() 为 the_title()，以文章标题作为说说内容.

<h2>3. 新增 shuoshuo.css 文件</h2>

在主题目录文件夹中，如 Kratos 主题文件夹，新增 shuoshuo.css 文件，设置说说的显示样式，内容如下：

.shuoshuo {
position: relative;
margin: 50px 0;
}
.shuoshuo li {
padding: 8px 0;
display: block;
}
.shuoshuo-content {
box-shadow: 0 0 3px RGBA(0,0,0,.15);
background-color: #f8f8f8;
border:1px #eee solid;
border-radius: 4px;
font-size: 1em;
line-height:2.3em;
margin:0 150px 0 200px;
letter-spacing: 1px;
padding: 20px 20px 5px 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+, 文本行的任意字内断开 /
}
.shuoshuo-content p{margin:0;}
/作者/
.shuoshuo-meta {
text-align: right;
letter-spacing: 0px;
margin-top:-85px;
}
.toolbar{display:none}
/时间/
/.shuoshuo .tt{margin: 35px 0 0 15px;float:left;font-size:0.9em;}/
/.shuoshuo li em{float:left;background:url("//www.100day.cc/wp-content/themes/frontopen2_v1.5.04.15/images/bolangxian.png") no-repeat;width:50px;height:10px;margin:42px 0 0 28px;}/
/.shuoshuo li:hover .tt {color:#0c0;font-weight:bold;} /
/头像/
.shuoshuo .zhutou{
    border-radius: 50%;
    margin: 25px 35px 0 5px;
    float:right;
    padding: 2px;
    border: 1px #ddd solid;
    display: block;
    transition: .5s;
    width: 40px;
    height: 40px;
    overflow:hidden;
}
.shuoshuo li:hover .zhutou {
    transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    border-color: #0c0;
}
/前面的轴/
.shuoshuo:before {
    height: 100%;
    width: 2px;
    background: #eee;
    position: absolute;
    left: 164px;
    content: "";
    top:0px;
}
.shuoshuo-content:before {
    position: absolute;
    top: 40px;
    bottom: 0px;
    left: -42px;
    background: #fff;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    content: "";
    box-shadow: inset 0 0 2px #0c0;
}
.shuoshuo-content:after {
    position: absolute;
    top: 42px;
    bottom: 0px;
    left: -40px;
    background: #ccc;
    height: 8px;
    width: 8px;
    border-radius: 6px;
    content: "";
}
.shuoshuo li:hover .shuoshuo-content:after {
    background: #0c0;
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
}
.shuoshuo li:hover .shuoshuo-content:before {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);}
/后面的轴/
.shuoshuo:after {
    height: 100%;
    width: 2px;
    background: #eee;
    position: absolute;
    right: 100px;
    content: "";
    top:0px;
}
.shuoshuo-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;
}
.shuoshuo-meta:after {
    position: absolute;
    top: 44px;
    bottom: 0px;
    right: -54px;
    background: #ccc;
    height: 8px;
    width: 8px;
    z-index:2;
    border-radius: 6px;
    content: "";
}
.shuoshuo li:hover .shuoshuo-meta:after {
    background: #0c0;
}
@media screen and (min-width:1080px){
.shuoshuo{
    width:1060px;
    margin:50px auto
    }
}
@media screen and (max-width: 800px) { 
.shuoshuo-content {margin:0 60px 0 70px;padding: 10px 10px 5px 10px;font-size:0.9em;}
.shuoshuo .tt{width:30px;font-weight:bold;margin: 30px 0 0 1px;font-size:0.5em;height: 20px;}
.shuoshuo li:hover .tt {color:#0c0;font-size:0.5em;}
.shuoshuo:before {left: 50px;}
.shuoshuo-content:before {left: -26px;top:30px;}
.shuoshuo-content:after {left: -24px;top:32px;}

.shuoshuo:after {right: 27px;}
.shuoshuo-meta:before {right: -39px;top:33px;}
.shuoshuo-meta:after {right: -37px;top:35px;}

.shuoshuo .zhutou{margin: 17px 5px 0 5px;}
.shuoshuo li em{float:left;width:39px;height:10px;margin:34px 0 0 -1px;}
}

根据自己喜好，可自定义 shuoshuo.css文件.

<h2>4. 后台添加说说页面</h2>

以上三个文件在主题目录下操作完成后，
在 WordPress 后台，"页面 - 新建页面"，命名为 "测试说说“，页面模板选择 "说说".
即可发布说说.

如：

https://www.aiuai.cn/aishuo.html

WordPress - 添加短说说页面

AIHGF • 2018 年 06 月 27 日

当文章较短时，采用类似于微博，QQ说说，人人状态等的方式，能够得到更好的可视化体验. 网上搜索到相关的操作方式是，创建一个说说页面. 尝试了很多次，终于摆弄成功. 特此记录. 参考：wordpress如何加一个说说页面基于主题：Kratos.

说说页面的创建，主要处理三个文件：

修改 functions.php
新增 shuoshuo.php
新增 shuoshuo.css

其中，functions.php 是WordPress 主题自带函数文件.

<h2>1. 修改 function.php - 添加 shuoshuo 函数</h2>

在主题的 function.php 文件的最后，如 Kratos 主题文件夹中的 function.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' =&gt; $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); 
}

<h2>2. 新增 shuoshuo.php 文件</h2>

在主题目录文件夹中，如 Kratos 主题文件夹，新增 shuoshuo.php 文件，内容如下：

<?php /*
Template Name: 说说
url: https://www.aiuai.cn/shuoshuo
*/
get_header();
get_header('banner'); ?>
<link href="/wp-content/themes/Kratos/shuoshuo.css" rel="stylesheet">
<div class="shuoshuo">
  <ul class="archives-monthlisting">
    <?php query_posts("post_type=shuoshuo&post_status=publish&posts_per_page=-1");if (have_posts()) : while (have_posts()) : the_post(); ?>
  <li><span class="tt"><?php the_time('Y年n月j日G:i'); ?></span>
  <div class="shuoshuo-content"><?php the_content(); ?><br/><div class="shuoshuo-meta"></div></div><?php endwhile;endif; ?></li>
  </ul>
</div>
<?php get_footer();?>

这里，说说内容显示的文章格式的内容.
也可以替换 the_content() 为 the_title()，以文章标题作为说说内容.

<h2>3. 新增 shuoshuo.css 文件</h2>

在主题目录文件夹中，如 Kratos 主题文件夹，新增 shuoshuo.css 文件，设置说说的显示样式，内容如下：

.shuoshuo {
position: relative;
margin: 50px 0;
}
.shuoshuo li {
padding: 8px 0;
display: block;
}
.shuoshuo-content {
box-shadow: 0 0 3px RGBA(0,0,0,.15);
background-color: #f8f8f8;
border:1px #eee solid;
border-radius: 4px;
font-size: 1em;
line-height:2.3em;
margin:0 150px 0 200px;
letter-spacing: 1px;
padding: 20px 20px 5px 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+, 文本行的任意字内断开 /
}
.shuoshuo-content p{margin:0;}
/作者/
.shuoshuo-meta {
text-align: right;
letter-spacing: 0px;
margin-top:-85px;
}
.toolbar{display:none}
/时间/
/.shuoshuo .tt{margin: 35px 0 0 15px;float:left;font-size:0.9em;}/
/.shuoshuo li em{float:left;background:url("//www.100day.cc/wp-content/themes/frontopen2_v1.5.04.15/images/bolangxian.png") no-repeat;width:50px;height:10px;margin:42px 0 0 28px;}/
/.shuoshuo li:hover .tt {color:#0c0;font-weight:bold;} /
/头像/
.shuoshuo .zhutou{
    border-radius: 50%;
    margin: 25px 35px 0 5px;
    float:right;
    padding: 2px;
    border: 1px #ddd solid;
    display: block;
    transition: .5s;
    width: 40px;
    height: 40px;
    overflow:hidden;
}
.shuoshuo li:hover .zhutou {
    transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    border-color: #0c0;
}
/前面的轴/
.shuoshuo:before {
    height: 100%;
    width: 2px;
    background: #eee;
    position: absolute;
    left: 164px;
    content: "";
    top:0px;
}
.shuoshuo-content:before {
    position: absolute;
    top: 40px;
    bottom: 0px;
    left: -42px;
    background: #fff;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    content: "";
    box-shadow: inset 0 0 2px #0c0;
}
.shuoshuo-content:after {
    position: absolute;
    top: 42px;
    bottom: 0px;
    left: -40px;
    background: #ccc;
    height: 8px;
    width: 8px;
    border-radius: 6px;
    content: "";
}
.shuoshuo li:hover .shuoshuo-content:after {
    background: #0c0;
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
}
.shuoshuo li:hover .shuoshuo-content:before {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);}
/后面的轴/
.shuoshuo:after {
    height: 100%;
    width: 2px;
    background: #eee;
    position: absolute;
    right: 100px;
    content: "";
    top:0px;
}
.shuoshuo-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;
}
.shuoshuo-meta:after {
    position: absolute;
    top: 44px;
    bottom: 0px;
    right: -54px;
    background: #ccc;
    height: 8px;
    width: 8px;
    z-index:2;
    border-radius: 6px;
    content: "";
}
.shuoshuo li:hover .shuoshuo-meta:after {
    background: #0c0;
}
@media screen and (min-width:1080px){
.shuoshuo{
    width:1060px;
    margin:50px auto
    }
}
@media screen and (max-width: 800px) { 
.shuoshuo-content {margin:0 60px 0 70px;padding: 10px 10px 5px 10px;font-size:0.9em;}
.shuoshuo .tt{width:30px;font-weight:bold;margin: 30px 0 0 1px;font-size:0.5em;height: 20px;}
.shuoshuo li:hover .tt {color:#0c0;font-size:0.5em;}
.shuoshuo:before {left: 50px;}
.shuoshuo-content:before {left: -26px;top:30px;}
.shuoshuo-content:after {left: -24px;top:32px;}

.shuoshuo:after {right: 27px;}
.shuoshuo-meta:before {right: -39px;top:33px;}
.shuoshuo-meta:after {right: -37px;top:35px;}

.shuoshuo .zhutou{margin: 17px 5px 0 5px;}
.shuoshuo li em{float:left;width:39px;height:10px;margin:34px 0 0 -1px;}
}

根据自己喜好，可自定义 shuoshuo.css文件.

<h2>4. 后台添加说说页面</h2>

以上三个文件在主题目录下操作完成后，
在 WordPress 后台，"页面 - 新建页面"，命名为 "测试说说“，页面模板选择 "说说".
即可发布说说.

如：

https://www.aiuai.cn/aishuo.html

菜贩儿
May 23rd, 2019 at 11:36 am

好像就没有调用CSS的代码了，麻烦看下，https://www.ebain.cn/shuoshuo

菜贩儿
May 23rd, 2019 at 11:00 am

你好，我用了你这个代码，前两天还好的，巨这两天突然不行了，不知道哪里冲突，可以帮我看下吗

1. AIHGF
  May 23rd, 2019 at 12:39 pm
  
  @菜贩儿
  
  不好意思，我对 WordPress 没接触多久，也是遇到过莫名的问题，现在转用 Typecho 了.

WordPress - 添加短说说页面

※相关文章推荐※

※最新文章推荐※

3 comments

Leave a Comment Cancel reply

WordPress - 添加短说说页面