Shortcodes erlauben einem also eine Formatierung des geschriebenen Textes.

Shortcodes erweitern

Basierend auf dem Artikel “How To Use, Style and Implement WordPress Shortcodes” von tuttoaster habe ich dieses einmal getestet, allerdings mit einer etwas anderen Art der Einbindung. Dies erfordert nur einem minimalen Eingriff in das eigene Theme und kann somit recht schnell eingebunden werden.

Einige der Shortcodes benötigen noch etwas CSS, aber dazu später mehr.

Die generelle Erklärung, wie die Shortcode-API von WordPress funktioniert erspare ich mir hier, dazu lest bitte den Artikel von tuttoaster :-)

Create Special List Styles

Dies ist eine Möglichkeit die Listendarstellung etwas zu “pimpen”. Erstellt wird der Shortcode [checklist].

PHP-Code:

1
2
3
4
function checklist($atts, $content = null) {
    return '<div class="checklist">' . $content . '</div>';
}
add_shortcode('checklist', 'checklist');

Einbindung in den Artikel:

1
2
3
4
5
6
7
8
[checklist]
<ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
</ul>
[/checklist]

Beispiel:

[checklist]

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

[/checklist]

Create Box Styles

Hier wird eine Box erstellt, welche Text auf besondere Weise hervorhebt. Erstellt wird der Shortcode [box].

PHP-Code:

1
2
3
4
function box($atts, $content = null) {
    return '<div class="box">' . $content . '</div>';
}
add_shortcode('box', 'box');

Einbindung in den Artikel:

1
[box]Hier der Text der hervorgehoben werden soll[/box]

Beispiel:

Hier der Text der hervorgehoben werden soll

Create Dropcaps

Als Dropcap bezeichnet man den ersten Buchstaben eines Artikels, wenn dieser besonders groß beschrieben wird. Dies kann zuweilen einen sehr schönen Eindruck machen. Erzeugt wird hier der Shortcode [dropcap].

PHP-Code:

1
2
3
4
function dropcap($atts, $content = null) {
    return '<div class="dropcap">' . $content . '</div>';
}
add_shortcode('dropcap', 'dropcap');

Einbindung in den Artikel:

1
[dropcap]M[/dropcap]auris ut lectus erat. In ...

Beispiel:

L

orem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac purus in lectus placerat tempus. Morbi elementum, ipsum sit amet semper eleifend, metus tortor hendrerit libero, nec tempus turpis massa sed tellus. Nulla auctor nisi sed mi vestibulum aliquam. Quisque in enim a ante molestie pulvinar. Phasellus nibh urna, aliquet ac consequat in, scelerisque venenatis libero. Sed convallis eros vel mi ullamcorper id malesuada massa gravida. Nulla a elit at nunc gravida pretium. Integer ac tortor lectus. Nullam feugiat fringilla sodales. Donec eget nisl tellus. Quisque semper nisi vitae dolor faucibus eget elementum velit molestie. Curabitur dictum, risus ac egestas elementum, nisi massa cursus neque …

Hinweis:

Hier muss der Text, welcher dem Dropcap folgt lang genug sein, um das Dropcap zu umschließen, da hier kein clear via CSS eingebunden ist. Ansonsten kann es zu Formatierungsfehlern kommen.

Create a Download Button

Ab und an bietet man doch mal etwas zum Download an. So lange es keine urheberrechtlich geschützte Musik, Videos oder Programme sind, ist dies durchaus OK. Dazu wäre ein Downloadbutton schön. Erstellt wird der Shortcode [download].

PHP-Code:

1
2
3
4
5
6
7
function download($atts, $content = null) {
    extract(shortcode_atts(array(
        "url" => ''
    ), $atts));
    return '<a href="' . $url . '" class="download">' . $content . '</a>';
}
add_shortcode('download', 'download');

Einbindung in den Artikel:

1
[download url="http://www.gentoo.org"]Download Gentoo Linux[/download]

Beispiel

