Beaucoup de fois que nous publions certains articles sur WordPress, il contient beaucoup de code, je n'aime généralement pas comprimer le code et j'aime le formatage du code, mais le formatage de l'affichage fera généralement apparaître beaucoup de contenu de l'article, ce qui n'est pas pratique pour les visiteurs à naviguer, donc aujourd 'hui, je vais présenter une fonction qui peut développer / contracter le contenu de l'article.
Méthodes :
1. Ajoutez le code suivant dans header.php, ou vous pouvez l'écrire séparément dans un fichier js et l'introduire dans header.php. J'ai été introduit.
|
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. Ajoutez le code suivant dans le file 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. Vous pouvez optimiser le code, car par défaut, il est à gauche, ce qui n'est pas beau. Nous lui laissons afficher un peu au milieu, et la distance spécifique peut être ajustée par lui-même. Bien sûr, cette étape peut être ignorée.
Ajoutez le code suivant dans style.css :
|
1
2
3
|
.xControl { padding-left: 32px;} |
4. Vous pouvez insérer un code court dans l'article ci-dessous
Pour utiliser cette fonction. où le titre se réfère à ajouter un peu de contenu de conseil, bien sûr, vous pouvez également omettre le titre ne pas écrire.