【WordPress 教程】WordPress编辑器增强—快捷短代码

孤狼
孤狼
孤狼
171
文章
118
评论
2019年6月11日14:01:023618,829 4545字阅读15分9秒
摘要

此功能更加方便,为WordPress编辑短代码功能增强,可按个人喜好自行修改添加,可以让你更方便的添加!

【代码部署】

  • 将代码丢到主题 functions.php 文件中即可:
  • 图标fa fa-tasks可自行修改
  • 如要自定义可删除//解析短代码即可。
此处为隐藏的内容
发表评论并刷新,方可查看

【JS文件】

  • 将JS文件放到上述代码位置中默认为/js/mce-button.js可自行修改
  • 图标,自己去下载一个16*16的png图片取名info.png上传到和js同文件夹里面即可。
  • 也可以将imgage删除修改icon: false,为icon: 'editimage',

短代码按钮JS文件展开

(function() {  
    tinymce.PluginManager.add('wd_mce_button', function( editor, url ) {  
        editor.addButton( 'wd_mce_button', {  
            text: false,                 
            icon: false,  
  	    title : '短代码',
            image: url + "/info.png",  
            type: 'menubutton',  
            menu: [  
                {  
                    text: '灰色项目面板',  
                    onclick: function() {  
                        editor.insertContent('[task]内容[/task]');  
                    }  
                },  
                {  
                    text: '红色禁止面板',  
                    onclick: function() {  
                        editor.insertContent('[noway]内容[/noway]');  
                    }  
                },  
                {  
                    text: '黄色警告面板',  
                    onclick: function() {  
                        editor.insertContent('[warning]内容[/warning]');  
                    }  
                },  
                {  
                    text: '蓝色清新面板',  
                    onclick: function() {  
                        editor.insertContent('[buy]内容[/buy]');  
                    }  
                },    
            ]  
        });  
    });  
})();

添加视频的按钮JS文件展开

(function () {
    tinymce.PluginManager.add('iframe_video_button', function (editor, url) {
        editor.addButton('iframe_video_button', {
			text: false,
			icon: 'media',
			title : '添加视频',
            onclick: function () {
                //editor.insertContent('WPExplorer.com is awesome!');
                editor.windowManager.open({
                    title: '请输入视频地址',
                    body: [
                        {
                            type: 'textbox',
                            name: 'videoUrl',
                            minWidth: 400,
                            minHeight: 30,
                            multiline: true,
                            value: ''
                        }
                    ],
                    onsubmit: function (e) {
                        //获取输入内容
                        var str = e.data.videoUrl;
                        var videoUrl = '';
                        var pxStr = '';
                        if (str.indexOf('iframe') < 1) {
                            var videoId = '';

                            //直接输入浏览器地址处理
                            if (str.indexOf('youku') > 0) {
                                //优酷处理

                                //截取视频ID
                                str = str.substr(str.indexOf('id_') + 3);
                                videoId = str.substr(0, str.indexOf('.'));
                                //将地址拼接到iframe ,输出到编辑器
                                editor.insertContent('<iframe frameborder="0" width="99%" height="498" src="http://player.youku.com/embed/' + videoId + '" allowfullscreen></iframe> ');
                                return true;
                            } else if (str.indexOf('qq') > 0) {
                                //腾讯视频处理

                                //截取视频ID
                                if(str.indexOf('vid') >0){
                                    videoId = str.substr(str.indexOf('vid')+4);
                                }else{
                                    str = str.substr(0, str.indexOf('.html'));
                                    videoId = str.substr(str.lastIndexOf('/') + 1);
                                }
                                //将地址拼接到iframe ,输出到编辑器
                                editor.insertContent('<iframe frameborder="0" width="99%" height="498" src="http://v.qq.com/iframe/player.html?vid=' + videoId +  '&tiny=0&auto=0" allowfullscreen></iframe> ');
                                return true;
                            } else {
                                alert('输入地址错误,请重新输入');
                                return false;
                            }
                        }
                        //截取http之前一个标识符,方便配对结束标识符
                        pxStr = str.substr(str.indexOf('http') - 1, 1);
                        //截取前半部分地址
                        str = str.substr(str.indexOf('http'));
                        videoUrl = str.substr(0, str.indexOf(pxStr));

                        //将地址拼接到iframe ,输出到编辑器
                        editor.insertContent('<iframe frameborder="0" width="99%" height="498" src="' + videoUrl + '" allowfullscreen></iframe> ');
                    }
                });
            }
        });
    });
})();

【CSS样式】

.shortcodestyle{margin:20px 0px;padding: 15px 15px 15px 40px;position: relative;-moz-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2); box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2);border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;}  
.shortcodestyle i{padding-right: 20px;}  
.shortcodestyle a{padding:5px;}  
.shortcodestyle a:hover{background:none;border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;-khtml-border-radius:0px;}  
.warning{background:#FFEA97;color: #9F6F26;}  
.noway{background:#EFCEC9;color: #820B0B;}  
.buy{background: #9dd7e8; color:  #03536b;}  
.task{background: #E7E7E7; color:  #333;}  
.shortcodestyle,.warning,.noway,.buy,.task p{text-indent: 0;}
继续阅读
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
孤狼
  • 本文由 发表于 2019年6月11日14:01:02
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
【新年气象】过年啦WordPress 主题添加挂灯笼特效 WordPress

【新年气象】过年啦WordPress 主题添加挂灯笼特效

过年挂灯笼是中国的一个习俗,家里挂灯笼,自己博客也是自己的家,当然也要挂一个了。代码这里也分享一下,有喜欢的朋友拿去用,将灯笼挂在自己的博客上,增加点过年的气氛。这个灯笼只是简单应...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:36   其中:访客  36   博主  0
    • 陌离 陌离

      不当家不知柴米贵,不拍照不知自己肥。

      • ︶ ̄夏兮颜℡ ︶ ̄夏兮颜℡

        你要相信明天,一定会更好的,更好的把你虐成狗。

        • ︶ ̄夏兮颜℡ ︶ ̄夏兮颜℡

          看看 学习下

          • amiisk amiisk

            当你变得足够优秀的时候,你才发现原来她只是,单纯的不喜欢你。

            • 初夏夜微凉 初夏夜微凉

              测试看看咋回事!

              • 初夏夜微凉 初夏夜微凉

                你要相信明天,一定会更好的,更好的把你虐成狗。