I’m back… – und diverse Änderungen am Blog

Konnichiwa zusammen! Ich melde mich auch mal wieder nach über einem Monat zu Wort.

Ich würde ja nun zu gerne triftige Gründe nennen, weshalb ich seit Ewigkeiten nichts mehr gepostet habe, aber es gibt keine. Sondern nur Ausreden xD

Gut okay, ich hatte in den letzten Wochen ungemein viel zu tun und habe es immer noch. Soviel das ich nicht einmal mehr weiss wo ich überhaupt anfangen soll. Weshalb ich mich letztendlich auch wieder mit Dingen beschäftige, die ich gar nicht machen sollte. Aber der Hauptgrund weshalb ich nicht mehr gepostet habe, ist schlichtweg die mangelnde Motivation und einiges an Stress. Es lief halt nicht alles ganz so wie geplant und erhofft.

Nichtsdestotrotz war der Blog auf technischer Seite nicht dem völligen Stillstand ausgeliefert!
Ist vermutlich auch gar nicht möglich wenn ein Webdesigner (wie ich zumindest) am eigenen Projekt sitzt… und genau das ist Otaku Cafe nun mal. Es hat sich entsprechend doch einiges im Hintergrund geändert. Ehrlich gesagt, habe ich mich eben selber ertappt wie ich wieder am Blog gebastelt habe, obwohl ich den Beitrag hier angefangen habe… xD

Ja, ich gebe es zu: ich bastel ungemein gerne an meinem Blog rum. Vor allem da ich hier absolute Freiheit habe. Ich kann hier machen und lassen was ich will. Was bei Kundenaufträgen natürlich nicht möglich ist. Ein Punkt der einem den Job ab und an ein wenig madig machen kann. Aber davon kann vermutlich jeder Webdesigner ein Liedchen singen.

Ok, zurück zu den Änderungen der Seite. Ich will und kann natürlich nun nicht auf alles eingehen… zum Teil habe ich auch längst wieder vergessen was ich vor Wochen gemacht habe oder wurde längst wieder überholt. Aber von ein paar größeren und wichtigeren Dinge will ich hier im Beitrag berichten.

Das erste und vermutlich auch bei weitem offensichtlichste ist das breitere Design. Ich hab das Design um 200px vergrößert. Ich würde nun gerne behaupten das es Unmengen an Arbeit war… aber das wäre dreist gelogen. An Reglern rumspielen ist an dieser Stelle weder Arbeit noch sonderlich schwierig. Jedoch sind mit der neuen Größe auch neue Grafiken erforderlich. Ergo: ein neuer Header und der Hintergrund. Effektiv geändert habe ich nur den Header.

Auffällig sind da die drei neuen Charakter. Für meine weiblichen Leser extra Toma aus Amnesia –> ganz links, eine coolere Version von Kirito, Lyfa (SAO) und Suzuha (Steins;Gate) und die blaue Textbox mit dem Blogtitel ohne störende Charakter im Hintergrund. Damit der Titel etwas besser lesbar ist.

Und nun kommen wir zu einer der echten größeren Änderung oder besser gesagt einem Plugin womit einiges möglich sein wird. Und zwar Tabs! Als ich das Plugin gesehen habe, sind mir direkt ein Dutzend tolle und kreative Ideen eingefallen, wie ich es nutzen kann. Und hier ist eine dieser Möglichkeiten: die Sortierung der Abschnitte nach Themen und Interessen

[tabs]

[tab title=“Tabs“]

Das Plugin, welches die Tabs ermöglich, heißt „WordPress Shortcodes„. Mit einiger Arbeit wären die Tabs sicherlich auch ohne Plugin möglich, aber so ist es doch um ein vielfaches angenehmer. Und was mir wirklich ungemein wichtig ist: das Plugin ist SEO freundlich! Der gesamte Text wird ohne JavaScript angezeigt. Natürlich in dem Fall ohne die Tabs… aber der Text ist jederzeit vollständig vorhanden und kann von Google und Co. gelesen und indexiert werden.

Obendrein bietet das Plugin noch einige weitere Shortcodes und damit Funktionen an. Unter anderem auch Sektionen:

