Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

---

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

---

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

---

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

---

Das Tab-Menü eignet sich besonders zur Strukturierung von umfangreichen Inhalten auf einer Website. Es ermöglicht dem Nutzer, schnell und einfach zwischen den punktuellen Inhalten zu navigieren. Zudem kann ein Tab-Menü auch mit einem separaten Inhaltsverzeichnis versehen werden, um die Übersichtlichkeit zu erhöhen. Es erleichtert den Lesern, schnell zu den Informationen zu gelangen, die für sie am relevantesten sind.

Es kann auch für Produktseiten oder Kataloge verwendet werden, um verschiedene Produktkategorien oder Funktionen zu präsentieren. Die Verwendung eines Tab-Menüs kann dazu beitragen, dass der Inhalt einer Seite weniger überwältigend wirkt und den Lesern ein angenehmeres Leseerlebnis bietet.

Das Tab-Menü

Das Tab-Menü ist sowohl für eine übersichtliche als auch punktuelle Darstellung von Inhalten geeignet. Das Plug-in 'Tabby Responsive Tabs' eignet sich hierfür besonders gut.

Der Hinsicht SEO

Was die SEO betrifft, werden die Inhalte des Tab-Menüs in Suchmaschinen indexiert. Das ist anders, wenn die Inhalte separat im Plug-in erstellt werden müssen, wie beispielsweise beim Ditty News Ticker, wo die Inhalte über einen Shortcode eingefügt werden. Im oben genannten Fall ist dies jedoch nicht relevant, da der Inhalt direkt im HTML-Bereich eingefügt wird.

Tab-Menü und die Suche im Beitrag

Wenn man auf einer Website nach einem bestimmten Begriff suchen möchte, kann man in jedem Browser die Suchfunktion aufrufen, indem man die Tastenkombination cmd+f für Mac oder strg+f für Windows [ˈvɪndoːs] verwendet.

Allerdings ist diese Art der Suche innerhalb des Tab-Menüs nicht immer effektiv, da die Suchergebnisse auch Inhalte in anderen Tabs anzeigen können, die gerade nicht geöffnet sind. Daher ist diese Suchfunktion möglicherweise ungeeignet, wenn man gezielt nach einem bestimmten Begriff innerhalb des Tab-Menüs suchen möchte.

Der Inhalt so gut strukturiert in einem Tab-Menü!

Plug-in Tabby Responsive Tabs

… das Plug-in Tabby Responsive Tabs überzeugt in Anwendung und Performanz.

[tabby title="First Tab"]
Tabby kitty: "füttere mich".
[tabby title="Second Tab"] 
– und lege mir dann katzenminze in einem baum.
[tabby title="Third Tab"]
… ich klettere auch auf die vorhänge wie auf einen baum. – gib mir fisch.
[tabbyending]

Tabgruppe 1

First Tab

Tabby Kitty: "… füttere mich".

Second Tab

– und lege mir dann katzenminze in einem baum.

Third Tab

… ich klettere auch auf die vorhänge wie auf einen baum. – dafür gib mir dann das sackerl futter.

Mehrere Tabgruppen

Im Vergleich zu anderen Plug-ins könnte man denken, dass es schwierig ist, 'Tabby Responsive Tabs' mehrmals auf derselben Seite einzufügen. Allerdings ist dies tatsächlich sehr einfach möglich.

[tabby title="First Tab"]

Content

[tabby title="Second Tab"]

Content

[tabby title="Third Tab"]

Content

[tabbyending]

Nun das zweite Tab-Menü derselben Seite

Tabgruppe 2

Das CSS lässt sich heute im Customizer anpassen. Laut dem Autor des Plug-ins ist es am besten, die gesamte style.css des Plug-ins zu kopieren und im Customizer einzufügen. Zusätzlich sollte man den folgenden Code in die Theme functions.php einfügen:

/* Tabby von separates CSS verwenden */ 
remove_action('wp_print_styles', 'cc_tabby_css', 30);

Dadurch wird die Datei vom Plug-in ausgeschlossen und die im Customizer erstellte CSS-Datei wird verwendet. Nachdem man das CSS über den Customizer angepasst hat, kann man es auch in das Child-Theme übertragen.

Ein Tab-Menü innerhalb eines anderen Tab-Menüs funktioniert nicht! – das wäre hier nur zur Demonstration mal nützlich gewesen.

Das ADD-ON Tabby Link to Tab

Anstatt eine Spende für das Plug-in zu tätigen, kann man sich für das ADD-ON Tabby Link to Tab entscheiden.

Das Feature 'Tabby Link to Tab' ermöglicht es, Registerkarten auf derselben Seite über einen Shortcode zu verknüpfen. Es kann als Inhaltsverzeichnis verwendet werden und bietet auch die Möglichkeit, einen Link zum Öffnen eines Tabs auf derselben Seite oder sogar von einem Link auf einer anderen Seite genau zum gewünschten Menü-Tab zu erstellen.

[tabbylink tab=1 offset=100 fade=400]Tab 1: Im Ersten[/tabbylink]
[tabbylink tab=2 offset=100 fade=400]Tab 2: Im Zweiten[/tabbylink]
[tabbylink tab=3 offset=100 fade=400]Tab 3: Im Dritten[/tabbylink]

