🔥志一 E享乐
关注数: 8 粉丝数: 34 发帖数: 723 关注贴吧数: 49
利用SM.MS图床为WordPress评论添加AJAX图片上传 很久没发贴了,贴吧更名活动改了名 之前1年多没玩博客(贴吧还是有逛的)不久前又开了新博 ZZ’Sky 继续入坑WordPress 进入正题,若要在WordPress的评论中添加图片大部分只能添加现成的图片URL地址,如果开放博客的上传接口又会有被利用的风险,对于资源有限的虚拟主机更是伤不起。既然本地资源有限,那我们可以找个靠山来实现图片的功能。SM.MS图床提供的API十分便利,有香港阿里云节点访问速度快,可以作为评论图片的图床使用。先看看效果开始贴代码 贴吧贴代码缩进全乱 PHP代码 /** * Name:利用图床添加AJAX评论图片上传功能 * Author:E丶白 */ function zsky_upload_img() { echo '<div class="zz-add-img"><input id="zz-img-file" type="file" accept="image/*"><div id="zz-img-add">上传图片</div><div id="zz-img-show"></div></div>'; } add_filter('comment_form_after', 'zsky_upload_img'); function lxtx_embed_images($content) { $content = preg_replace('/\[img=?\]*(.*?)(\[\/img)?\]/e', '"<img src=\"$1\" alt=\"" . basename("$1") . "\" />"', $content); return $content; } add_filter('comment_text', 'lxtx_embed_images'); jquery代码 确保主题已引入jquery库 $('#zz-img-file').change(function() { var f=this.files[0]; var formData=new FormData(); formData.append('smfile',f); $.ajax({ url:'http://tieba.baidu.com/mo/q/checkurl?url=https%3A%2F%2Fsm.ms%2Fapi%2Fupload&urlrefer=a6fd98f6c314b2a4d0b7a3717a526f15', type : 'POST', processData : false, contentType : false, data:formData, beforeSend: function (xhr) { $('#zz-img-add').text('Uploading...'); }, success:function(res){ $("#zz-img-add").text('上传图片'); $('#zz-img-show').append('<img src="'+res.data.url+'" />'); $('textarea[name="comment"]').val($('textarea[name="comment"]').val()+'[img]'+res.data.url+'[/img]').focus(); } }); }); CSS代码 div#zz-img-show img { height: 60px; margin: 0 10px 0 0; } .zz-add-img { width: 100%; height: 60px; overflow: hidden; } input#zz-img-file { width: 120px; height: 100%; float: left; position: relative; opacity: 0; } div#zz-img-show { float: left; } div#zz-img-add { width: 120px; height: 58px; float: left; margin: 0 15px 0 -120px; text-align: center; line-height: 60px; border: 1px solid #eee; color: #666; font-size: 16px; } /*防止图片过大超出,不兼容主题就删除*/ .comment_text img { max-width: 85%; display: block; margin: 15px 0; } 代码翻车看原文:http://tieba.baidu.com/mo/q/checkurl?url=https%3A%2F%2Fzsky.me%2F40.html&urlrefer=b0c531cb4bf668e66e8f61be61950c2c AJAX上传体验还是不错的,一条评论可以插入多张图片,没图没真相快去试试吧~
WordPress文章发布后同步到另一个站点 前些日子在贴吧看到一位小伙伴需要这个功能,现在将我的实现方法分享给大家。 思路是:在另一个 WordPress 站点创建一个API,文章发布时用cURL模拟 POST 请求 API 利用wp_insert_post()函数来创建文章。支持同步文章标题、内容、类型、分类、标签,分类需要另一个站点也有创建相同名称的分类,别名和ID不需要相同。实现 在另一个站点的根目录创建一个文件,命名为E-sync-post.php,代码如下: 并设置用于启动 API 的 key (代码有问题的话到原文中查看) <?php /* 文章发表后同步到另一个站点(接收) 作者:E享乐 */ define('WP_USE_THEMES', false); require_once("wp-load.php"); $key='123456789'; //设置启动API的密钥 if($_POST['key']==$key){ $categorys=explode(',',$_POST['category']); $category=array(); for($x=1;$x<count($categorys);$x++) { $category[$x-1]=get_cat_ID($categorys[$x]); } $info = array( 'post_title' => $_POST['title'], 'post_content' => $_POST['content'], 'post_status' => 'publish', 'post_author' => 1, //发布文章的作者ID,1 为管理员 'post_date' => $_POST['date'], 'tags_input' => $_POST['tags'], 'post_category' => $category, 'post_type' => $_POST['type'] ); wp_insert_post( $info ); } ?> 在主题的functions.php文件的最后一个?>前加入已下代码,并设置 key,修改 API 地址 (代码有问题的话到原文中查看) /* 文章发表后同步到另一个站点(发送) 作者:E享乐 */ add_action('publish_post', 'E_sync_post'); //钩子,在文章发布时执行 function E_sync_post($post_ID) { $key='123456789'; //输入你设置的密钥 $url='××/E-sync-post.php';//API地址 $post_info = get_post($post_ID); if ( $post_info->post_status == 'publish' &&$_POST['original_post_status'] != 'publish' ) { $title=$_POST['post_title']; $content=$_POST['content']; $date=$_POST['aa'].'-'.$_POST['mm'].'-'.$_POST['jj'].' '.$_POST['hh'].':'.$_POST['mn'].':'.$_POST['ss']; $category=''; for($x=1;$x<count($_POST['post_category']);$x++) { $category.=','.get_cat_name($_POST['post_category'][$x]); } $type=$_POST['post_type']; $tags=str_replace('、',',',$_POST['tax_input']['post_tag']); if($_POST['newtag']['post_tag']){ $tags.=','.str_replace('、',',',$_POST['newtag']['post_tag']); } $data ='key='.$key.'&title='.$title.'&content='.$content.'&date='.$date.'&category='.$category.'&type='.$type.'&tags='.$tags; $ch = curl_init (); //cURL模拟POST curl_setopt ( $ch, CURLOPT_RETURNTRANSFER, TRUE); curl_setopt ( $ch, CURLOPT_POST, TRUE ); curl_setopt ( $ch, CURLOPT_POSTFIELDS, $data ); curl_setopt ( $ch, CURLOPT_URL, $url ); curl_setopt ( $ch, CURLOPT_SSL_VERIFYPEER,FALSE); $ret = curl_exec ( $ch ); curl_close ( $ch ); return $ret; } } 好了,就酱~
jQuery 计算文章预计阅读时间 昨天在贴吧看见一篇用 PHP 计算文章预计阅读时间的帖子,看到几位吧友都认为采用 JS 来计算比较妥当,这里 E 也说下自己的看法。我认为采用 JS 可以减少后端的压力,将网站内容更快的呈现给用户。但现在很多网站都用了缓存,不是每次都会去执行PHP代码的,采用 JS 不能一打开网页就将内容呈现出来,当然这个等待时间很短。如果不考虑缓存,我个人更看好 JS。文章将分享采用 jQuery 来计算文章预计阅读时间,这个方法不仅限于 WordPress。 实现 现在大部分的主题都引入了 jQuery 库,这步就省略了。 将以下代码第三行的 #content 修改为你主题文章内容容器的 id 属性 或 class 属性后加入主题的single.php文件中。如果你有点代码基础,强烈建议整合到主题的 .js 文件中,代码已做简单的注释。 <script type="text/javascript"> $(document).ready(function() { var read_time=$('#content').text().length; //获取文章内容并计算字数 var read_time=read_time/400; //计算阅读时间 var read_time=Math.round(read_time); //四舍五入 if(read_time>1){ $('#read-time').html('预计阅读时间:'+read_time+'分钟'); } else{ $('#read-time').html('预计阅读时间:1分钟'); } }) </script> 第四行的 400 是每分钟阅读的字数,E 特地查了下,一般人的阅读速度是 300-500字/分钟 ,就取了个 400 ,不满意可以自己修改。既然是预计,所以这个计算结果不可能很准确。 在需要的地方采用以下代码调用 <span id="read-time"></span> 如何获取 Class、id 属性 在文章内容上 右键-检查元素 就可以看到了。E 建议使用 id 选择器,因为 id 选择器是最快的。没有 id 属性可以自己添加。好了,就酱,这篇文章写得比较啰嗦,也说了一些自己的观点,有错误请指出。
WordPress邮箱订阅插件:E推 前几天有位小伙伴向我要我自用的 Mail Subscribe List 插件,一直没空整理给大家,现在 E 把这个功能制成了一款插件免费分享给大家,希望大家有空常来玩。这也是 E享乐 推出的第一款插件,取名 E推。这个插件提取了 Mail Subscribe List 的订阅表单小工具和框架,集成订阅用户收集、订阅成功邮件提醒、文章发布邮件推送。文章推送的内容采用 标题+链接+摘要+第一张图片+上一篇文章 ,精心制作的邮件样式大气美观。 使用说明 插件启用后点击 外观-小工具 将 E推:邮箱订阅 小工具添加到需要的地方。小工具的设置示例:由于插件的主要功能与发信密不可分,所以集成了 SMTP 设置,设置集成在小工具里。插件的 SMTP 设置采用了这篇文章的代码:WordPress无插件简单代码实现SMTP发信。 这里需要说明的是WordPress的加载顺序是先加载插件再加载主题,所以如果 SMTP 在主题中设置,插件中是无效的。如果你是这种情况可以改用 E推 的 SMTP 设置就可以两全其美了。 前端订阅表单美化 由于主题的差异,前端订阅表单可能不美观,E 这边为大家提供一段CSS代码用于美化,把代码加入到主题的style.css中。不能保证兼容所有主题,不理想请自己调整。 .et_subscribe{padding: 5px 15px 15px;} .et_subscribe .prepend{color: #666;font-size: 13.5px;height: 20px;margin-bottom:12px;} .et_emailinput{padding: 1px 8px;height: 30px;background: #f7f7f7;outline: 0;border:none;width: 100%;float: left;} .et_submitbtn{width: 84px;height: 32px;border: 0;background: #4ba6e5;color:#fff;letter-spacing: 2px;font-size: 15px;font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif !important;border: none;padding: 0;} 插件截图插件下载(原文中下载) 文章来至 E享乐 原文地址:http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.exiang2.com%2Fchajian%2F1301.html&urlrefer=6e95900a67555b3ae1aa4ddaaf2fbfb3
WordPress清新、大气,扁平化+自适应主题:Exiang2 说两句 这款主题 E 从暑假一开始就开始打造,期间走走停停,拖了好长时间,原本是为 E享乐 量身打造的自用主题,现在将免费版本分享给大家。主题首页最初防自一款DZ论坛模版,具备了很多实用的功能,也花了很多时间和精力,使用过程中请自觉保留底部版权(本站链接)。 主题简介 扁平化+响应式设计,兼容电脑、平板和手机访问 自带5个小工具,可自定义首页顶部小工具、侧边栏、浮动块 SEO优化:首页自定义关键词和描述,文章页自动设置关键词和描述 精心打造的评论样式(仿QQ群空间),Ajax评论、评论Ajax加载分页、评论头像Ajax加载,完善的评论编辑器 内置下载按钮、链接按钮、标题短代码 内置prettify代码高亮、fancybox灯箱 完善的后台幻灯内容管理,多种显示方式可供选择 导航条右部多种社交账户展示,微博、Facebook、Twitter、qq、邮箱、RSS 精心优化的友情链接页面,可显示网站图标;读者墙(留言板),CSS3更炫酷;包含文章归档、投稿页面 包含文章版权信息、文章作者、相关文章,可自定义开启关闭 自带 评论星级 ,按会员评论数获取星级,增强互动 首页自带头条、邮箱订阅,可自定义设置 自带 SMTP发信设置 更多精彩有你来发现… 主题浏览 首页文章列表页文章页手机自适应(页面太长,只保留前两篇文章)主题使用说明 主题包含 喜欢 功能,但并没有集成相关代码,若需要此功能,需要安装 ZillaLikes 插件。 Exiang2 主题是 E享乐 计划发布的 Exiang 2.0 主题的免费版本,由于是第一个版本,主题有Bug在所难免,欢迎到 E享乐 中反馈。主题直接采用本站域名(http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.exiang2.com&urlrefer=21a6f52a7de6b1eb5ab07da10e7e2ba9)命名,此版本免费分享给大家使用,但使用过程中必须保留底部版权(本站链接),主题制作不易,且行且珍惜!! 关于主题发展 E享乐 有意将此主题不断优化、完善、增强,推出 E享乐 的首款收费主题:Exiang 2.0 。但制作一款主题确实挺费时间和精力,打算利用寒假完成这个计划~ 主题下载:到原文中下载 文章出自:E享乐 原文地址:http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.exiang2.com%2Fzhuti%2F576.html&urlrefer=989c201165ee734a6e352146ee7fa768
1 下一页