1. David Wu首页
  2. WordPress
  3. WordPress安装教程

WordPress添加自定义文章类型

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

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

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

  1. //说说
  2. add_action('init', 'my_custom_init');
  3. function my_custom_init(){
  4. $labels = array( 'name' => '说说',
  5. 'singular_name' => '说说',
  6. 'add_new' => '发表说说',
  7. 'add_new_item' => '发表说说',
  8. 'edit_item' => '编辑说说',
  9. 'new_item' => '新说说',
  10. 'view_item' => '查看说说',
  11. 'search_items' => '搜索说说',
  12. 'not_found' => '暂无说说',
  13. 'not_found_in_trash' => '没有已遗弃的说说',
  14. 'parent_item_colon' =>'',
  15. 'menu_name' => '说说' );
  16. $args = array( 'labels' => $labels,
  17. 'public' => true,
  18. 'publicly_queryable' => true,
  19. 'show_ui' => true,
  20. 'show_in_menu' => true,
  21. 'exclude_from_search' =>true,
  22. 'query_var' => true,
  23. 'rewrite' => true,
  24. 'capability_type' => 'post',
  25. 'has_archive' => false,
  26. 'hierarchical' => false,
  27. 'menu_position' => 9,
  28. 'menu_icon' => home_url( 'app.png', __FILE__ ),
  29. 'supports' => array('editor','author', 'title','custom-fields','excerpt','comments') );
  30. register_post_type('shuoshuo',$args);
  31. }

创建一个页面:shuoshuo 在主题 page 文件夹下创建一个页面,用来显示说说的内容,这里用到的图片都是在主题配置中有相关设置的,如果你主题中没有这些设置,直接换成图片的路径就是。

  1. <?php
  2. /* 
  3. Template Name: 说说 
  4.  */
  5. get_header(); ?>
  6. <style>
  7.     /*说样式*/
  8. body {
  9. 	background: url(<?php echo cs_get_option('i_shuoshuo_bg'); ?>) no-repeat;
  10. 	background-size: cover;
  11. 	background-position: center top;
  12. 	background-attachment: fixed;
  13. }
  14. .ss-title {
  15. 	background: #8BBF5D;
  16. 	display: inline-block;
  17. 	padding: 5px 15px;
  18. 	color: #fff;
  19. 	font-weight: normal;
  20. 	margin: 0;
  21. }
  22. .ss-div {
  23. 	padding: 0;
  24. 	overflow: hidden;
  25. 	border-bottom: 1px solid #8BBF5D;
  26. 	margin: 20px;
  27. }
  28. .ss-ny {
  29. 	display: inline-block;
  30. 	width: calc(100% - 150px);
  31. 	text-align: right;
  32. 	padding: 0;
  33. 	margin: 0;
  34. 	vertical-align: middle;
  35. }
  36. .ss-ny p {
  37. 	margin: 0;
  38. 	color: #fff;
  39. 	font-size: 14px;
  40. 	overflow: hidden;
  41. 	white-space: nowrap;
  42. 	text-overflow: ellipsis;
  43. }
  44. .ss-ul{list-style:none;padding:0 20px;position:relative;}
  45. .ss-ul p{margin:0;}
  46. .ss-ul::after {
  47. 	content: '';
  48. 	position: absolute;
  49. 	right: 140px;
  50. 	top:0;
  51. 	height: 100%;
  52. 	width: 50px;
  53. 	background: url(<?php echo cs_get_option('i_shuoshuo_bd'); ?>) repeat-y center top 0/50px;
  54. }
  55. .ss-li {
  56. 	background: rgba(255,255,255,.2);
  57. 	border-radius: 5px;
  58. 	position: relative;
  59. 	padding: 20px 0;
  60. 	margin: 20px 0;
  61. 	width: calc(100% - 200px);
  62. 	min-height: 150px;
  63. 	box-sizing: content-box
  64. }
  65. .ss-li::before {
  66. 	content: '';
  67. 	width: 100%;
  68. 	height: 100%;
  69. 	position: absolute;
  70. 	left: 0;
  71. 	top: 0;
  72. 	-webkit-filter:blur(20px);
  73. 	filter: blur(20px);
  74. 	z-index: -1;
  75. }
  76. .ss-li::after {
  77. 	content: '';
  78. 	width: 0px;
  79. 	height: 0px;
  80. 	border-style: solid;
  81. 	border-width: 0px 0 25px 25px;
  82. 	border-color: transparent transparent transparent rgba(255,255,255,.2);
  83. 	position: absolute;
  84. 	right: -25px;
  85. 	top: 40px;
  86. }
  87. .ss-li img {
  88. 	width: 150px;
  89. 	float: left;
  90. 	margin: 0 20px;
  91. 	height: 150px;
  92. 	border-radius: 10px;
  93. }
  94. .ss-li:hover .ss-time{background:rgba(0,0,0,.5);}
  95. .ss-li:hover .ss-time:before{border-right-color:rgba(0,0,0,.5);}
  96. .ss-lix::before {
  97. 	content: "";
  98. 	width: 0px;
  99. 	height: 0px;
  100. 	border-style: solid;
  101. 	border-width: 0px 0 20px 22px;
  102. 	border-color: transparent transparent transparent #fff;
  103. 	position: absolute;
  104. 	left: 730px;
  105. 	top: 23px;
  106. }
  107. .ss-txt {
  108. 	font-size: 16px;
  109. 	line-height: 1.7;
  110. 	text-indent: 2em;
  111. 	text-align: justify;
  112. 	color: #fff;
  113. 	padding: 0 20px;
  114. 	position: absolute;
  115. 	left: 170px;
  116. 	top: 50%;
  117. 	-webkit-transform: translateY(-50%);
  118. 	transform: translateY(-50%);
  119. }
  120. .ss-time {
  121. 	position: absolute;
  122. 	right: -180px;
  123. 	top: 0px;
  124. 	text-align: center;
  125. 	color: #fff;
  126. 	font-size: 14px;
  127. 	transition: all .3s linear;
  128. 	padding: 10px;
  129. 	box-sizing: content-box;
  130. 	border-radius: 10px;
  131. }
  132. .ss-time::before {
  133. 	content: "";
  134. 	position: absolute;
  135. 	left: -20px;
  136. 	top: 35px;
  137. 	border: 10px solid transparent;
  138. 	border-right-color: inherit;
  139. 	transition: all .3s linear;
  140. }
  141. .ss-d{
  142. 	display: block;
  143. 	font-size: 3em;
  144. 	font-weight: bold;
  145. 	text-align: center;
  146. }
  147. .ss-ym{
  148. 	font-size: 12px;
  149. 	text-align: center;
  150. }
  151. .ss-like{
  152.     position: absolute;
  153.     right: 10px;
  154.     bottom:10px;
  155.     color:#fff;
  156. }
  157. .ss-zz{
  158. 	position: absolute;
  159. 	right: 50px;
  160. 	bottom: 8px;
  161. 	height: 24px;
  162. 	line-height: 24px;
  163. 	color: #fff;
  164. 	vertical-align: middle;
  165. }
  166. .ss-zz img{
  167.     width: 24px;
  168.     height: 24px;
  169.     border-radius: 50%;
  170.     margin-right: 5px;
  171. }
  172. @media(max-width:1023px){
  173.     .ss-div{margin:20px 0;}
  174.     .ss-title{padding:2px 5px;font-size:16px;}
  175.     .ss-ny{width: calc(100% - 80px);}
  176.     .ss-ul{padding:0;}
  177.     .ss-ul:after{display:none;}
  178.     .ss-li{width:100%;min-height:0;}
  179.     .ss-li:after{display:none;}
  180.     .ss-txt{position:static;padding:0 10px 20px 10px;min-height:95px;-webkit-transform:none;transform:none;}
  181.     .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;}
  182.     .ss-time::before{display:none;}
  183.     .ss-h{display:none;}
  184. }
  185. </style>
  186. <main class="container" id="main">
  187. 	<div class="ss-div">
  188. 	    <h1 class="ss-title"><?php the_title(); ?></h1>
  189. 		<?php if (have_posts()): ?>
  190. 			<?php while (have_posts()) : the_post(); ?>
  191. 				<article class="ss-ny">
  192. 					<?php the_content(); ?>
  193. 				</article>
  194. 			<?php endwhile;  ?>
  195. 		<?php endif; ?>
  196. 	</div>
  197.     <?php
  198.      $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
  199. 						$args = array(
  200. 						    'post_type' =>'shuoshuo',                               //显示哪些类型的文章
  201. 						    'post_status' =>'publish',                              //显示发布的
  202. 							'posts_per_page' => cs_get_option('i_shuoshuo_per_page'),  //每页显示几条记录,在主题后台设置
  203. 							'paged' => $paged,
  204. 						);
  205. 						query_posts($args);
  206.     ?>
  207.     <?php if (have_posts()) : ?>
  208.         <ul class="post-wrap ss-ul">               <!--循环的样式一定要有:post-wrap-->
  209.             <?php while (have_posts()) : the_post(); ?>
  210.                 <li class="ss-li wow slideInUp">
  211.                      <?php get_template_part('template-parts/post/diy', 'shuoshuo'); ?>
  212.                 </li>
  213.             <?php endwhile; ?>
  214.         </ul>
  215.     <?php get_template_part('template-parts/pagination'); ?>
  216.     <?php endif;?>
  217. </main>
  218. <?php get_footer(); ?>

