Plugin WP AddQuicktag

Plugin WP-AddQuicktag (Plugin)
Seit kurzem ist hier das Premium Theme Piha von Elmastudio aktiviert. Bei diesem Theme gibt es recht viel Shortcodes, mit denen man die Texte ein wenig aufwerten kann. Das ist nicht schlecht, setzt allerdings ein gutes Gedächtnis voraus.
Da mein Gedächtnis aber leider alles andere als gut ist und ich die vielen Shortcodes nie im Leben im Kopp behalten kann habe ich ein Problem. Es ist umständlich die Dokumentation des Themes Piha immer geöffnet zu haben und beim schreiben eines Artikels immer wieder zwischen den tabs hin und her zu switchen. Also wendete ich die Shortcodes gar nicht bzw. nur sehr selten hier an.

Vorhin fand ich allerdings beim Lutz das Plugin WP AddQuicktag, welches von Frank Bueltge gepflegt und erweitert wurde, da der ursprüngliche Autor die Arbeit eingestellt hat. Ob es was taugt weiß ich noch nicht, doch beim Frank bin ich da guter Dinge.

Hyperlink zur Navigation im Footer via Anker setzen

wplogo200x199

WordPress Themes ohne Sidebar gibts schon länger. Vor allem für Foto -und Videoblogs werden diese gerne verwendet, da der Contentbereich einfach breiter ist und keine Navigation oder andere Elemente, die in der Regel in der Sidebar angezeigt werden, von den Kunstwerken ablenken. Seit dem das Premium Theme Nilmini auf dem Markt ist erleben die Themes ohne Sidebar anscheinend eine Renaissance. Der Trend geht in letzter Zeit eh in Richtung minimalistischer Weblog Themes was Design und Struktur angeht.

Der Rene hats getan, der Horst schon lange und auch ich entfernte die Sidebar und packte die nötigsten Navigationselemente in den Footer.


Für uns Blogger kein Problem. Sehen wir keine Sidebar wissen wir automatisch das die Navigation, das Archiv, weitere Informationen zum Autor und Blog und andere Elemente wie zm Beispiel die aktuellen Kommentare in der Regel im Footer zu finden sind. Doch wie so oft vergessen wir Blogger das es auch noch Menschen gibt, die mit der Bloggerszene nicht so vertraut sind. Ich kann mir gut vorstellen das diese leicht irritiert sind wenn sie keine Navigation an der Seite sehen. Wohl möglich denken diese Besucher dann das die Internetpresänz nur aus einer Seite besteht. Im schlimmsten Fall bekommen sie es mit der Angst zu tun und verlassen den Weblog sofort wieder – im Hinterkopf den Gedanken auf einer Fake-Seite gelandet zu sein.

Na ja, vielleicht ein wenig zu schwarz gemalt, aber es gibt noch einen weiteren einfachen Grund warum es nur suboptimal ist die Navigationselemente in den Footer zu packen. Es zeugt nicht gerade von Benutzerfreundlichkeit des Weblogs, wenn erst zum Footer gescrollt werden muss um den Blog zu durchstöbern. Also habe ich ganz einfach im Header einen Hyperlink hinterlegt, der auf einen “Anker” im Footer verweist. Wird dieser Link angeklickt springt man in Bruchteilen einer Sekunde zum Footer, von wo der Besucher alle Seiten, die Suche sowie die aktuellen Artikel und ein paar Empfehlungen findet.

Ich hoffe das ich durch diese kleine Modifikation die Benutzerfreundlichkeit meines Weblogs ein wenig steigern konnte.

Zum guten Schluss noch die Codeschnipsel aus den Dateien header.php, footer.php und style.css.

</header><!-- end Header -->
<nav class="menue-header">
<a href="#menue-footer" title="zur Navigation springen">Menü</a>
</nav>

Code aus der header.php

<footer id="colophon" class="clearfix">
		<a name="menue-footer"></a>

Code aus der footer.php

nav.menue-header {
	padding:0 0 5px 0;
	text-align:right !important;
	font-size: .7em !important;
	color:#999 !important;
	text-transform: lowercase;
	/*font-weight:bold;*/
	}
nav.menue-header a {
	color:#999 !important;
	letter-spacing:0.2em !important;
	}
nav.menue-header a:hover {
	color:#999 !important;
	text-decoration:none !important;
	}

Code aus der style.css

aufgeräumt und das WordPress Theme Yoko weiter angepasst

wplogo200x199

