WordPress & Webwork - perun.net

Dieser Gastartikel stammt von Matthias Mees. Vielen Dank dafür.

Die PHP-Templateengine Smarty polarisiert. Entwickler, die an Projekten, die Smarty einsetzen, beteiligt sind, schwören auf die Vorteile – andere Entwickler argumentieren üblicherweise (technisch absolut zu Recht), PHP selbst sei bereits eine Templatenengine und ein zusätzlicher "Aufsatz" somit unnötiger Ballast.

Was ist Smarty überhaupt?

Smarty ist eine Art "Basic-PHP für Designer". Die verwendeten Templatedateien sind im Wesentlichen HTML-Dateien, die mehr oder weniger komplexe Platzhalter enthalten, welche durch dynamische Inhalte ersetzt werden. Ergänzend stellt Smarty zudem komplexere Strukturen wie Schleifen, if-Abfragen oder Funktionen bereit und ermöglicht das Einbinden externer Dateien ebenso wie die Definition eigener Konstanten. Die Smarty-Syntax ist an PHP angelehnt, aber vereinfacht. (weiterlesen…)

Dieser Gastartikel stammt von Christian Schaefer aka derSchepp.

Wer kennt das nicht: Bei jedem neuen Webprojekt beginnt man von Neuem, sich sein bewährtes projektübergreifendes Basis-Stylesheet zu schnappen, um sich im weiteren Verlauf der Stylesshet-Programmierung an allerlei langatmigen Selektoren, doppelten und dreifachen Vendor-spezifischen Eigenschaften, IE-Hacks, sowie an syntaktischem Füllmatarial ({};…) abzuarbeiten.

Deshalb kommt es meist so, dass sich das, was in der eigenen Vorstellung umsetzungsmäßig schnell erledigt scheint, am Ende doch immer überraschend lange hinzieht. Und immer wieder flammt auch danach Arbeit in Form von Nachbesserungen auf. (weiterlesen…)

Bei vielen Websites steht entweder im Fußbereich oder in der Seitenleiste ein Copyright-Hinweis samt dem Jahr, als das Projekt gestartet wurde und dem aktuellen Jahr. Weil aber viele auch das aktuelle Jahr hardcoden bzw. manuell eingeben steht jetzt dort immer noch z. B.:

© 2002-2009 Max Müller

daher sollte man die ganzen manuell eingetragenen Jahreszahlen aktualisieren oder stattdessen einfach das aktuelle Jahr dynamisch eintragen:

© 2002-<?php echo date('Y'); ?> Max Müller

Erinnert via @smashingmag.

Was man mit CSS alles machen kann zeigt die Demo von Roman Cortes. Er hat mit jede Menge div-Elementen und CSS das Portrait von Homer Simpson gezeichnet. Einfach mal in den Quelltext schauen.

Ned Batchelder hat die Demo erweitert und daraus mit ein bisschen jQuery eine Animation erstellt.

Vielen Dank an Sahanya für den Hinweis.

NicEdit ist zwar ein kleiner, aber dennoch leistungsfähiger WYSIWYG-Editor. Das Einbauen ist sehr einfach, man muss das Javascript in seiner Website einbauen. Dazu benutzt man entweder den vorbereiteten Code-Schnippsel, dann wird auf das Javascript auf der Hersteller-Website zurückgegriffen oder man speichert es auf dem eigenen Webspace ab.

Wenn das Script eingebaut ist, werden alle Textbereiche bzw. Textboxen (textarea) durch einen bearbeiteten Bereich ersetzt. Doch das ist nicht alles. Im Prinzip kann man auch div-Blöcke oder Absätze mit so einem Editor beglücken, einfach id="myNicPanel" zuweisen.

Man könnte jetzt stundenlang über die Vor- und Nachteile von WYSIWYG-Editoren diskutieren, ich persönlich arbeite auch innerhalb von WordPress lieber mit den Quciktags bzw. in der Code-Ansicht. Aber wenn WYSIWYG gewünscht wird, warum nicht auf schon eine vorgefertigte Lösung setzen.

Ich habe es vorhin hier im Weblog getestet und es funktioniert so weit gut. Es werden dann ca. 35 KB mehr geladen, aber die Qualität des ausgelieferten Codes ist OK.

Via: Jens (ICQ)

Seit sehr langer Zeit setze ich hier im Weblog eine CSS-Datei für die Druckausgabe, hier der Code aus dem entsprechenden Bereich:

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Das Ergebnis ist jedem halbwegs erfahrenem Webworker klar. Der Browser liest beide CSS-Dateien ein [1] und je nach dem im welchen Modus man sich befindet (z.B. Druckvorschau) wird die entsprechende CSS-Datei eingesetzt. Somit kann man z.B. für die Druckausgabe eine optimiertes Dokument ausgeben lassen. Hier in diesem Weblog blende ich so gut wie alles was nicht direkt zum Inhalt gehört aus. Einfach mal im Browser die Druckvorschau aufrufen oder auf den Druckvorschau-Link klicken. (weiterlesen…)

Eins der Themengebiete, vor dem ich mich bis neulich erfolgreich gedrückt habe, war das Thema Lightbox. Für die die es nicht wissen: es geht u.a. darum die Präsentation der Bilder durch Javascript zu verschönern und mit einfachen Mitteln rudimentäre Galerien mit netten Effekten zu realisieren.

Als ich das Layout für Herr der Ringe-Weblog erstellt hatte, habe ich mich entschlossen auch dieses Thema anzugehen, da ich das neue Weblog u.a. deswegen gestartet habe um mich mit neuen Themen zu beschäftigen. Für WordPress-Blogs gibt es jede Menge Lightbox-Plugins und ich habe vier getestet. Am meisten hat mir aber Thickbox zugesagt, es ist schlank, leicht anzupassen und mein Bauch hat gesagt: "nimm dieses Plugin" .

Wie alle Plugins ist auch dieses einfach zu installieren: einfach den Ordner hochladen und das Plugin aktivieren. Die Anpassungen nimmt man entweder in der CSS-Datei (thickbox.css) vor oder in der Javascript-Datei (thickbox.js) wenn man z.B. die Bezeichnungen anpassen oder eindeutschen will.

Wenn man dann den Lightbox bei den Bildern einfügen will, dann muss man nur class="thickbox" einfügen:

<a href="..." class="thickbox" title="..."><img src="..." alt="..." /></a>

Und schon hat man einen kleinen und netten JS-Effekt wenn man das Bild aufruft und der Wert bzw. der Inhalt des title-Attributs dient als die sichtbare Beschreibung des Bildes. Hat man mehrere Bilder zu einem Thema innerhalb des Beitrages und man will diese Bilder zu einer Art Galerie verknüpfen, dann schaut der Code folgendermaßen aus:

<a href="..." class="thickbox" title="..." rel="galerie-name"><img src="..." alt="..." /></a>

Mit dem Attribut rel und dem eindeutigen Wert (der bei den zu verknüpfenenden Bildern identisch sein muss) erreicht man, dass das Skript die einzelnen Bilder durch ein "Weiter"- bzw. "Zurück"-Link verbindet. Hier zwei Beispiele: Beispiel 1 und Beispiel 2