無作為
不僅僅是一種態度!

WordPress添加文章內容展開/收縮功能

通過之前分享的“WordPress首頁文章添加列表模式和摘要模式切換”功能擴展,今天我們給wordpress文章頁面添加一個功能按鈕,實現文章內容展開/收縮功能的功能把。

WordPress添加文章內容展開收縮功能

在使用WordPress編寫文章的時候我們常常會遇到這樣一個問題:為了能滿足不同用戶對文章內容的理解。

我們希望能夠將文章內容編寫的盡可能詳細,但是過于詳細的內容對于某些已有一定知識基礎的用戶來說難免顯的啰嗦。

這時候我們就需要使用“展開/收縮”功能將文章中某些可說可不說的內容隱藏起來,從而使得文章內容更加簡潔有條理性。

JS代碼

將以下代碼添加到你主題header.php文件的<body>標簽前面(foot或者主題的js文件管理的地方都可以,無作為是加入到主題js設置里面)

// 添加文章頁展開收縮JS效果
<script type="text/javascript">
    jQuery(document).ready(
        function(jQuery){
            jQuery('.collapseButton').click(
			    function(){
                    jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
                }
		    );
        }
    );
</script>

編輯主題functions.php文件

將一下代碼添加到你主題的functions.php文件中

// 文章頁添加展開收縮效果
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><i class="fa fa-plus-square" aria-hidden="true"></i><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');

至此,你就可以通過使用下面的短代碼在編輯文章時為文章內容添加“展開/收縮”按鈕了。

// 展開/收縮功能短代碼
collapse title="說明文字"]需點擊展開的內容[/collapse

當然,為了更方便的使用“展開/收縮”功能,你也可以將下面的代碼繼續添加到你主題的functions.php文件中去,在文章編輯的代碼界面就可以看到一個“展開/收縮按鈕”了。

編輯文章的時候直接選中要隱藏的內容再點擊這個按鈕就可以自動插入短代碼實現“展開/收縮”功能了,直接選擇內容點擊即可直接實現功能。

//添加展開/收縮快捷標簽按鈕
function appthemes_add_collapse() {
?>
    <script type="text/javascript">
        if ( typeof QTags != 'undefined' ) {
            QTags.addButton( 'collapse', '展開/收縮按鈕', '【collapse title="說明文字"]','[/collapse]' );
        }?
    </script>
<?php 
}
add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

最后,大家在添加代碼的時候注意上方代碼中將中文【】字符修改為[]。

美化展開收縮功能

更改前端“展開/收縮”字符顯示樣式

如果你想要改變“展開/收縮”字符在前端的顯示效果,可以通過添加<span>、<em>、<stong>等標簽來實現,例如下面的代碼。

<span style="font-size: 18pt; font-family: impact, sans-serif;"><em><strong><span style="color: #ff0000;">展開/收縮</span></strong></em></span>

當然,如果你不會編輯這些標簽,一個簡單的方法是你先在WordPress文章可視化編輯窗口編輯好字符樣式,然后進入代碼窗口復制代碼即可。

添加Font Awesome字體圖標

如果你的主題支持Font Awesome字體,你可以通過在上面functions.php文件中代碼內的“展開/收縮”字符前面添加Font Awesome圖標標簽來為你的展開/收縮按鈕添加一個美化圖標;

當然如果主題不支持Font Awesome字體也沒關系,你可以安裝Font Awesome 4 Menus插件進行拓展。

具體設置代碼可參照下面示例。

<i class="fa fa-plus-square" aria-hidden="true"></i> <a href="javascript:void(0)" class="collapseButton xButton">展開/收縮</a>

到此所有代碼都以結束。

最后補充一下css美化:

/*收縮*/
.xControl {
padding-left: 10px;
color: #FF0505;
}
歷史上的今天:
贊(28) 打賞
所有免費資源、福利、電影、破解軟件未經允許不得轉載:www.btilnp.live無作為 » WordPress添加文章內容展開/收縮功能

留下評論 搶沙發

無作為-不僅僅是一種態度

登錄/注冊廣告合作

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

广西风采快三