Seit einiger Zeit gibt es das WordPress Premium Theme Nilmini von Elmastudio. Aufmerksam geworden auf dieses wirklich schöne Theme bin ich durch den Querblog. Der Horst hat wirklich ein Händchen für Farben und Struktur was Websites angeht. Bis jetzt hat mir noch jedes Redesign von ihm gefallen. Da bin ich echt ein bisschen neidisch. Mehrere Tage habe ich mit mir selbst gerungen ob ich auch das Theme Nilmini kaufen soll. Es kostet 12,- € und ist jeden Cent wert. Der Preis hat mich also nicht vom Kauf abgeschreckt. Vielmehr will ich nicht andauernd das Design ändern wegen dem Wiedererkennungswert meines Blogs – ihr versteht?

Als ich aber dann in den Webmastertools sah das die ganzen Links die ich in der Sidebar drin hatte so gut wie nie geklickt werden entschloss ich mich dann doch dazu die Sidebar zu entfernen und stattdessen im Footer einen dreispaltigen Bereich für Widgets einzurichten. Dazu befolgte ich die Anleitung Tutorial: Widget-fähiger Footer mit 3 Spalten für ein YOKO Child-Theme | Morvagor’s Blog, die super ausführlich und mit einfachen Worten erklärt wie im Footer ein Bereich für Widgets erstellt wird. Noch schnell ein wenig das CSS angepasst, die Buttons für die Social Networks geändert und fertig ist der dreispaltige [wpseo]Widgetbereich im Footer[/wpseo].

Dort finden sich nun nur noch die Suche, die Buttons der Social Networks, die Seiten, die aktuellen Artikel und ein wenig Werbung. Alle anderen Widgets fanden bis jetzt keine Beachtung da die Links nicht geklickt wurden, warum sollte ich meinen Weblog also damit unübersichtlich machen? Ich denke eh, das die meisten Artikel nur im Reader gelesen werden und der Weblog nur von denen angesurft wird die kommentieren wollen.

Ich entschloss mich dafür das Theme Yoko, welches ebenfalls von Elmastudio ist weiter meinen Bedürfnissen anzupassen und nicht das Premium Theme Nilmini zu kaufen weil ich schon ziemlich viel an diesem Theme geändert habe (Adsense, Post-Meta-Daten usw.) und ich keine Lust hatte wieder ein Child-Theme komplett neu zu erstellen.

Nachteil meiner Vorgehensweise wird sein das nun das Theme, so wie ich es verwende nicht mehr zu hundert Prozent ein responsive Layout hat, da ich verschiedene Breitenangaben in der CSS-Datei änderte. Es sind zwar immer noch Werte in Prozent, doch sind diese Werte nicht mehr auf die diversen Smartphones und Tablets abgestimmt. Da wären Rückmeldungen über die Darstellung auf diesen Geräten nett ob die Anzeige ok ist.

So, und da mich nun doch ein wenig mein schlechtes Gewissen plagt, weil ich nicht das Theme Nilmini gekauft habe, ich aber mehr als begeistert von der Arbeit von Elmastudio bin, werde ich nun mal schauen wie ich den beiden eine Spende zukommen lassen kann.

Post-Meta-Daten durch benutzerdefinierte Felder ergänzen

Die Funktion der benutzerdefinierten Felder in WordPress ist wirklich eine tolle Sache. Merkwürdiger Weise wird sie kaum genutzt. Mir kommt es so vor das nur die richtigen Cracks (Nerds) den benutzerdefinierten Feldern die Beachtung schenken, die sie auf Grund ihrer Vielseitigkeit auch verdienen. Dabei ist es eigentlich ziemlich einfach diese im eigenen Weblog zu nutzen, um dem Besucher einen gewissen Mehrwert zu bieten. Mit den benutzerdefinierten Feldern können die Meta-Daten von Artikeln mit Informationen angereichert werden, sie können verwendet werden um z.B. Werbung in Artikeln einzubauen und sogar außerhalb des Loops können sie eingesetzt werden.

Ich habe vor ein paar Wochen zwei [wpseo]benutzerdefinierte Felder[/wpseo] in die singel.php eingebaut um meine Quellen und die im Artikel verlinkten Websites bei den Meta-Daten des Artikels auszugeben. Bis dato hatte ich einfach am Ende jeden Artikels diese Angaben im Texteditor von [wpseo]WordPress[/wpseo] eingegeben, doch das gefiel mir nicht so gut, da diese Angaben meiner Meinung nach nicht zum Artikeltext gehören sondern halt zu den Meta-Daten. Der Code aus meiner single.php, der für die Darstellung der Felder verantwortlich ist sieht folgendermaßen aus.

benutzerdefiniertes Feld mit variabler Zeichenfolge ausgeben

