Viele Male, wenn wir einige Artikel auf WordPress veröffentlichen, enthalten eine Menge Code, ich mag es im Allgemeinen nicht, den Code zu komprimieren, sondern den Code zu formatieren, aber die Formatierung der Anzeige lässt den Inhalt des Artikels in der Regel viel aussehen, nicht bequem für die Besucher zu navigieren, so dass ich heute eine Funktion vorstellen kann, um den Inhalt des Artikels zu erweitern / zu verkleinern.
Methode:
1. Fügen Sie den folgenden Code in header.php hinzu, oder Sie können ihn in eine separate js-Datei schreiben und dann in header.php einführen. Ich bin eingeführt worden.
|
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. Fügen Sie den folgenden Code in function.php ein:
|
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. Sie können den Code optimieren, weil der Standard links ist, nicht gut aussehen, lassen wir ihn in die Mitte ein wenig anzeigen, die spezifische Entfernung kann selbst angepasst werden. Dieser Schritt ist natürlich auch zu ignorieren.
Fügen Sie den folgenden Code in style.css hinzu:
|
1
2
3
|
.xControl { padding-left: 32px;} |
4. Hier können Sie den Kurzcode in den Text einfügen.
Nutzen Sie diese Funktion. Der Titel bedeutet, dass man einige Hinweise hinzufügt, und natürlich kann man den Titel nicht schreiben lassen.