wordpress添加说说功能,转载,自用,有效

2020/01 01 21:01

很多wp友在建站到说说时,就停止不前了,说说不是系统自带的,并不像留言那么简单,在后台设置设置就搞定它。今天就是教糖友们如何用wordpress搭建一个属于自己的说说页面,会者不难,难者不会,下边请看讲解。

首先要实现这个说说功能,要拿3个文件开刀,分别是:functions.php,shuoshuo.php,shuoshuo.css,下边一一来搞定它们,functions.php是wordpress自带的程序文件,只须一个小改动,即在文件内容的最后加入以下代码。

//说说 add_action('init', 'my_custom_init'); function my_custom_init() { $labels = array( 'name' => '说说', 'singular_name' => 'singularname', '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); }

接着是shuoshuo.php文件,它不是自带的,需要建一个名字为shuoshuo.php文件,里边填充如下内容。

 <?php /*Template Name: 说说author: ainyurl: http://www.tang1314.com/shuoshuo*/get_header(); ?><link href="/wp-content/themes/Cui2.0/shuoshuo.css" rel="stylesheet"><div class="shuoshuo"> <ul class="archives-monthlisting"> <?php query_posts("post_type=shuoshuo&post_status=publish&posts_per_page=-1");if (have_posts()) : while (have_posts()) : the_post(); ?> <li><span class="tt"><?php the_time('Y年n月j日G:i'); ?></span> <div class="shuoshuo-content"><?php the_title(); ?><br/><div class="shuoshuo-meta"><span >—<?php the_author() ?></span></div></div><?php endwhile;endif; ?></li> </ul></div><?php get_footer();?>

最后修改shuoshuo.css文件,它也不是系统自带的,需要我们建立一个shuoshuo.css文件,填充以下内容。

 .shuoshuo {position: relative;margin: 50px 0;}.shuoshuo li {padding: 8px 0;display: block;}.shuoshuo-content {box-shadow: 0 0 3px RGBA(0,0,0,.15);background-color: #f8f8f8;border:1px #eee solid;border-radius: 4px;font-size: 1em;line-height:2.3em;margin:0 150px 0 200px;letter-spacing: 1px;padding: 20px 20px 5px 30px;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-meta {text-align: right;letter-spacing: 0px;margin-top:-85px;}.toolbar{display:none}/*鏃堕棿*//*.shuoshuo .tt{margin: 35px 0 0 15px;float:left;font-size:0.9em;}*//*.shuoshuo li em{float:left;background:url("//www.100day.cc/wp-content/themes/frontopen2_v1.5.04.15/images/bolangxian.png") no-repeat;width:50px;height:10px;margin:42px 0 0 28px;}*//*.shuoshuo li:hover .tt {color:#0c0;font-weight:bold;} *//*澶村儚*/.shuoshuo .zhutou{border-radius: 50%;margin: 25px 35px 0 5px;float:right;padding: 2px;border: 1px #ddd solid;display: block;transition: .5s;width: 40px;height: 40px;overflow:hidden;}.shuoshuo li:hover .zhutou {transform: rotate(720deg);-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);border-color: #0c0;}/*鍓嶉潰鐨勮酱*/.shuoshuo:before {height: 100%;width: 2px;background: #eee;position: absolute;left: 164px;content: "";top:0px;}.shuoshuo-content:before {position: absolute;top: 40px;bottom: 0px;left: -42px;background: #fff;height: 12px;width: 12px;border-radius: 6px;content: "";box-shadow: inset 0 0 2px #0c0;}.shuoshuo-content:after {position: absolute;top: 42px;bottom: 0px;left: -40px;background: #ccc;height: 8px;width: 8px;border-radius: 6px;content: "";}.shuoshuo li:hover .shuoshuo-content:after {background: #0c0;-webkit-transform: scale(1.3);-moz-transform: scale(1.3);-ms-transform: scale(1.3);-o-transform: scale(1.3);}.shuoshuo li:hover .shuoshuo-content:before {-webkit-transform: scale(1.3);-moz-transform: scale(1.3);-ms-transform: scale(1.3);-o-transform: scale(1.3);}/*鍚庨潰鐨勮酱*/.shuoshuo:after {height: 100%;width: 2px;background: #eee;position: absolute;right: 100px;content: "";top:0px;}.shuoshuo-meta:before {position: absolute;top: 42px;bottom: 0px;right: -56px;background: #fff;height: 12px;width: 12px;border-radius: 6px;content: "";z-index:2;box-shadow: inset 0 0 2px #0c0;}.shuoshuo-meta:after {position: absolute;top: 44px;bottom: 0px;right: -54px;background: #ccc;height: 8px;width: 8px;z-index:2;border-radius: 6px;content: "";}.shuoshuo li:hover .shuoshuo-meta:after {background: #0c0;}@media screen and (min-width:1080px){.shuoshuo{width:1060px;margin:50px auto}}@media screen and (max-width: 800px) { .shuoshuo-content {margin:0 60px 0 70px;padding: 10px 10px 5px 10px;font-size:0.9em;}.shuoshuo .tt{width:30px;font-weight:bold;margin: 30px 0 0 1px;font-size:0.5em;height: 20px;}.shuoshuo li:hover .tt {color:#0c0;font-size:0.5em;}.shuoshuo:before {left: 50px;}.shuoshuo-content:before {left: -26px;top:30px;}.shuoshuo-content:after {left: -24px;top:32px;} .shuoshuo:after {right: 27px;}.shuoshuo-meta:before {right: -39px;top:33px;}.shuoshuo-meta:after {right: -37px;top:35px;} .shuoshuo .zhutou{margin: 17px 5px 0 5px;}.shuoshuo li em{float:left;width:39px;height:10px;margin:34px 0 0 -1px;}}

好了,把这三个文件上传到主题的目录下边,去后台,添加一个页面,起名叫“我的说说”,页面模板选择“说说”。发布即可大功告成。拥有一个像这样的说说

 http://www.tang1314.com/shuoshuo.html

发挥自己的想象力,编辑css,使你的说说页面变得更加不可思议吧。

原文: http://www.tang1314.com/website/317.html

发表回复

欢迎回来 (打开)