Shortcode mit display = "none" ausblenden

  • Hallo zusammen,

    habe eine Seite erstellt bei der per onclick Elemente eingeblendet werden die sonst mit display = "none"
    ausgeblendet sind. dies funktioniert mit Text oder Bildern super, wenn ich aber einen Shortcode verwende wird er dauerhaft angezeigt und lässt sich nicht ausgeblendet.

    Ist dies einfach nicht möglich oder gibt es einen Trick dafür?

    Danke und Grüße
    Michel

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Link zur Seite bitte.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

  • -- entfernt wegen Fehlinterpretation --

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    Einmal editiert, zuletzt von mensmaximus (8. Oktober 2018 um 18:01)

  • Mach aus den <p> Elementen divs. Der Shortcode bricht aus dem Paragraph aus und liegt derzeit nicht innerhalb des auszublenden <p>

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

  • habe aus den <p> divs gemacht aber jetzt werden die Elemente eines nach dem andern hinzugefügt aber nicht wieder ausgeblendet, und das Shortcode Element wird nicht richtig dargestellt

  • Der Javascript Code taucht in der Seite nicht mehr auf.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

  • Den hab ich nicht verändert hier der effektive code der auf der Seite läuft

  • ("ebenen").getElementsByTagName("p"); geht bei divs natürlich nicht. Wie gesagt der Code ist nicht sehr modern und sollte komplett umgeschrieben werden. Ebenso die Art der Einbindung. Egal, Du weißt jetzt wo das Problem liegt (Shortcodes brechen <p> Tags) und kannst Dein Skript überarbeiten.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

  • das <div> im Javascript Code habe ich wohl im eifre des Gefechts übersehen, habe es ergänzt und es läuft wieder nur das jetzt der Shortcod permanent ausgeblendet bleibt.
    du schreibst die Art der Einbindung sollte geändert werden hast du mir da eine Empfehlung?

  • das <div> im Javascript Code habe ich wohl im eifre des Gefechts übersehen, habe es ergänzt und es läuft wieder nur das jetzt der Shortcod permanent ausgeblendet bleibt.

    Klar weil das auch divs sind und Du blendest ja alle divs aus. Arbeite mit Klassen als Slektoren, verwende ein Delegate Event, arbeite mit Objekten und data Eigenschaften schreibe den Code in eine eigene Datei, die Du mit wp_enqueue_scripts() über ein Childtheme einbindest.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

  • dann Danke ich dir für deine Hilfe und werde deine Empfehlung versuchen umzusetzen

    Gruss
    Michel

    Einmal editiert, zuletzt von miba (8. Oktober 2018 um 19:09)

  • 1. Erstelle ein Childtheme
    2. Erstelle eine Datei mit Namen mmx-helper.js
    3. Kopiere folgenden Code in die Datei:


    4. Speichere die Datei im Verzeichnis des Childtehems ab
    5. Kopiere folgenden Code in die Datei functions.php des Childthemes

    Code
    add_action( 'wp_enqueue_scripts', 'mmx_load_scripts', '99' );
    function mmx_load_scripts() {
       wp_enqueue_script( 'mmx-helpers', get_stylesheet_directory_uri() . '/mmx-helper.js');
    }


    6. Entferne Deinen Javascriptcode aus Deinem Code ink. den onclick Events auf den Buttons
    7. Gib Deinen Buttons die CSS Klasse 'toggle-button'
    8. Entferne die Ebenen IDs von allen Elementen und gib den Elementen die Ein-/Ausgeblendet werden sollen die CSS Klasse 'toggle-layer'

    Das ist jetzt mal auf die schnelle gecodet, also keine Garantie für Fehlerfreiheit.

    PS: ich habe noch eine Data Eigenschfat vergessen um die Ebenen anzusprechen. Auf die Buttons muss also z.B. ein data-layer mit dem Namen der Ebene. Fang schon mal an, ich passe das Script an.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

  • So, den Code in 3 ersetzen durch

    Code
    jQuery(document).ready(function($) {
    'use strict';
       $('#ebenen').delegate( '.toggle-button', 'click', function(e){
           e.preventDefault();
           var layer = $(this).data('layer');
           $('.toggle-layer').hide();
           $('#' + layer ).show();
       });
    });

    Vergiss die Punkte 6 und 7. Baue Dein Layout von folgendem Code neu auf:

    Code
    <div id="ebenen">
       <button class="toggle-button" data-layer="ebene2">ebene 2</button>
       <button class="toggle-button" data-layer="ebene3">ebene 3</button>
       <div id="ebene2" class="toggle-layer" style="display:none;">ebene 2</div>
       <div id="ebene3" class="toggle-layer" style="display:none;">ebene 3</div>
    </div>

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

  • Hallo und vielen Dank für deine arbeitet es funktioniert soweit gut und der Shortcode lässt sich ein und ausblenden, nur
    wird das Shortcode Element nun nicht richtig angezeigt.

  • Weil das WooCommerce CSS nicht geladen wird. Was passiert wenn Du das DIV mit dem Shortcode beim Laden anzeigen lässt?

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

  • Bitte lies meinen Beitrag erneut.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

  • Was passiert wenn Du das DIV mit dem Shortcode beim Laden anzeigen lässt?


    entschuldige dass habe ich als Frage verstanden.
    wenn ich richtig verstanden habe muss ich die CSS von WooCommerce hier rein bekommen oder sie mit style rein bekommen.

  • Jetzt wird es aber zäh. Blende das DIV permanent ein und lade die Seite. Ich möchte wissen ob das CSS dann geladen wird.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!