Много раз, когда мы публикуем некоторые статьи на 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.В статье можно вставить короткий код.
Использовать эту функцию.Где title означает добавление некоторого содержимого подсказок, конечно же, можно также опустить title не писать.