Word Pressでいくつかの記事を公開するときに多くのコードが含まれていますが、私は一般的にコードを圧縮するのが好きではなく、コードをフォーマット表示させるのが好きですが、フォーマット表示は通常、記事の内容をたくさん見せ、訪問者がナビゲートしやすくないので、今日は記事の内容を展開/縮小できる機能を紹介します。
方法：方法：
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=“title”]展開をクリックします[/collapse]
この機能を使用する。タイトルはヒントを追加することを意味しますが、タイトルを省略することもできます。