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

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

1
2
function word() { return 'i love chinaapp.org !';}
add_shortcode('w', 'word');//插入一段文字的短代码

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

2)在文章中插入一张图片。 如果你经常需要插入这张图片,而不是每个页面都插入,那么使用短代码是最好的选择。 在functions中插入

1
2
3
4
5
6
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文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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末尾即可)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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]

注意:一篇文章中有多个折叠内容时,

1
cd="tx1"

 需区别定义,如第一段内容定义为 

1
cd="tx1"

,第二段内容定义为

1
cd="tx2"

,文中提供的 CSS 样式只提供了 tx1,tx2,tx3 三种,如果一篇文章中的折叠内容超过三段,可自行添加 CSS 样式。

2 篇回应 (访客:0 篇, 博主:0 篇, 引用:1 篇, 其它:1 篇)

  1. 不错不错,赞一个

Leave a Reply

:?: :razz: :sad: :!: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: :smile: :evil:
贴图 表情 ( ps. 若要贴代码, 请將 "<" 改成 "&lt;" 即可, 此方法在所有 WP 网站均适用. )

Trackbacks/Pingbacks

  1. 让WordPress的评论/回复内容也支持短代码ShortCodes – iFans --- 2012年6月9日

RSS feed for comments on this post. TrackBack URL