geBILDet

Archiv für die Kategorie „Hier Hechelbach!“

Hechelbach kann’s nicht lassen — es wurde ein wenig am Design geschraubt. In der Übersicht, wenn man über die Root-Adresse einfliegt, finden sich jetzt “nur” die Auszüge (<?php the_excerpt(); ?>) — wie üblich öffnet ein Klick auf den Titel den Artikel in der Einzelansicht, aber auch ein Link unterhalb des Auszugs (“Diesen Eintrag weiterlesen »”) befördert den Leser direkt dort hin. Selbiges wurde für die Archivansicht gewählt.

Wenn es gefällt, wird es als Download angeboten. Dafür sind wir jedoch auf Rückmeldungen angewiesen. Wie gefällt Ihnen diese Art der Darstellung und Navigation?

Hier noch kurz der Code (derzeit in archive.php, search.php und index.php):

<div class="entry">
<?php the_excerpt(); ?> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('Permanent Link to %s', 'kubrick'), the_title_attribute('echo=0')); ?>"><?php printf(__('Read the rest of this entry &raquo;', 'kubrick')); ?></a>
</div>

Es ist Ihnen vielleicht schon da und dort aufgefallen: Nicht nur der Blog-Titel ist anklickbar, sondern auch die Beschreibung. Sie können diesen Bereich auch Untertitel nennen. Sie als Besucher haben dadurch keine wirkliche zusätzliche Funktionalität — Sie gelangen von dort ebenso zur Startseite, als würden Sie auf den Blogtitel klicken. Der Blogger, zumindest dann, wenn er angemeldet ist, gelangt von dort aus jedoch direkt in den Admin-Bereich. Vielleicht ist dieses Gimmick ja für Sie interessant — um zum Dashboard zu gelangen, müssen Sie sich dann nicht mehr bis zum Admin-Link durchhangeln, denn die Blogbeschreibung steht ja ganz oben im Seitenkopf und ist somit stets schnell erreichbar. Wir hatten das hier auch eine Zeit lang, bis Blogtitel und -Beschreibung dem neuen Design weichen mussten, für das wir die Einblendung von Titel und Beschreibung abgeschafft haben.

Gut daran ist, dass dies mit sehr wenig Code zu realisieren ist. Der Ort, an dem sich das abspielt, ist die header.php. Sie suchen einfach <?php bloginfo('name'); ?> sowie <?php bloginfo('description');?>. Den Bereich, der meistens so aussieht:

<!-- No.1: USUAL WAY. CLICK ON BLOG TITLE LETS YOU RETURN HOME WHILE THE DESCRIPTION IS JUST A DESCRIPTION NOT A CLICKABLE AREA. -->
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>
<!-- END of No.1 -->

ersetzen Sie einfach durch diesen:

<!-- No.2: THE FOLLOWING COMMENTED PART IMPLEMENTS DIRECT ACCESS TO ADMININSTRATION BY CLICKING ON THE BLOG DESCRIPTION WHILE ANYONE WHO IS NOT LOGGED IN RETURNS BACK HOME -->
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description">
<a href="<?php
if (current_user_can('level_10'))
echo get_settings('home').'/wp-admin/">';
else
echo get_settings('home').'/">';
bloginfo('description'); ?>
</a>
</div>
</div>
</div>
<!-- END of No.2 -->

Was macht der Code? Während in Variante 1, dem Standard-Header, Blogtitel und -beschreibung im Kopf angezeigt werden, aber nur der Titel anklickbar ist und den Benutzer zurück zur Startseite bringt (<a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a>), wird in Variante 2, die ebenfalls beides anzeigt, durch einen Klick auf die Beschreibung die Berechtigung des Benutzers abgefragt. current_user_can('level_10') ist die höchste Berechtigung, nämlich die des Administrators. Sitzt jener gerade vorm Rechner, ist angemeldet, sieht sich das eigene Blog an und möchte nun dringend in das Dashboard gelangen, so genügt ihm (oder ihr, klar) das Anklicken der Blogbeschreibung dafür. Benutzer, die nicht angemeldet sind und somit auch nicht über entsprechende Berechtigungen verfügen, werden stattdessen einfach zur Startseite gebeamt.

Theoretisch (und praktisch) ist diese Berechtigungsabfrage auch für andere Funktionen sinnvoll, die nur dem Administrator zur Verfügung stehen sollen. Das Spektrum der Berechtigungen reicht von 0 (der registrierte User) über 1 (der Mitarbeiter), 2 (der Blogautor) und 7 (der Herausgeber) bis eben 10 (der Administrator). Natürlich sind die vergebenen Berechtigungen abwärtskompatibel: Ein Admin darf alles (Level 10 bis 0), der Herausgeber ist da schon eingeschränkter (Level 7 bis 0) usw.

