geBILDet

Archiv für die Kategorie „WordPress“

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.

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”!

Wir alle kennen das: Werbung neigt zur Übertreibung. Meistens maß- und hemmungslos.

WordPress wirbt natürlich auch für sich. Zur Schaffung einer corporate identity ist es immer gut, etwas Gemeinsames in die Wagschale zu werfen. (Das sage ich meinem Arbeitgeber seit Jahren, aber da rührt sich nicht viel.) Etwas in dieser Art können markige Slogans sein, so wie dieser von WordPress:

Code ist poetry.

Code soll Dichtung sein?

Diesen Beitrag weiterlesen »