Shortcodes

Unsere Themes haben viele nützliche Shortcodes integriert, mit denen Sie ihren Webauftritt mit WordPress noch umfangreicher gestalten können. Sie können Shortcodes in Artikeln, Seiten und Widgets einbinden. Für ausführlichere Informationen über WordPress Shortcodes, schlagen Sie bitte bei WordPress Codex nach.

1. Standard Shortcodes Nach oben

1.1 RSS abonnieren-Button

Shortcode:

[rss]

1.2 RSS URL

Shortcode:

[rss_url]

1.3 RSS Titel

Shortcode:

[rss_title]

1.4 Aktuelles Jahr

Shortcode:

[year]

1.5 Anzeigen

Optionen:

 - code: 1 - 5
 - align: left, center, right

Shortcode:

[ad]

[ad code="1" ]

Theme Optionen: Anzeigen erstellen

1.6 Back-to-Top Button

Shortcode:

[top]

1.7 Login-Link

Shortcode:

[login_link]

1.8 Blogtitel

Shortcode:

[blog_title]

1.9 xhtml

Shortcode:

[xhtml]

1.10 CSS

Shortcode:

[css]

1.11 Theme-URL

Shortcode:

[template_url]

1.12 Permalink-URL

Shortcode:

[post_link]

1.13 Suche-Formular

Shortcode:

[search]

2. Infoboxen Nach oben

Info-Boxen sind nützlich, wenn Sie Ihre Website-Besucher durch visuelle Art und Weise über etwas informieren möchten.

Optionen:

 - type: info, alert, tick, download, note
 - size: medium, large
 - style: rounded
 - border: none, full
 - icon: none OR full URL to a custom icon

Beispiele:

Shortcode:

[box]Dies ist eine normale Box[/box]
[box type="info"]Dies ist eine Info-Box[/box]
[box type="tick" style="rounded" border="full"]Dies ist ein Kontrollkästchen[/box]
[box type="note"]Dies ist eine Hinweis-Box[/box]
[box type="download"]Dies ist eine Download-Box[/box]
[box type="alert"]Dies ist ein Warnhinweis[/box]

3. Buttons Nach oben

Wenn Sie einen Download-Button oder einen Call-to-Action-Button ohne programmieraufwand auf Ihrer Seite platzieren möchten, sind Button-Shortcodes die Antwort. Mit 6 Farb-, 3 Typ- und 2 Größen-Variationen können Sie benutzerdefinierte Schaltflächen hinzufügen.

