Support » Allgemeine Fragen » Mit Shortcodes divs erstellen?

Mit Shortcodes divs erstellen?

  • gudettmann

    (@gudettmann)


    vor 7 Jahren, 4 Monaten

    Hallo noch mal.

    Für unsere Artikel verwenden wird verschiedene Styles. Also zum Beispiel soll der Text mittig zentriert sein mit Rand nach Links und Rechts während Breitbildgrafiken zum Beispiel Vollflächig dargestellt werden. Zu diesem zweck arbeite ich mit Divs welche die Webseite entsprechend formatieren:

    <div class=“bigimage“> </div>
    <div class=“inhalt content“><div class=“element links artikel“>
    <h1>Hauptüberschrift</h1>
    <h2>Zwischenüberschrift</h2>
    <p> Lorem Ipsum ect ect.</p>
    </div></div>
    <div class=“bigimage“> Bild hier </div>

    Das funktioniert so auch wunderbar. Nun will ich nicht das unsere Redaktionelle Abteilung sich mit HTML rumschlagen muss und versuche die HTMl Schnipsel durch Shortcodes zu ersetzen für die visuelle Anzeige.

    So ist die Einbindung:
    [artikel]
    <h1>Hauptüberschrift</h1>
    <h2>Zwischenüberschrift</h2>
    <p> Lorem Ipsum ect ect.</p>
    [/artikel]

    Mein Code sieht so aus:
    function text_style_artikel( $atts , $content = null ) {
    return ‚<div class=“inhalt content“><div class=“element links artikel“>‘ . $content . ‚</div></div>‘;
    }
    add_shortcode( ‚artikel‘, ‚text_style_artikel‘ );

    Laut dem Tutorial müsste es funktionieren. Ich bekomme aber nur sowas:

    < pre><div class=“inhalt content“><div class=“element links artikel“></div></div></ pre>
    <h1>Hauptüberschrift</h1>
    <h2>Zwischenüberschrift</h2>
    <p> Lorem Ipsum ect ect.</p>
    < pre></ pre>

    Das funktioniert offensichtlich nicht. Nur wie kann ich es funktionierend machen? Aus den diversen Einsteigertutorials wo der gleiche Code für z.B. Kursiv/Fettschreibung benutzt wird darauf nicht eingegangen.
    http://pressengers.de/tipps/shortcodes-fuer-wordpress-erstellen/

    • Dieses Thema wurde geändert vor 7 Jahren, 4 Monaten von gudettmann.
Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)
  • WordPress Entwickler

    (@aminteractiondesign)

    vor 7 Jahren, 4 Monaten

    Bist du im visuellen oder im Text-Modus deines Editors?

    Thread-Starter gudettmann

    (@gudettmann)

    vor 7 Jahren, 4 Monaten

    Also die Ansichten oben sind aus dem TextModus. Ziel ist aber nur im visuellen Modus zu sein.

    Also unsere Redaktion soll im visuellen Modus so arbeiten können:

    [breitbild]

    [/breitbild]
    [artikel]
    Text diverser Form und Größen
    [/artikel]
    [tag-cloud]
    Shortcode für Tagcloud
    [/tag-cloud]

    Die Shot Codes sollen dabei HTML Elemente erzeugen an die ich dann das CSS binde.

    Im Kleinen hab ich es jetzt hinbekommen bei einer Bildergalerie:
    Text-Modus:
    [galery3]
    <i mg src=“meinurl/wp-content/uploads/2016/12/testbild.png“ alt=““ width=“300″ height=“300″ />
    <i mg src=“meinurl/wp-content/uploads/2016/12/testbild.png“ alt=““ width=“300″ height=“300″ />
    <i mg src=“meinurl/wp-content/uploads/2016/12/testbild.png“ alt=““ width=“300″ height=“300″ />
    [/galery3]

    PHP:
    function imagegalery3( $atts , $content = null ) {
    $imagegalery = „<div class=’imagegalery three‘>“.$content.“</div>“;
    return $imagegalery;
    }
    add_shortcode( ‚galery3‘, ‚imagegalery3‘ );

    CSS:
    .imagegalery {
    position: relative;
    width: 100%;
    height: 200px;
    }
    .imagegalery.three img{
    position: absolute;
    width: 20%;
    height: auto;
    max-height: 200px;
    top: 0;
    }
    .imagegalery.three p:nth-child(1) img{
    left: 0;
    }
    .imagegalery.three p:nth-child(2) img{
    left: 40%;
    }
    .imagegalery.three p:nth-child(3) img{
    left: 80%;
    }

    Das funktioniert wunderbar

    • Diese Antwort wurde geändert vor 7 Jahren, 4 Monaten von gudettmann.
    WordPress Entwickler

    (@aminteractiondesign)

    vor 7 Jahren, 4 Monaten

    Ich hab deinen code getestet und bei mir klappt der Shortcode.

    function text_style_artikel( $atts , $content = null ) {
return '<div class="inhalt content"><div class="element links artikel">' . $content . '</div></div>';
}
add_shortcode( 'artikel', 'text_style_artikel' );

    D.h. der Text wird in die divs eingebettet.

    Die <h1> und anderen Tags werden natürlich auch als <h1> ausgegeben, wenn du sie im visuellen Modus eingibst.
    Das ist der Sinn des visuellen Modus.

    Thread-Starter gudettmann

    (@gudettmann)

    vor 7 Jahren, 3 Monaten

    Danke für die Hilfe, ich konnte das problem beheben. 🙂

    Moderator Torsten Landsiedel

    (@zodiac1978)

    vor 7 Jahren, 3 Monaten

    Code bitte immer auch als Code auszeichnen! Danke.

    WordPress Entwickler

    (@aminteractiondesign)

    vor 7 Jahren, 3 Monaten

    Freut mich geholfen zu haben!

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)
  • Das Thema „Mit Shortcodes divs erstellen?“ ist für neue Antworten geschlossen.

Themen-Schlagwörter

Ansichten