[sections] [section title=“Beispielsektion 1″ tip=“Der Tooltipp zur ersten Sektion“]

Auch eine tolle Möglichkeit seinen Beitrag ein wenig mehr Gesicht zu verleihen und Informationen stückchenweise und geordnet darzustellen.
Könnte mir die Sektionen ggf. auch als Spoilerwarnung vorstellen.

[/section] [section title=“Beispielsektion 2″ tip=“Der Tooltipp zur zweiten Sektion“]

Wer diese Sektion tatsächlich liest, bekommt 99 Gummipunkte und einen kleinen angemessenen Wunsch frei. Gültig bis zum 14. Oktober 2013 12 Uhr… und nur mit folgenden Lösungssatz in den Kommentaren: „Ich hab tatsächlich Beispielsektion 2 gelesen!“

[/section] [/sections]

Also ihr seht das eine ganze Menge möglich ist mit dem Plugin.

Welche Ideen kommen euch denn spontan bei den Tabs und ggf. Sektionen in den Sinn?

[/tab]

[tab title=“Blogroll – Freunde“]

Tja einige von euch haben garantiert bereits die Seite „Freunde“ entdeckt. Auf den ersten Blick ist da sicherlich auch nichts ungewöhnliches zu sehen. Aber das Herz der Seite ist ein wenig abseits der Norm. Tatsache ist: ich hab die Ausgabe der Freunde über das Menü gelöst. Im Backend: –> Design –> Menüs.

Einfach ein neues Menü anlegen und dort ein paar Links sowie die Beschreibung reinhauen, wird allerdings leider nicht auf Anhieb funktionieren. Irgendwie muss der jeweiligen Seite, auf der die Ausgabe erfolgen soll, ja mitgeteilt werden, was sie überhaupt anzeigen soll und wie.

Ich kann das Menü übrigens auch jederzeit hier im Beitrag anzeigen lassen. Notwendig ist lediglich ein Codeschnipsel, den man vorher in der functions.php einfügt. Vorzugsweise natürlich im Child-Theme:

---

---

Ich werde den Codeschnipsel im Tab „Blogroll – Code“ einfügen, für diejenigen die daran interessiert sind.

Verwendet wird der Code dann per Shortcode [.menu name=“MENÜNAME“] (ohne den Punkt nach der eckigen Klammer), der einfach in einer Seite eingefügt wird.

[/tab]

[tab title=“Shortlinks“]

Kommen wir zu den Shortlinks.

Wer Twitter nutzt, kennt vermutlich das Problem: 140 Zeichen sind verdammt wenig… und in einem halbwegs vernünftigen Text noch einen längeren Link einfügen, ist fast unmöglich. Zumindest wenn es Links ala http://otaku-cafe.de/anime-vorstellung-blood-lad/ sind. Der Link umfasst bereits 49 der 140 Zeichen. Nimmt einiges an Platz weg, nicht?

An der Stelle kommen dann die URL Shortener Services wie goo.gl oder tinyurl.com ins Spiel. Man gibt dort seinen Link an und erhält dafür einen kurzen Link zu seiner gewünschten Seite. Jedoch mit der Domain von jeweiligen Service.

Ich wäre nun natürlich nicht Ryu, wenn ich mir darüber keine Gedanken gemacht und nach einer eigenen Lösung gesucht hätte. Vor allem da WordPress von Haus aus die Möglichkeit mitbringt, diese Shortlinks anzuzeigen. Sofern sie vorhanden sind…

Kurzum: ich habe mir dank YOURLS einen eigenen Service eingerichtet. Der funktioniert genauso wie die anderen, hat jedoch den Vorteil das er über meine eigene Domain läuft. Und sogar auf meinem Server! Einziger Mininachteil: die Shortlinks von mir, sind von Haus aus 2 Zeichen länger, da ich eine Subdomain verwende. Ein typischer Shortlink von mir sieht also folgendermaßen aus: http://s.otaku-cafe.de/1

An der Stelle habt ihr bestimmt bereits die Shortlinks am Ende jeden Beitrags gesehen.

Eingefügt werden die Links übrigens über Graphenes phänomenales Action-Hook System in den Graphene Einstellungen. Ich mag das Theme mehr und mehr ^^. Es gibt einen von sich heraus die Möglichkeit eigenen Code hinzuzufügen

