前言
首先
我们需要使用 WordPress 的 register_post_type( )
函数注册一个新的帖子类型,以方便日后编辑说说。将以下代码直接丢到主题的 functions.php
文件中去即可。
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 | 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' => null, 'supports' => array('title','editor','author') ); register_post_type('shuoshuo',$args); } |
关于 register_post_type( )
函数的使用,你可以查阅这篇文章:https://developer.wordpress.org/reference/functions/register_post_type/
添加说说/心情页面模板
添加完上述函数后,我们就可以在后台发现一个“说说”的菜单,通过菜单即可编辑说说,但是我们发现编辑完成后的说说并不能在前端显示出来,这是我们需要新建一个说说的页面模板控制其前端显示,将以下代码复制并另存为 page_shuoshuo.php
,并上传至主题根目录下。
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 | <?php /* Template Name: 说说/心情 author: _犬's url: https://mlldxe.cn/archives/224 */ get_header(); ?> <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="http://blog.mlldxe.cn/beijing.jpg" class="avatar avatar-48" width="48" height="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> </div> <?php get_sidebar(); ?> </section> <?php get_footer();?> |
代码中所用 WordPress 函数官方文档如下:
have_posts(); :https://developer.wordpress.org/reference/functions/have_posts/
query_posts(); :https://developer.wordpress.org/reference/functions/query_posts/
the_post(); :https://developer.wordpress.org/reference/functions/the_post/
the_time(); :https://developer.wordpress.org/reference/functions/the_time/
the_content(); :https://developer.wordpress.org/reference/functions/the_content/
the_title(); :https://developer.wordpress.org/reference/functions/the_title/
get_bloginfo(); :https://developer.wordpress.org/reference/functions/get_bloginfo/
CSS样式
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 | /** 垂直时间线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; } } |
代码部署完成后前往后台新建一个页面,页面模板选择“说说/心情”即可。
博主,最后一个CSS样式是放哪里的?我看到二次开发的那个首页就有类似说说的,怎么做到的
自己改地址
他的我也不知道,待偷
href=
我把你functions的代码放到里面了,结果后台没出现说说页面,怎么回事
认真阅读文字
???
上梯子搞事情?
dalao,你看看,我那个地方弄错了,网址这边,http://blog.wy521.xyz/index.php/shuoshuo.html/
这个你看看http://blog.wy521.xyz/index.php/shuoshuo.html/
老哥 你这个是怎么弄得哇 弄了没效果啊
老哥你这个是怎么弄的啊 按照你的代码弄了 没法用啊
什么没法用