Oft, aber eben nicht immer, ist persönlichen Artikeln ein Erfolg bei den Ansichtszahlen und Rückmeldungen beschieden. Man mag halt manche Artikel ganz besonders, aber nicht jeder Besucher hat die Zeit oder Lust, alles zu durchforsten, um genau diese Artikel zu entdecken. Die Lösung aber ist ganz einfach: Man löscht alle Beiträge bis auf jene, die nach eigener Vorstellung von den Usern gelesen werden sollten. Danke für Ihre Aufmerksamkeit! Bis zum nächsten Mal!

Gut, Sie haben Recht, das kann die Lösung nicht sein! Es muss anders gehen. Und, ja, da gibt es eine Möglichkeit. Inspirationen dazu habe ich als Autodidakt irgendwo aus dem Netz. (Ich poste diese, sobald ich sie wiederfinde.)

Wenn Sie einen Artikel schreiben, finden Sie weiter unten “Spezialfeld”. Dort fügen Sie etwas nach Ihrem Gusto ein; wir haben “favarticle” gewählt, Sie können aber auch Che Guevara oder Mickey Mouse oder eine Phrase Ihrer Wahl hinzufügen. Wichtig ist nur, dass Sie entweder ein Wort oder einen Unterstrich (_) als Verbindung zwischen mehreren Worten wählen. Dann vergeben Sie noch einen Wert, in diesem Fall eine Zahl. Wir haben 1 oder 2 eingesetzt — die 1er-Kandidaten werden vor den 2er-Kandidaten gelistet. Es reicht aber auch, nur eine Zahl zu vergeben.

Jetzt müssen Sie noch ein wenig Code einfügen. Zunächst mal ist für den auszuführenden Basis-Code die functions.php ein geeigneter Ort. Natürlich können Sie ihn aber auch direkt in der php-Datei einfügen, in welcher Sie ihn brauchen. Empfehlenswert ist aber eine Auslagerung, denn dies erhält die Übersichtlichkeit, und Ihnen fallen bestimmt mehrere Stellen in Ihrem Theme ein, wo Sie eine Liste Ihrer Lieblinge einsetzen können. Hier der Code, den wir in die functions.php geschubst haben:

<?php function getFavArticles($count){ global $wpdb; $count = intval($count); $favarticles = $wpdb->get_results("SELECT post_id FROM  $wpdb->postmeta WHERE meta_key ='favarticle' ORDER BY meta_value ASC LIMIT 0, $count"); if ($favarticles){ foreach ($favarticles as $favarticle){ $title = wptexturize(get_the_title($favarticle->post_id)); $link = get_permalink($favarticle->post_id); echo '<li><a href="'.$link.'" title="'.$title.'">'.$title.'</a></li>'; } }else{ echo '<li>...</li>'; } } ?>

Was macht der Code? Er ruft eine Funktion getFavArticles auf, auf die Sie sich später irgendwo in Ihrem Theme beziehen können. Er sucht nach einem meta_key ='favarticle', also dem Schlüssel. den Sie definiert haben, und sortiert die entsprechend markierten Artikel dem vergebenen Wert entsprechend in aufsteigender Reihenfolge. Angezeigt werden die Artikel-Titel als anklickbare Links.

So, nun haben Sie vorbereitete Artikel, die PHP-Funktion — Sie brauchen noch einen Ort, an dem die Funktion ausgeführt und die Liste Ihrer Kleinode angezeigt wird. Wir haben die Favoritenliste in der Standard-Sidebar untergebracht, die allerdings beim Einsatz von Widgets inhaltlich komplett neu aufgestellt wird. Also schraubten wir sie (die Liste, nicht Sie, die Leser) auch in der single.php ein. Die Einzelansicht ist bei geBILDet ja ohne Seitenleiste, dafür mit einer Darstellung, die den verfügbaren Platz besser nutzt. Wir haben extra eine farblich vom Rest der Seite deutlich abgehobene Box mit den wichtigsten Navigationspunkten eingebaut; dort findet sich derzeit auch die Favoriten-Liste. Hier der Code für die Sidebar (die ja etwas anders gegliedert ist als die Artikelansicht):

<?php }?> <?php if (function_exists('getFavArticles')): ?> <li><h3><?php _e('Top posts', 'kubrick'); ?></h3> <ul> <?php getFavArticles(10); ?> </ul> <?php endif; ?> </li>