Download
Gentoo Linux

Jquery Slide Up / Slide Down Shortcode

Durch diesen Shortcode wird ein sehr schöner Effekt erzeugt. Damit kann man quasi eine Art “Spoiler”-Funktion erstellen. Man hat einen kleinen Textlink und wenn man drauf klickt “slided” der Rest des Textes darunter hervor. Erzeugt wird hier der Shortcode [slide].

PHP-Code:

1
2
3
4
5
6
7
function slide($atts, $content = null) {
    extract(shortcode_atts(array(
        "title" => ''
    ), $atts));
    return '<a class="slide">' . $title . '</a><p class="slide-next">' . $content . '</p>';
}
add_shortcode('slide', 'slide');

JavaScript-Code:

Diesen am Besten in den Footer verbannen und das jQuery-Script nur laden, wenn es noch nicht geladen ist.

1
2
3
4
5
6
7
8
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery(".slide").click(function() {
        jQuery(this).next("p").slideToggle("slow");
    });
});
</script>

Einbindung in den Artikel:

1
[slide title="Lorem ipsum dolor sit amet"]Mauris ut lectus erat. In condimentum, turpis ac ...[/slide]

Beispiel:

[spoiler title="Lorem ipsum dolor sit amet,"]consectetur adipiscing elit. Ut ac purus in lectus placerat tempus. Morbi elementum, ipsum sit amet semper eleifend, metus tortor hendrerit libero, nec tempus turpis massa sed tellus. Nulla auctor nisi sed mi vestibulum aliquam. Quisque in enim a ante molestie pulvinar. Phasellus nibh urna, aliquet ac consequat in, scelerisque venenatis libero. Sed convallis eros vel mi ullamcorper id malesuada massa gravida. Nulla a elit at nunc gravida pretium. Integer ac tortor lectus. Nullam feugiat fringilla sodales. Donec eget nisl tellus. Quisque semper nisi vitae dolor faucibus eget elementum velit molestie. Curabitur dictum, risus ac egestas elementum, nisi massa cursus neque …[/spoiler]

Post content in column

Hieraus ergibt sich die Möglichkeit einen Teil des Artikels in mehreren Spalten zu gestalten. In diesem Beispiel also zweispaltig. Erzeugt werden die Shortcodes [half_left] und [half_right].

PHP-Code:

1
2
3
4
5
6
7
8
function half_left($atts, $content = null) {
    return '<div class="half-left">' . $content . '</div>';
}
function half_right($atts, $content = null) {
    return '<div class="half-right">' . $content . '</div><br style="clear:both" />';
}
add_shortcode('half_left', 'half_left');
add_shortcode('half_right', 'half_right');

Einbindung in den Artikel:

1
[half_left]Mauris ut lectus erat. In condimentum, turpis ...[/half_left] [half_right]Mauris ut lectus erat. In condimentum, turpis ...[/half_right]

