很多時候我們在WordPress上發布一些文章的時候里面都包含了很多的代碼，我一般又不喜歡把代碼壓縮起來而喜歡讓代碼格式化顯示，但是格式化顯示通常會讓文章內容看起來很多，不便於訪問者瀏覽，所以今天就介紹一種可以展開/收縮文章內容的功能。
方法：
1.在header.php中添加下面的代碼，或者也可以單獨寫進一個js文件中然后在header.php中引入也可以。我是引入的。
|
1
2
3
4
5
6
7
|
<script type=
"text/javascript"
>
jQuery(document).ready(
function
(jQuery) {
jQuery(
'.collapseButton'
).click(
function
() {
jQuery(this).parent().parent().find(
'.xContent'
).slideToggle(
'slow'
);
});
});
</script>
|
2.在function.php中加入下面的代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//展開收縮功能
function
xcollapse(
$atts
,
$content
= null){
extract(shortcode_atts(
array
(
"title"
=>
""
),
$atts
));
return
'<div style=
"margin: 0.5em 0;"
>
<div
class
=
"xControl"
>
<span
class
=
"xTitle"
>
'.$title.'
</span>
<a href=
"javascript:void(0)"
class
=
"collapseButton xButton"
>展開/收縮</a>
<div style=
"clear: both;"
></div>
</div>
<div
class
=
"xContent"
style=
"display: none;"
>
'.$content.'
</div>
</div>';
}
add_shortcode(
'collapse'
,
'xcollapse'
);
|
3.可以優化一下代碼，因為默認是靠左的，不好看，我們讓他往中間一點顯示，具體的距離可以自行調整。當然這一步忽略也是可以的。
在style.css中添加以下代碼：
|
1
2
3
|
.xControl {
padding-left: 32px;
}
|
4.下面就可以在文章中通過插入短代碼
[collapse title=”標題”]需點擊展開的內容[/collapse]
來使用此功能了。其中title是指添加一些提示內容，當然也可以省略title不寫。