WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 教程 › 制作聊天(chat)短代码

制作聊天(chat)短代码

PCDotFan10年前

 

制作聊天(chat)短代码-WP酷

上面的效果被作者称为chat,用于在文章中加入类似于两人聊天的效果。话不多说,上代码:

 

效果

制作聊天(chat)短代码-WP酷

 

使用方法

1、在function.php中加入以下代码:

function chatCode( $atts, $content = null ) {
extract( shortcode_atts( array(
'chatter' => '敖天羽',
'avatar' => 'sky',
'chatbg' => 'blue',
), $atts ) );

return '<div class="chatbox cf"><div class="'.$avatar.' '.$chatbg.' chat_avatar"></div><section class="chat_content '.$position.' '.$chatbg.'"><span><strong>'.$chatter.': </strong>'.$content.'</span></section></div>';
}
add_shortcode( 'chat', 'chatCode' );

其中chatter名字自行修改,chatbg和avatar之类的与以下的css相对应

 

2、在style.css中加入以下代码

/* Chat Format */
.chatbox{margin:15px 100px;padding:8px 10px 15px 10px;background:#f2f2f2;border:3px solid #DDD;border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;}
.chatbox br{display:none;}
.sky{background:url(http://zhpech.b0.upaiyun.com/css/sky.jpg)  center no-repeat;}
.JLT{background:url(http://zhpech.b0.upaiyun.com/css/JLT.jpg)  center no-repeat;}
.chat_avatar{box-shadow:0px 1px 1px rgba(255, 255, 255, 0.75);position: relative;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius:3px;background-color:#fff;width: 50px;height: 50px;}
.chat_avatar img{margin:0px !important;padding:0px !important;display:block;box-shadow:0 1px 5px rgba(0, 0, 0, 0.22);-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;width:50px;height:50px;}
.chat_content{margin:-60px 0 0 85px;background:#ffffff}
.chatbox .blue{position:relative;color:#555;max-width:400px;padding:6px 10px;word-wrap:break-word;border:1px solid;border-color:#DDD #DDD #EEE #DDD;border-radius: 6px;-moz-box-shadow:0px 1px 1px #bbb;-webkit-box-shadow:0px 1px 1px #bbb;box-shadow:0px 1px 1px #bbb;}
.chatbox .blue p{font-size:13px;line-height:150%;}

将以上代码中的两个url更换为自己喜欢的图片地址:

http://zhpech.b0.upaiyun.com/css/sky.jpg
http://zhpech.b0.upaiyun.com/css/JLT.jpg

 

添加完成后在文章中使用:

格式一:[chat]输入内容[/chat]
格式二:[chat chatter="sky" avatar="sky" chatbg="blue"] 输入内容 [/chat]

 

#chat#短代码
0
分享

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题,请至 WP酷的百度网盘(提取码: 5rbm) 自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • [6.0 更新中文汉化]极度流行的SEO插件 – WordPress SEO by Yoast
  • WordPress 新用户注册邮件链接提示「您的密码重设链接无效」
  • AMP – 为 WordPress 移动站点操作全球访问优化
  • 去除谷歌服务 – WordPress 国外主题全方位加速
  • 使用 WP-CLI 简化 WordPress 操作流程
  • WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
  • 优化静态资源 – WordPress 国外主题全方位加速
  • WordPress 实现微信登录
评论 (7)
再想想
  • 敖天羽

    你们家幻灯呢

    10年前
    • WP酷

      @敖天羽 。。啊哈幻灯不见了?

      10年前
    • 敖天羽

      @WP酷 可能是加载慢吧……

      10年前
    • WP酷

      @敖天羽 。。。我这边秒开,不带缓存。。

      10年前
    • 敖天羽

      @WP酷 =0=我这里不知道为什么加载还是有点压力的 不过好冷清<(=→_→=)>

      10年前
    • WP酷

      @敖天羽 ~~~啦啦我想等到文章满100篇再互访的,不然就这么点东西拿不出手啊

      10年前
    • 敖天羽

      @WP酷 =0=

      10年前
PCDotFan
站长
若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
435文章
859评论
3K获赞
猜你喜欢
制作酷炫的CSS3读者墙
10年前
WordPress 修改后台字体为雅黑
9年前
Typecho转WordPress步骤详解
10年前
  • 杂记
  • WordPress 付费主题推荐
Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1