Beispiel:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac purus in lectus placerat tempus. Morbi elementum, ipsum sit amet semper eleifend, metus tortor hendrerit libero, nec tempus turpis massa sed tellus. Nulla auctor nisi sed mi vestibulum aliquam. Quisque in enim a ante molestie pulvinar. Phasellus nibh urna, aliquet ac consequat in, scelerisque venenatis libero. Sed convallis eros vel mi ullamcorper id malesuada massa gravida. Nulla a elit at nunc gravida pretium. Integer ac tortor lectus. Nullam feugiat fringilla sodales. Donec eget nisl tellus. Quisque semper nisi vitae dolor faucibus eget elementum velit molestie. Curabitur dictum, risus ac egestas elementum, nisi massa cursus neque, sed imperdiet nisi justo ut quam. Mauris ornare lobortis mi, a molestie massa tincidunt dignissim. Morbi dui dolor, accumsan ac aliquam vitae, rutrum pharetra nisi. Nulla euismod, erat ultricies vestibulum tempus, nibh sapien tempor ligula, sit amet cursus eros augue vel purus. Vivamus in nisi nec risus molestie consectetur. Pellentesque quis mollis nunc. Fusce lobortis vestibulum vulputate. Sed mattis molestie mauris in venenatis. Pellentesque quis diam et tellus sagittis suscipit.
Duis et mi velit, at pulvinar nisi. Aenean et neque ligula, ut pulvinar massa. Vestibulum varius erat eget nulla molestie sollicitudin. Nunc id sem justo. Suspendisse dui lacus, sodales hendrerit lobortis et, tempus eget mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida tellus eu quam condimentum ut mattis tellus aliquet. Suspendisse risus mi, vehicula ac faucibus ut, porta eget augue. Sed pellentesque pulvinar vestibulum. Sed pharetra egestas augue, vitae imperdiet lectus bibendum ut. Donec nisi felis, ultricies quis fermentum nec, tincidunt non libero. Donec nec ullamcorper lacus. Quisque at cursus magna. Phasellus cursus orci ac sapien pellentesque a euismod augue consequat. Pellentesque molestie varius elit, id luctus risus commodo fringilla. Cras non urna id metus tempor iaculis eget eget massa. Duis malesuada aliquam felis et suscipit. Pellentesque auctor auctor varius. Vivamus id mi nunc.

Hinweis:

Zwischen [half_left] und [half_right] darf kein Zeilenumbruch stehen, sondern es muss ein Leerzeichen sein. Bei einem Zeilenubruch fügt der Editor von WordPress ein <br /> ein.

Wie bindet man diese Shortcodes nun in WordPress ein

Als Erstes muss ich sagen, alle die hier genannten Beispiele funktionieren, wie an den jeweiligen Beispielen zu sehen ist. Die Einbindung in WordPress ist sehr einfach.

Als Erstes erstellt man im Verzeichnis des aktiven Themes eine Datei “shortcodes.php“. In diese Datei trägt man die jeweiligen PHP-Codes ein. Als zweiten Schritt editiert man die Datei “functions.php” und fügt folgenden Eintrag hinzu:

1
2
// Shortcodes einbinden
include_once (TEMPLATEPATH . '/shortcodes.php');

Wenn nun beide Dateien auf den Server hochgeladen sind, funktionieren die Shortcodes auch schon. Aber ich schrieb eingangs, dass einige auch etwas CSS benötigen. Dies wird einfach an die CSS-Datei des Themes drangehängt, da diese definitiv geladen wird.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/* Shortcodes START */
/* Special Checklist */
.checklist ul {
    margin-left: 25px;
    list-style: none !important
}

.checklist ul li {
    padding: 5px 5px 5px 30px;
    background: url(images/check.png) no-repeat center left
}

/* Box */
.box {
    background: #bfe4f9;
    border: 1px solid #68a2cf;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 10px
}

/* Dropcaps */
.dropcap {
    display: block;
    float: left;
    font-size: 50px;
    line-height: 40px;
    margin: 0 8px 0 0;
    font-family: "Palatino Linotype", Georgia, "Tahoma",
        "Century Schoolbook L", Arial, Helvetica;
}