sowie der für die Box angepasste Code:

<?php if (function_exists('getFavArticles')): ?>
<h2><?php _e('Top posts', 'kubrick'); ?></h2>
<ul><li>
<?php getFavArticles(10); ?>
</li></ul>
<?php endif; ?>

Durch die umgestellten Listenanweisungen (<ul> als Einleitung einer Liste (ul = unordered list = unsortierte Liste), <li> als neuer Listeneintrag innerhalb dieser Liste (li = list item = Listeneintrag) mit den beendenden Tags </li> sowie </ul> ) sowie die unterschiedlichen Überschriften (<h3> bzw. <h2>) ist die Darstellung der Favoritenliste etwas unterschiedlich, jedoch an die jeweilige Situation angepasst und inhaltlich gleich.

Bestimmt fallen Ihnen da noch weitere Einsatzgebiete ein! Schließlich können Sie Ihre Artikel über Briefmarken, die über die Kleiderkäufe Ihrer Frau oder — ach, was weiß ich denn! — mit dieser Art von Listen, die Sie über Spezialfelder definieren, irgendwo gezielt feilbieten.

Good light & good nuck!

Sie kennen vermutlich das “WordPress-Default“-Theme, auch bekannt als “Kubrick“. Dieses Theme liegt grundsätzlich unserem “environment“-Theme zugrunde, obschon es so verändert wurde, dass es nicht sofort auffällt. Viele halten “Kubrick” für überholt, weil man es zu oft gesehen hat. Prinzipiell mag das stimmen, wenn man es völlig unbearbeitet ins Rennen schickt. Wir aber haben uns aufgrund der Stärken des Themes für den Einsatz entschieden, das Theme neu aufgestellt und nutzen es jetzt für dieses Blog.

Die Sidebar, also die Seitenleiste mit Links, Schlagworten und Kategorien, ist für viele Benutzer ein gewohntes Bild; oft wird sie mit zusätzlichen Plug-Ins aufgepeppt; wir beispielsweise nutzen u.a. das Flickr-Badge-Widget zur Präsentation von eigenen Fotos bei Flickr. “Kubrick” zeigt aber im Urzustand nicht in allen Situationen eine Seitenleiste an. Viele empfinden das als störend. Wie man das ändern kann, steht hier. Anfänglich hatten wir das auch für alle möglichen Ansichten geändert, aber zumindest eine Einzelansicht von Artikeln 0hne Sidebar birgt ungenutztes Potential. Man könnte nämlich über einige kleine Änderungen im Stylesheet (style.css) einfach die Anzeigefläche  der Einzelartikelansicht vergrößern und so den Raum der fehlenden Seitenleiste sinnvoll nutzen.

Wir suchen also in der style.css folgenden Eintrag

.widecolumn { padding: 10px 0 20px 0; margin: 5px 0 0 150px; width: 450px; }

und ändern ihn wie folgt:

.widecolumn { padding: 10px 0 20px 0; margin: 5px 0 0 70px; width: 600px; }

Indem der margin-Wert von 150px auf 70px herabgesetzt wurde, rückt der linke Rand des Artikels weiter nach links, der dort im Original ungenutzte freie Rand wird nun für die Anzeige des Beitrags genutzt. Der Width-Wert wurde nun von 450px auf 600px heraufgesetzt, dadurch wird der Artikel breiter angezeigt und nutzt so den Raum, den ansonsten die Seitenleiste besetzt. Gerade für lange Artikel kann das vorteilhaft sein, weil der Benutzer nicht so oft scrollen muss, um ans Ende des Artikels zu gelangen.

Nachteilig ist an diesem Verfahren, dass der Benutzer wieder nach oben scrollen muss, um wieder zur Startseite zu gelangen und somit auch die Seitenleiste wieder zur Verfügung zu haben. Das Manko haben wir über eine Box am Artikelende behoben, in der — optisch bewusst vom übrigen Anzeigefeld abgehoben — die wichtigsten Navigationslinks zu finden sind. Diese Box wird auch noch anderweitig genutzt, aber dazu mehr in einem späteren Artikel.

Nehmen wir an, Sie möchten Ihren Besuchern ein an das Seiten-Layout angepasstes Kommentarerlebnis ermöglichen. Standard sind diese farblosen Kästen mit schwarzer Schrift, in die Ihre Besucher “Name (benötigt)“, “Email (wird nicht veröffentlicht) (benötigt)” und “Website” sowie den Kommentartext eingeben können. Da wollen Sie nun ein wenig Farbe oder gar ein Bild einfügen? Kein Problem, das ist in wenigen Momenten bewerkstelligt.

