Sobald Sie sehen, wie einfach es ist, Text in WordPress zu reduzieren, müssen Sie sich weniger Gedanken darüber machen, Ihre Website mit Inhaltsblöcken zu überladen, die die Lesbarkeit beeinträchtigen.
Zusammenklappbare Inhalte können mit einem Umschalter oder durch Erstellen von Akkordeonmenüs hinzugefügt werden. Einige WP-Designs verfügen über benutzerdefinierte Shortcodes, um überall auf Ihrer Website Akkordeonmenüs einzufügen.
Wenn Ihr Design keine reduzierbaren Inhalte unterstützt, können Sie es manuell mit Plugins oder durch Bearbeiten Ihrer Designdateien hinzufügen.
Es funktioniert sogar mit kostenlosen WordPress.com-Plänen, nur ohne jegliches Styling.
So reduzieren Sie Text in WordPress
Verwenden Sie „Akkordeon“-Plugins oder Shortcode-Plugins mit der „Akkordeon“- oder „Toggle“-Funktion, um Text in WordPress zu reduzieren. Kostenlose WordPress.com-Pläne können Inhalte komprimierbar machen, indem
toni und paul hochzeitsspecial
Der Unterschied zwischen Toggle und Akkordeon in WordPress
Die Akkordeon- und Toggle-Funktionen sind zwei Methoden, mit denen Text in WordPress reduziert werden kann.
Der Unterschied zwischen Umschalt- und Akkordeontext ist folgender …
- Wenn bei einem Akkordeonelement auf einen Abschnitt geklickt wird, wird nur dieser Inhaltsabschnitt geladen. Beim Anklicken des nächsten Akkordeon-Elements schließt sich der vorherige Textabschnitt automatisch.
- Mit der Toggle-Funktion können alle einblendbaren Inhaltsbereiche geladen werden und bleiben geöffnet. Inhaltsfelder, die mit Toggle-Elementen angezeigt werden, schließen sich nicht automatisch.
Auf langen Seiten ist das Akkordeon-Element vorzuziehen, da es verhindert, dass Bildschirme mit Fragen gefüllt werden, die der Benutzer nicht lesen möchte.
Sie können die Titel auf einer FAQ-Seite scrollen und dann, wenn sie eine Frage finden, die sie beantworten möchten, klicken, um nur diesen bestimmten Inhaltsabschnitt anzuzeigen.
Denk darüber so…
Wenn Sie wissen wollten, „wie viel kostet die Lieferung?“, was wäre Ihnen lieber…
a) Einzelne Titelleisten mit spezifischen Fragen in Überschriften-Tags?
Oder
b) Durch 80 Fragen und Antworten scrollen, bis Sie die gewünschte gefunden haben?
Akkordeonelemente machen Ihre Inhalte überschaubarer.
4 Möglichkeiten, Text in WordPress zu reduzieren
1. Verwenden Sie einen Accordion-Block im Gutenberg-Editor
Für diejenigen, die den neuen „Block“- oder Gutenberg“-Editor auf einer selbst gehosteten WordPress-Website verwenden, können Akkordeon-Plugins aus der Seitenleiste Ihres Block-Editors hinzugefügt werden.
Es ist der gleiche Vorgang wie bei der alten Methode zum Hinzufügen von Plugins, um die Funktionalität Ihrer Website zu erweitern. Einfach bequemer, da Sie nicht mehr zum Plugin-Menü gehen müssen, um ein neues Plugin hinzuzufügen.
Laden Sie Ihren Blockeditor, klicken Sie auf das +-Symbol, um einen neuen Block hinzuzufügen, und suchen Sie dann nach „Akkordeon“.
Es sind keine Akkordeonblöcke vorinstalliert. Sie müssen ein Akkordeon-Block-Plugin hinzufügen.
Für unsere Tests war das hinzugefügte Plugin „ Akkordeon “ von „WPDeveloper“.
Die Möglichkeit, Plugins aus dem Dashboard des WP-Blockeditors hinzuzufügen, wurde in WordPress Version 5.6 hinzugefügt.
Wenn Sie eine ältere Version von WordPress verwenden, müssen Sie das Plugin auf die übliche Weise hinzufügen.
Alternativ aktualisieren Sie Ihre WordPress-Version auf die neueste verfügbare Version.
Der Vorteil der Verwendung der neuen Blöcke für Inhalte im Akkordeon-Stil besteht darin, dass die zur Aktivierung erforderlichen JavaScript-Abfragen nur ausgeführt werden, wenn der Block geladen wird.
Früher konnte das Ausblenden der Bilder in einem Akkordeon-Menü dazu beitragen, die Website-Geschwindigkeit zu erhöhen. Jetzt hat WordPress standardmäßig „Lazy Load“ aktiviert. Trotzdem macht es die Präsentation besser.
Um Bilder in erweiterte Inhaltsabschnitte einzufügen, klicken Sie auf die drei vertikalen Punkte, wählen Sie „Als HTML bearbeiten“ und fügen Sie Ihren Bildquellcode mit der folgenden HTML-Zeichenfolge hinzu
<img src="http://yoursite.com/wp-content/uploads/2021/09/your-image-title.jpg" alt="give it an alternative title" width="###" height="###">
Die Bild-URL wird in Ihrer Medienbibliothek angezeigt.
2. Füge einen Akkordeonabschnitt nur mit HTML hinzu (erforderlich für kostenlose WordPress.com-Pläne)
Bei kostenlosen WordPress.com-Plänen gibt es ein Handicap.
Sie können keine JavaScript-Abfragen ausführen, und Sie kann keine WordPress-Plugins installieren entweder. Sie können Text im Texteditor weiterhin reduzieren.
Öffnen Sie Ihre Seite oder Ihren Beitrag im Bearbeitungsmodus und verwenden Sie den „Text“-Editor. Nicht der visuelle Editor.
Der hinzuzufügende Code lautet
<details> <summary>Question 1</summary> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </details>
(so oft wie nötig wiederholen)
Der Vorteil dabei ist, dass Sie es ohne zusätzliche Plugins hinzufügen können und es auch auf kostenlosen WordPress.com-Konten funktioniert.
Da es sich um einfaches HTML handelt, ist das Ergebnis einfacher Text.
Um Stilelemente in ein Akkordeon einzufügen oder Elemente umzuschalten, verwenden Sie ein Plug-in oder codieren Sie Ihre Designvorlage fest.
Plugins sind einfacher, wenn Sie also mit dem Bearbeiten von Code schwach sind, entscheiden Sie sich für ein Plugin. Das Ultimate Shortcodes-Plugin hat mehrere Symbole.
Für die Ängstlichen lesen Sie weiter, um Anweisungen zum Hartcodieren Ihres Designs zu erhalten, um ein benutzerdefiniertes jQuery-UI-Akkordeon zu laden.
3. Verwenden Sie Plugins, um Text im klassischen WordPress-Editor zu reduzieren
Millionen von WP-Benutzern arbeiten immer noch mit dem Classic-Editor. In diesem Fall benötigen Sie ein kompatibles Plugin.
Eines der am einfachsten zu verwendenden Plugins ist …
Akkordeon von PickPlugins
Dieses Plugin hängt sich in die Font Awesome-Bibliothek ein. Fügen Sie den Symbol-
Nach der Installation wird Ihrer Admin-Seitenleiste ein neues Menü hinzugefügt. Klicken Sie auf „Neu hinzufügen“, um beliebig viele Akkordeonmenüs zu erstellen.
Der reduzierte Text kann überall auf Ihrer Website angezeigt werden, wo HTML akzeptiert wird.
Dies kann innerhalb von Posts, Seiten und Widget-Bereichen erfolgen, indem das HTML-Widget verwendet wird. Fügen Sie das Widget hinzu, geben Sie ihm einen Titel, fügen Sie den Shortcode ein und das Akkordeon-Menü wird angezeigt.
Die Breite des Inhalts passt sich automatisch an, sodass kein Herumspielen mit CSS erforderlich ist, um die Anzeigegrößen für verschiedene Bildschirme festzulegen.
Innerhalb des Akkordeonmenüs können Sie HTML verwenden und Bilder einfügen.
Eher als nur Entfernen Sie die letzten Beiträge in WordPress , können Sie noch weiter gehen, indem Sie dieses Akkordeon-Plug-in verwenden, um ein vollständig gestaltetes Widget zu erstellen, um Ihre beliebtesten Inhalte, ausführlichen Leitfäden, Top-Rezensionen und Kaufratgeber direkt in einem einzigen Akkordeon-Widget anzuzeigen.
Mit anderen Worten, es ermöglicht Ihnen eine bessere Nutzung der Widget-Immobilien auf WordPress-Websites.
… Und das alles, während Sie vermeiden, Ihren Seitenleisten-Widget-Bereich zu überladen.
4. Fügen Sie WordPress-Designs ein jQuery-UI-Akkordeon hinzu
Dieser Prozess ist etwas kompliziert, da WordPress die Ausführung von JavaScript innerhalb der Header-Datei nicht zulässt.
Stattdessen sind JS-Skripte bereits standardmäßig auf einer WordPress-Installation registriert. Alles, was Sie tun müssen, ist, sich in sie „einzuhaken“.
Sofern Sie kein eigenes benutzerdefiniertes Design oder Plugin entwickeln, sollten Sie nicht lernen müssen, wie Sie Text in WordPress mithilfe von WordPress-Hooks reduzieren.
Trotzdem schadet es nicht zu wissen, wie es gemacht wird, denn dann können Sie Korrekturen vornehmen, wenn etwas nicht mehr funktioniert. Wie nach a WordPress-Update .
WP-Theme-Entwickler verwenden Hooks im WordPress-Codex, um sich in viele der vorgebündelten Bibliotheken einzuklinken.
Die Funktion „jQuery UI Accordion“ wird ausgeführt, um reduzierbaren Text in WP zu erstellen.
Die Skripte und Dateien zum Reduzieren von Text in WordPress
Erstellen Sie zunächst die JavaScript-Datei.
Verwenden Sie einen einfachen Texteditor wie Notepad und fügen Sie Folgendes ein
//jQuery-ui-accordion
jQuery(document).ready(function($) {
$( "#accordion" ).accordion({
collapsible: true, active: false, heightStyle: "content"
});
});Speichern Sie die Datei als „accordion.js“.
Was dieser Code macht…
Die letzte Codezeile besteht darin, alle Elemente zusammenklappbar zu machen.
Das Setzen des Status „aktiv“ auf „false“ bedeutet, dass der Benutzer klicken muss, um den Inhaltsbereich zu laden. Wenn Sie dies auf „true“ setzen, wird das erste Element in Ihrem Akkordeonabschnitt vorgeladen.
Der letzte Teil für „heightStyle: „content“ bedeutet, dass keine maximale Höhe festgelegt ist. Wenn Sie es auf „Inhalt“ setzen, wird der gesamte Inhalt innerhalb des div-Elements geladen, ohne dass Sie nach unten oder darüber scrollen müssen.
Im obigen Code steht das #accordion für die „div-ID“ und das .accordion für eine „div-Klasse“. Bei denen werden diese hinzugefügt, wenn Sie platzieren
<div ID="accordion"> and <div class="accordion">
… in Ihrem Texteditor wird jQuery ausgelöst.
- [ # ] ist ein Bezeichner
- [ . ] ist eine Klasse
So fügen Sie benutzerdefinierte JavaScript-Dateien zu WP-Designs hinzu
Gehen Sie zu Ihrem cPanel, öffnen Sie das Thema, auf dem Sie das Skript ausführen möchten, und suchen Sie dann nach dem Ordner namens „JS“. Hier können Sie alle JavaScript-Dateien ablegen.
Einige Themes haben den Ordner im Stammverzeichnis der Theme-Dateien Dateipfad: WP Content > Themes > Your Theme > JS.
Andere verwenden möglicherweise einen Unterordner wie einen „Assets“-Ordner innerhalb des Themenordners. Das würde dem Dateipfad folgen: WP Content > Themes > Your Theme > Assets > JS.
Der Ordner für alle JavaScript-Dateien ist JS. Wenn Ihr Thema keine hat, erstellen Sie eine.
Öffnen Sie den JS-Ordner für Ihr Design, klicken Sie auf „Datei hochladen“ und legen Sie Ihre „accordion.js“-Datei ab.
Bearbeiten Sie die functions.php, um das JavaScript zu laden
Dieser Teil weist WordPress an, die JavaScript-Datei zu laden. Auf den meisten anderen Plattformen erfolgt dies in der Header-Datei. Da WordPress auf PHP läuft, kann JavaScript nicht mit dem Alle Rechte Vorbehalten | creme-de-la-creme.jp | Datenschutz-Bestimmungen