创建显示说说列表的模板,因本站的说说要用到 AJAX 加载,所以把显示的内容弄成一个模板,方便动态加载。在 template-parts/post 中新建一个 php,名为:diy-shuoshuo.php

  1. <P class="ss-h" style="overflow:hidden;width:180px;"><img src="<?php echo catchFirstImg(); ?>"></P>
  2.             <div class="ss-time"><span class="ss-d"><?php the_time('j'); ?></span><span class="ss-ym"><?php the_time('Y年m月'); ?></span></div>
  3.             <P class="ss-txt"><?php echo get_post_excerpt('',250); ?></P>
  4.             <a class="ss-zz" href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ) ?>" target="_blank">
  5. 					<?php echo get_avatar( get_the_author_meta('email'), '' ); ?>
  6. 					<?php echo get_the_author() ?>
  7. 				</a>
  8.             <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';?>">
  9.                                     <?php if(isset($_COOKIE['bigfa_ding_'.$post->ID])): ?>
  10.                                         <i class="fa fa-thumbs-up"></i>
  11.                                     <?php else: ?>
  12.                                         <i class="fa fa-thumbs-o-up"></i>
  13.                                     <?php endif; ?>
  14.                                     <span class="count">
  15. 									<?php if(get_post_meta($post->ID,'bigfa_ding',true)): ?>
  16.                                         <?php echo get_post_meta($post->ID,'bigfa_ding',true); ?>
  17.                                     <?php else: ?>
  18.                                         <?php echo '0'; ?>
  19.                                     <?php endif; ?>
  20. 								</span>
  21.                                 </a>

后台-页面-新建页面,最后在后台页面功能下,新建一个页面,模析就选刚才创建好的“说说”,保存就行。然后添加这个页面到网站的菜单上。要写说说,就像写文章一样,发表说说,CSS 样式都在以上代码中了,可根据自己的风格修改。
整体说说显示效果:
WordPress添加自定义文章类型-云模板后台说说菜单:
WordPress添加自定义文章类型-云模板

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/98834

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注