在wordpress中使用短代码提高工作效率

发布时间:  最終更新日:2012/04/07   QQ/微信:1176113114

本文讲诉如何在wordpress使用一些短代码来提高使用wordpress的效率。 周转于很多的博客,很多使用了wordpress短代码或介绍了短代码的使用,今天写这篇文章主要是满足多数人的需求。 1)在文章中插入一段文字: 插入一段文字,一段固定的文字信息是非常简单的,你可以在主题的模板函数functions.php最后的?>之前加
function word() { return 'i love chinaapp.org !';}
add_shortcode('w', 'word');

//插入一段文字的短代码
word和w可以自定义名字,使用的时候就在文章页面插入[w],就可以显示”i love chinaapp!”了,当然也可以支持定义css信息。

2)在文章中插入一张图片。 如果你经常需要插入这张图片,而不是每个页面都插入,那么使用短代码是最好的选择。 在functions中插入
function caimg(){
return '< title="插入图片短代码的title"<img src="图片地址"> alt=" " /></span></td>'
;
}
add_shortcode('ca','caimg');
//插入图片的短代码

同样,使用的时候在文章中插入[ca]就OK了,图片的css样式可以自己定义。 其他的你可以参考:WordPress 短代码(简码)收藏

3)用短代码在文章内容中实现折叠(伸缩)效果 提到折叠功能绝对会让人想起大名鼎鼎的 jQuery,用它实现的折叠功能具有平滑展开与收起的效果。 a.首先加载 jQuery 库(已加载过的请无视),不会加载的请参考这里:加载Jquery。 b.加入 SHORTCODE 代码到 ./wp-content/themes/当前主题/functions.php文件
function myjqck($atts, $content = null) {
extract(shortcode_atts(array(
"cd" => 'jctx-',"titles"=>'jctx',"type"=>''
), $atts));
return '<script type="text/javascript">
$(document).ready(function(){
$(".jqck-'.$cd.'").click(function(){
$("#jqck-'.$cd.'").slideToggle("slow",function(){ });
});
});
</script>
<p style="cursor:s-resize" class="jqck-'.$cd.'"><span title="OPEN/CLOSE">'.$titles.'</span></p>
<div id="jqck-'.$cd.'">
'.$content.'
<p style="cursor:s-resize" class="jqck-'.$cd.'"><span title="CLOSE">close</span></p>
</div>';
}
add_shortcode("jqck", "myjqck");

c. 加入 CSS 样式到 ./wp-content/themes/当前主题/style.css 文件中(直接复制粘贴到css末尾即可)
.jqck-tx1, .jqck-tx2, .jqck-tx3 {
text-indent:28px;/*--标题缩进--*/
display:block;/*--滑动初始效果--*/
height:20px;/*--标题框高度--*/
background-repeat: no-repeat;/*--背景图片不重复--*/
position:relative;/*--定位--*/
color:#00c;/*--标题默认颜色--*/
text-decoration:none;/*--链接无下划线--*/
background-image: url(http://cc.80sbar.com/wp-content/themes/monochrome/jqck/tx.png);
}
.jqck-tx1:hover, .jqck-tx2:hover, .jqck-tx3:hover {
background-repeat: no-repeat;/*--背景图片不重复--*/
color:#000;/*--标题鼠标颜色--*/
background-image: url(http://cc.80sbar.com/wp-content/themes/monochrome/jqck/tx.gif);
}
#jqck-tx1, #jqck-tx2, #jqck-tx3 { display: none; }

使用:在文章中添加[jqck cd="tx1" titles="标题"]内容[/jqck]
注意:一篇文章中有多个折叠内容时,cd="tx1" 需区别定义,如第一段内容定义为 cd="tx1",第二段内容定义为cd="tx2",文中提供的 CSS 样式只提供了 tx1,tx2,tx3 三种,如果一篇文章中的折叠内容超过三段,可自行添加 CSS 样式。

打赏

推广:ChinaApp营销论坛——苹果AppStore搜索广告Search Ads交流区

感谢分享给更多身边的朋友

回顶部 ↑