Archiv der Kategorie: Tutorial

WordPress Thumbnailseite mit Artikelbildern

Veröffentlicht am von
1

Für mein Photoblog pabst-photo.com wollte ich vor kurzem eine Seite haben, die einfach nur alle Artikelbilder (post thumbnails) von allen Artikeln als Thumbnails auflistet und mit den jeweiligen Artikeln verlinkt. Somit habe ich eine schöne, visuelle Übersicht über alle Artikel in meinem Photoblog. Vorher hatte ich das Plugin “Category Grid View” im Einsatz, welches jedoch nicht einwandfrei gearbeitet hat, da es die Lightbox auf der kompletten Website zerstört hat.

Die neue Thumbnailseite sieht nun so aus:

pabst-photo.com – Thumbnails

Um dies zu realisieren, habe ich eine neues Seiten-Template (page template) erstellt und mit folgendem Code befüllt:

Weiterlesen →

Shortcode für mehrspaltigen Inhalt in WordPress mit CSS3 Multi-column

Veröffentlicht am von
Kommentar

In diesem Artikel hatte ich beschrieben, wie man Shortcodes definiert, um Inhalte in WordPress in 2 Spalten anzuzeigen. Diese Lösung basierte auf der Definition mehrerer Shortcodes, die DIVs mit entsprechenden Floats generieren.

Hier möchte ich nun eine einfachere Lösung zeigen, die auf dem CSS3 Multi-column Layout Modul basiert. Mit diesem ist es möglich, Inhalte mit nur 1 Shortcode wesentlich flexibler und mit weniger Code in mehreren Spalten darzustellen. Einer der großen Vorteile dieses Moduls ist, dass sich der Inhalt automatisch gleichmäßig auf alle Spalten verteilen lässt.
Weiterlesen →

Google +1 Button in WordPress einfügen

Veröffentlicht am von
5

Seit dem 01. Juni 2011 stellt nun auch Google einen Button zum Empfehlen von Websites bereit (ähnlich Facebook Like-Button). Die Verwendung des Buttons in WordPress ist einfach und erfordert nur wenige Schritte. Links zu weiteren Informationen und Konfigurationsmöglichkeiten findet ihr am Ende des Artikels. Und meinen Google +1 Button rechts in der Sidebar. :)

1. JavaScript-Snippet in der footer.php einfügen

Am besten fügt man diesen Schnipsel in der footer.php vor dem schließenden body-Tag ein:

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
   {lang: 'de'}
</script>
view raw google-plus-button-1.html This Gist brought to you by GitHub.

2. Button-Tag an gewünschter Stelle einfügen

Den Schnipsel für den Button kann man entweder direkt in einem Artikel (im HTML-Editor!), in ein Widget oder natürlich auch in der single.php einfügen:

<g:plusone></g:plusone>
view raw google-plus-button-2.html This Gist brought to you by GitHub.

Weiterführende Links:

Was ist Google +1?: Google +1 Schaltfläche
Offizielle Beschreibung und Code-Generator: Google +1 für Ihre Website
Weitere Konfigurationsmöglichkeiten: API für die +1 Schaltfläche

WordPress: Inhalte mit Shortcodes stylen

Veröffentlicht am von
9

Mit dem Editor lassen sich Inhalte von Artikeln und Seiten nur begrenzt gestalten. Ohne eine Erweiterung lassen sich lediglich Schriftgröße, Farbe, Ausrichtung der Absätze und Schriftschnitt verändern. Möchte man Inhalte noch individueller gestalten und z.B. einen wichtigen Hinweis besonders hervorheben, kann man sich ganz einfach mit Shortcodes weitere Gestaltungsmöglichkeiten schaffen. In meinem Beispiel zeige ich, wie man einen Absatz in eine grüne Box setzen kann.

Weiterlesen →

Teilen-Buttons für Twitter und Facebook per jQuery erst nach dem Inhalt laden

Veröffentlicht am von
Kommentar

Vor Kurzem bin ich bei Torben auf den Artikel Ladezeit: Facebook Like-Button per jQuery nachladen gestoßen. In dem Artikel erklärt er, wie man Facebook’s Like-Button mit ein paar Schnipseln Javascript erst nach dem vollständigen Laden der übrigen Inhalte einbindet. Dadurch verbessert sich die Ladezeit und damit die Bedienbarkeit der Website erheblich, da der Like-Button beim Aufruf Unmengen an Quellcode nachlädt.

