[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'
,''
,''
,'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="//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文件。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。