Anleitung

In dieser Anleitung wird die Verwendung des Plug-ins als Inhaltsverzeichnis mit Beispielen erläutert, ebenso wie die Gestaltung mit Beispielen und weitere Verwendungszwecke.

Inhaltsverzeichnis

Tabgruppe 3

Tab: Verwendung
Tab: Design der Tab-Links
Tab: Beispiele
Tab: Link auf Webseite mit Tab-Menü exakt den Tab

tabgroup => 1
tab => 1
Offset => 44
Fade => 0
class => NULL (kein Wert)

a.tabbylink {
    border: 1px solid #777;
    border-radius: 3px;
    font-weight: 400;
    color: #333;
    display: block;
    float: left;
    clear: both;
    padding: 0 10px;
    margin-bottom: 20px;
    margin-right: 8px;
    text-align: left;
    text-decoration: none;
}
a.tabbylink:hover {
    border: 1px solid #777;
    background: #e6e6e6;
    color: #333;
}

a.tabbylink-2-4 {
    border: 1px solid #cfdfb7 !important;
    color: #bada55 !important;
}
a.tabbylink-2-4:hover {
    background: #cfdfb7 !important;
    color: #fff !important;
}

@media (max-width: 768px) {
    a.tabbylink {
        display: none;
    }
}

.talifa {
    border: 1px solid #cfdfb7 !important;
    color: #bada55 !important;
}
.talifa:hover {
    background: #cfdfb7 !important;
    color: #fff !important;
}

↑ …Beispiel mit Inhaltsverzeichnis

Tabby im Einklang mit Dark-Mode

Durch den Einsatz des Dunkel-Modus auf der Website ergeben sich Anpassungen im CSS, die die Konformität sicherstellen. Dabei müssen nicht nur der Hintergrund, sondern auch die Tabs anders gestaltet werden.

Obwohl die Änderungen minimal sind, können sie nicht nur über den Customizer oder das Child-Theme vorgenommen werden. Stattdessen muss das CSS-File des Plug-ins in seiner Gesamtheit übernommen werden. Um dies zu erreichen, muss das CSS von Tabby erst mal umgeleitet werden. Dies kann zunächst in der functions.php des Themes durchgeführt werden:

/* Tabby von separates CSS verwenden */ 
remove_action('wp_print_styles', 'cc_tabby_css', 30);

Weiter kann man im Plug-in-Editor die Datei tabby.css öffnen, den Inhalt kopieren und in die style.css des Childs-Themes einfügen und bearbeiten.

• Die Änderung ist in Blau und die Zugabe ist in Gelb

.responsive-tabs .responsive-tabs__list__item:hover {
    color: #b04337;
    background: transparent;
}
.responsive-tabs .responsive-tabs__list__item--active,
.responsive-tabs .responsive-tabs__list__item--active:hover {
    background: none;
    border-color: #ddd;
    border-bottom: 3px solid #a12b00;
    color: #666;
    padding-bottom: 11px;
    margin-top: 0;
    position: relative;
    top: 1.5px;
}
.responsive-tabs .responsive-tabs__panel {
    background: none;
    border: 1px solid #ddd;
    border-top: 1px solid #ddd;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-border-top-left-radius: 0px;
    -moz-border-radius-topleft: 0px;
    border-top-left-radius: 0px;
    clear: left;
    margin-bottom: 0;
    padding: 20px 20px 0;
    word-wrap: break-word;
}

↑ Plug-in Tabby Responsive Tabs 

Tastaturnavigation für Tabby Responsive Tabs

Eine Tastaturnavigation ist für viele Nutzer von Vorteil und wurde auf dieser Website integriert. Mit der Tastatur hindurch die Tab-Taste (Tabulatortaste) kann durch die gesamte Website navigiert werden. Daher sollten auch die Tabs und die Tab-Link in den Tabindex aufgenommen werden.

Tastaturnavigation für Tabby Tabs

• Die Tabs können nach Auswahl durch die Tastaturnavigation mit den Pfeiltasten auf der Tastatur ausgewählt werden.

Child-Theme JavaScript-Datei:

/* --- Tabmenü: Tastaturnavigation Tab --- */

(function($) {

    $(document).ready(function() {

        $('.responsive-tabs__list__item').each(function() {

            var $tabListItem = $(this);

            // Tabindex hinzufügen
            $tabListItem.attr('tabindex', '0');

            // Füge beim Fokussieren eine zusätzliche Klasse hinzu
            $tabListItem.on('focus', function() {
                $(this).addClass('tab-focused');
            });

            // Entferne die Klasse beim Verlassen des Fokus
            $tabListItem.on('blur', function() {
                $(this).removeClass('tab-focused');
            });

            // Tastaturnavigation
            $tabListItem.on('keydown', function (objEvent) {
                switch (objEvent.keyCode) {
                    case 13: // Enter key
                        $tabListItem.click();
                        break;
                    case 37: // Left arrow key
                        if ($tabListItem.prev().length) {
                            $tabListItem.prev().focus();
                            $tabListItem.prev().click();
                        }
                        break;
                    case 39: // Right arrow key
                        if ($tabListItem.next().length) {
                            $tabListItem.next().focus();
                            $tabListItem.next().click();
                        }
                        break;
                }
            });

        });

    });

})(jQuery);

