[wordpress]为写文章编辑器添加quicktag
目录
[需求]
我希望在发表出的文章上方右侧放置一个与本文内容有关的图片，这样别人看了图片就知道是关于哪方面的了。当然，是希望能够为每篇文章方便的添加一张代表性的图片。
[分析]
1、要实现图片和文字的混排，且图片浮动在右侧。这一点很容易，只要设置一下图片的Style为float:right就可以了
2、写文章时要能方便的添加这样的图片。如果每次都需要手动设置img src=之类的话是比较麻烦的，更何况还要记住图片地址。简单点的方法就是为默认的编辑器上的quickTags添加几个按钮(我用的编辑器不是可视化编辑器，所以显示的是quicktags，不是tinymce的编辑按钮)。添加了按钮后希望点击按钮就可以自动插入图片代码。
[实现]
1、修改当前模板的style.css,添加如下代码
CSS Code:
- .content_img{
- clear:both;
- float:right;
- }
2、打开\wp-includes\js\quicktags.js,在133行左右，也就是以下代码
javascript Code:
- edButtons[edButtons.length] =
- new edButton('ed_more'
- ,'more'
- ,'<!--more-->'
- ,''
- ,'t'
- ,-1
- );
的下方添加如下代码
javascript Code:
- var tmpPicArry = [{title:"Google",pic:"google_cn.gif"},{title:"Microsoft",pic:"microsoft.gif"},{title:"AS3",pic:"as3.gif"},{title:"AS2",pic:"as2.gif"},{title:"baidu",pic:"baidu.gif"},{title:"Yahoo",pic:"yahoo_en.gif"},{title:"symantec",pic:"symantec.gif"},{title:"sony",pic:"sony.gif"},{title:"sohu",pic:"sohu.gif"},{title:"telcom",pic:"telcom.gif"},{title:"unicom",pic:"unicom.gif"},{title:"intel",pic:"intel.gif"},{title:"360safe",pic:"360safe.gif"},{title:"alibaba",pic:"alibaba.gif"},{title:"amd",pic:"amd.gif"},{title:"dell",pic:"dell.gif"},{title:"qq",pic:"qq.gif"},{title:"gome",pic:"gome.gif"},{title:"mobile",pic:"mobile.gif"},{title:"Adobe",pic:"adobe.gif"},{title:"AIR",pic:"air.gif"},{title:"wordpress",pic:"wordpress-logo.png"},{title:"AdobeFlashPlayer",pic:"flashplayer_225x50.jpg"}]
- var tpLen = tmpPicArry.length;
- for(var i = 0; i < tpLen; i++)
- {
- edButtons[edButtons.length] =
- new edButton('ed_'+tmpPicArry[i].title
- ,tmpPicArry[i].title+'Pic'
- ,'<img src="http://4nothing.net/blog/thumbnail/'+tmpPicArry[i].pic+'" alt="'+tmpPicArry[i].title+'" class="content_img" />'
- ,''
- ,''
- ,-1
- );
- }
3、将相关图片上传至blog根目录/thumbnail/目录下
[效果图]
点击下图可在本窗口中放大观看
这里面增加的有关于FlashPlayer、Google、Microsoft、Yahoo!等的图片。
[扩展和资源下载]
如果你使用的tinymce的编辑器，则可能需要修改\wp-includes\js\tinymce\tiny_mce_gzip.php文件。
资源下载:thumbnail.zip:内含相关图片
Leave a Reply