Die von Torben vorgestellte Lösung funktioniert problemlos, wenn man nur 1 Like-Button (oder auch Tweetbutton) auf der Seite hat. Bei der von mir vor Kurzem vorgestellten Variante, bei der Facebook- und Twitter-Buttons auf der Indexseite des Blogs unter jedem Artikel angezeigt werden sollen, funktioniert dies jedoch nicht. Der Grund: hier müssen für jeden Artikel die Permalinks ermittelt werden, um sie dem jeweiligen Skript (Facebook oder Twitter) als Parameter mitzugeben. Um die Permalinks während dem Ablauf des Loops zu ermitteln und sie für die spätere Einbindung über jQuery bereitzustellen, muss Torbens Lösung noch ein wenig erweitert werden. Torben war so freundlich und hat mich bei der Erweiterung seiner Lösung unterstützt.
Weiterlesen →

Besucher auf Update des Internet Explorer 6 hinweisen

Veröffentlicht am von
Kommentar

Das Microsofts Internet Explorer 6 nicht die aktuellen Webstandards unterstützt und darüber hinaus für den Nutzer ein Sicherheitsrisiko darstellt, dürfte sich mittlerweile herumgesprochen haben. Leider surfen aber immer noch einige Internet-Nutzer (über 10%) mit dem veralteten Browser. Ich will diesbezüglich gar nicht weiter ins Detail gehen oder diskutieren, wer welchen Browser verwenden soll und darf und ob Webdesigner ihre Websites auch für 10 Jahre alte Browser optimieren müssen. Das wurde in zig anderen Blogs und Foren schon erschöpfend getan. Ich möchte lediglich eine kleine nette Möglichkeit vorstellen, wie man Besucher der eigenen Website dezent auf ein Update hinweisen kann, sofern sie mit dem Internet Explorer 6 unterwegs sind. Mir gefällt dieser dezente Hinweis und ich verwende ihn selbst auf dieser Website.

Weiterlesen →

Touch Icons für Apple iOS und Android erstellen und einbinden

Veröffentlicht am von
2

Wenn man Websites mit mobilen Endgeräten aufruft, auf den Apples iOS oder Googles Android läuft, kann man diese bookmarken und auf dem Homescreen speichern (bei Safari z.B. “-> Zu Home-Bildschirm”). Schön wäre es natürlich, wenn die Bookmarks dann noch ein hübsches Icon haben, das sie wie Apps aussehen lässt. So wie in diesem Beispiel hier.

Das Ganze lässt sich in wenigen Schritten bewerkstelligen.

Weiterlesen →

WordPress Backup in die Cloud

Veröffentlicht am von
Kommentar

So, wie (hoffentlich) jeder die Daten auf dem eigenen Rechner regelmäßig sichert, sollte der sicherheitsbewusste Website-Betreiber auch von seiner/seinen Website(s) regelmäßig Backups anfertigen. Je nach Umfang des Webhostingpakets kann der Provider diese Aufgabe übernehmen. Wer nicht auf den Provider angewiesen sein möchte oder ihm nicht vertraut oder sich einfach mit ein zweites Backup besser fühlt, der sollte die Sache selbst in die Hand nehmen.

Weiterlesen →

Teilen-Buttons für Facebook und Twitter ohne Plugin in WordPress integrieren

Veröffentlicht am von
33

Im Artikel vom Mai 2010 habe ich beschrieben, wie man Teilen-Links ohne Plugins in WordPress realisieren kann. Heute geht es darum, statt Links Buttons zu integrieren.

Ziel: Tweet-Button und Facebook-Like-Button ohne den Einsatz von Plugins in das eigene WordPress-Theme integrieren. Heute mit einer kleinen Steigerung: die Buttons sollen nicht nur auf der Artikeleinzelansicht (single.php) sondern auch auf der Indexseite (index.php) angezeigt werden. Anschauungsbeispiel: am Ende diese Artikels.

Weiterlesen →

WordPress Mini-Tutorial: In Artikeln und auf Seiten zweispaltig schreiben

Veröffentlicht am von
17

Standardmäßig wird der Inhalt von WordPress-Artikeln und -Seiten einspaltig dargestellt. Für ein aktuelles Projekt habe ich nach einer einfachen Möglichkeit gesucht, Inhalte (Texte und Bilder) auch zweispaltig darzustellen. Und zwar flexibel, also im Editor mit einem Shortcode auswählbar und möglichst ohne ein zusätzliches Plugin. Da die Quellen z.T. unvollständig bzw. nicht funktionsfähig waren, fasse ich meine kleine Lösung hier mal kurz zusammen.
Weiterlesen →

Seite 1 von 212