/* Download Button */
.download {
    display: inline-block;
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
    background: -webkit-gradient(linear, left top, left bottom, from(#88c841), to(#73b338));
    background: -moz-linear-gradient(center top, #88c841, #73b338);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 5px 20px;
    text-align: center;
    -shadow: 0px 1px 0px #6c0909;
}

.download:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#73b338), to(#88c841));
    background: -moz-linear-gradient(center top, #73b338, #88c841);
}

/* Slider */
.slide {
    cursor: pointer
}

.slide-next {
    display: none
}

/* Conten in Column */
.half-left,.half-right {
    float: left;
    width: 47%;
    margin: 10px 0;
    margin-right: 6%;
}

.half-right {
    margin-right: 0
}
/* Shortcodes END */

Wie im CSS in Zeile 10 zu erkennen wird hier das Bild für die Checkliste eingebunden. Da sucht euch bitte einfach ein für euch passendes heraus in dem Maßen 30 * 30 Pixel. Am besten eignet sich dafür ein transparentes PNG.

Wer sich die ganzen Shortcodes nicht merken kann, hat die Möglichkeit über ein Plugin mit dem schönen Namen Post Editor Buttons für seinen Editor Buttons zu erstellen, welche diese Shortcodes in den Text einfügen.

Viel Spaß :-)

Artikel weiterempfehlen
Werbung

Relevante Artikel:

24 Meinungen zu “WordPress: Mit eigenen Shortcodes die Artikel stylen”

  1. Please remove this post from your blog, only excerpts please. I don’t want to be penalize due the fact of duplicate content.

    This post and content is property of tuttoaster.com, you can use the things inside but not copy the entire post.

    Antwort ↓

  2. Your just translated it and get traffic from our hard work, when this post isn’t removed or reduced by tomorrow i’ll send out an DMCA to take this down

    Antwort ↓

  3. Well,

    you self are linking to sites showing partly same content and functions. Also these functions are in thousands of copies around the net. The only reason i linked to you was to show where I have found it, so relax and calm down. No reason to bite like a dog :-)

    This is not a 1:1 translation of yours, its written to show my experiences to get this work, and how I get this. Otherwise, you can see it as the german release. I found only english tutorials for this theme and not every user/blogger in Germany speeks english and I think it is interesting for them also.

    Antwort ↓

  4. Hallo!

    Vielen Dank für die Anleitung und die Ausführungen in Deutsch ;-)

    Ich versuche die shortcodes in ein Template zu integrieren. Im Moment scheitere ich daran, da ich nicht genau weiß in welche funktions.php ich die Zeile include_once (TEMPLATEPATH . ‘/shortcodes.php’); wie genau einbinden muss. Vielleicht kannst du das nochmals genauer erläutern?

    Gruß Schos

    Antwort ↓

  5. Hallo Schos,

    Als Erstes erstellt man im Verzeichnis des aktiven Themes eine Datei “shortcodes.php“. In diese Datei trägt man die jeweiligen PHP-Codes ein. Als zweiten Schritt editiert man die Datei “functions.php” und …

    Ich würde meiner zynischen Ader entsprechen, wenn ich sagen würde “wer lesen kann …”, aber das lass ich jetzt ein mal sein. Wie dort zu lesen bezieht sich das alles auf Dateien innerhalb Deines aktiven Themes.

    Antwort ↓

  6. Hallo! Ok, nun ist klar welche funktions.php gemeint ist. Wie genau und an welcher Stelle der code eingefügt werden muss ist mir noch schleierhaft. Ich kann den code innerhalb der einfügen oder davor oder danach. Jedes Mal erscheint danach der code ganz oben auf der webseite?!?

    Antwort ↓

  7. Hallo Schos,

    Folgender Satz ist mir nicht ganz klar.

    Ich kann den code innerhalb der einfügen oder davor oder danach. Jedes Mal erscheint danach der code ganz oben auf der webseite?!?

    Innerhalb der … was ?!?!
    Es reicht eigentlich komplett aus folgende Zeilen an das Ende der functions.php zu setzen. Nach Möglichkeit VOR den schließenden PHP-Tag.

    1
    2
    3
    4
    // Shortcodes einbinden
    // Beispiel MIT schließendem PHP-Tag
    include_once (TEMPLATEPATH . '/shortcodes.php');
    ?>
    Antwort ↓

  8. Innerhalb dessen was ich zwar geschrieben habe, hier aber nicht angezeigt wird, da es sich um “code” handelt ?!? Innerhalb des php tags natürlich…
    [code]

    [/code]

    Das ist die letzte Zeile in meiner funktions.php. Wie soll das nun aussehen? Sorry, aber ich bin in Sachen php nicht sonderlich bewandert …

    Antwort ↓

  10. In dem man vernünftig fragt und einen angemessenen Ton wart und Du hast Dich soeben disqualifiziert.

    Wie das aussehen soll, habe ich Dir oben geschrieben. Ich gebe hier in den Kommentaren keinen Grundkurs in PHP, da solltest Du Dich schon etwas belesen. Alles was man wissen muss dazu, ist in dem Artikel beschrieben.

    Da Du – wie Du selbst sagst – in Sachen PHP nicht sonderlich bewandert bist, solltest Du von Änderungen der WordPressfunktionalität vielleicht vorerst noch die Finger lassen.

    In diesem Sinne.

    Antwort ↓

  11. Es ist schon erstaunlich wie manche Menschen aus dem geschriebenen Wort eine “Ton” entnehmen!? Ich für meinen Teil werden die Suche fortsetzen. Deine Empfehlung kann ich dabei leider nicht beherzigen. Wiederschaun.

    Antwort ↓

  12. Hallo,
    danke für deine Anleitung. Trotz deiner genauen Beschreibung finde ich den richtigen Platz für die Java-Scriptzeilen nicht. [ slide ] wird bei mir von einer Slideshow funktion belegt. Mit [ slider ] sollte es doch keine Probleme geben, oder?
    Das macht mir Kopfzerbrechen:

    Diesen am Besten in den Footer verbannen und das jQuery-Script nur laden, wenn es noch nicht geladen ist.

    Bin da leider nicht so beschlagen. Bring bitte etwas Licht ins Dunkel, danke!
    LG
    Robert

    Antwort ↓

  13. Holla Robert,

    Nein, es sollte mit [ slider ] keine größeren Probleme geben, nur musst Du dann alles etwas anpassen. Um genauer zu sein, der Aufruf der Funktion muss angepasst werden. Ich gebe hier mal ein kleines Beispiel.

    1
    add_shortcode('shortcode', 'function');

    Diese Zeile findest Du ja oben unter jeder Funktion. Damit passiert nichts anderes, als das der Shortcode bei WordPress “angemeldet” wird. Die Funktion add_shortcode hat zwei Parameter, welche übergeben werden müssen. Der Erste gibt den gewünschten Shortcode (ohne Sonderzeichen, Leerzeichen oder Umlaute) wieder und der Zweite ist die Funktion, welche durch den Shortcode aufgerufen werden soll. Möchtest Du nun statt [ slide ] den Shortcode [ slider ] nutzen, so muss der Aufruf wie folgt aussehen.

    1
    add_shortcode('slider', 'slide');

    Nun zu den JavaScripten.
    Es gibt in Deinem Theme eine Datei mit den Namen footer.php. Dort gehören die rein. Wo genau ist fast egal, ich empfehle direkt vor dem schließenden body-Tag. Für das jQuery gibt es einen kleinen Trick, den ich zu der Zeit, als ich den Artikel erstellt habe noch nicht kannte.

    1
    <?php wp_enqueue_script('jquery'); ?>

    Dieses an Stelle der Zeile mit dem HTML-Aufruf des jQuery und es wird von WordPress automatisch überprüft, ob jQuery bereist geladen ist und wenn nicht, wird es geladen.

    Antwort ↓

    • Holla, das gefällt mir ;-)
      Danke für die Bemühungen, leider will es nicht so wie es sollte.
      Habe alles laut Vorgabe gemacht, nichts.
      Habe die Funktion umbenannt (“slidex” falls doppelt) aber wieder nichts.
      Die Funktion ist aktiv die [ slidex ] [ /slidex ] werden nicht gezeigt.
      Die Verständigung per CSS ist in Ordnung – Text verschwindet.
      Bleibt wieder die footer.php-Datei übrig.
      Es funktioniert nicht wenn ich den JavaScript-Code belasse wie oben, aber auch nicht wenn ich eine Anpassung versuche wie statt
      … jQuery(“.slide”).click(function() …
      … jQuery(“.slidex”).click(function() …
      zu verwenden.
      Was übersehe ich da?
      Falls es hilft, meine Testseite.
      Herzlichen Dank
      Robert

      (Der -Code ersetzt die erste Zeile die oben als JavaScript-Code bezeichtet ist. Hab’ ich das richtig verstanden?)

      Antwort ↓

  15. Ich glaub ich habe den Fehler gefunden und muss zugeben, es ist einer den ich in meinem Post gemacht habe :-(

    Und zwar ist hier im JavaScript ein “{” zu viel (gewesen, da bereits behoben). Der Code des JavaScriptes muss natürlich lauten:

    1
    2
    3
    4
    5
    jQuery(document).ready(function() {
        jQuery(".slide").click(function() {
            jQuery(this).next("p").slideToggle("slow");
        });
    });

    Somit wird nun auch kein Syntaxfehler mehr erzeugt.
    Ich bitte dies zu verzeihen.

    Antwort ↓

    • Herzlichen Dank für die Hilfe, jetzt funktioniert alles wunderbar.

      Zwei Fragen hätte ich dann noch:

      Wo finde ich die CSS ID’s oder Klassen zum Anpassen der Facebook-Fanbox? Deine passt top!

      Welchen Avatar-Dienst verwendest du? Mit meinem Avatar kommt die Kommentar Funktion nicht zurecht. Habe es schon mit verschiedenen Grössen versucht. Es passt einfach nicht richtig. Bevor ich jetzt beim Code herum murkse, dachte ich, ich frag mal nach.

      So, aber nun einen schönen Abend noch …
      LG
      Robert

      Antwort ↓

      • Wo finde ich die CSS ID’s oder Klassen zum Anpassen der Facebook-Fanbox? Deine passt top!

        Das von mir verwendete Plugin – welches mir die Box zur Verfügung stellt – bietet die Möglichkeit dieses anzupassen. Allerdings musste ich da auch ganz böse zaubern, da Facebook wohl ein Script laufen lässt, welches zu starke Änderungen an der Farbgebung verhindern soll. Dadurch ergeben sich auch noch ganz andere Phänomene. Ich muss mal schauen, ob ich das irgendwie gelöst bekomme. Die Ideallösung ist es hier noch nicht.

        Welchen Avatar-Dienst verwendest du?

        Gravatar. Der wird von WordPress per default unterstützt. Nun kommt es natürlich auf das verwendete Theme an, ob dieser dort auch unterstützt wird.

  16. Danke für die rasche Antwort.

    Allerdings musste ich da auch ganz böse zaubern

    Ich dachte schon mir ist da etwas entgangen. ;-)

    Nun kommt es natürlich auf das verwendete Theme an

    Evtl. kann das User Photo Plugin mit dem Theme nicht. Muss mal schauen ob ich das überhaupt brauche. LG Robert

    Antwort ↓

  17. Danke für diese Tipps, habe die Liste mal ausprobiert.
    Allerdings scheint WP sehr empfindlich zu reagieren, wenn in verschachtelten Listen dann der Shortcode auftaucht. Man muss immer eine neue Zeile beginnen => Abstände werden riesig /http://bit.ly/paW3HD). Habe schon alles probiert, sämtliche CSS überprüft. Nix. Zuerst hatte ich noch eine weitere SC-Funktion für die Listen 2. Ebene mit kleinem Bild drin, die Seite wurde sehr, sehr lang. Leider musste ich das wieder rausnehmen und mit style =”" einrücken. Vermutlich muss man dann 1 Shortcode mit 2 Listenebenen von vorn herein erstellen?

    Antwort ↓

  19. Super Beschreibung!

    Weißt du zufällig auch wie man einen Shortcode-Button im Editor oder darüber (so wie es einige Plugins machen) erstellen kann.
    Also ich möchte den Autoren die Möglichkeit bieten, per Mausklick einen Shortcode einzubinden.

    Antwort ↓

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Pflichtfelder sind durch * markiert.

Sie können folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>