/* - Ende Tabmenü: Tastaturnavigation - */

/* Tabs Tastaturnavigation Fokus */
.tab-focused {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
    background-color: #e9f5ff !important; /* Optional */
}

• Links/Rechts Pfeiltasten: Du kannst zwischen den Tabs navigieren, indem du die Pfeiltasten (Left/Right) verwendest. Wenn der Fokus auf einem Tab liegt und du die Pfeiltaste nach links drückst, wird der vorherige Tab aktiviert, und die Pfeiltaste nach rechts aktiviert den nächsten Tab.
• Tabindex und Role-Attribute: Diese Attribute sind wichtig für die Zugänglichkeit und die korrekte Tastaturnavigation.

Tastaturnavigation für Tabby-Link

Mit Tabby-Link wird die Tastaturnavigation komfortabler. Damit können die Inhalte des Inhaltsverzeichnisses ebenfalls über die Tastaturnavigation ausgewählt werden. Durch Drücken der Enter-Taste wird der Tab geöffnet und, wie gewohnt, der Inhalt des Tabs angezeigt.

Allerdings ist dieser Code im gesamten in der Datei einzupflegen:

• tabby-link-to-tab/js/tabby-link-to-tab.min.js

Dabei sollte der bestehende Code auskommentiert und der neue Code eingefügt und gespeichert werden. Durch das Auskommentieren bleibt der vorherige Code erhalten, sodass man bei Bedarf darauf zurückgreifen kann. Updates für das Plug-in gibt es in der Regel kaum.

/* ––– Tastaturnavigation für Tabby-Link --- */

(function($) {

    // Funktion zum Aktivieren eines Tabs
    function activateTab(tabbygroup, tabbytab, offset, fade) {
        // Make the linked-to tab active
        $('[id^=tablist' + tabbygroup + '-tab].responsive-tabs__list__item--active').removeClass('responsive-tabs__list__item--active');
        $('#tablist' + tabbygroup + '-tab' + tabbytab).addClass('responsive-tabs__list__item--active');
        
        // Accordion
        $('[id^=tablist' + tabbygroup + ']').prev('h2.responsive-tabs__heading--active').removeClass('responsive-tabs__heading--active');
        $('#tablist' + tabbygroup + '-panel' + tabbytab).prev('h2').addClass('responsive-tabs__heading--active');
        
        $('[id^=tablist' + tabbygroup + '-panel]').removeClass('responsive-tabs__panel--active').css("display","none");
        $('#tablist' + tabbygroup + '-panel' + tabbytab).addClass('responsive-tabs__panel--active').css("display","block");
        $('#tablist' + tabbygroup + '-panel' + tabbytab).children().css("display","none").fadeIn(fade);
        
        // Scroll to top of tabgroup
        $('html, body').animate({ scrollTop: $('#tablist' + tabbygroup + '-panel' + tabbytab).offset().top - offset }, 800 );
    }

    // Klicken auf Tab-Link
    $(document).on('click', '.tabbylink', function() {
        var tabbygroup = $(this).data('tabbygroup');
        var tabbytab = $(this).data('tabbytab');
        var offset = $(this).data('offset');
        var fade = $(this).data('fade');
        
        activateTab(tabbygroup, tabbytab, offset, fade);
    });

    // Tastatursteuerung für Tab-Link
    $(document).on('keydown', '.tabbylink', function(event) {
        if (event.which === 13) { // Enter-Taste
            event.preventDefault(); // Verhindert die Standardaktion
            var $this = $(this);
            var tabbygroup = $this.data('tabbygroup');
            var tabbytab = $this.data('tabbytab');
            var offset = $this.data('offset');
            var fade = $this.data('fade');
            
            // Direktes Aufrufen der Funktion zum Aktivieren des Tabs
            activateTab(tabbygroup, tabbytab, offset, fade);
        }
        // Space-Taste wird nicht behandelt, damit die Standard-Browserfunktionalität erhalten bleibt
    });

    // Füge tabindex=0 zu den Tab-Links hinzu
    $(document).ready(function() {
        $('.tabbylink').attr('tabindex', '0');
    });

})(jQuery);

/* – Ende Tastaturnavigation für Tabby-Link - */

1. Tastatursteuerung: Der Event-Handler für keydown reagiert nur auf die Enter-Taste (Code 13). Das event.preventDefault() stellt sicher, dass die Standardaktion der Enter-Taste (falls vorhanden) verhindert wird, und simuliert stattdessen einen Klick.
2. Leertaste (Space-Taste): Wenn die Leertaste (Code 32) gedrückt wird, passiert nichts im Event-Handler. Dadurch bleibt die Standardfunktionalität der Leertaste erhalten, die normalerweise für das Scrollen oder andere Browserfunktionen verwendet wird.

Wenn man nur mit der Tastaturnavigation arbeitet und nach unten gescrollt hat, gelangt man mit einem weiteren Drücken der Enter-Taste wieder zurück zu den Tabs.

