WordPress 说说源码(九哥最开始用的)
首先我们在functions.php文件里面添加以下代码:
[s][p]
- //新建说说功能
- 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' => null,
- 'taxonomies'=> array('category','post_tag'),
- 'supports' => array('editor','author','title', 'custom-fields','comments') );
- register_post_type('shuoshuo',$args);
- }
- //指定说说文章模板
- add_action('template_include', 'load_single_template');
- function load_single_template($template) {
- $new_template = '';
- // single post template
- if( is_single() ) {
- global $post;
- // 'wordpress' is category slugs
- if( has_term('shuo', 'category', $post) ) {
- // use template file single-shuo.php
- $new_template = locate_template(array('single-shuo.php' ));
- }
- }
- return ('' != $new_template) ? $new_template : $template;
- }
[/p]
添加之后后台会出现一个新建说说的功能:
这个新建说说的菜单中间有一个分类目录,这个分类目录和文章的分类目录是共用的一个,但是从这添加的说说分类不会在文章里面显示。就像知更鸟的其他分类文章的分类一样,是独立的。
说说分类是必须是要添加的,别名必须是 shuo,要不然点击说说内容页面的面包屑导航上点击会出现 404 页面。
然后下载下面几个文件并上传到主题根目录。我说一下这几个文件分别是什么作用。
category-shuo.php:这是说说的展示页面。
single-shuo.php:这个是说说内容页面,相当于文章内容页面,为什么要单独的做一个这个页面呢,原因是原来的模板下面都有一个相关文章,说说页面不需要这个所以去掉,单独做一个文件。
tag-shuo.php:这个是标签模板,就是我们这写文章的时候会给文章添加标签,例如说说我添加的是一个“说说”的标签。添加标签以后,如果没有这个文件,点击标签的结果就是 404 页面,加一个这个文件,可以直接跳转到说说主页。特别注意的是把里面的说说网址改成自己的。
里面的代码如下:(网址改成自己的)
- <script language="javascript">
- document.location= "http://www.99bsy.com/shuoshuo.html";
- </script>
然后去后台页面新建页面标题任意固定链接填上 shuo 然后右边的模板选择,说说分类,保存即可。
最后在style.css文件里添加以下代码:
CSS 来自流年哔哔,代码不完整,请大家自行完善。
[s][p]
- /*说样式*/
- .shuoshuo {
- position: relative;
- padding: 20px;
- background-color: #fff;
- border:1px #DDDDDD solid;
- margin-bottom: 10px;
- }
- .shuoshuo li {
- padding:0 0 8px 0;
- display: block;
- }
- .shuoshuo-content {
- background-color: #FDFDFD;
- border: 1px #F1F1F1 solid;
- border-radius: 4px;
- font-size: 1.1em;
- line-height:1.5em;
- margin:0 0px 0 70px;
- letter-spacing: 1px;
- padding: 20px 20px 5px 20px;
- color: #666;
- min-height:60px;
- position: relative;
- white-space: pre; /* CSS 2.0 */
- white-space: pre-wrap; /* CSS 2.1 */
- white-space: pre-line; /* CSS 3.0 */
- white-space: -pre-wrap; /* Opera 4-6 */
- white-space: -o-pre-wrap; /* Opera 7 */
- white-space: -moz-pre-wrap; /* Mozilla */
- white-space: -hp-pre-wrap; /* HP Printers */
- word-wrap: break-word; /* IE 5+, 文本行的任意字内断开 */
- }
- .shuoshuo-content p{margin:0;}
- .shuoshuo-content img { max-width:100%;
- height: auto;
- vertical-align: middle;
- display: block;
- }
- /*作者*/
- .shuoshuo-meta {
- text-align: right;
- letter-spacing: 0px;
- margin-top:-10px;
- border-top: 1px solid #eaeaea;
- padding-top: 5px;
- font-size: 0.8em;
- }
- /*时间*/
- .shuoshuo .tt{float:left;}
- .shuoshuo li em{float:left;background:url("背景图片地址") no-repeat;width:50px;height:10px;margin:28px 0 0 0px;}
- /*头像*/
- .shuoshuo .zhutou{margin:10px 0 0 0;float:left;padding: 2px;border: 1px #ddd solid;display: block;transition: .5s;width: 40px;height: 40px;overflow:hidden;}
- .shuoshuo li:hover .zhutou { border-radius: 50%;
- transform: rotate(720deg);-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);border-color:#5990de;}
- @media screen and (max-width: 800px) {
- .shuoshuo-content {margin:0 0 0 60px;padding: 10px 10px 5px 10px;font-size:0.9em;}
- .shuoshuo .tt{font-size:1em;height: 20px;}
- .shuoshuo:before {left: 50px;}
- .shuoshuo-content:before {left: -26px;top:30px;}
- .shuoshuo-content:after {left: -24px;top:32px;}
- .shuoshuo-meta{font-size:0.9em;}
- .shuoshuo:after {right: 27px;}
- .shuoshuo-meta:before {right: -39px;top:33px;}
- .shuoshuo-meta:after {right: -37px;top:35px;}
- .shuoshuo .zhutou{margin: 10px 0 0 0;}
- .shuoshuo li em{float:left;width:39px;height:10px;margin:28px 0 0 -1px;}
- .shuoshuo li em{display:none}
- }
- @media screen and (max-width: 480px) {
- .shuoshuo-meta{font-size:0.9em;}
- .shuoshuo .zhutou{display:none}
- .shuoshuo li em{display:none}
- .shuoshuo-content{margin: 0 0 0 0;}
- }
[/p]
头像:请打开category-shuo.php这个文件搜索头像,然后把头像地址改成自己的就可以了。
- <img src="头像图片地址" class="zhutou" alt="作者头像">
然后所有的工作都已经完成了,你在后台发布说说,标题任意,内容写上你的说说即可展示在说说页面了。
九哥旧版说说页:http://www.99bsy.com/shuoshuo.html
注:原作者只是提供了基础代码,九哥使用了一段时间,现已更换其他样式。
源码下载:[reply]QQ 资源下载群:413022321(加群请注明:下载说说源码)[/reply]
相关推荐:
[bsy_insert_post ids=2202]
屎克郎
就看个源码那么难吗? 😐
小A
好了,我发表了评论刷新也不出来源码下载地址,唉。
九哥@小A
审核通过才会显示。
小A
试试看,进阶版不知道为什么在添加页面时模板选项出不来,试试看老版可以实现不。
鸽鸽鸽十分钟后一定到
在使用进阶版的css的时候没起作用,谢谢。
九哥@鸽鸽鸽十分钟后一定到
源码需要自己调试的,不是现成的。
星光
又更新了!看下最新版什么样子
九哥@星光
更新好久了啊!
桃子皮
这个样式和目前的一样吗???
九哥@桃子皮
基本相同,CSS源码不完善,可DIY。
钻芒
顶博主,试一下..
在放荡的孤独中闪光
那个 个性版 的有没有代码啊?
九哥@在放荡的孤独中闪光
个性版也是样式不同而已,基础代码都是一样的。
一为
看下有没有分页 😀
九哥@一为
我博客有分享分页的文章,你搜索下。
一为@九哥
嗯嗯 还有标签模板不知道怎么弄, 👿 ,秋秋通过下