Optionen:

 - size: small, large, xl
 - style: info, alert, tick, download, note
 - color: red, green, black, grey OR custom hex color (e.g #000000)
 - border: border color (e.g. red or #000000)
 - text: black (for light color background on button)
 - class: custom class
 - link: button link (e.g http://www.jotothemes.com)
 - shape: circle, rounded, square
 - window: true/false

Farbige Buttons

Red ButtonOrange ButtonYellow ButtonGreen ButtonAqua ButtonTeal ButtonBlue ButtonPurple ButtonPink ButtonSiver ButtonWhite Button

Kleine, große und extra große Buttons

Small ButtonStandard ButtonLarge ButtonXL Button

Geformte Buttons

Circle ButtonRounded ButtonSquare Button

Icons Buttons

Alert ButtonTick ButtonInfo ButtonNote ButtonDownload Button

Benutzerdefinierter Button

Shortcodes:

[button color="red"]Red Button[/button]
[button color="orange"]Orange Button[/button]
[button color="yellow"]Yellow Button[/button]
[button color="green"]Green Button[/button]
[button color="aqua"]Aqua Button[/button]
[button color="teal"]Teal Button[/button]
[button color="blue"]Blue Button[/button]
[button color="purple"]Purple Button[/button]
[button color="pink"]Pink Button[/button]
[button color="silver"]Siver Button[/button]
[button color="white"]White Button[/button]

[button size="small"]Small Button[/button]
[button]Standard Button[/button]
[button size="large"]Large Button[/button]
[button size="xl"]XL Button[/button]

[button shape="circle"]Circle Button[/button]
[button shape="rounded"]Rounded Button[/button]
[button shape="square"]Square Button[/button]

[button style="alert" color="silver"]Alert Button[/button]
[button style="tick" color="silver"]Tick Button[/button]
[button style="info" color="silver"]Info Button[/button]
[button style="note" color="silver"]Note Button[/button]
[button style="download" color="silver"]Download Button[/button]


[button color="#f0f0f0" border="#555" style="tick" text="dark" shape="rounded" class="my-button"]Button[/button]

4. Horizontale Linie Nach oben

Sie können Ihre Texte leicht trennen, indem Sie entweder eine horizontale Linie oder einen Teiler (wie hr nur ohne CSS-Kontur; also ideal für mehr Freiraum zwischen Text) hinzufügen.

Beispiele:

Shortcodes:

[hr]
[divider]
[divider_flat]

5. Zitat Nach oben

Sie können CSS vorgestylte Zitate in Ihre Seiten und Artikel einbinden.

Optionen:

 - style: boxed
 - float: left, right

Beispiele:

Shortcodes:

[quote]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.[/quote]

[quote style="boxed"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.[/quote]

[quote style="boxed" float="left"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.[/quote]

[quote style="boxed" float="right"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.[/quote]

6. Icon links Nach oben

Sie können CSS gestylte Links mit Icons einbinden.

Optionen:

 - style: download, note, tick, info, alert
 - url: the url for your link
 - icon: add an url to a custom icon
 - title: optional title attribute

Beispiele:

download note tick info alert

Shortcodes:

[ilink style="download" url="http://jotothemes.com"]download[/ilink]

[ilink style="note" url="http://jotothemes.com"]note[/ilink]

[ilink style="tick" url="http://jotothemes.com"]tick[/ilink]

[ilink title="Link" style="info" url="http://jotothemes.com"]info[/ilink]

[ilink title="Link" style="alert" url="http://jotothemes.com"]alert[/ilink]

7. Typography Nach oben

Mit unseren Typografie-Shortcodes können Sie Ihre Textinhalte unterschiedlich stylen: Dropcap, Abbreviation, Highlight und Schriften lassen sich ganz leicht durch folgende Shortcodes in Ihren Texteditor einbinden.

[dropcap][/dropcap]
[highlight][/highlight]
[abbr][/abbr]
[typography font="" size="" color=""][/typography]

Beispieltext:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Shortcode:

[dropcap]L[/dropcap]orem ipsum dolor [abbr title="WordPress is wonderful!"]sit amet[/abbr], consectetuer [highlight]adipiscing[/highlight] elit. Aenean commodo ligula eget dolor. Cum sociis [typography font="Lobster" size="16" size_format="px" color="red"]natoque penatibus et magnis dis parturient montes[/typography], nascetur ridiculus mus.

8. Benutzerdefinierte Listen Nach oben

Mit benutzerdefinierten Listen können Sie ansprechende Icons statt des normalen Listen-Styling hinzuzufügen.

Optionen

 - style: tick, red-x, bullet, green-dot, arrow, star

Beispiele

Shortcode:

[unordered_list style="tick"]
<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>
[/unordered_list]

9. Spaltenlayouts Nach oben

Mit den Spalten-Shortcodes ist es sehr einfach, flüssige Spalten-Layouts für Ihre Inhalte zu erstellen. Sie können zwischen sechs Spaltenlayouts wählen oder Ihr eigenes Layout durch Kombinationen verschiedener Spaltentypen bestimmen.

Zwei Spalten-Layout

[twocol_one]
[twocol_one_last]

Beispiel:

Shortcode:

[twocol_one]
 
twocol_one
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.
 
[/twocol_one]
 
[twocol_one_last]
 
twocol_one_last
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.
 
[/twocol_one_last]

Drei Spalten-Layout

[threecol_one]
[threecol_one_last]
[threecol_two]
[threecol_two_last]

Beispiel:

Shortcode:

[threecol_one]
 
threecol_one
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.
 
[/threecol_one]
 
[threecol_one]
 
threecol_one
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.
 
[/threecol_one]
 
[threecol_one_last]
 
threecol_one_last
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.
 
[/threecol_one_last]

Vier Spalten-Layout

[fourcol_one]
[fourcol_one_last]
[fourcol_two]
[fourcol_two_last]
[fourcol_three]
[fourcol_three_last]
[fourcol_four]
[fourcol_four_last]

Beispiel:

Shortcode:

[fourcol_one]
 
fourcol_one
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.
 
[/fourcol_one]
 
[fourcol_two]
 
fourcol_two
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.
 
[/fourcol_two]
 
[fourcol_one_last]
 
fourcol_one_last
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.
 
[/fourcol_one_last]

Fünf Spalten-Layout

[fivecol_one]
[fivecol_one_last]
[fivecol_two]
[fivecol_two_last]
[fivecol_three]
[fivecol_three_last]
[fivecol_four]
[fivecol_four_last]

Beispiel:

Shortcode:

[fivecol_two]
 
fivecol_two
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.
 
[/fivecol_two]
 
[fivecol_one]
 
fivcol_one
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.
 
[/fivecol_one]
 
[fivecol_two_last]
 
fivecol_two_last
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.
 
[/fivecol_two_last]

Sechs Spalten-Layout

[sixcol_one]
[sixcol_one_last]
[sixcol_two]
[sixcol_two_last]
[sixcol_three]
[sixcol_three_last]
[sixcol_four]
[sixcol_four_last]
[sixcol_five]
[sixcol_five_last]

Beispiel:

Shortcode:

[sixcol_one]
 
sixcol_one
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.
 
[/sixcol_one]
 
[sixcol_two]
 
sixcol_two
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.
 
[/sixcol_two]
 
[sixcol_three_last]
 
sixcol_three_last
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus  urna habitant tempus a et, aliquam maecenas molestie nullam.
 
[/sixcol_three_last]

10. Accordion-Inhalte Nach oben

Mit „Content Toggle“ können Sie Inhalte erstellen, die beim Hin- und Herschalten verborgen oder sichtbar werden.

Optionen:

 - title_open: The title text for when the toggle is open
 - title_closed: The title text for when the toggle is closed
 - hide: Hide the toggle box on load
 - display_main_trigger: Display the main trigger on the toggle
 - style: white
 - border: yes

Beispiele:

Shortcodes:

[toggle hide="yes" border="yes" style="white"]Inhalt[/toggle]

[toggle hide="yes"]Inhalt[/toggle]

11. Tab-Inhalte Nach oben

Sie können eigene Registerkarten erstellen, um eine Menge Informationen übersichtlich und leicht zugänglich zu präsentieren.

Optionen:

- style: boxed

Beispiele:

Shortcode:

[tabs style="boxed"]

[tab title="First Tab"]First Tab content goes here.[/tab]

[tab title="Another Tab"]Another Tab content goes here.[/tab]

[tab title="Last Tab"]Last Tab content goes here.[/tab]

[/tabs]

12. Kontakt-Formular Nach oben

Das Kontaktformular ermöglicht die Erstellung von Formularen, um die Interaktion mit Ihren Besuchern zu vereinfachen.

Optionen:

 - email: Use a specific e-mail address (the e-mail address listed under "Theme Options" is used alternatively)
 - subject: A subject line for the e-mail.
 - button_text: Customise the text of the form's "submit" button.

Sie können zusätzliche Felder zu Ihrem Formular hinzufügen:

Text Input: text_fieldname="Text Field Label|Optional Default Text"
Select Box: select_fieldname="Select Box Label|key=value,key=value,key=value"
Textarea Input: textarea_fieldname="Textarea Field Label|Optional Default Text|Optional Number of Rows|Optional Number of Columns"
Checkbox Input: checkbox_fieldname="Checkbox Field Label|Value of the Checkbox|Checked By Default"
Radio Button Input: radio_fieldname="Radio Field Label|key=value,key=value,key=value|Optional Default Value"

Beispiele für jeden Feldtyp werden nachfolgend dargestellt:

Standard Shortcode-Nutzung:

[contact_form]

E-Mail (E-Mail-Empfänger-Adresse):

email="kontakt@jotothemes.com"

Betreffzeile:

subject="Hallo" 

Text Feld:

text_telephone="Ihre Telefonnummer|01234-5678901"

Auswahlbox:

select_besttime="Bevorzugte Anrufzeit|morning=am Vormittag,afternoon=In the Afternoon,evening=am Nachmittag"

Textbereich:

textarea_additionalnotes="Optional zusätzliche Hinweise|Ergänzen Sie zusätzliche Anmerkungen|10|20"

Checkbox Input:

checkbox_specialoffers="Möchten Sie über spezielle Angebote informiert werden?|Ja|yes"

Radio Button Input:

radio_favouritecolor="Lieblingsfarbe|blue=Blau,green=grün,red=Rot|green"

Senden-Buttontext:

button_text="Senden" 

Vollständiger Kontaktformular-Shortcode der oben verwendeten Felder

[contact_form email="kontakt@jotothemes.com" subject="Hallo" contact_form text_telephone="Ihre Telefonnummer|01234-5678901" select_besttime="Bevorzugte Anrufzeit|morning=am Vormittag,afternoon=In the Afternoon,evening=am Nachmittag" textarea_additionalnotes="Optional zusätzliche Hinweise|Ergänzen Sie zusätzliche Anmerkungen|10|20" checkbox_specialoffers="Möchten Sie über spezielle Angebote informiert werden?|Ja|yes" radio_favouritecolor="Lieblingsfarbe|blue=Blau,green=grün,red=Rot|green" button_text="Senden"]

Vollständiges Beispiel für das Kontaktformular der oben verwendeten Felder

13. Social Icons Nach oben

Mit dem Shortcode für Social Icons können Sie Links zu Ihren bevorzugten Social Media-Profilen herstellen, die als Kleine Icon-Grafiken angezeigt werden. Weitere Icons können Sie bei IconFinder finden.

Optionen:

 - url: The link to your social profile. Specifying "feed" in this field will generate a link directly to your WordPress RSS feed.
Optional Arguments:
 - float: Optionally float the icon to the left or right.
 - icon_url: Optionally add a custom icon URL.
 - title: Optionally add a custom title for when the user hovers over your icon.
 - profile_type: Optionally specify the type of profile in use.

Beispiele:

Shortcodes:

[social_icon url="http://twitter.com/jotothemes/" profile_type="twitter" title="Folgen Sie und auf Twitter"]
[social_icon url="https://plus.google.com/+Jotothemes/" profile_type="googleplus" title="folgen Sie uns auf Google Plus"]
[social_icon url="http://facebook.com/Jotothemes" profile_type="facebook" title="Besuchen Sie unsere Facebook-Seite"]
[social_icon url="#" profile_type="delicious" title="unsere Delicious Bookmarks"]
[social_icon url="#" profile_type="youtube" title="Abonnieren Sie unseren YouTube-Kanal"]
[social_icon url="#" profile_type="flickr" title="Unser Flickr Stream"]
[social_icon url="#" profile_type="linkedin" title="Unser LinkedIn Profil"]
[social_icon url="http://jotothemes.com/feed/" profile_type="rss" title="View our RSS Feed"]

14. Social Sharing Buttons Nach oben

Fügen Sie die bekannten Social Sharing Buttons in Ihre WordPress-Seite ein, damit Ihre Besucher Ihre Inhalte auf Twitter, Google+, Facebook und weiteren mit anderen teilen können.

14.1 Twitter Button

Sie können ganz leicht einen Twitter-Button in ihre Seiten einbinden, um Ihre Inhalte auf Twitter teilen zu lassen.

Optionen:

 - style: "horizontal", "vertical", "none" ("none" hides the counter - default: "horizontal")
 - url: specify URL directly
 - source: username to mention in tweet
 - related: related account
 - hashtag: optional hashtags to include.
 - size: optional size of the button (medium or large).
 - text: optional tweet text (default: title of page)
 - float: none, left, right (default: left)
 - lang: 'fr', 'de', 'es', 'js', 'hi', 'zh-cn', 'pt', 'id', 'hu', 'it', 'da', 'tr', 'fil', 'ko', 'sv', 'no', 'zh-tw', 'nl', 'ru', 'ja', 'fi', 'msa', 'pl' (default: english)
 - use_post_url: automatically retrieve the URL to the specific post (useful on archive screens)

Beispiel:

Shortcode:

[twitter]

14.2 Twitter Follow Button

Sie können einen Twitter-Folgen-Button in Ihre Seiten einbinden, um Ihre Besucher zu ermutigen, Ihnen auf Twitter zu folgen.

Optionen:

- username: Your Twitter username. This argument is required.

Optional:
 - align: optional alignment of the button within the shortcode DIV tag container
 - count: show follower count (default is empty and true. Set to "false" to disable follower count)
 - float: none, left, right (default: left)
 - language: en, fr, de, it, es, ko, ja (default: english)
 - width: An optional width, in percentage (50%50px) format.
 - align: Used in conjunction with 'width' to align the button within the shortcode container DIV tag.
 - size: Specify the size of the button (medium or large)
 - show_screen_name: Optionally hide the display of your screen name on the button (set to "false").

Quelle: https://dev.twitter.com/docs/follow-button

Beispiele:

Shortcodes:

[twitter_follow username="jotothemes"]
[twitter_follow username="jotothemes" count="false" size="large"]

14.3 Google +1

Fügen Sie einen „+1“-Button in Ihre Seiten, damit Ihre Besucher ihren Freunden zeigen können, dass ihnen Ihre Inhalte gefallen.

Optionen:

 - href: Optional specific URL to "+1". Takes the current URL if no URL is specified
 - size: standard, small, medium, tall
 - float: none, left, right (default: left)
 - annotation: none, bubble, inline (default: none)
 - callback: optional callback JavaScript function to run when the button is clicked
 - language: optionally change the language to one of the following supported languages: 
 -- Arabic
 -- Bulgarian
 -- Catalan
 -- Chinese (Simplified)
 -- Chinese (Traditional)
 -- Croatian
 -- Czech
 -- Danish
 -- Dutch
 -- English (US)
 -- English (UK)
 -- Estonian
 -- Filipino
 -- Finnish
 -- French
 -- German
 -- Greek
 -- Hebrew
 -- Hindi
 -- Hungarian
 -- Indonesian
 -- Italian
 -- Japanese
 -- Korean
 -- Latvian
 -- Lithuanian
 -- Malay
 -- Norwegian
 -- Persian
 -- Polish
 -- Portuguese (Brazil)
 -- Portuguese (Portugal)
 -- Romanian
 -- Russian
 -- Serbian
 -- Swedish
 -- Slovak
 -- Slovenian
 -- Spanish
 -- Spanish (Latin America)
 -- Thai
 -- Turkish
 -- Ukrainian
 -- Vietnamese

Beispiele:

Shortcodes:

[google_plusone]
[google_plusone size="small" annotation="inline"]

14.4 Facebook Like

Fügen Sie einen „Facebook Like“-Button in Ihre Seiten, damit Ihre Besucher ihren Freunden auf Facebkook zeigen können, dass ihnen Ihre Inhalte gefallen.

Optionen:

- float: none (default), left, right
 - url: link you want to share (default: current post ID)
 - style: standard (default), button_count
 - showfaces: true or false (default)
 - width: 450
 - verb: like (default) or recommend
 - colorscheme: light (default), dark
 - font: arial (default), lucida grande, segoe ui, tahoma, trebuchet ms, verdana
 - locale: optionally add a locale to change the Facebook button's language (eg: de_DE for German or fr_FR for French)

Quelle: http://developers.facebook.com/docs/reference/plugins/like

Beispiele:

Shortcodes:

[fblike]
[fblike style="button_count"]

14.5 Facebook Share

Fügen Sie einen „Share“-Button in Ihre Seiten, damit Ihre Besucher Ihre Inhalte auf Facebkook mit anderen teilen können.

Optionen:

 - type: box_count, button_count, button (default), icon_link, or icon
 - float: none, left, right (default: left)

Quelle: http://developers.facebook.com/docs/share

Beispiele:

Shortcodes:

[fbshare type="box_count"]

14.6 StumbleUpon Button

Fügen Sie einen StumbleUpon Button in Ihre Seiten, damit Ihre Besucher Ihre Inhalte auf StumbleUpon teilen können.

Optionen:

 - design: The format to use to display the badge (horizontal_large (default), horizontal_medium, horizontal_small, icon_small, icon_large, vertical_count)
 - float: The position of the badge (left, right, none (default))
 - url: An optional URL to link to on the badge.
 - use_post: Use the most recent $post variable as the link (useful in archive screens when linking to each individual post). Alternatively, the current page URL is used.

Quelle: http://www.stumbleupon.com/badges/

Beispiele:

Shortcodes:

[stumbleupon]
[stumbleupon design="icon_large"]

14.7 Pinterest „Pin It“-Button

Fügen Sie einen „Pin It“-Button in Ihre Seiten, damit Ihre Besucher Ihre Inhalte auf Pinterest teilen können (Artikelbild oder „Featured Image“ erforderlich).

Optionen:

 - count: The format to use to display the counter (horizontal (default), vertical, none)
 - float: The position of the button (left, right, none (default))
 - url: An optional URL to link to on the button (defaults to current $post URL).
 - image_url: An optional image URL to link to on the button (defaults to current $post's image).
 - use_post: Use the most recent $post variable as the link (useful in archive screens when linking to each individual post).

Quelle: http://pinterest.com/about/goodies/

Beispiele:

Shortcodes:

[pinterest]
[pinterest count="vertical"]

14.8 LinkedIn Share Button

Fügen Sie einen LinkedIn Share Button in Ihre Seiten, damit Ihre Besucher Ihre Inhalte auf LinkedIn mit ihren Geschäftskontakten teilen können (Artikelbild oder „Featured Image“ erforderlich).

Optionen:

 - style: The format to use to display the counter (none (default), top, right)
 - float: The position of the button (left, right, none (default))
 - url: An optional URL to link to on the button (defaults to current $post URL).

Quelle: https://developer.linkedin.com/plugins/share-plugin-generator

Beispiele:

Shortcodes:

[linkedin_share]
[linkedin_share url="http://jotothemes.com/" style="top"]

15. Bild mit Lightbox-Effekt Nach oben

Sie können Bilder mit Lightbox-Effekt versehen. Ideal für Inhalte mit mehreren Bildern.

Shortcode:

[img src='path/to/image.jpg']

16. Videos (Erweitert)Nach oben

Um Videos bekannter Video-Websites in den eigenen Blog einzubinden, wird oft auf Plugins oder Codes zum Einbetten zurückgegriffen. Einbett-Codes haben gegenüber Plugins zwar den Vorteil das WordPress-System zu entlasten, jedoch kann beim Hin- und Herschalten des visuellen- und HTML basierten Editors der Embed-Code beschädigt werden.

Daher ist es seit WordPress 2.9 sehr einfach, Videos in WordPress-Seiten einzubinden (oEmbed). Alles was Sie dafür tun müssen ist, die Video-URL in den Contentbereich, also in den Visuellen oder HTML Editor Ihrer WordPress-Seite einzufügen. Stellen Sie dabei nur sicher, dass die Video-URL nicht als Hyperlink angezeigt wird (anklickbar).

Beispiel:

Schauen Sie sich dieses beeindruckende Video an:

http://www.youtube.com/watch?v=X8CtvrCXktk

Das war ein beeindruckendes Video.

WordPress wird dieses YouTube-Video automatisch in einem p-Tag einfügen. Videos von blip.tv und veoh.com werden dabei leider nicht unterstützt.

Der Video-Shortcode

Um Videos beispielweise für die Formatvorlage „Video“ optimal an das Design anzulehnen, empfehlen wir Videos ohne p-Tag einzufügen. Dazu haben wir diesen Shortcode für Videos erstellt, der außerdem Videos von Blip.tv und veoh.com berücksichtigt. Wie Sie folglich sehen können, ist die Standardnutzung sehr einfach.

Optionen:

 - site: video platform (youtube (default), vimeo, dailymotion, bliptv, veoh, viddler)
 - id: Video ID
 - w: video width (default is "600")
 - h: video height (default is "340")

Standard-Shortcode:

[vid id="dQw4w9WgXcQ"]

Wir empfehlen, die Breite und Höhe an den Anforderungen Ihrer Website anzupassen.

Beispiele für den Einsatz weiterer Video-Plattformen

Wenn Sie Videos anderer Sites als YouTube einfügen möchten, ersetzen Sie einfach die den Parameter site="youtube" durch eines der folgenen Video-Plattformen (    = Video-ID):

1. YouTube youtube (vordefiniert)

   • Video-URL:
     http://www.youtube.com/watch?v=X8CtvrCXktk
   • Shortcode:

     [vid id="X8CtvrCXktk"]
     

2. Vimeo vimeo

   • Video-URL:
     http://vimeo.com/11673745
   • Shortcode:

     [vid site="vimeo" id="11673745"]

3. Dailymotion dailymotion

   • Video-URL:
     http://www.dailymotion.com/video/x11hu58_san-francisco-fog-brouillard-timelapse-hd_creation
   • Shortcode:

     [vid site="dailymotion" id="x11hu58_san-francisco-fog-brouillard-timelapse-hd_creation"]
     

     oder

     [vid site="dailymotion" id="x11hu58"]
     

4. Blip.tv bliptv

   • Video-URL:
     http://blip.tv/beettv/matt-mullenweg-wordpress-6163298
   • Shortcode:

     [vid site="bliptv" id="6163298"]
     

5. Veoh veoh

   • Video-URL:
     http://www.veoh.com/watch/v27458670er62wkCt
   • Shortcode:

     [vid site="veoh" id="v27458670er62wkCt"]
     

6. Viddler: viddler

   • Video-URL:
     http://www.viddler.com/v/52653856
   • Shortcode:

     [vid site="viddler" id="52653856"]
     

17. Screenshots von WebseitenNach oben

WordPress.com bietet über seinen mShots-Service eine schnelle und einfache Möglichkeit, Screenshots von Websites zu generieren. Verwenden Sie dafür folgenden Shortcode, wenn Sie Screenshots von Webseiten für Ihre Online-Projekte und Blogartikel benötigen.

Optionen:

 - url: (Example: http://jotothemes.com)
 - alt: (Example: Screenshot of jotothemes.com)
 - title: (Example: Screenshot of jotothemes.com)
 - w: width (default is "550")
 - h: height (default is "300")

Beispiel:

Shortcode:

[snap url="http://wordpress.org" alt="Screenshot von wordpress.org" w="560" h="305"]

18. Inhalt für registrierte BesucherNach oben

Registrierte Nutzer Ihrer Website sind die wertvollsten Besucher, die Sie haben können. Diese treuen Besucher könnten Sie belohnen. Und eine der besten Möglichkeiten, Ihre registrierten Benutzer zu belohnen, ist mit neuen Premium-Inhalten. Diese Inhalte sind ausschließlich für eingeloggte User reserviert.

Mit Hilfe von folgenden Shortcodes können Sie Premium-Inhalte für eingeloggte User bereitstellen, wogegen das andere Shortcode Standardinhalte für nicht-eingeloggte Besucher platziert.

Shortcodes:

Nicht-eingeloggte Besucher

[visitor]

Inhalte für nicht-registrierte Besucher. 

[/visitor]

Eingeloggte Besucher

[member]

Inhalte für eingeloggte Besucher.

[/member]

19. PDF einbindenNach oben

Sie können PDF-Dateien in Ihre Seiten einbinden.

Optionen:

 - width: PDF width
 - height: PDF height

Shortcode:

[pdf width="630px" height="690px"]http://www.yoursite.com/your.pdf[/pdf]

20. Verwandte Artikel Nach oben

Mit diesem Shortcode können Sie ganz einfach verwandte Beiträge anzeigen. Die Anzeige verwandter Artikel ergibt sich aus den, im Artikel zugewiesenen, ersten Tags.

Optionen:

 - limit: number of posts to show (default: 5)
 - image: thumbnail size, 0 = off (default: 0)

Shortcodes:

[related_posts limit="3"]

21. Externe Dateien integrieren Nach oben

Mit diesem Shortcode können Sie beliebige externe Dateien in Artikeln, Seiten oder Widgets einbinden.

Shortcode:

[show_file file="http://www.ihre-seite.de/ihre-datei.html"]

22. E-Mail-Adressen verschlüsseln Nach oben

Eine sichere Methode, mit der sich E-Mail-Adressen von Spam-Bots verstecken lassen, ist Ihre E-Mail-Adressen zu verschlüsseln. Dieser Shortcode zeigt eine codierte Version von E-Mail-Adressen, die Sie beispielsweise für Ihre Kontaktseite verwenden.

Shortcode

[email]ihre@email.com[/email]

Beispiel

„kontakt@jotothemes.com“ wird im HTML Code umgewandelt in:

<a class="encoded-email" href="mailto:&#107;&#111;&#110;&#116;&#97;&#107;&#116;&#64;&#106;&#111;&#116;&#111;&#116;&#104;&#101;&#109;&#101;&#115;&#46;&#99;&#111;&#109;">&#107;&#111;&#110;&#116;&#97;&#107;&#116;&#64;&#106;&#111;&#116;&#111;&#116;&#104;&#101;&#109;&#101;&#115;&#46;&#99;&#111;&#109;</a>