相信有些wordpresser知道这个东东，在一些主题上这是标配，如deve主题、iartwork主题。原理大概是通过wordpress本身的短代码功能，事先在主题用css样式定义一些美化框，在编辑文章时写入短代码修饰，正式发表后再前台就可以看到效果。
如果你不会或不想修改主题代码实现这个功能，可以考虑一款短代码插件S-shortcodes。使用插件与直接代码增加的效果几乎是一样的（即安装插件对WordPress 速度上影响不大）。详细可以见《S-shortcodes：WordPress短代码形式美化框插件下载》
应该说，这些是挺好看的，多多少少可以丰富一下单调的文章页面。在合理使用加上文字内容充实的前提下，你的网站会非常有吸引力。之前有一段时间Jeff的阳台就是使用这个的，不过现在直接使用S-shortcodes插件。
为你的wordpress主题添加短代码形式美化框教程如下：
一、打开你的主题的function.php文件，在最后一个 ?> 前加入以下代码：
//短代码 //警示 function warningbox($atts, $content=null, $code="") { $return = '<div class="warning shortcodestyle">'; $return .= $content; $return .= '</div>'; return $return; } add_shortcode('warning' , 'warningbox' ); //禁止 function nowaybox($atts, $content=null, $code="") { $return = '<div class="noway shortcodestyle">'; $return .= $content; $return .= '</div>'; return $return; } add_shortcode('noway' , 'nowaybox' ); //购买 function buybox($atts, $content=null, $code="") { $return = '<div class="buy shortcodestyle">'; $return .= $content; $return .= '</div>'; return $return; } add_shortcode('buy' , 'buybox' ); //项目版 function taskbox($atts, $content=null, $code="") { $return = '<div class="task shortcodestyle">'; $return .= $content; $return .= '</div>'; return $return; } add_shortcode('task' , 'taskbox' ); //音乐播放器 function doubanplayer($atts, $content=null){ extract(shortcode_atts(array("auto"=>'0'),$atts)); return '<embed src="'.get_bloginfo("template_url").'/shortcode/doubanplayer.swf?url='.$content.'&autoplay='.$auto.'" type="application/x-shockwave-flash" wmode="transparent" allowscriptaccess="always" width="400" height="30">'; } add_shortcode('music','doubanplayer'); //下载链接 function downlink($atts,$content=null){ extract(shortcode_atts(array("href"=>'http://'),$atts)); return '<div class="but_down"><a href="'.$href.'" target="_blank"><span>'.$content.'</span></a><div class="clear"></div></div>'; } add_shortcode('Downlink','downlink'); //flv播放器 function flvlink($atts,$content=null){ extract(shortcode_atts(array("auto"=>'0'),$atts)); return'<embed src="'.get_bloginfo("template_url").'/shortcode/flvideo.swf?auto='.$auto.'&flv='.$content.'" menu="false" quality="high" wmode="transparent" bgcolor="#ffffff" width="560" height="315" name="flvideo" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_cn" />'; } add_shortcode('flv','flvlink'); //mp3专用播放器 function mp3link($atts, $content=null){ extract(shortcode_atts(array("auto"=>'0',"replay"=>'0',),$atts)); return '<embed src="'.get_bloginfo("template_url").'/shortcode/dewplayer.swf?mp3='.$content.'&autostart='.$auto.'&autoreplay='.$replay.'" wmode="transparent" height="20" width="240" type="application/x-shockwave-flash" />'; } add_shortcode('mp3','mp3link'); //在线视频 /* 20120616 修复WP 3.4 官方中文版 的问题 function wp_embed_handler_youku( $matches, $attr, $url, $rawattr ) { return apply_filters( 'embed_youku', '<embed src="http://player.youku.com/player.php/sid/' . esc_attr($matches[1]) . '/v.swf" quality="high" width="620" height="390" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" allowfullscreen="true" wmode="opaque"></embed>', $matches, $attr, $url, $rawattr ); } wp_embed_register_handler( 'youku', '#http://v.youku.com/v_show/id_(.*?).html#i', 'wp_embed_handler_youku' ); function wp_embed_handler_tudou( $matches, $attr, $url, $rawattr ) { return apply_filters( 'embed_tudou', '<embed src="http://www.tudou.com/v/' . esc_attr($matches[1]) . '/v.swf" quality="high" width="620" height="390" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" allowfullscreen="true" wmode="opaque"></embed>', $matches, $attr, $url, $rawattr );} wp_embed_register_handler( 'tudou', '#http://www.tudou.com/programs/view/(.*?)/#i', 'wp_embed_handler_tudou' ); */ function wp_embed_handler_ku6( $matches, $attr, $url, $rawattr ) { return apply_filters( 'embed_ku6', '<embed src="http://player.ku6.com/refer/' . esc_attr($matches[1]) . '/v.swf" quality="high" width="620" height="390" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" allowfullscreen="true" wmode="opaque"></embed>', $matches, $attr, $url, $rawattr ); } wp_embed_register_handler( 'ku6', '#http://v.ku6.com/show/(.*?).html#i', 'wp_embed_handler_ku6' ); function wp_embed_handler_youtube( $matches, $attr, $url, $rawattr ) { return apply_filters( 'embed_youtube', '<embed src="http://www.youtube.com/v/' . esc_attr($matches[1]) . '?&hl=zh_CN&rel=0" width="620" height="390" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" allowfullscreen="true" wmode="opaque"></embed>', $matches, $attr, $url, $rawattr ); } wp_embed_register_handler( 'youtube', '#http://youtu.be/(.*?)/#i', 'wp_embed_handler_youtube' ); function wp_embed_handler_56 ($matches, $attr, $url, $rawattr ) { return apply_filters( 'embed_56', '<embed src="http://player.56.com/v_' . esc_attr($matches[1]) . '.swf" quality="high" width="620" height="390" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" allowfullscreen="true" wmode="opaque"></embed>', $matches, $attr, $url, $rawattr ); } wp_embed_register_handler( '56', '#http://player.56.com/v_(.*?).swf#i', 'wp_embed_handler_56' ); function wp_embed_handler_sohu( $matches, $attr, $url, $rawattr ) { return apply_filters( 'embed_sohu', '<embed src="http://share.vrs.sohu.com/' . esc_attr($matches[1]) . '/v.swf" quality="high" width="620" height="390" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" allowfullscreen="true" wmode="opaque"></embed>', $matches, $attr, $url, $rawattr ); } wp_embed_register_handler( 'sohu', '#http://share.vrs.sohu.com/(.*?)/v.swf#i', 'wp_embed_handler_sohu' ); function wp_embed_handler_6cn( $matches, $attr, $url, $rawattr ) { return apply_filters( 'embed_6cn', '<embed src="http://6.cn/p/' . esc_attr($matches[1]) . '.swf" quality="high" width="480" height="385" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" allowfullscreen="true" wmode="opaque"></embed>', $matches, $attr, $url, $rawattr ); } wp_embed_register_handler( '6cn', '#http://6.cn/p/(.*?).swf#i', 'wp_embed_handler_6cn' ); function wp_embed_handler_letv( $matches, $attr, $url, $rawattr ) { return apply_filters( 'embed_letv', '<embed src="http://www.letv.com/player/' . esc_attr($matches[1]) . '.swf" quality="high" width="620" height="390" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" allowfullscreen="true" wmode="opaque"></embed>', $matches, $attr, $url, $rawattr ); } wp_embed_register_handler( 'letv', '#http://www.letv.com/player/(.*?).swf#i', 'wp_embed_handler_letv' ); function wp_embed_handler_sina( $matches, $attr, $url, $rawattr ) { return apply_filters( 'embed_sina', '<embed src="http://you.video.sina.com.cn/api/sinawebApi/outplayrefer.php/vid=' . esc_attr($matches[1]) . '/s.swf" quality="high" width="620" height="390" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" allowfullscreen="true" wmode="opaque"></embed>', $matches, $attr, $url, $rawattr ); } wp_embed_register_handler( 'sina', '#http://you.video.sina.com.cn/api/sinawebApi/outplayrefer.php/vid=(.*?)/s.swf#i', 'wp_embed_handler_sina' ); |
这步是为主题实现短代码功能。
二、下载以下素材文件（点击下载），解压后放入主题的imagine文件夹中；也可以自己自定义，自己自定义则修改下面“三”中的代码的相对应路径地址。
三、在主题style.css文件进入以下代码：
/*---Shortcode---*/ .shortcodestyle{margin:20px 0px;padding: 15px 15px 15px 80px;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 a{padding:0px;} .shortcodestyle a:hover{background:none;border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;-khtml-border-radius:0px;} .warning{background: url(shortcode/shortcode/bell.png) no-repeat scroll 15px 15px #FFEA97;border: 1px solid #E1B400;color: #9F6F26;} .warning a{ color:#A84A1E;border-bottom:1px dotted #A84A1E;} .warning a:hover{color:#A84A1E;border-bottom:1px solid #A84A1E; } .noway{background: url(shortcode/shortcode/noway.png) no-repeat scroll 15px 15px #EFCEC9;border: 1px solid #BE1F1F;color: #820B0B;} .noway a{ color: #F60;border-bottom:1px dotted #F60;} .noway a:hover{color:#F60;border-bottom:1px solid #F60; } .buy{background: url(shortcode/shortcode/buy.png) no-repeat scroll 15px 15px #EFF4D4; border: 1px solid #8FAD3D;color: #779B39;} .buy a{color: #2b2b2b;border-bottom:1px dotted #2b2b2b;} .buy a:hover{color:#2b2b2b;border-bottom:1px solid #2b2b2b; } .task{background: url(shortcode/shortcode/clipboard.png) no-repeat scroll 15px 15px #E7E7E7; border: 1px solid #aaa;color: #333;} .task a{ color: #4B7126;border-bottom:1px dotted #4B7126;} .task a:hover{color:#4B7126;border-bottom:1px solid #4B7126; } .shortcodestyle,.warning,.noway,.buy,.task p{text-indent: 0;} .but_down { margin:10px 0} .but_down a{float:left;display:block;background:transparent url(shortcode/shortcode/dlbutton.png) no-repeat left top;border:none;padding:0 0 0 60px;height:33px;font-family: 'Century Gothic',"Microsoft YaHei", Trebuchet MS, Arial, Tahoma, sans-serif;color:#046BB0;text-decoration:none;text-shadow:0 1px 1px #fff;} .but_down a span{float:left;display:block;background:transparent url(shortcode/shortcode/dlbutton.png) no-repeat right top;padding:0 10px 0 0;line-height:33px;cursor:pointer;} .but_down a:hover{color:#E23A0A;text-shadow:0 1px 1px #fff;background:transparent url(shortcode/shortcode/dlbutton.png) no-repeat left top;border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;-khtml-border-radius:0px;} |
图片地址不同可以自己修改对应路径地址。
使用方法
在编辑框中选择文字，手动输入对应的短代码。如图片中的第一个美化框即是输入以下内容：
[task]测试一下，你就知道（1）[/task]
短代码示例：
灰色项目面板： [task]文字内容[/task]
红色禁止面板： [noway]文字内容[/noway]
黄色警告面板： [warning]文字内容[/warning]
绿色购买面板： [buy]文字内容[/buy]
下载样式 [Downlink href="http://www.xxx.com/xxx.zip" rel="nofollow" rel="nofollow"]download xxx.zip[/Downlink]
通用音乐播放器
默认不自动播放： [music]http://www.xxx.com/xxx.mp3[/music]
自动播放: [music auto=1]http://www.xxx.com/xxx.mp3[/music]
Mp3专用播放器
默认不循环不自动播放： [mp3]http://www.xxx.com/xxx.mp3[/mp3]
自动播放： [mp3 auto="1"]http://www.xxx.com/xxx.mp3[/mp3]
循环播放： [mp3 replay="1"]http://www.xxx.com/xxx.mp3[/mp3]
自动及循环播放： [mp3 auto="1" replay="1"]http://www.xxx.com/xxx.mp3[/mp3]
Flv专用播放器
默认不自动播放： [flv]http://www.xxx.com/xxx.flv[/flv]
自动播放： [flv auto="1"]http://www.xxx.com/xxx.flv[/flv]
注意：如果要使用这个播放器，一定要添加flv格式的视频文件
通用代码： 视频播放页面网址或Flash地址
使用视频播放页面网址的网站
以下网站中的视频，直接复制浏览器中的地址，粘贴到短代码中即可
优酷网： http://v.youku.com/v_show/***.html
土豆网： http://www.tudou.com/***/ (注意:网址的最后有个斜杠不能漏掉)
酷6网： http://v.ku6.com/show/%*&^&&.html
Youtube： http://youtu.be/v^&&^^%$I/ (此为分享中给出的分享网址,记得在网址的最后加上斜杠)
使用Flash地址的网站
以下网站中的视频，需要复制视频给出的分享中的flash地址，粘贴到短代码中即可
56.com： http://player.56.com/v4353535.swf
搜狐视频： http://share.vrs.sohu.com/3432%%^^$$/v.swf
6房间： http://6.cn/p/1/n4WbeuI_Gn7%^%$#$$$$CVccLQ.swf
乐视网： http://www.letv.com/player/x7##$$$$%%792.swf
新浪视频： http://you.video.sina.com.cn/api/sinawebApi/&&^&&&*efer.php/vid=XXX/s.sw
请教博主 怎样将短代码 功能整合到 文章编辑模块里 就像官方编辑器可以下拉添加块的那种？ 如之前已有博文 请告知 感觉贵站搜索功能怪怪的！
我想知道，MP3和视频播放器的短代码是什么
部分已抄~
楼主现在也不用这个短代码了啊？
现在不用了，感觉没啥必要了
丰富版式，还是不错的
能整合到编辑器里就更好了。。。。
其实完全可以，你可以见《WordPress自带TinyMCE编辑器相关功能增强》一文中 “ 简单添加自定义按钮 ”的部分自己添加。
你好，请问你是怎么实现本页中带有行号的代码框呀？谢谢！
用代码高亮插件。
实在是憋不住沉默了，jeff那个弱弱的问一句有不用插件高亮的吗？
有啊，直接对pre标签进行样式定义啊，不过可能没有行号