Und warum ich euch das überhaupt erzähle? Der nächste Tab wird das Twitter Plugin behandeln, bei dem ich Shortlinks und entsprechend YOURLS verwende. Außerdem hab ich eine Weile gebraucht um YOURLS zum Laufen zu bringen und bin daher ein klein wenig stolz auf mich xD

[/tab]

[tab title=“Twitter“]

In der Sidebar hab ich vor einigen Tagen auch ein Twitter Widget hinzugefügt, welches meine Tweets anzeigt. Das Widget ist Teil des Plugins „WP to Twitter„.

Das besondere an dem Plugin ist, das es auf Wunsch automatisch einen Text an Twitter sendet, sobald ein neuer Beitrag oder eine neue Seite erstellt wird. Je nach Einstellung auch nach einem Update des Posts bzw. der Seite.

Dabei verwendet WP to Twitter auch von vornherein einen ausgesuchten URL Shortener. In meinem Fall natürlich meinen Eigenen.

Interessant ist auch die Flexibilität der Texte. Es kann ziemlich genau eingestellt werden, wie die automatisch generierten Texte aussehen sollen. Oder wer mag, kann auch einen komplett eigenen Text direkt bei der Beitragserstellung schreiben.

[/tab]

[tab title=“Smilies“]

So, kommen wir zu meinem neusten kleinen Meisterwerk: Smilies die per Schriftart eingebunden werden und sich entsprechend dezent und passend in den Text einfügen!

Ihr habt garantiert bereits die kleinen Smilies gesehen. Wie z.B. diesen hier: oder …. xD , , ;P usw.

Die Smilies sind wie gesagt per Font eingebunden. Die grundlegende Idee und das nötige Plugin kommt natürlich nicht von mir. Ich habe jedoch die Tage etliche Stunden dran gesessen einige Smilies der Schriftart hinzuzufügen. Hat trotz einiger Frustmomente, wie abstürzende Programme und fehlerhaft abgespeicherten Dateien, eine Menge Spass gemacht. Zusätzlicher Bonus: ich weiss nun wie Schriften erstellt werden…. was übrigens eine höllische Arbeit ist. Aber nun sind die neuen Smilies verfügbar. Was will ich also mehr ?

[/tab]

[tab title=“Andere Kleinigkeiten“]

Uff, wir nähern uns langsam dem Ende zu… worüber ich übrigens ziemlich froh bin ^^; .

Ja, was hat sich noch auf meinem Blog getan?

Ihr habt bestimmt schon das Umfrage Widget in der Sidebar gesehen? Es ist ein schlichtes Umfrage Plugin –> WP Polls
Man kann beliebig viele Umfragen mit beliebig vielen Antwortmöglichkeiten erstellen. Mehrfachauswahl ist genauso vorhanden, wie die Möglichkeit der zeitlichen Begrenzung.

Die derzeitige Umfrage ist übrigens viel mehr als Test gedacht, als eine ernst gemeinte Frage

Das Kommentare und Feedback Widget in der Sidebar ist übrigens abhängig von der Seite auf der es erscheint. Der Text unterscheidet sich, je nach dem ob es sich auf einem Beitrag befindet oder einer statischen Seite. Trotz allem ist es das gleiche Widget. Gelöst wird das natürlich wieder mit PHP.

Der Code dazu:

[code language=“php“]

<?php if (is_single() ) : ?>

<p>Du hast noch Fragen zu &laquo; <strong><?php single_post_title(); ?></strong> &raquo; oder möchtest einfach deine Meinung zum Thema loswerden? Dann schreibe einen <a href="<?php the_permalink(); ?>#respond">Kommentar</a>!</p><br />

<p>Verwendete Kategorien: <?php the_category(‚ &bull; ‚); ?></p><br />

<p><?php the_tags(‚Verwendete Tags: ‚, ‚ &bull; ‚); ?></p><br />

<p>Shortlink: <a href="<?php echo wp_get_shortlink(get_the_ID()); ?>" rel="nofollow"><?php echo wp_get_shortlink(get_the_ID()); ?></a></p>

<?php else : ?>

