geBILDet

Artikel-Schlagworte: „WordPress“

Mein Lieblingsbrowser ist… Firefox. Derzeit nutze ich Mozilla Firefox 3.0.7. Sowohl unter Sicherheitsaspekten als auch von der Kompatibilität her ist dieser Browser für Windows-Nutzer 1. Wahl. Zumindest sollte und könnte er das sein! geBILDet jedenfalls ist optimiert für die Darstellung des Blogs mit Firefox.

Die Nutzer aber sehen das scheinbar etwas anders. Der IE Explorer 6 führt die Liste der Browser klar an: Knapp die Hälfte aller User nutzt den Redmonter Kollegen, der im Prinzip zwar mit jedem Release besser wird, aber immer noch einige deutliche Schwächen und Sicherheitslücken hat. Firefox 3 ist zwar immerhin auf dem 2. Platz, hat aber einen deutlichen Abstand (Etwa 1/4 der geneigten Leserschaft nutztFirefox. Dann folgen IE Explorer 7, Firefox 2 und Safari, der Apple-Browser. Platz 6 belegt der IE Explorer 5, gefolgt von Opera. Alle weiteren Brwoser siedeln sich unter “ferner liefen” an.

Bei den Betriebssystemen hat Windows XP klar die Nase vorn, fast 3/4 aller Rechner kommen damit hier angetöffelt. Die weiteren Plätze belegen mit großem Abstand Windows 2000, Windows Server 2003 sowie Windows Server 2003 Vista und dann erst Mac OS X.

Die Besucherzahlen könnten besser sein, klar, aber die Seitenaufrufe liegen täglich im 3-stelligen Bereich, was für ein Blog, welches erst seit etwas über 2 Monaten existiert, nicht so furchtbar schlimm ist.

Die weitaus meisten Spähtrupps (Spiders) sendet übrigens Google aus, mit einigem Abstand gefolgt von Yahoo!, WordPress, SnapBot, Java und MSN.

Was lerne ich daraus? In jedem Fall bleibt es mir auch weiterhin nicht erspart, die Implementierung von neuem Code auch im Internet Explorer zu testen, um da nicht ein allzu scheußliches Äußeres abzuliefern. Solange kein funktionstüchtiger Mac in diesen, unseren Hallen steht, teste ich knapp 10 Meter Luftlinie von hier entfernt, bei Freunden über den Fleet, die Anzeige des Netzauftritts im Safari-Browser.

Für alle, die es noch nicht wussten: Firefox ist kostenlos, OpenSource, über zahlreiche Plug-Ins wunderbar zu individualisieren und hier als Download erhältlich. (Falls das der Grund sein sollte, warum hier so viele mit Windows angeschippert kommen: Macht Euch frei, oh Ihr Surfer! Nutztet die Gunst der Stunde und stellt Euer Denken radikal um. Nutzt zukünftig den Feuerfuchs!)

Und die beliebstesten Artikel? Hier die Top 6 (der Stern dahinter zeigt an, ob die von den Besuchern am häufigsten ausgewählten Posts auch in der Liste meiner ganz persönlichen Favoriten auftauchen):

• “Ansichtssache — Grundlagen der Bildgestaltung und der Goldene Schnitt” *
• “geTWITTERt folgen — das wird Folgen haben” *
• “Geformte Wachsamkeit 3 — Das Ziel ist klar und nah“
• “…also müssen Sie don’t…” *
• “Hochpass — Scharf mit Filter“
• “Die Tiefe ist scharf — oder ist die Schärfe tief? — Von selektiver Schärfe und Unschärfe” *

Auch einge statische Seiten werden überproprotional oft ausgewählt:

• “Wölkchen” — die Flash-animierte Darstellung der Tags und der Kategorien
• “Impressum & Datenschutz“

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!

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.

Vigilance, die Wachsamkeit, musste mal eben Platz machen. Das Theme ist wirklich gut, aber ich habe in den letzten Wochen das Default Theme von WordPress, Kubrick, mal neu interpretiert und brauche jetzt eine Testplattform mit echten Inhalten. environment muss sich nun testen lassen und bewähren!

Auffällig sind zunächst die Design-Anpassungen. Die Proportionen von Kubrick sind gleich geblieben,  das äußere Erscheinungsbild wurde aber komplett neu aufgestellt. Grün und Braun sind — in Anlehnung an die Natur — die vorherrschenden Farben, dabei habe ich jedoch auf “brüllende” Farben verzichtet und eher die “gedeckelte” Variante benutzt. Entsprechend wurden über CSS alle Textfarben (Link, besuchte Links, Überschriften…) diesem Farbschema angepasst.

Auch sonst wurde unter der Haube an vielem geschraubt. Die grundsätzlichen Prinzipien habe ich allerdings belassen, weil Kubrick diesbezüglich zu den besten Themes überhaupt gehört. Es ist klassisch, aufgeräumt, lässt sich sehr gut bedienen und stellt den Benutzer nicht vor unüberwindbare Hürden — man fühlt sich gleich zuhause. Aber warum in der Einzelansicht eines Artikels die komplette Seitenleiste verschwinden muss, war mir schon immer ein Rätsel. Das ist hier anders — die elementaren Inhalte (Tags und Kategorien) erscheinen nun auch hier.

Nach entsprechender Markierung eines Artikels über das Spezialfeld im Bearbeitungsmodus als “topartikel” und einem entsprechenden Wert kann ich als Blogger meine Favoriten kenntlich machen — diese müssen schließlich nicht immer mit den am häufigsten aufgerufenen Beiträgen übereinstimmen. Das Suchfeld wurde völlig neu gestaltet, mit eigenem Hintergrund, dafür ohne Suchbutton. Bei Markierung des Textes ist neu — entsprechende Passagen sind nun grün unterlegt (vergleichbar einem Textmarker), die Textfarbe ändert sich dann von schwarz auf weiß. Eine Schlagwortwolke ist in der Sidebar implementiert, die man sonst so nur als Plug-In bekommt.

Der Autor eines Eintrags im Artikelfuß angezeigt und kann als Basis für das Herausfiltern eines bestimmten Verfassers herhalten. Ebenfalls im Artikelfuß steht nun die Information, wieviel Zeit seit der Veröffentlichung vergangen ist. Das PlugIn “wp-dhTimeSince” verrichtet hervorragende Dienste.
Der komplette Kopfbereich ist eine “Home-Zone” — durch Klick gelangt man  zurück zur Startseite. Es sind vor allem Kleinigkeiten, die modifiziert und neu eingebaut wurden. Auch die Sprachdateien wurden angepasst — neue Phrasen sind aufgenommen und entsprechend ins Deutsche übersetzt, die bereits existierenden Übersetzungen überarbeitet und an meine Bedürfnisse angepasst.

Über die Schwierigkeiten, die Fragestellungen und Hilfen für Lösungsansätze im Netz werde ich wird mein Co-Autor Hechelbach zukünftig immer mal berichten — zwar gibt es Ressourcen zu den Themen PHP, CSS, XHTML und Co. (fast) wie Sand am Meer, aber nicht jede Quelle ist diesbezüglich gleich gut geeignet.

Ein Feedback wäre toll — wo hakt es, wo fehlen Übersetzungen, was ist gut?

Ja, endlich traue ich mich an ein Theme heran! Die Wachsamkeit, die Haut dieses Blogs, hatte mich ja schon einige Zeit beschäftigt. So ist das eben, wenn mensch PHP 1. im Eilverfahren und 2. autodidaktisch lernen möchte. Suche zwar noch nach 12 Fehlern, die eine XHTML-Validation derzeit noch verhindern, aber die neue Haut einen Ordner weiter lässt sich diesbezüglich gut an. Wer schauen möchte: Hier geht’s zur Baustelle.

Und weil sie das eben ist, eine Baustelle, auf der ich die ein oder andere Bastelstunde verbringe, gibt es keine Garantie, dass alles immer ordnungsgemäß abläuft. Try & Error sind derzeit meine treuen Gefährten. Glücklicherweise kommt Try häufiger vorbei als Error. Ist halt ein verlässlicher Kollege.

Ein Fundstück habe ich noch, eine Fundamentalkritik an Twitter, die (wie bei Schreiberlingen üblich) überspitzt und (wie nicht bei allen Schreiberlingen üblich) unterhaltsam und pointiert ausgefallen ist.

So, ich mach’ jetzt wieder Bastelstunde. “Code is poetry”!