CSS ist hierfür auch nicht erforderlich, die Tabby-Links der Markierung werden vom Stil des Themes übernommen.

Zusammenfassung

• Mit Enter lässt sich, wie bei den Links, auch das Inhaltsverzeichnis fokussieren und auswählen.
• Das Inhaltsverzeichnis kann mit Tab durchlaufen werden.
• Die Tabs selbst können nach dem Drücken von Enter und deren direkter Fokussierung (sofern sie das oberste Element im Viewport sind) mit den Pfeiltasten bedient werden.
  • Die Fokussierung des Tabs erfolgt immer dem ersten Tab auch wenn ein anderer Tab geöffnet ist.

Plug-in Aktivierung nur auf bestimmten IDs

Das Tabby-Plug-in ist zwar nicht besonders ressourcenintensiv, dennoch haben wir uns entschieden, es nur dort zu aktivieren, wo es tatsächlich in Anwendung kommt. In der Praxis bedeutet das, dass das Plug-in nur für ausgewählte Beiträge aktiviert wird, bei denen es die Übersichtlichkeit verbessert und zum Inhalt des Beitrags passt.

Wir stellen hier zwei Methoden vor

1. Aktivierung per ID in der functions.php:

• Vorteile:
  • Einfach umzusetzen und direkt zu integrieren.
  • Kein zusätzlicher Aufwand, um weitere Daten zu speichern oder abzurufen.
• Nachteile:
  • Bei jeder Seiten- oder Beitragabfrage wird der Code in functions.php ausgeführt, was bei vielen Anfragen die Performance beeinträchtigen kann.
  • Nicht sehr flexibel, da die IDs im Code hart kodiert sind.

2. Aktivierung durch Individuelles Feld:

• Vorteile:
  • Flexibilität: Du kannst die Aktivierung für spezifische Seiten oder Beiträge in der WordPress-Admin-Oberfläche festlegen, ohne den Code anpassen zu müssen.
  • Zielgerichtete Abfragen: Der Code prüft nur dann auf die Aktivierung, wenn ein Beitrag oder eine Seite tatsächlich geladen wird. Dies kann die Performance verbessern, da die Prüfung nur auf der Basis von gespeicherten Meta-Daten erfolgt.
• Nachteile:
  • Komplexität: Es gibt einen zusätzlichen Schritt beim Erstellen und Verwalten der individuellen Felder.
  • Datenbankzugriffe: Es wird mehr auf die Datenbank zugegriffen, um das individuelle Feld zu prüfen. Das kann bei sehr vielen Beiträgen oder Seiten zusätzliche Datenbankabfragen verursachen.

Erste Methode: Aktivierung per ID in der functions.php

1. Plug-in Deaktivieren: Deaktiviere das Plug-in über das WordPress-Admin-Dashboard. Es wird auf allen Seiten nicht geladen.
2. PHP-Code für gezielte Aktivierung: Füge folgenden Code in die functions.php deines Themes ein. Dieser Code sorgt dafür, dass das Plug-in nur auf den angegebenen IDs aktiv ist, indem es nur die benötigten Skripte und Styles lädt.

/* --- Tabby-Plug-in ist deaktiviert und nur auf bestimmten IDs aktiviert --- */
function load_tabby_plugin_conditionally() {
    // IDs der Seiten und Beiträge, auf denen das Plugin aktiv sein soll
    $allowed_ids = array(123, 456, 789); // Ändere dies nach Bedarf

    if ( ( is_single() || is_page() ) && in_array( get_the_ID(), $allowed_ids ) ) {
        // Nur für die angegebenen IDs das Plugin aktivieren
        if ( file_exists( WP_PLUGIN_DIR . '/tabby-responsive-tabs/tabby-responsive-tabs.php' ) ) {
            require_once( WP_PLUGIN_DIR . '/tabby-responsive-tabs/tabby-responsive-tabs.php' );
        }
        if ( file_exists( WP_PLUGIN_DIR . '/tabby-link-to-tab/tabby-link-to-tab.php' ) ) {
            require_once( WP_PLUGIN_DIR . '/tabby-link-to-tab/tabby-link-to-tab.php' );
        }
    }
}
add_action( 'wp', 'load_tabby_plugin_conditionally' );

/* - Ende Tabby-Plug-in ist deaktiviert und nur auf bestimmten IDs aktiviert - */

Erklärung

• load_tabby_plugin_conditionally: Diese Funktion überprüft, ob die aktuelle Seite eine der angegebenen IDs hat. Wenn ja, wird das Plug-in geladen.
• file_exists und require_once: Diese Zeilen stellen sicher, dass die Plug-in-Dateien nur dann geladen werden, wenn die Bedingung erfüllt ist.

Hinweise

• Backup: Stelle sicher, dass du ein Backup deiner Site machst, bevor du Änderungen an der functions.php vornimmst.
• Kompatibilität: Überprüfe, ob dein Hosting-Provider und WordPress die Methode require_once unterstützen, um Plug-ins so zu laden. Die Standardmethode ist in den meisten Fällen kompatibel.

