关闭边栏(ESC)打开边栏(ESC)
wordpress默认的文章类型是Post，需要增加自己个性的类型吗，如本站的说说，是一个像写心情一样的文章类型，简单记录某时的心情或感受。这个模块好早就弄好了，一直没有时间分享出来，今晚就分享它，让有需要的朋友们可以自己弄一个喜欢的个性类型。
在functions.php最后加入以下代码
首先要创建一个文章类型，这里的代码执行了在后台左侧菜单中创立了一个说说的文章类型入口，包括说说有列表、发表说说等。有几个参数要说明下：
1.menu_position => 9;这个是用来显示说说菜单图标出现的位置。9是在“文章”这个菜单下。
2.menu_icon => home_url( ‘app.png’, __FILE__ );显示在菜单中的图标；
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
//说说 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文件夹下创建一个页面，用来显示说说的内容，这里用到的图片都是在主题配置中有相关设置的，如果你主题中没有这些设置，直接换成图片的路径就是。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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样式都在以上代码中了，可根据自己的风格修改。
整体说说显示效果：
后台说说菜单：