<p>Du hast Fragen, konstruktive Kritik oder Anregungen zum Blog oder dieser Seite? Verwende das <a href="/feedback" title="Feedbackformular von Otaku Cafe">Feedbackformular!</a></p>

<?php endif ?>

[/code]

Möglich wird der PHP Code durch die Einstellung im Ultimate TinyMCE ein entsprechendes Widget zu erstellen, welches mit PHP zurecht kommt.Und auf die Art lasse ich auch die Links (Tags und Kategorien) im Text per PHP ausgeben. Sorgt für mehr Keywords und daher eine besser SEO.

Was ist sonst noch dazu gekommen?

Die Breadcrumbs… das ist die oberste Leiste die über den Beiträgen erscheint. Die Breadcrumbs sind eine Art Pfadangabe. Ganz nett… vor allem wieder für Google und Co.

Ähnliche Beiträge gibt es nun auch standardmäßig in jedem Beitrag. Anhand der Kategorien und der Tags werden automatisch ähnliche Beiträge rausgesucht und verlinkt. Damit wird mit der Zeit das Linknetz innerhalb des Blogs dichter. Genutzt wird dabei das Plugin YARPP.

Ach ja stimmt, die externen Links werden nun auch als solche angezeigt. Mit einem kleinen Pfeil nach oben usw.
Und das komplett nur über CSS. Ist, wie ich finde, eine doch verdammt gute Lösung.
Jeder weiss somit das er die Seite verlässt bzw. sich ein neuer Tab öffnet, wenn er auf den Link klickt.

[/tab]

[tab title=“Was noch aussteht“]

Tja, was steht noch an Änderungen aus? Ehrlich gesagt bin ich derzeit verdammt glücklich mit dem Blog. Das einzige was derzeit noch aussteht, sind weitere Inhalte. Das Feedbackformular will ich demnächst noch richtig einrichten… da sich dort derzeit auf der Seite nur ein Standardformular befindet. Aber im Prinzip war es das auch schon

[/tab]

[tab title=“Blogroll – Code“]

[code language=“php“]

/* Menüs per Shortcode in Seiten einfügen */

class My_Nav_Menu_Walker extends Walker_Nav_Menu
{
function start_el(&$output, $item, $depth, $args)
{
global $wp_query;

$class_names = $value = “;

$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class = in_array(‚current-menu-item‘, $classes) ? ‚ class="active"‘ : “;

$output .= ‚<li>';

$attributes = ! empty( $item->attr_title ) ? ‚ title="‘ . esc_attr( $item->attr_title ) .’"‘ : “;
$attributes .= ! empty( $item->target ) ? ‚ target="‘ . esc_attr( $item->target ) .’"‘ : “;
$attributes .= ! empty( $item->xfn ) ? ‚ rel="‘ . esc_attr( $item->xfn ) .’"‘ : “;
$attributes .= ! empty( $item->url ) ? ‚ href="‘ . esc_attr( $item->url ) .’"‘ : “;

$item_description = !empty($item->description) ? esc_attr($item->description) : “;

$item_output = $args->before;
$item_output .= ‚<h3><a‘.$class. $attributes .‘>';
$item_output .= $args->link_before . apply_filters( ‚the_title‘, $item->title, $item->ID ) . $args->link_after;
$item_output .= ‚</a></h3>';
$item_output .= ‚<p>‘.$item_description.'</p>';
$item_output .= $args->after;

$output .= apply_filters( ‚walker_nav_menu_start_el‘, $item_output, $item, $depth, $args );
}
}

function print_menu_shortcode($atts, $content = null) {
extract(shortcode_atts(array( ‚name‘ => null, ), $atts));
return wp_nav_menu( array( ‚menu‘ => $name, ‚echo‘ => false, ‚walker‘ => new My_Nav_Menu_Walker ) );
}
add_shortcode(‚menu‘, ‚print_menu_shortcode‘);

[/code]

[/tab]

[/tabs]

Sodele, ich hab nun soweit alle wichtigen Änderungen angesprochen und alles ein wenig erklärt. Wenn noch Fragen bestehen oder ihr allg. eure Meinung loswerden wollt, kommentiert einfach

Gruß
Ryu