wordpress默认的文章类型是Post,需要增加自己个性的类型吗,如本站的说说,是一个像写心情一样的文章类型,简单记录某时的心情或感受。这个模块好早就弄好了,一直没有时间分享出来,今晚就分享它,让有需要的朋友们可以自己弄一个喜欢的个性类型。
在functions.php最后加入以下代码
首先要创建一个文章类型,这里的代码执行了在后台左侧菜单中创立了一个说说的文章类型入口,包括说说有列表、发表说说等。有几个参数要说明下:
1.menu_position => 9;这个是用来显示说说菜单图标出现的位置。9是在“文章”这个菜单下。
2.menu_icon => home_url( ‘app.png’, __FILE__ );显示在菜单中的图标;
//小闻网(xwenw.com)说说
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' => 9,
'menu_icon' => home_url( 'app.png', __FILE__ ),
'supports' => array('editor','author', 'title','custom-fields','excerpt','comments') );
register_post_type('shuoshuo',$args);
}
创建一个页面:shuoshuo
在主题page文件夹下创建一个页面,用来显示说说的内容,这里用到的图片都是在主题配置中有相关设置的,如果你主题中没有这些设置,直接换成图片的路径就是。
<?php
/*
Template Name: 小闻说说
*/
get_header(); ?>
<style>
/*说样式*/
body {
background: url(<?php echo cs_get_option('i_shuoshuo_bg'); ?>) no-repeat;
background-size: cover;
background-position: center top;
background-attachment: fixed;
}
.ss-title {
background: #8BBF5D;
display: inline-block;
padding: 5px 15px;
color: #fff;
font-weight: normal;
margin: 0;
}
.ss-div {
padding: 0;
overflow: hidden;
border-bottom: 1px solid #8BBF5D;
margin: 20px;
}
.ss-ny {
display: inline-block;
width: calc(100% - 150px);
text-align: right;
padding: 0;
margin: 0;
vertical-align: middle;
}
.ss-ny p {
margin: 0;
color: #fff;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ss-ul{list-style:none;padding:0 20px;position:relative;}
.ss-ul p{margin:0;}
.ss-ul::after {
content: '';
position: absolute;
right: 140px;
top:0;
height: 100%;
width: 50px;
background: url(<?php echo cs_get_option('i_shuoshuo_bd'); ?>) repeat-y center top 0/50px;
}
.ss-li {
background: rgba(255,255,255,.2);
border-radius: 5px;
position: relative;
padding: 20px 0;
margin: 20px 0;
width: calc(100% - 200px);
min-height: 150px;
box-sizing: content-box
}
.ss-li::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
-webkit-filter:blur(20px);
filter: blur(20px);
z-index: -1;
}
.ss-li::after {
content: '';
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 0 25px 25px;
border-color: transparent transparent transparent rgba(255,255,255,.2);
position: absolute;
right: -25px;
top: 40px;
}
.ss-li img {
width: 150px;
float: left;
margin: 0 20px;
height: 150px;
border-radius: 10px;
}
.ss-li:hover .ss-time{background:rgba(0,0,0,.5);}
.ss-li:hover .ss-time:before{border-right-color:rgba(0,0,0,.5);}
.ss-lix::before {
content: "";
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 0 20px 22px;
border-color: transparent transparent transparent #fff;
position: absolute;
left: 730px;
top: 23px;
}
.ss-txt {
font-size: 16px;
line-height: 1.7;
text-indent: 2em;
text-align: justify;
color: #fff;
padding: 0 20px;
position: absolute;
left: 170px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.ss-time {
position: absolute;
right: -180px;
top: 0px;
text-align: center;
color: #fff;
font-size: 14px;
transition: all .3s linear;
padding: 10px;
box-sizing: content-box;
border-radius: 10px;
}
.ss-time::before {
content: "";
position: absolute;
left: -20px;
top: 35px;
border: 10px solid transparent;
border-right-color: inherit;
transition: all .3s linear;
}
.ss-d{
display: block;
font-size: 3em;
font-weight: bold;
text-align: center;
}
.ss-ym{
font-size: 12px;
text-align: center;
}
.ss-like{
position: absolute;
right: 10px;
bottom:10px;
color:#fff;
}
.ss-zz{
position: absolute;
right: 50px;
bottom: 8px;
height: 24px;
line-height: 24px;
color: #fff;
vertical-align: middle;
}
.ss-zz img{
width: 24px;
height: 24px;
border-radius: 50%;
margin-right: 5px;
}
@media(max-width:1023px){
.ss-div{margin:20px 0;}
.ss-title{padding:2px 5px;font-size:16px;}
.ss-ny{width: calc(100% - 80px);}
.ss-ul{padding:0;}
.ss-ul:after{display:none;}
.ss-li{width:100%;min-height:0;}
.ss-li:after{display:none;}
.ss-txt{position:static;padding:0 10px 20px 10px;min-height:95px;-webkit-transform:none;transform:none;}
.ss-time{position:static;border-radius:0;font-size:12px;float:right;margin-left:5px;margin-right:5px;margin-top:-25px;border-top:5px solid #fff;}
.ss-time::before{display:none;}
.ss-h{display:none;}
}
</style>
<main class="container" id="main">
<div class="ss-div">
<h1 class="ss-title"><?php the_title(); ?></h1>
<?php if (have_posts()): ?>
<?php while (have_posts()) : the_post(); ?>
<article class="ss-ny">
<?php the_content(); ?>
</article>
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_type' =>'shuoshuo', //显示哪些类型的文章
'post_status' =>'publish', //显示发布的
'posts_per_page' => cs_get_option('i_shuoshuo_per_page'), //每页显示几条记录,在主题后台设置
'paged' => $paged,
);
query_posts($args);
?>
<?php if (have_posts()) : ?>
<ul class="post-wrap ss-ul"> <!--循环的样式一定要有:post-wrap-->
<?php while (have_posts()) : the_post(); ?>
<li class="ss-li wow slideInUp">
<?php get_template_part('template-parts/post/diy', 'shuoshuo'); ?>
</li>
<?php endwhile; ?>
</ul>
<?php get_template_part('template-parts/pagination'); ?>
<?php endif;?>
</main>
<?php get_footer(); ?>
创建显示说说列表的模板
因本站的说说要用到AJAX加载,所以把显示的内容弄成一个模板,方便动态加载。在template-parts/post中新建一个php,名为:diy-shuoshuo.php
<P class="ss-h" style="overflow:hidden;width:180px;"><img src="<?php echo catchFirstImg(); ?>"></P>
<div class="ss-time"><span class="ss-d"><?php the_time('j'); ?></span><span class="ss-ym"><?php the_time('Y年m月'); ?></span></div>
<P class="ss-txt"><?php echo get_post_excerpt('',250); ?></P>
<a class="ss-zz" href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ) ?>" target="_blank">
<?php echo get_avatar( get_the_author_meta('email'), '' ); ?>
<?php echo get_the_author() ?>
</a>
<a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" class="ss-like favorite<?php if(isset($_COOKIE['bigfa_ding_'.$post->ID])) echo ' done';?>">
<?php if(isset($_COOKIE['bigfa_ding_'.$post->ID])): ?>
<i class="fa fa-thumbs-up"></i>
<?php else: ?>
<i class="fa fa-thumbs-o-up"></i>
<?php endif; ?>
<span class="count">
<?php if(get_post_meta($post->ID,'bigfa_ding',true)): ?>
<?php echo get_post_meta($post->ID,'bigfa_ding',true); ?>
<?php else: ?>
<?php echo '0'; ?>
<?php endif; ?>
</span>
</a>
后台-页面-新建页面
最后在后台页面功能下,新建一个页面,模析就选刚才创建好的“说说”,保存就行。然后添加这个页面到网站的菜单上。要写说说,就像写文章一样,发表说说,CSS样式都在以上代码中了,可根据自己的风格修改。
整体说说显示效果:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(0)