摘要：首頁(yè)大挖想要分享這篇文章內(nèi)容的原因是由于csdn，這個(gè)交流社區(qū)不得不說是一個(gè)技術(shù)開發(fā)人員，外鏈引流的圣地，權(quán)重高、易收錄...
首頁(yè)大挖想要分享這篇文章內(nèi)容的原因是由于csdn，這個(gè)交流社區(qū)不得不說是一個(gè)技術(shù)開發(fā)人員，外鏈引流的圣地，權(quán)重高、易收錄、排名好，而且wordpress相關(guān)的一些技術(shù)文章質(zhì)量也都不錯(cuò)，最近c(diǎn)sdn更新的文章內(nèi)容樣式添加了一個(gè)閱讀全文的功能，這讓大挖也想把此功能移植過來，方便用戶的瀏覽體驗(yàn)，也就是為wordpress文章添加一個(gè)展開和收縮的功能，讓一些部分內(nèi)容可以優(yōu)先隱藏起來，重點(diǎn)內(nèi)容優(yōu)先展示給用戶，
首頁(yè)我們需要添加一個(gè)JS效果代碼在header.php中，放在body標(biāo)簽前面，當(dāng)然你也可以只添加在sinlge.php內(nèi)。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// 添加文章頁(yè)展開收縮JS效果 <script type="text/javascript"> jQuery(document).ready( function(jQuery){ jQuery('.collapseButton').click( function(){ jQuery(this).parent().parent().find('.xContent').slideToggle('slow'); } ); } ); </script> |
第二，需要編輯wordpress主題的functions.php文章，將下面代碼添加到你的主題的funtions.php.文件中
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// 文章頁(yè)添加展開收縮效果 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'); |
完成上面內(nèi)容，我們就可以通過短代碼來編輯內(nèi)容文章實(shí)現(xiàn)內(nèi)容的展開全文功能了
|
1 |
// 展開/收縮功能短代碼[collapse title="說明文字"]需點(diǎn)擊展開的內(nèi)容[/collapse】 |
為了方便我們后面對(duì)文章內(nèi)容的操作，可以將短碼直接寫進(jìn)我們的編輯器中，繼續(xù)復(fù)制下面的代碼到function.php文章中，就可以在文本編輯器內(nèi)直接點(diǎn)擊使用。
|
1 2 3 4 5 6 7 8 9 10 11 |
//添加展開/收縮快捷標(biāo)簽按鈕 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' ); |
通過上面的代碼添加就完成了我們wordpress添加文章內(nèi)容展開收縮的功能，是不是很簡(jiǎn)單。
