• 欢迎访问奇跡の海网站,本站不上传任何资源,所有资源均来自于网络,欢迎加入奇跡の海~! QQ群
  • 本站下载资源为网络上收集整理而来,并且以计算机技术研究交流为目的,版权归原作者所有,仅供大家参考,学习,不存在任何商业目的与商业用途.
  • 本站系统镜像均来自于官方原版,ed2k可视为P2P下载链接。所有操作系统默认均为试用版,如有正版密钥可以有效激活,本站不提供任何激活和相关服务。

wordpress添加微语,碎语,说说功能,附说说插件

WP插件 奇跡の海 1年前 (2017-07-15) 338次浏览 已收录 0个评论 扫描二维码

纯代码添加 wordpress 说说功能

那么下面就开始然我们进入正题,教程比较长,不过很清楚,相信大家都能看懂,而且非常的美观,所以操作的话稍微复杂一点,首先来上个截图:wordpress 添加微语,碎语,说说功能,附说说插件

大概就是这么一个功能界面,无作为会在加一点效果,比如头像旋转什么的,额额本站还没有开启头像功能好像,

第一步

首先在主题的 functions.php 里面加入以下代码

//说说
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,
‘supports’ => array(‘editor’,’author’,’title’, ‘custom-fields’) );
register_post_type(‘shuoshuo’,$args);
}

操作到这里,此时后台就会有说说菜单出现了。

第二步

之后创建一个 php 文件,把以下内容复制进去:(这里要根据自己的网站模板来改,最好是拿主题目录下的 page.php 文件更改,以做到更好的融合主题,因为部分主题有自己的格式,到时候兼容性可能有些问题,大家自己多试试就知道了,核心代码已经用红色标出了)。

<?php /* Template Name: 说说 author: 无作为 url: http://www.wuzuowei.net/6344.html */ get_header(); ?>
<section id=”container”>
<div class=”row”>
<?php the_post(); ?>
<article id=”post-box” itemscope itemtype=”http://schema.org/Article” <?php post_class( ‘span12’ ); ?>>
<div class=”panel”>
<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><img src=”http://www.huyangjia.com/touxiang.jpg” class=”zhutou” alt=”作者头像”><span class=”tt”><?php the_time(‘Y 年 n 月 j 日 G:H’); ?></span><em></em>
<div class=”shuoshuo-content”>
<?php the_content(); ?>
<div class=”shuoshuo-meta”><span>— <?php the_author() ?></span></div>
</div>
<?php endwhile;endif; ?></li>
</ul>
</div>
 </div>
</article>
<?php if( !post_password_required() && ( comments_open() || get_comments_number() > 0 ) ) comments_template( ”, true ); ?>
</div>
</section>
<?php get_footer(); ?>

保存该文档,命名为 shuoshuo.php,将其放于主题目录下,这里命名也可以是其他的,大家自己记得就好。

接下来就是进入 wordpress 后台新建页面,例如:标题写“我的说说”,模版选择“说说”,发布,大功告成,之后可通过后台发表说说了。以上不提供样式,请各位自行设置样式,充分发挥自己的想象力。

算了,这里不给出 css 肯定要拦住一波人的节奏,无作为自己的,大家可以改改颜色什么的,

css 代码

里面的图片,大家自己用自己的吧,这里无作为就留空了

/*说样式*/
.shuoshuo {
position: relative;
padding: 10px 0;
}
.shuoshuo li {
padding: 8px 0;
display: block;
}
.shuoshuo-content {
box-shadow: 0 0 3px RGBA(0,0,0,.15);
background-color: #f2f2f2;
border:1px #ccc solid;
border-radius: 4px;
font-size: 1.2em;
line-height:1.5em;
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:-10px;
}
/*时间*/
.shuoshuo .tt{margin: 35px 0 0 15px;float:left;font-size:0.7em;}
.shuoshuo li em{float:left;background:url(“http://图片填这里.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;
heigh
t: 8px;
width: 8px;
border-r
adius: 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 (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: 20px 8px 0 5px;}
.shuoshuo li em{float:left;width:39px;height:10px;margin:34px 0 0 -1px;}
}

下载列表:

百度网盘官方下载(推荐)


版权声明:本站所有文章和资源使用BY-NC-SA协议授权发布 , 转载应当以相同方式注明文章来自“SeaOMC.COM->wordpress 添加微语,碎语,说说功能,附说说插件!在下边可以分享本文哦!
本文最后更新于2018年3月14日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
喜欢 (0)
[]
分享 (0)
奇跡の海
关于作者:
一个WordPress菜鸟!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址