Falls das Plug-in spezielle Initialisierungen benötigt, die nicht einfach durch require_once erledigt werden können, könnte es erforderlich sein, zusätzliche Funktionen des Plug-ins zu initialisieren oder zu laden. Das oben genannte Beispiel ist jedoch eine einfache und direkte Lösung, die oft ausreichend ist.

Zweite Methode: Aktivierung durch 'Individuelles Feld'

1. Plug-in Deaktivieren: Deaktiviere das Plug-in über das WordPress-Admin-Dashboard. Es wird auf allen Seiten nicht geladen.
2. Füge ein individuelles Feld hinzu:
   • Gehe zu dem Beitrag oder der Seite und füge ein individuelles Feld hinzu:
     • activate_tabby mit dem Wert 1).
3. Code zur Aktivierung des Plug-ins:

/* --- Tabby-Plug-in ist deaktiviert und wird unter IndF durch 'activate_tabby' mit dem Wert '1' aktiviert --- */

function load_tabby_plugin_conditionally() {
    // Überprüfe, ob der Beitrag oder die Seite das individuelle Feld hat
    if ( is_single() || is_page() ) {
        $activate_tabby = get_post_meta( get_the_ID(), 'activate_tabby', true );
        if ( $activate_tabby ) {
            // Nur für die Seiten und Beiträge, bei denen das individuelle Feld gesetzt ist
            if ( file_exists( WP_PLUGIN_DIR . '/tabby-responsive-tabs/tabby-responsive-tabs.php' ) ) {
                require_once( WP_PLUGIN_DIR . '/tabby-responsive-tabs/tabby-responsive-tabs.php' );
            }
            if ( file_exists( WP_PLUGIN_DIR . '/tabby-link-to-tab/tabby-link-to-tab.php' ) ) {
                require_once( WP_PLUGIN_DIR . '/tabby-link-to-tab/tabby-link-to-tab.php' );
            }
        }
    }
}
add_action( 'wp', 'load_tabby_plugin_conditionally' );

/* - Ende Tabby-Plug-in ist deaktiviert und wird unter IndF durch 'activate_tabby' mit dem Wert '1' aktiviert - */

Dieser Ansatz kann potenziell eine bessere Performance bieten, da er nur dann aktiv wird, wenn das individuelle Feld vorhanden ist.

In WordPress beziehen sich individuelle Felder (Custom Fields) auf Daten, die du zusätzlich zu den Standardfeldern eines Beitrags oder einer Seite speichern kannst. Diese individuellen Felder werden in der Datenbank in der Tabelle wp_postmeta gespeichert.

Wie das funktioniert:

• Individuelle Felder speichern: Wenn du ein individuelles Feld hinzufügst oder bearbeitest, wird der Wert in der Tabelle wp_postmeta gespeichert, wobei post_id die ID des Beitrags oder der Seite ist, und meta_key und meta_value die Schlüssel und Werte für das individuelle Feld darstellen.
• Abfragen der Datenbank: Wenn dein Code prüft, ob ein bestimmtes individuelles Feld vorhanden ist (wie in dem Beispielcode gezeigt), führt WordPress eine Datenbankabfrage aus, um diesen Wert zu erhalten. Diese Abfrage wird über die get_post_meta() Funktion durchgeführt.

Beispiel für eine Datenbankabfrage:

Wenn du den Wert eines individuellen Feldes abfragst, sieht die zugrunde liegende SQL-Abfrage ungefähr so aus:

SELECT meta_value FROM wp_postmeta WHERE post_id = X AND meta_key = 'activate_tabby';

Dabei ist X die ID des Beitrags oder der Seite, und 'activate_tabby' ist der Name des individuellen Feldes.

Performance-Aspekte:

• Optimierung: Die Abfrage der wp_postmeta-Tabelle ist in der Regel schnell, da sie auf Indizes für post_id und meta_key zugreifen kann. Trotzdem kann es bei sehr vielen Beiträgen oder Seiten eine zusätzliche Belastung darstellen, insbesondere wenn du viele individuelle Felder abfragst.
• Reduzierung der Abfragen: Durch die gezielte Verwendung von individuellen Feldern und das Minimieren der Anzahl der Datenbankabfragen (z. B. nur dann abfragen, wenn es wirklich nötig ist), kannst du die Performance verbessern.
• Cache-Mechanismen: In größeren Projekten ist es auch sinnvoll, Caching-Mechanismen zu verwenden, um die Auswirkungen der Datenbankabfragen weiter zu minimieren.

Zusammengefasst: Die individuellen Felder und deren Werte werden in der Datenbank gespeichert und beim Zugriff darauf wird eine Datenbankabfrage ausgeführt. Der Vorteil ist jedoch, dass durch die gezielte Nutzung und Optimierung der Abfragen die Performance des WordPress-Systems verbessert werden kann.

OT: Zulernen kann man selbst einer kleinen Bewertung:

So Tests des anderem

…zum anklicke

Das nun folgende Plug-in WP Tabs war so im TEST, daher sind die Shortcodes leer. Mein Eindruck zu WP-Tabs, s. Hello! Die Bewertung ist in Relation zu sehen, welches der Programmierer wollte. Nämlich das mit den Features. Dank dem Autor des Plug-ins.

