WordPress添加自定义文章类型

2019-12-04 资源客 CMS教程 已售:次 关注289次 已收录

WordPress添加自定义文章类型

作者 : 资源客 发布时间： 2019-12-4

wordpress 默认的文章类型是 Post，需要增加自己个性的类型吗，如本站的说说，是一个像写心情一样的文章类型，简单记录某时的心情或感受。这个模块好早就弄好了，一直没有时间分享出来，今晚就分享它，让有需要的朋友们可以自己弄一个喜欢的个性类型。
在 functions.php 最后加入以下代码，首先要创建一个文章类型，这里的代码执行了在后台左侧菜单中创立了一个说说的文章类型入口，包括说说有列表、发表说说等。有几个参数要说明下：

1.menu_position => 9;这个是用来显示说说菜单图标出现的位置。9 是在“文章”这个菜单下。

2.menu_icon => home_url( ‘app.png’, __FILE__ );显示在菜单中的图标；

//说说
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 样式都在以上代码中了，可根据自己的风格修改。
整体说说显示效果：

后台说说菜单：

http://xzh.i3geek.com
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请不要用于商业用途及非法用途，否则后果自负！
3. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"qq301.com",如遇到无法解压的请联系管理员！
资源客是一个优秀的分享资源站，本站资源均为各位友友分享而来，特殊原创会标明如有侵犯版权等可联系删除

资源客 » WordPress添加自定义文章类型
分享到：
  • 1511本站运营(天)
  • 9360用户总数
  • 3060资源数(个)
  • 0近7天更新(个)
  • 1000资源大小(GB)
立即查看