欢迎光临
我们一直在努力

WordPress添加碎语说说功能


Wordpress 添加碎语说说功能,首先需要添加自定义分类。
在function.php里添加代码添加自定义分类

添加说说发布页面

function my_custom_shuoshuo_init() {
	$labels = array(
	'name'               => '说说',
	'singular_name'      => '说说',
	'all_items'          => '所有说说',
	'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'      => 5,
	'supports'           => array('title','editor','author')
	);
	register_post_type('shuoshuo',$args);
}
add_action('init', 'my_custom_shuoshuo_init');

这段代码添加完在Wordpress后台菜单页面就会有说说的发布页面

前台显示页面

后台代码已经部署完毕接下来需要添加前台代码
我们需要新建一个页面模板文件如:
主题目录->page->shuoshuo.php
在文件里添加以下代码

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/vertical_timeline.css" />
<section class="container">
<div class="content-wrap">
<div class="content">
<div style="background: #FFF; padding: 30px; border-radius: 5px;">
<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>
<time class="cbp_tmtime"><i class="fa fa-clock-o"></i> <?php the_time('Y年n月j日G:i'); ?></time>
<div class="cbp_tmicon">
<!--<img src="https://www.wenzika.com/wp-content/uploads/2018/09/wzk.jpg" class="avatar avatar-48" width="48" height="48">-->
<?php echo get_avatar( get_the_author_meta( 'user_email' ),48 ); ?>

</div>
<div class="cbp_tmlabel" >
<span style="font-size:14px;"><?php the_content(); ?></span>
<h2><?php the_title(); ?><span><?php echo get_bloginfo('name'); ?> | <?php echo get_bloginfo('description' ); ?></span></h2>
</div>
</li>
<?php }
} ?>
</ul>
</div>
</div>

添加完后需要在Wordpress后台的页面新建一个页面,模板选择“说说/心情”设置好别名
接着在菜单添加链接
这样说说碎语功能就添加完成

CSS样式

/** ´¹Ö±Ê±¼äÏßCSSÑùʽ */

.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: 10px;
    background: #afdcf8;
    left: 20%;
    margin-left: -6px;
}
/* The date/time */
.cbp_tmtimeline > li .cbp_tmtime {
    display: block;
    width: 30%;
    padding-right: 100px;
    position: absolute;
    color: #AAA;
}
.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: 2.9em;
    color: #24a0f0;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
    color: #7878f0;
}
/* Right content */
.cbp_tmtimeline > li .cbp_tmlabel {
    margin: 0 0 15px 25%;
    background: #24a0f0;
    color: #fff;
    padding: 0.8em;
    font-size: 1.2em;
    font-weight: 300;
    line-height: 1.4;
    position: relative;
    border-radius: 5px;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
    background: #7878f0;
}
.cbp_tmtimeline > li .cbp_tmlabel h2 { 
    border-bottom: 0px;
    border-top:1px dashed #FFF; 
    font-size:16px; 
    height: 24px; 
    padding: 5px 3px 12px; 
    margin:0px;
}
.cbp_tmtimeline > li .cbp_tmlabel h2 > span { 
    font-size: 12px; 
    float: right; 
    text-align: center; 
    line-height: 24px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
}
/* 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: #24a0f0;
    border-width: 10px;
    top: 10px;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
    border-right-color: #7878f0;
}
/* The icons */
.cbp_tmtimeline > li .cbp_tmicon {
    width: 48px;
    height: 48px;
    font-family: 'ecoico';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 48px;
    line-height: 48px;
    -webkit-font-smoothing: antialiased;
    position: relative;
    color: #fff;
    background: #46a4da;
    border-radius: 50%;
    box-shadow: 0 0 0 8px #afdcf8;
    text-align: center;
    left: 20%;
    top: 0;
    margin: 0 0 0 -25px;
}
.cbp_tmtimeline > li .cbp_tmicon >img {
    border-radius: 50%; 
    position: absolute; 
    top: 0px; 
    left: 0px;
}
/* Example Media Queries */
@media screen and (max-width: 65.375em) {
    .cbp_tmtimeline > li .cbp_tmtime span:last-child {
        font-size: 1.5em;
    }
}
@media screen and (max-width: 47.2em) {
    .cbp_tmtimeline:before {
        display: none;
    }
    .cbp_tmtimeline > li .cbp_tmtime {
        width: 100%;
        position: relative;
        padding: 0 0 20px 0;
    }
    .cbp_tmtimeline > li .cbp_tmtime span {
        text-align: left;
    }
    .cbp_tmtimeline > li .cbp_tmlabel {
        margin: 0 0 30px 0;
        padding: 1em;
        font-weight: 400;
        font-size: 95%;
    }
    .cbp_tmtimeline > li .cbp_tmlabel:after {
        right: auto;
        left: 20px;
        border-right-color: transparent;
        border-bottom-color: #24a0f0;
        top: -20px;
    }
    .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
        border-right-color: transparent;
        border-bottom-color: #7878f0;
    }
    .cbp_tmtimeline > li .cbp_tmicon {
        position: relative;
        float: right;
        left: auto;
        margin: -55px 5px 0 0px;
    }
}
窗外天空
关注公众号『窗外天空』

获取更多建站运营运维新知!
互联网创业、前沿技术......

赞(0) 打赏
文章名称:《WordPress添加碎语说说功能》
文章链接:https://www.nixonli.com/23469.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    你好,请问这个说说页面怎么分页?

    三千世界2年前 (2022-08-06)回复
    • query_posts加上paged=$pagenum及posts_per_page=10(这里是一页显示多少条)
      以下是修改完的代码
      query_posts(“post_type=shuoshuo & post_status=publish & posts_per_page=-1 & paged=$pagenum & posts_per_page=10”)
      使用“next_posts_link”可以获取下一页的内容。

      NixonLi2年前 (2022-08-07)回复

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