WP Tabs

Das Plug-in vormals im Namen 'Expand Tabs lite' ist ein Tabmenü. Das Schöne an 'Expand Tabs lite' ist, dass das Einschwenken des Tabinhalts gefällig ist.

'Expand Tabs lite' heißt seit dem Update zur Version 2.0.0 (21.09.19) 'WP Tabs'. Hiermit hat das Plug-in von ca. 109 KB auf 2 MB zugenommen und man hat das gesamte 'pro' mit auf dem Plug-in in einem.

Somit ist das neue WP-Tabs ein Tabmenü für Leute, welche etwas an mehr Features lieben. Erst mal gehört beim Erstellen der Tabs das spielerische Befassen dazu. Wenn – dann sind der Pro Version die Dinge dabei, die das kreieren erst so richtig Spaß machen. Das 'WP Tabs Pro' ist dann ein Tabmenü mit Sinn für Stil.

Anders als dem des Plug-ins Herzstück 'Expand Tabs lite', ist beim Plug-in 'WP Tabs' im WP-Editor nur mehr ein Aufruf zum Shortcode, der durch vorhergehende Erstellung des Inhalts direkt durch das Plug-in möglich ist. S. selbst Dialog Support.

Weiter ist auch hier die Vorlage, wie es mit Inhalt direkt im WP-Editor funktioniert:

[[tr_tabs][ir_item id="1" title="Tab title"]Tab item content ...[/ir_item] [ir_item id="2" title="Tab title"]Tab item content ...[/ir_item] [ir_item id="3" title="Tab title"]Tab item content ...[/ir_item][/tr_tabs]]

Die nun folgende Aufzeichnung ist aus der Version 'Expand Tabs lite 1.0' entstanden. Dieses ist in Installation des Plug-in 'WP Tabs' nur mehr durch ein Rollback zur Version 1.0 realisierbar.