Zunächst brauchen Sie nur eine Vorstellung davon, wie das aussehen soll. Möchten Sie eine Farbe oder ein Bild? Dann öffnen Sie im Dashboard von WordPress die Datei style.css und suchen nach Phrasen wie diesen:

#commentform input bzw. #commentform textarea. (Die in Ihrem speziellen Fall auch etwas andere Namen tragen können; wenn Sie gleich den Code sehen, haben Sie aber einen Anhaltspunkt, was Sie an der entsprechenden Stelle vorfinden sollten.

#commentform input {
width: 170px;
padding: 2px;
margin: 5px 5px 1px 0;
background: url('images/kubrickbgcolor.jpg');
color: #ffffcc;
}

“Width” bestimmt die Länge des Eingabefeldes, “padding” den Innenabstand des Inhalts zum Rand und “margin” einen transparenten Abstand zum nächsten Element.  Während “padding” mit der Farbe oder dem Bild Ihrer Wahl aufgefüllt wird, ist “margin” tatsächlich durchsichtig und sieht genau aus wie Ihre Seite, auf der Sie Ihre Inhalte präsentieren. (Die entsprechende CSS-Referenzen finden Sie hier und hier).

Im Falle unserer Seite wollten wir den Hintergrund gerne in den Eingabefeldern haben. Entsprechend haben wir den Pfad zu eben dieser Bilddatei eingefügt: background: url('images/kubrickbgcolor.jpg');

Da dieser recht dunkel ist, haben wir mit color: #ffffcc; die Textfarbe angepasst hell gestaltet. Schließlich sollen Ihre Besucher auch lesen können, was sie schreiben.

Möchten Sie statt eines Bildes lieber eine Farbe? Kein Thema, ersetzen Sie einfach den background: url -Teil mit diesem: background: #000000; . Im Beispiel ist Schwarz codiert, Sie können aber auch jede andere Farbe eingeben.

Analog dazu ergänzen Sie den Bereich #commentform textarea auf die gleiche Weise.

Unser Ergebnis können Sie sich zum Beispiel unterhalb dieses Artikels ansehen, wenn Sie ihn in der Einzelansicht gelesen haben.

Good light and good nuck!

Sie alle kennen das übliche Schema eines Blogs: Im Kopf der Seite erscheinen der Blogname <?php bloginfo('name') ?> und die Beschreibung <?php bloginfo('description'); ?>. Ein Klick auf den Blognamen bringt des Benutzer zurück ins Hauptverzeichnis. Möchte man aber — wie  kunstgriff — genau festlegen, welche Schriftart wo im Kopfbild erscheinen soll,  wird es schwierig, alleine schon deshalb, weil Schriftarten, gerade selbst erstellte, eben nicht auf jedem Rechner installiert sind — und nur auf diese kann zurückgegriffen werden. Bei Arial oder Timess New  Roman ist das sicherlich kein Problem, aber kennen Sie beispielsweise Haettenschweiler oder gar klemmchen? Sehen Sie — dem Gestaltungswunsch sind so enge Grenzen gesetzt. Mit ein paar Code-Schnipseln aber ist das kein Problem.

<h1><a xhref="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1> <div class="description"><?php bloginfo('description'); ?></div>


Suchen Sie diese Passage in der header.php. Löschen Sie diese, oder kommentieren Sie sie aus. Auskommentieren? Alles, was zwischen <!-- sowie --> eingebunden ist, wird übergangen, ist also nicht existent für die Software, die das Geschreibsel in eine sichtbare Netzseite übersetzt. Wir kommentieren immer recht viel aus, zumindest dann, wenn ein erneuter Einsatz des jetzt nicht gebrauchten Codes nicht ausgeschlossen ist — bei späteren Umstellungen der Codierung hat man so weniger Tipparbeit. Auf jeden Fall ist die obige Passage jetzt aus dem Rennen. WordPress Deutschland bietet nun zwei Wege an. Beide funktionieren tadellos, sind aber jeweils mit gewissen Einschränkungen verbunden. Dort, wo der Kopf codiert ist, setzen Sie nun

<div id="header" onclick="location.href='<?php bloginfo('url') ?>';" style="cursor: pointer;">...</div>