<?php $sites = get_post_custom_values('site'); ?>
		<?php if(!(empty($sites))) { ?><p>verlinkte Websites: <?php echo $sites[0]; ?></p><?php } ?>
		<?php $quellen = get_post_custom_values('quelle'); ?>
		<?php if(!(empty($quellen))) { ?><p>Quellen: <?php echo $quellen[0]; ?></p><?php } ?>

Dieser Code sorgt wie gesagt dafür das innerhalb der Meta-Daten (also in der grauen Box) die Quellen und die verlinkten Websites angezeigt werden. Zum besseren Verständnis hier der komplette Code meiner Box für die Meta-Daten.

kompletter Code der Meta-Daten

<footer class="single-entry-meta">
	<?php $sites = get_post_custom_values('site'); ?>
	<?php if(!(empty($sites))) { ?><p>verlinkte Websites: <?php echo $sites[0]; ?></p><?php } ?>
	<?php $quellen = get_post_custom_values('quelle'); ?>
	<?php if(!(empty($quellen))) { ?><p>Quellen: <?php echo $quellen[0]; ?></p><?php } ?>
	<?php if ( count( get_the_category() ) ) : ?><p>
	<?php printf( __( 'Categories: %2$s', 'yoko' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) ); ?></p>
	<?php endif; ?>
	<?php $tags_list = get_the_tag_list( '', ' , ' );
	if ( $tags_list ): ?><p>
	<?php printf( __( 'Tags: %2$s', 'yoko' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?></p>
	<?php endif; ?>
	<div class="clear"></div>
	<div class="box">
		<div class="wikios">
			<a href="http://www.wikio.de/high-tech/internet" target="_blank"><script src="http://www.wikio.de/getvote?style=capsulewhite" type="text/javascript"></script></a>
		</div>
		<div class="twittern">
			<iframe src="http://platform.twitter.com/widgets/tweet_button.html?url=<?php echo rawurlencode(get_permalink()) ?>&text=<?php echo rawurlencode(strip_tags(get_the_title())) ?>&lang=de&count=horizontal&via=hartgekocht" style="width:110px; height:20px;" frameborder="0" scrolling="no"></iframe>
		</div>
		<div class="gbut">
			<g:plusone size="medium" count="true" href="<?php the_permalink();?>"></g:plusone>
		</div>
		<div class="fbshare">
			<div id="fb-root"></div><script src="http://connect.facebook.net/de_DE/all.js#appId=220827684602944&xfbml=1"></script><fb:like href="<?php the_permalink();?>" send="false" layout="button_count" width="450"  show_faces="true" font=""></fb:like>
		</div>
		<div class="twitterfollow">
			<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.html?screen_name=hartgekocht&show_count=true&button=grey&text_color=000000&link_color=8D141E&lang=de" style="width:220px; height:20px;"></iframe>
		</div>
	</div>
</footer>

Nun kann ich bei einem Artikel entweder das Feld “site” oder das Feld “quelle” auswählen und im Feld Wert den link eingeben. Dieser muss als html eingegeben werden, also ungefähr so:

<a href="http://www.delijo.de">http://www.delijo.de</a>

[highlight]Wichtig![/highlight] Wenn noch nie bei einem Artikel das Feld eingefügt wurde erscheint das Feld auch nicht bei der Liste der verfügbaren Felder. Dann wird einfach ein neues Feld über den Link “neu eingeben” angelegt.

Zum besseren Verständnis noch ein Screenshot aus meinem Backend.

benutzerdefinierte Felder - Screenshot aus dem Backend

Weitere Möglichkeit für ein benutzerdefiniertes Feld


Ich nutze die benutzerdefinierten Felder indem ich im Backend in dem Textfeld “Wert” eine Zeichenfolge eingebe, die dann in den Meta-Daten angezeigt wird. Also eine Zeichenfolge die immer eine andere ist. Nun kann es ja auch sein das man immer die gleiche Zeichenfolge ausgeben möchte mit Hilfe eines benutzerdefinierten Feldes, zum Beispiel den Code einer Werbeanzeige. Damit diese Zeichenfolge nicht immer aufs Neue eingegeben werden muss sollte der Code in der single.php folgendermaßen aussehen.

benutzerdefiniertes Feld mit fester Zeichenfolge ausgeben

<?php if(get_post_meta($post->ID, ‘Adsense’, true) == ‘1’) : ?>
...Code der angezeigt werden soll, wenn benutzerdefiniertes Feld "Adsense" mit Wert "1"...
<?php endif; ?>

Natürlich bin ich nicht selber auf diese Möglichkeiten gekommen um die benutzerdefinierten Felder in meinem Blog zu nutzen. Ich suchte mir die entsprechenden Informationen einfach im Internet zusammen. Meine Quellen sind:

Warum ich noch mal extra Links in den Meta-Daten setze

Manch einer wird sich jetzt mit Sicherheit die Frage stellen warum ich noch mal extra Links zu meinen Quellen oder den verlinkten Websites in den Meta-Daten setze. Das ist doch doppelt gemoppelt. Also was soll das?

Ganz einfach! Ohne diese Quellen, ohne andere Webistes oder Weblogs die mich inspirieren, gäbe es hier nur einen Bruchteil der veröffentlichten Artikel. Mit anderen Worten: Ohne das Internet und die Bloggerszene im speziellen würde mein Weblog nicht in dieser Form existieren. Also verlinke ich sehr gerne andere Websites, die mir helfen meinen Weblog am Leben zu halten.

Im Artikel sind es meist Hyperlinks zu Unterseiten / Artikeln des Anderen, in den Meta-Daten sind es immer Hyperlinks zu der entsprechenden Hauptseite.

Habe ich schon erwähnt das ich für die gegenseitige Verlinkung im Internet und vor allem innerhalb der Bloggerszene bin? Bin ich!

Werbung oder Vorschaubild auf der Startseite

wplogo200x199

Seit ein paar Wochen wird hier Werbung von Google Adsense eingeblendet. In verschiedenen Formaten und an unterschiedlichen Stellen. Heute geht es um die Einblendung von Werbung auf der Startseite im Teaser des Artikels.
Da Google maximal drei Werbeanzeigen pro Seite anzeigt, ich aber zehn Artikel auf der Startseite ausgeben lasse gibt es ein Problem. Spätestens ab dem vierten Artikel würde nur eine weiße Fläche dort erscheinen wo normalerweise die Werbung wäre. Das ist für mich nicht akzeptabel. Also habe ich ein wenig überlegt und eine Lösung gefunden.

Meine Lösung: Wenn kein Vorschaubild im Artikel – dann Werbung anzeigen

Dazu müssen wir die Template-Datei bearbeiten die für die Ausgabe des Contents auf der Startseite verantwortlich ist. Bei älteren und einfach strukturierten Themes ist dies in der Regel die Datei index.html, die sich im Theme-Ordner befindet. Bei meinem Theme ist es allerdings die Datei content.php. Diese wird in einem Texteditor editiert. Hier empfehle ich notepad++. Ein wahrlich guter Editor mit syntax-highlighting, einer sehr guten “suchen und ersetzen” Funktion und weiteren hilfreichen Features. Ich schweife schon wieder ab -schlimm.

Der Code aus meiner content.php

<?php if ( has_post_thumbnail()) : ?>
	<div class="thumb">
		<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array( 140,140 )); ?></a>
	</div>
<?php else : ?>
	<div class="adsleft">
		<!--hier kommt der Google Adsense Code hin-->
	</div>
<?php endif; ?>

Erklärung des Codes

Zeile 1 : Wenn “if” Vorschaubild “has_post_thumbnail” dann
Zeile 5 : ansonsten “else”
Zeile 9 : Ende der wenn/dann Abfrage

In den Zeilen 2 – 4 ist halt die Ausgabe des Vorschaubildes definiert und in den Zeilen 6 -8 die Ausgabe der Werbung von Google Adsense. Natürlich könnte dort auch etwas anderes eingetragen werden. Meinetwegen ein Standardbild wenn dem Artikel kein Vorschaubild zugeordnet wurde oder von mir aus auch dicke grüne Füße – egal. Der DIV in der Zeile 6 sorgt nur dafür das die Werbung innerhalb des Fließtextes angezeigt wird und ist über CSS-Angaben wie folgt definiert.

.adsleft {
	float:left;
	padding:0 20px 0 0;
	}

Das einzige, was jetzt beim Artikel schreiben beachtet werden muss ist wieviel Werbeanzeigen schon auf der Startseite angezeigt werden. Wenn man wie in meinem Fall jedem zweiten Artikel kein Vorschaubild zuordnen würde erschienen auf der Startseite wieder Artikel mit einer weißen Fläche links neben dem Text. Also schaue ich immer nach auf der Startseite wieviel Werbung bereits eingeblendet wird und ordne dementsprechend ein Vorschaubild dem Artikel zu oder auch nicht.

Ich bin sicher es gibt bei WordPress auch Möglichkeiten dies so zu coden das automatisch gezählt wird wann die nächste Werbung auf der Startseite angezeigt werden kann, doch dafür reicht mein gefährliches Halbwissen nicht aus. Ich finde meine Lösung durchaus praktikabel und glaube auch nicht das die Performance unter dieser kleinen “if”-Abfrage leidet.

Wie habt ihr das bei euch gelöst? Habt ihr Werbung fest eingebunden oder arbeitet ihr auch mit Abfragen um die Einblendung von Werbung zu steuern?