[tr_tabs][ir_item id="1″ title="Tab title"]

Zur konformen Wiedergabe eignet sich Expand Tabs lite der Version 1.0 sowohl für "Standard-Template" mit Inhalts-Seitenleiste (re.) als auch in "Seite mit voller Breite".

Anmerkung für Bilder

Wenn mit Tabmenü mit Inhalt direkt in Beitrag/Seiten "Standard-Templates" keine Inhalts-Seitenleiste konfiguriert ist, wird Beitrag bzw. Seite in gesamter Seitenbreite angezeigt, und ein Bild das mit Text umfließen konfiguriert ist abgeschnitten. So  entweder Beitrag/Seiten mit Inhalts-Seitenleiste oder Bild ohne Textumfluss.

Bilder mit Beschriftung sind im Tab-Menü nicht geeignet, weil mit [ caption ] das nicht responsive ist und die Bilder in voller Größ darstellt. S. weiter im Tab Bspw.

[/ir_item] [ir_item id="2″ title="Design"]

– Die pro Version bietet variables Design, aber an und für sich leistet die freie Version das worauf es ankommt (hier wie immer angebracht: Danksagung dem Könner! – des Plug-ins.

Die Tabs diesem Beispiel sind Farbe und Größe zugeschnitten. Die Farbe ist hier über php-Datei zu verändern, da es im Gegensatz zur Größeneinstellung über CSS nicht ansprach – das php-Programm es so mag.

Die Farbe

Dashboard/Plugin/Editor/WP Expand/wp-expand-tabs-free/plugin-main.php (aktiv), modifiziert:

'background' => '#a4d3ee',
'color' => '#2B566E',

function tr_easy_tabs_pro_wrapper( $atts, $content = null ) {

 extract( shortcode_atts( array(
 'id' => '',
 'background' => '#a4d3ee',
 'color' => '#2B566E',
 'border' => '#f1f1f1',
 'effect' => 'scale',
 'open' => 1,
 'width' => '100%',
 'position' => 'horizontal',
 'hposition' => 'top',
 'vposition' => 'left',
 'rtl' => 'false',
 ), $atts ) );

Die Größe

Dashboard/Plugin/Editor/WP Expand/wp-expand-tabs-free/css/jquery.pwstabs.css (inaktiv), modifiziert:

padding: 8px 16px;


.pws_tabs_container ul.pws_tabs_controll li a{
 display: block;
 background-color: #46B3E6;
 padding: 8px 16px;
 text-decoration: none;
 color: #fff;
 margin-right: 3px;position: relative;
}

[/ir_item] [ir_item id="3″ title="Varia"]

List Stil und Links

Links welche innerhalb des Tabmenü in einer Aufzählungsliste dargestellt sind, sind nur durch Rechtsklick und Auswahl neuen Tab/Fenster zu öffnen.

Beispiel:

• Demo (wp-expand-tabs-free), der Link ist nicht durch anklicke aufrufbar, kann nur durch Rechtsklick und Auswahl im neuen Tab/Fenster geöffnet werden.

Demo (wp-expand-tabs-free), Link ohne Listenpunkt öffnet normal, im gleichen oder neuen Fenster.

Inline-Quelltext – PHP Codes

Tabmenü: Im fortlaufenden Text sind die Tags lediglich der Schriftart in HTML "Courier New" mit farbiger Hinterlegung. Weitere Erklärung hier im Artikel. Folgendes ist nur eine Aufzeichnung, deren zur richtigen Darstellung gereichte es dann mit dem Plug-in 'Tabby Responsive Tabs'. Siehe die nächste Plug-in Beschreibung! 

Zur Darstellung von PHP Codes kann das Tab-Menü ungeeignet sein, da hiermit der Text nach rechts verschoben würde. Da helfen auch keite weiteren Tricks, dies zu umgehen.

Folgendes scheint anderem Zusammenhang zu sein:

Im Tabmenü wie auch im Showhide (Text aus- einkappen) ist scheinbar die Darstellung von Inline-Quelltext durch <code>Inline-Quelltext</code>, ohne Zeilenumbruch vor dem schließenden Tag </code>, nicht möglich.

Beispiel, ohne Zeilenumbruch (Texteditor):

Markiert Text als <code>Inline Quelltext</code> und hier geht’s textlich weiter …

… in etwa angezeigt (pseudo):

Markiert Text als
MARKDOWN_HASH7…tgf2133d89h usw.
und hier geht’s textlich weiter …

Anmerkung, vorbeugend Fehlschluss zur Anzeige MARKDOWN_usw. – Im Tabmenü sowie Showhide (Text aus- einklappen) wird obiges ohne Zeilenumbruch (Enter) vor </code> eben so angezeigt – (ob mit oder ohne Aktivierung "Markdown", s. Dashboard/Einstellungen/Diskussion).

Und, mit Zeilenumbruch (Enter):

Markiert Text als <code>Inline Quelltext ↵
</code> und hier geht’s textuell weiter …

Darstellung:

Markiert Text als Inline Quelltext
und hier geht’s textuell weiter…

↑Darstellung ist CSS: Also der Text kann im Tabmenü nach "Inline Quelltext" nicht normal weiter gereiht werden außerdem ist durch den Zeilenumbruch nach "Inline Quelltext" das rechte Padding vom Background nicht vorhanden und würde erst nochmaligen Zeilenumbruchs (Enter) konform.

Bemerkung: Der Code   zur Darstellung eines Leerzeichens nach "Inline Quelltext" folgt nach umschalten in den Visuellmodus Löschung und würde, im Textmodus abgespeichert, ein lägeres Padding darstellen. 

Normaler Vorformatierung <pre>, oder wie folgend dargestellt mit <pre><code> und Zeilenumbruch vor dem schließenden Tag </code> – sehr wohl konforme Darstellung im Tabmenü:

Normaler Vorformatierung <pre>, oder <code> und Zeilenumbruch vor dem schließenden Tag </code> – sehr wohl konforme Darstellung :-)

Kategorie/Schlagwort

Beiträge mit Tabs, welche durch aufrufe von Kategorie, Tag (Schlagwort) oder Sucherebnissen in einem Fenster aufscheinen, sind die Tabs durch Überschneidung doppelt angezeigt.

Also bei spezifischen Aufruf (Kategorie, Tag, Suchergebnissen) wird das Tabmenü ggf. doppelt angezeigt – daher sollte vor dem Tab-Menü ein More-Tag (weiterlesen → ) eingefügt sein.

Ankerziel im Tab-Menü

Ein Ankerziel im Tabmenü ist nur im ersten Tab möglich, dessen Ankerziel konform dargestellt wird. Um danach denselben (ersten Tab) oder nächsten Tab korrekt zu öffnen, erfordert dies, vorerst den Letzten zu öffnen – somit ist eigentlich von einem Ankerziel im Tabmenü Abstand zu nehmen, s. Beispiel (öffnet in neuem Browsertab/Fenster).

[/ir_item] [ir_item id="4″ title="Bspw."]

Bspw. Da die folgenden Beispiele dies erfordern, ist hier die kurze Erklärung, so, wiedergegeben. Wenn der Inhalt direkt im Editor des Plug-ins 'Add New Tab' erstellt ist, würde folgendes funktionell sein. Also mit anschließenden einfügen des Shortcodes, bspw. [ wptabs id="124″ ] in den WP-Editor. Hingegen den selben Inhalt direkt im WP-Editor im Tabmenü erstellt, als wie hier bspw. die Darstellung unzureichend ist:

 

1. Bei der Darstellung von gewissen Codes im Pre-Tag und / oder Code-Tag verschiebt sich der Inhalt (der Code ist ein bspw.).

add_filter('autoptimize_filter_main_hookpagecachepurge','__return_false');

2. Im Li-Tag gesetzte Links werden durch Anklicken nicht an die URL weitergeleitet.

• Siehe hierzu im Tab 'Varia' List Stil und Links.

3. Bilder mit Bildbezeichnung, so dass in [ caption ] das Bild in voller Größe dargestellt ist:

[/ir_item] [/tr_tabs]

Also obige Ungereimtheiten dürfte im neuen 'WP Tabs' nicht mehr ganz so vorhanden sein, da dies durch die Erstellung direkt im WP Tab Editor funktioniert. – das welches System ich nicht bevorzugen möchte.

Noch mal so Test

Das Plug-in war im TEST okay! – wenns gefällt, bitte schön!

 Text aus- einklappen

Das folgende Plug-in ist hier nicht aktiviert, daher funktioniert es der Beispiele nicht. Bitte beachte, dass der folgende Text nur ein Entwurf ist und bleibt.

[showhide type="pressrelease"]
Im "Editor visuell" kann man den Code einfügen  [ showhide type="pressrelease" ] hier ist Text oder/und Bild [ /showhide ]

Es funktioniert auch nur mit Code [ showhide ] , aber ab zwei Infobuttons per Beitrag/Seite heißt es, da sonstiger Überschneidung, z. B.  [ showhide type="pressrelease1″ ]  und  [ showhide type="pressrelease2″ ] *.

^{* Jeweils ohne Lehrzeichen an den Innenklammern.}

Um nach [ showhide type="pressrelease" ] verlässlich den richtigen Abstand zum folgenden Text evtl.:

Text aus- einklappen[showhide type="2"]<br class="clear" />Text …

Anmerkungen:

Text, der im Shortcode von "showhide" gefasst ist, wird über Lesemodus (Adresszeile im Browser) erst nach Ausklappen des Info Buttons angezeigt. Dann ist die Seite vorheriger Ansicht im Lesemodus erneut zu laden.

Direkt Einstellungsmöglichkeit des Plug-ins sind keine vorhanden, also auch die Geschwindigkeit des öffnen/schließen ist im 'Plug-in Editor' zu bewerkstelligen. Weitere Informationen s. Dashboard/Plugins/Editor wp-showhide/readme.txt.

Text des Öffnen/Schließen Hinweis ändern:

Dashboard/Plugins/Editor in der php-Datei wp-showhide/wp-showhide.php kann der Text modifiziert werden, z. B.: die Wortanzahl (%s More/Less Words) weglassen und ein Image einfügen :

^{Das Image ist hier so ein kleines Bildchen, wie es bspw. über iPads eigene Tastatur eingefügt werden kann.}

// Extract ShortCode Attributes
 $attributes = shortcode_atts( array(
 'type' => 'pressrelease',
 'more_text' => __( '🔘 Info off/on', 'wp-showhide' ),
 'less_text' => __( '⚪ Info on/off', 'wp-showhide' ),
 'hidden' => 'yes'
 ), $atts );

Das zu 'Info off/on' und 'Info on/off' derlei des Bildchens funktionierte erst mit Emoji-Support deaktivieren. S.  https://fastwp.de/4903/.

Die Geschwindigkeit des Aus- und Einklappens definieren:

In selbiger PHP Datei wp-showhide/wp-showhide.php. Im unteren Teil des Scipts kann die Geschwindigkeit des Aus- und Einklappens geändert werden.

Siehe im Plugin Editor, originär:

.toggle('');


Siehe hier, modifiziert:

.toggle('slow');


 <?php else : ?>
 <script type="text/javascript">function showhide_toggle(a,b,d,f){var e=jQuery("#"+a+"-link-"+b),c=jQuery("a",e),g=jQuery("#"+a+"-content-"+b);a=jQuery("#"+a+"-toggle-"+b);e.toggleClass("sh-show sh-hide");g.toggleClass("sh-show sh-hide").toggle('slow');"true"===c.attr("aria-expanded")?c.attr("aria-expanded","false"):c.attr("Arie-expanded","true");a.text()===d?a.text(f):a.text(d)};</script>
 <?php endif; ?>
<?php
}

.toggle('')
= medium (Default), slow ist langsamer und fast ist fast kein sichtbarer Unterschied zu medium (Standard).

Anmerkung, Showhide und "Inline Quelltext":  Die Darstellung im <code> ist ohne Zeilenumbruch vor dem Schlusstag nicht möglich, s. Tabmenü ? "Inline Quelltext".

Im sowohl obiger Version gefällig als auch jQuery Effects, siehe "jQuery fadeToggle() Method", hier im Beispiel .fadeToggle('slow');
gleich der Ausführung dieses Beitrags "Text aus- einklappen":

<?php else : ?>
 <script type="text/javascript">function showhide_toggle(a,b,d,f){var e=jQuery("#"+a+"-link-"+b),c=jQuery("a",e),g=jQuery("#"+a+"-content-"+b);a=jQuery("#"+a+"-toggle-"+b);e.toggleClass("sh-show sh-hide");g.toggleClass("sh-show sh-hide").fadeToggle('slow');"true"===c.attr("aria-expanded")?c.attr("aria-expanded","false"):c.attr("aria-expanded","true");a.text()===d?a.text(f):a.text(d)};</script>
 <?php endif; ?>
<?php
}

• Methode: .fadeToggle('fast');
ist schon ähnlich .toggle('')


• 'slow' 'fast'
 mit Hochkomma,
• millisecunden (z. B. 3000)
ohne Hochkomma.

Falls die internen Links mit Unterstrich sind…

/* Info-Button on/off ohne Unterstrich */
.sh-link A {
text-decoration: none;
}

[/showhide]

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 September