ein. Der Nachteil: Suchmaschinen haben Probleme, eine so geschriebene Passage zu lesen — möglicherweise wird Ihr Blog, auf liebevollste Weise mit wundervollen Artikeln oder Fotos bestückt, nicht  gefunden werden. (Und das wäre garstig.) Außerdem muss im Browser Ihres geneigten Lesers JavaScript aktiviert sein; die onclick-Passage weist darauf hin. Viele schalten aber aus Sicherheitsgründen JavaScript (kurz: JS) aus, weil JS auch mit schadhaftem Code versehen sein kann. Wenn Sie Ihr Kopfbild auch über Cascading Styling Sheets (kurz: CSS) eingebunden haben, dann nehmen Sie besser diesen Code.

<div id="header">   <a href="<?php bloginfo('url') ?>/" style="display:block; width:100%; height:100%;">     <span style="visibility:hidden"><?php bloginfo('name') ?></span>   </a> </div>

Der funktioniert zuverlässig, und Ihre Seite erfüllt die Validierung als  XHTML weiterhin. Das ist für eine Plattform-übergreifende Darstellung Ihres Blogs nicht unwichtig. (Dass dieses Blog die Validieruung nicht mehr erfüllt, liegt übrigens am Flickr-Plug-In.) Woran Sie erkennen können, ob Ihr Header-Bild über CSS eingebunden wird? Nun, huschen Sie mal in Ihre Stylesheet.css und suchen nach einer Passage, die dieser hier ähnelt:

#header { background: #352726 url('images/kubrickheader.jpg') no-repeat bottom center; } #headerimg     { margin: 7px 9px 0; height: 192px; width: 740px; }

Hier werden die Hintergrundfarbe, die angezeigt wird, wenn kein Bild erscheint, der Pfad zur Bilddatei (meist, aber nicht immer im Verzeichnis \images) sowie die Darstellungsmaße (die Dimensionen) des Bildes angegeben. So, nun wissen Sie das.

Good light and good nuck!

Hechelfeld

Es wurde auch langsam Zeit, dass geBILDet einen Co-Autor bekommt. Ich bin Hechelbach. Meinen echten Namen habe ich durch eine retrograde Amnesie vergessen. Wie es dazu kam, dass ich in einem kleinen Bach gefunden wurde, kann ich dementsprechend leider auch nicht sagen. Tatsache ist: Weil man mich hechelnd aus eben diesem Bach gezogen hat, heiße ich nun Hechelbach. (Bachhechler klang zu bejuwarisch für die norddeutsche Tiefebene.)

Meine Interessen sind vielfältig, manchmal einfältig. Ich baldowere gerne im Garten herum, liebe den Sommer und mag die alten Winnetou- und Winnieh Pooh-Filme. Ich programmiere gerne und unterstütze meinen Co-Autor kunstgriff dabei, dessen Design-Ideen umzusetzen. Eine eierlegende Wollmilchsau bin ich jedoch nicht, eher Autididakt und von Natur aus experimentierfreudig, deshalb schlage ich das ein oder andere im Netz nach und ziehe daraus meine Schlüsse.

Wo ich vorher gewohnt habe, weiß ich nicht mehr, aber da ich immer, wenn es nach Stralsund oder Rügen geht, aufgeregt bin wie ein Junge am Weihnachtstag, liegt die Vermutung nahe, dass ich irgendwo dort meine Wurzeln habe. (Allerdings empfinde ich ähnlich, wenn es gen Italien oder nach Portugal geht.) Jetzt lebe ich mit meiner neuen Familie in Hamburg, direkt am Wasser, und — wie Sie sich denken können — habe ich aufgrund meines erlittenen Traumes sehr viel Angst davor; den Balkon betrete ich nur mit Schwimmflügeln und meinem Enten-Bauchring.

Ich könnte Ihnen jetzt noch erzählen, dass ich Theodor Fontane, Quentin Tarantino und Eduard Mörike mag, alle “Lethal Weapon”-Filme auswendig kenne, und Fencheltee trinke, als gäbe es kein Morgen, aber ich will Sie nicht langweilen. Es ist an mir, über die technische Seite der Veränderungen und Fortentwicklung des vorliegenden WordPress-Themes zu berichten. Vielleicht finden Sie ja etwas, für das Sie Verwendung haben. Dann greifen Sie ruhig zu. Eine kleiner Hinweis in Ihrem Netzauftritt freut uns (also kunstgriff und mich) immer, ansonsten wünsche ich Ihnen noch viel Freude im Netz und speziell hier bei uns.

Good light and good nuck!

Hechelbach

P.S.: Immer dann, wenn Sie am Anfang eines Artikels mein Konterfei erblicken, wird wieder etwas aus den Bereichen CSS, PHP oder XHTML berichtet. Daran können Sie sich orientieren.