• 关于教程
  • 主题制作
  • 读书笔记
  • 生活笔记
  • 关于我
  • 有问题加我QQ 248758228

    wordpress使用ajax上传图片到媒体库,layui富文本编辑结合wordpress

    更新时间:2018-05-26 11:11:05

    【温馨提示:视频教程将在6月份开始更新,可提前购买,1-10元一节课,联系QQ248758228】


    今天讲解如何把wordpress的评论框做成layui的富文本编辑器,做出的效果如下图:

    上图中最下面的评论框就是Layui的富文本编辑器,处理这个评论框,稍微有点难度的是上传图片,编辑器使用AJAX异步上传图片。我们需要使用wordpress的内置图片处理函数来把AJAX提交图片保存到uploads目录,并且插入数据库。方便在网站后台媒体库管理和维护。

    首先我们要建立一个富文本编辑器

    正确的引入layui所需要的组建,CSS和JS,这个不在这里赘述

    使用以下代码创建一个富文本编辑器

    <textarea id="demo" style="display: none;"></textarea>
    <script>
            layui.use('layedit', function(){
                    var layedit = layui.layedit;
                    layedit.build('demo'); //建立编辑器
            });
    </script>

    程序正常执行后,会在textarea的地方建立一个富文本编辑器。如第一张图片所示的,当然你可以自定义工具类,具体的方案请查阅:http://www.layui.com/v1/doc/modules/layedit.html#tool

    开启编辑器上传图片功能

    给上面的代码添加上传图片功能组件,增加后的代码如下:

    <textarea id="demo" style="display: none;"></textarea>
    <script>
            layui.use('layedit', function(){
                    var layedit = layui.layedit;
                    layedit.set({
                            uploadImage: {
                                    url: '/?ws=ajax' //这里是AJAX异步请求地址
                                    ,type: 'POST'
                            }
                    });
                    layedit.build('demo'); //建立编辑器
            });
    </script>

    有了上面的代码,但你点击编辑器的上传图片按钮,选择好图片后,编辑器会把图片通过POST方式提交给,/?ws=ajax 文件。

    在wordpress中怎么使用类似/?ws=ajax的方法

    通过之前的学习,我们知道wordpress的主题文件不是在网站根目录,如果你要使用 xxx.cn/ajax.php的方式,需要把你的ajax.php放在网站根目录。但是我们制作主题的原则就是尽量保证自己的文件都在主题文件夹下面。

    那么我们今天给大家推荐一个简单的方案。

    在你主题里面的index.php文件的最顶部添加一下代码

    if($_GET['ws'] == 'ajax' ){
            include('ajax.php'); //为了保证网站的安全性和用户体验,最好添加一个判断文件是否存在
            exit;
    }

    通过上面的代码,我们实现了这样一个功能,当你访问 /?ws=ajax,实际执行的文件是你主题文件夹下面的ajax.php文件。这样就方便我们的处理,第二个好处是,因为这个文件在index.php里面被引用,ajax.php可以直接使用所有wordpress的函数和功能。无需另外引入wp-load.php文件。

    当然上面的方法是动态的,如果你觉得不喜欢,可以继续使用wordpress伪静态组建,把地址修改为类似 xxx.cn/ajax的类型。这个随便修改。怎么弄都可以,自己喜欢就好,在这一篇就不介绍方法了。

    图片已经POST到ajax.php,该怎么处理呢

    通过上面的配置,我们已经可以把上传的图片文件post到我们的目标程序上。现在贴下ajax.php的代码

    <?php
            $file = $_FILES['file'];
            if ( !empty( $file ) ) {
                    // 获取上传目录信息
                    $wp_upload_dir = wp_upload_dir();
                    // 将上传的图片文件移动到上传目录
                    $basename   = $file['name'];
                    $filename   = $wp_upload_dir['path'] . '/' . $basename;
                    $re         = rename( $file['tmp_name'], $filename );
                    $attachment = array(
                            'guid'           => $wp_upload_dir['url'] . '/' . $basename,
                            'post_mime_type' => $file['type'],
                            'post_title'     => preg_replace( '/\.[^.]+$/', '', $basename ),
                            'post_content'   => '',
                            'post_status'    => 'inherit'
                    );
                    $attach_id  = wp_insert_attachment( $attachment, $filename );
                    require_once( ABSPATH . 'wp-admin/includes/image.php' );
                    $attach_data = wp_generate_attachment_metadata( $attach_id, $filename );
                    wp_update_attachment_metadata( $attach_id, $attach_data );
                    $re = array(
                            'code'=>0,
                            'msg'=>'上传成功',
                            'data'=>array(
                                    'src'=>wp_get_attachment_url( $attach_id ),
                                    'title'=>''
                            )
                    );
                    echo json_encode( $re );
            }
            ?>

    通过上面的代码,我们就可以把上传的图片插入到wordpress的系统中,后台媒体库可以管理和维护,并且最终返回正确的数据到编辑器,你的编辑器里面就可以正常的显示图片了。

    本节文字课程就到这里,如果你还是不明白,不了解,可以联系我购买本节视频,价格30元。QQ248758228

                   

      0个问题

    WordPress主题制作

  • 01、前言
  • 写给读者重要说明运行环境
  • 02、开始制作
  • 极简主题基本函数主题信息静态采集头部文件底部文件默认首页wordpress侧边栏 - sidebar.phpwordpress分类目录 - cagegory.phpwordpress404页面 - 404.phpwordpress文章内容页 - single.phpwordpress页面文件 - page.phpwordrpess文章归档 - archive.phpwordpress评论文件 - comments.phpwordpress搜索结果页 - search.phpwordpress图片展示 - image.phpwordpress函数文件 - functions.phpwordpress自定义文件 - xxx.phpwordpress原生拓展文件 xxx-xxx.php
  • 03、主题结构
  • 主题结构首页加载归档页加载内容页加载页面加载其他加载
  • 04、导航菜单
  • wordpress主题使用导航菜单功能一:注册菜单wordpress主题使用导航菜单功能二:基本调用wordpress主题使用导航菜单功能三:替换适配wordpress主题使用导航菜单功能四:继承类适配wordpress主题使用导航菜单功能五:功能添加
  • 04、文章循环
  • wordpress文章循环详解一:基本循环wordpress文章循环详解二:参数循环wordpress文章循环详解三:自定义筛选wordpress文章循环详解四:多条件或、与、非筛选wordpress文章循环详解五:使用或者集成ACF高级字段插件
  • 05、文章类型
  • wordpress添加自定义文章类型一:注册类型wordpress添加自定义文章类型二:支持伪静态wordpress添加自定义文章类型三:注册分类法wordpress添加自定义文章类型四:添加标签功能wordpress添加自定义文章类型五:独立展示
  • 06、评论系统
  • 07、用户相关
  • wordpress添加用户角色wordpress添加用户字段
  • 08、注册登录
  • wordpress原生登录系统改造wordpress添加前台登录功能一:POST提交wordpress添加前台登录功能三:AJAX无刷新登录wordpress添加前台注册功能
  • 09、页面相关
  • 10、媒体/附件
  • wordpress使用ajax上传图片到媒体库,layui富文本编辑结合wordpress
  • 11、小工具
  • 12、排序相关
  • 13、数据库
  • wordpress数据库结构介绍wordpress数据库操作之一:新增数据表wordpress数据库操作之二:添加数据wordpress数据库操作之三:查询数据wordpress数据库操作之四:删除数据wordpress数据库操作之五:更新数据
  • 14、在线支付
  • 15、常见问题
  • 16、功能案例
  • 17、伪静态
  • 刷新规则

    操作教程

  • 售后服务
  • <