Direkt zum Inhalt springen

Theme “Aestival” bei WordPress

30. Januar 2009

screenshot1
Wenn’s einmal funktioniert, dann macht’s ja richtig Spaß! Und deshalb finden Sie ab jetzt hier das nächste Theme von mir bei WordPress.

Und natürlich gibt es das auch wieder in der deutschen Version, und zwar hier (Version 2.2).

“Aestival” bedeutet übrigens “sommerlich”. das kann ja dann schonmal auf die wärmere Jahreszeit einstimmen.

Schönes Wochenende!

:)-

Erstes Theme bei Wordpress - jetzt mit austauschbarer Header-Grafik

27. Januar 2009

Theme "Greenie"Wunderbar, ich habe mein erstes Theme bei wordpress.org untergebracht!
War ziemlich interessant, zu Anfang, denn zuerst fehlte dieses im Code, dann jenes, schließlich noch hier ein Schnipsel und dort die neueste Versionsnummer, weil WordPress bestimmte Ansprüche an einen Mindest-Standard hat (z.B. muss das Theme Avatare unterstützen oder im CSS-Header müssen Tags zur Verschlagwortung angegeben werden).

Aber letztendlich hat das Theme dann doch den Anforderungen genügt und wurde aufgenommen, was mich natürlich ziemlich sehr freut. :)

Da bei Wordpress lediglich Themes angenommen werden, die in Englisch verfasst werden, stelle ich Ihnen nun hier die deutsche Version des Themes (V 2.9) zur Verfügung.

Ab Version 2.7 lässt sich die Header-Grafik über die Administration austauschen. Dort können Sie dann auch entscheiden, ob Sie die Farbe der Schrift im Header veränderrn möchten oder ob Sie ganz ohne Schrift sogar glücklicher wären. Lässt sich jetzt alles einstellen, ohne dass Sie auch nur eine Datei anrühren müssten.

Heruntergeladen: 136 mal
Größe: 90.5 kB
Letztes Update: 6. October 2009

Das Wordpress-Plugin WP-DownloadCounter

26. Januar 2009

Da sind wir doch gleich beim richtigen Thema: Weil ich eine furchtbar neugierige Person bin, möchte ich natürlich wissen, wie oft denn nun mein Theme Greenie in seiner deutschen Fassung heruntergeladen wird. Und deshalb läuft der Download über den Download Counter von Erwin Bovendeur.

Installation und Einrichtungsschritte sind ein bisschen tricky, aber wenn eins das Prinzip einmal verstanden hat, ist das Plugin sehr effektiv.

Hier eine Komplettanleitung in 9 Schritten:

  1. Laden Sie sich das Plugin hier bei wordpress.org oder hier auf der Seite des Plugin-Autors herunter und entpacken Sie es.

  2. Schieben Sie den Ordner per FTP in Ihren wp-content/plugins-Ordner und aktivieren Sie das Plugin auf der Plugin-Seite in der Admin.

  3. Bis Wordpress Version unter 2.7 finden Sie die Einstellungen des Plugins unter "Verwalten -> Downloads", ab 2.7 unter "Tools -> Downloads".

    Jetzt kommt es darauf an, ob Sie "Schöne URLs" eingestellt haben oder nicht: wenn Sie die nicht eingestellt haben und Adressen in Ihrem Blog also beispielsweise so aussehen:

    http://www.ihrewebsite.de/blog/?p=123

    dann müssen Sie den Haken bei "Use pretty links" entfernen.

    Haben Sie aber "Schöne URLs" eingestellt, und damit die Struktur der Permalinks verändert, dann sollten Sie den genannten Haken gesetzt lassen und ganz bestimmt dem Link folgen, der Sie zur Permalink-Seite führt. Dort müssen Sie unbedingt einfach nur die Einstellungen bestätigen, sonst kann das Plugin nicht richtig arbeiten.

    Zurück auf der Seite "Tools -> Downloads" können Sie die Anzahl der Auflistungen getrost bei 500 lassen; das wird wohl für den Anfang reichen, grins.

  4. Jetzt wird es spannend, denn jetzt geht’s richtig los!
    Voraussetzung dafür, dass Sie einen Download zählen können, ist, dass etwas zum Herunterladen da ist, und deshalb können Sie sich nun aussuchen, ob Sie bei einem bestimmten Posting oder direkt unter "Medien" eine Test-Datei hochladen, die wir später wieder herunterladen wollen.

    Laden Sie also rauf, was das Zeug hält! Bevor Sie dann das Fenster wieder wegklicken, das Ihnen die Infos zur Datei anzeigt, kopieren Sie sich bitte unbedingt die URL zur Datei heraus, also jene, die mit "http://" anfängt und mit der Dateiendung der heraufzuladenden Datei aufhört und dazwischen den gesamten Pfad zur hochgeladenen Datei angibt.

  5. Wechseln Sie nun zurück in die Ansicht "Tools -> Downloads" und klicken Sie dort auf den Button "Add Download". In der nächsten Ansicht fügen Sie nun in die untere Zeile die eben kopierte vollständige URL der hochgeladenen Datei ein und in die obere Zeile packen Sie lediglich den Dateinamen dieser Datei (bei mir wäre das also z.B. "greenie_de_wp_24.zip"). Klicken Sie auf "Save" und verlassen Sie diese Ansicht in Richtung "Posting schreiben" oder "verwalten", je nach je.

  6. Damit nun im Posting die Datei, die Sie zum Herunterladen zur Verfügung stellen, so eingebunden wird, dass sie am Dowload Counter nicht vorbeikommt, wechseln Sie am besten im Editor in die HTML-Ansicht und schreiben:

    <a href="[ download(dateiname) ]">Link</a>

    Dabei lassen Sie dann aber die beiden Leerzeichen weg, die sich in den eckigen Klammern befinden; die musste ich reinsetzen, damit der Link als Text sichtbar bleibt. In den runden Klammern ersetzen Sie "dateiname" durch den Namen der Datei, die Sie gerade hochgeladen haben.

  7. Speichern und im Posting gucken: Ist das ein Link? Und wenn ja, wenn Sie draufklicken, werden Sie von Ihrem Browser gefragt, wo Sie Ihre Test-Datei hinspeichern sollen? Ja super, dann hat ja alles funktioniert!

  8. Das Plugin liefert Ihnen noch weitere Informationen:

    • [ downloadcounter(dateiname) ] liefert Ihnen auch im Posting die Anzahl der Downloads.
    • [ downloadsize(dateiname) ] schreibt die Größe der Datei.
    • [ downloadupdated(dateiname) ] schreibt das Letzte Update-Datum ins Posting.

    Natürlich müssen auch bei diesen Angaben jeweils die Leerzeichen aus den eckigen Klammern genommen werden!

  9. Wenn Sie solche Infos aber lieber nur in der Administration abfragen, dann finden Sie diese auf der Seite "Tools -> Downloads" und dann hinter dem Link "View" bei den einzelnen Dateien in der Download-Liste.

Fazit: In der Tat ein bisschen kompliziert, aber wenn’s dann einmal richtig eingestellt ist, dann funztr das auch. Sehr schön!

Die Firefox-Erweiterung Scrapbook: Archivierung und viel viel mehr

08. August 2007

Scrapbook ist (nur, wie wir sehen werden) in erster Linie ein Tool, mit dem Sie ganze Internet-Seiten sehr leicht archivieren können:

Scrapbook in der SidebarNach Installation der Erweiterung erscheint das Scrapbook-Icon oben rechts in Ihrer Menüleiste von Firefox. Hier draufgeklickt, öffnet sich links ein Zusatzfenster. Wollen Sie nun die gesamte Seite, die gerade im Browser geöffnet ist, archivieren, so müssen Sie lediglich die Adresse aus dem Adressfenster ins Scrapbook ziehen. Das Plugin meldet Ihnen, wenn die Speicherung aller Elemente abgeschlossen ist.

Und wenn ich hier “alle Elemente” schreibe, dann meine ich auch “alle Elemente”, denn Scrapbook archiviert in der Grundeinstellung nicht nur die Inhaltstexte, sondern auch jede Grafik, jeden Werbe-iFrame, die gesamte CSS-Datei im Hintergund und beispielsweise auch jeden Youtube-Film, der dort sichtbar ist (weshalb es durchausratsam ist, sich zu überlegen, ob aktuell die Zeit da ist, eine Seite herunterzuladen, in die fünf Filme hintereinander eingebunden sind … das kann dann ein bisschen dauern).

Scrapbook im Kontext-Menü

Mit Scrapbook lassen sich aber auch lediglich Teile einer Webseite archivieren. Entweder, Sie markieren den betreffenden Textabsatz und ziehen ihn ohne weiteres ins Scrapbook, oder Sie rufen per Klick auf die rechte Maustaste das Kontext-Menü auf und wählen “Auswahl archivieren als …”, was Sie zu einem Fenster führt, das Ihnen genauere Einstellungen für die Speicherung ermöglicht:

Verschiedene Möglichkeiten der Archivierung

Neben der Möglichkeit, den Titel des Schnipsels (oder der ganzen Seite, so Sie sie mit Strg+a vollständig markiert haben) zu ändern, können Sie hier auch entscheiden, welche Art von Grafiken, Filmen oder verlinkten Sound-Files Sie mitspeichern wollen. Im Screenshot ist darüberhinaus zu erkennen, dass sich die Inhalte im Scrapbook prima in unterschiedlichen thematischen Ordnern ablegen lassen, die Sie je nach Gusto anlegen, um dem Archivierungs-Chaos einen Riegel vorzuschieben.

Das ist aber noch nicht alles, was Scrapbook zu bieten hat, denn Sie haben über die reine Archivierungsfunktion hinaus auch noch die Möglichkeit, die archivierten Seiten zu bearbeiten und mit Kommentaren zu versehen.

Scrapbook-WerkzeugleisteRechts unten im Browserfenster finden Sie das Scrapbook-Icon in kleinerer Version. Mit einem Rechts-Klick auf dieses Icon wählen Sie “Wekzeugleiste anzeigen”. Danach erscheint am unteren Browserrand eine Zusatzleiste, die Ihnen die Änderung des Titels und die Eingabe einer eigenen Beschreibung ermöglicht. Daneben steht Ihnen ein Tool zur Verfügung, mit dem Sie Textabschnitte mit einem Textmarker deutlich herausheben können, und das Icon mit dem Bleistift startet die Kommentarfunktion, mit der Sie kleine Fensterchen generieren, in denen Sie Ihre persönlichen Anmerkungen unterbringen. Gespeichert werden die Änderungen dann durch einen Klick auf das Disketten-Symbol.

Beispiel bearbeitete Seite im Scrapbook-Archiv

Zur Original-Seite gelangen Sie jederzeit wieder, indem Sie per Rechtsklick auf das kleine Snapshot-Icon unten rechts “Ursprungs-URL öffnen” auswählen.

Scrapbook eignet sich also auch gut als Recherche-Tool, denn durch all diese Funktionalitäten wird es möglich, wichtige und interessante Inhalte aus dem Internet nach den eigenen Kriterien zu ordnen und gleich an Ort und Stelle die eigenen Gedanken festzuhalten.

Zum Plugin bei Mozilla

Mit der Hype Machine Musikblogs durchsuchen

07. August 2007

Die Hype Machine ist eine Sammelplattform für Menschen, die in Blogs über Musik schreiben und für solche, die Musik im Netz suchen. Sehr interessant, wenn Sie mal Lust auf Neues haben oder einfach wissen möchten, was gerade eben "gehyped" wird.

Neben einer Vielzahl an RSS-Feeds bietet die Hype Machine auch ein eigenes Internet-Radio in verschiedenen Versionen an (Flash-PopUp-Player und Streaming-Palylists für Winamp, iTunes, Windows Media Player sowie für den Real Player – da fehlt so ziemlich nichts!).

Podcasts werden nicht mit erfasst, aber diese können über die Hype Machine immerhin abonniert werden.

Auf Hype Machine können keine MP3-Dateien heruntergeladen werden, aber bei fast jedem Song ist ein Link auf das entsprechende Angebot beispielsweise bei Amazon oder eMusic vorhanden. Und wenn Sie sich ein bisschen in den Original-Beiträgen umsehen, finden Sie dort auch das eine oder andere komplette MP3-File.

Zum Wochenbeginn:

06. August 2007

"How to paint the MONA LISA with MS PAINT"

Da soll nochmal jemand sagen, mit so kleinen Programmen ließe sich nichts bewerkstelligen … :)

Gefunden bei ice-horse.de

Das WordPress-Plugin Recent Posts

03. August 2007

Die neuesten Einträge in der Sidebar des Blogs anzuzeigen macht beispielsweise Sinn, wenn Menschen über eine Suchmaschine auf ein ganz bestimmtes Posting stoßen und sich schnell und ohne viel Klicken darüber informieren wollen, worüber Sie denn in der letzten Zeit noch so geschrieben haben.

Das WordPress-Plugin "Recent Posts" ist schnell installiert: ordner offline entpacken, den Ordner "Recent_Posts" per FTP in den Plugins-Ordner Ihres Weblogs schieben, das Plugin in der Administration aktivieren.

Auch deises Plugin verfügt über eine eigene Seite unter "Einstellungen -> Neue Beiträge", aber bevor die hier vorgenommenen änderungen greifen, müssen Sie noch etwas in Ihrer Datei sidebar.php (oder wo immer Sie die neuesten Beiträge sonst anzeigen lassen wollen) ergänzen:

<?php recent_posts(); ?>

Ob die Links nun als Liste ausgegeben werden oder nicht, regeln Sie im Weiteren bequem über die Einstellungs-Seite. Hier können Sie auch wählen, wieviele Beiträge angezeigt werden sollen, ob auch statische Seiten auftauchen dürfen, ob bestimmte Beiträge ausgeschlossen werden sollen und vieles mehr.

Standardmäßig wird lediglich ein Link auf den Titel der neuesten Beiträge angezeigt (zu finden unter "Output Template"; dort steht standard-mäßig zwischen den Link-Tags lediglich {link}); es sind aber auch noch andere Angaben möglich, die der Autor des Plugins auf einer gesonderten Seite beschreibt.

Plugin-Seite: http://rmarsh.com/plugins/recent-posts/

Weitere Erläuterungen: http://rmarsh.com/plugins/post-options/

Das WordPress-Plugin “Recent Comments”

02. August 2007

Die neuesten Kommentare oder Trackbacks beispielsweise in der Sidebar anzuzeigen, hat den Vorteil, dass alle, die Ihr Blog besuchen, gleich sehen können, auf welchen Beitrag zuletzt wie reagiert wurde.

Das Plugin "Recent Comments" ist ganz einfach zu installieren: Zip-Datei entpacken, die Datei get-recent-comments.php per FTP in den Plugins-Folder Ihres Weblogs überspielen und im Admin-Bereich unter "Plugins" aktivieren.

Das Plugin hat eine eigene "Instructiones"-Seite, auf der ausführlich alle Funktionalitäten beschrieben werden; dennoch hier das generelle Vorgehen kurz skizziert.

Sie müssen lediglich eine Angabe an der entsprechenden Stelle in der Datei sidebar.php einfügen:

Für die neusten Kommentare notieren Sie:

<?php get_recent_comments(); ?>

Sollten Sie die neuesten Kommentare als Liste ausgeben lassen wollen (das ist die Standard-Einstellung), so müssten Sie um diesen PHP-Befehl noch den einleitenden und ausleitenden Tag für geordenete oder ungeordnete Listen schreiben, also:

<ul>
<?php get_recent_comments(); ?>
</ul>

oder

<ol>
<?php get_recent_comments(); ?>
</ol>

Für die neuesten Trackbacks notieren Sie entsprechend:

<ul>
<?php get_recent_trackbacks(); ?>
</ul>

 oder

<ol>
<?php get_recent_trackbacks(); ?>
</ol>

Alle weiteren Einstellungen können Sie, wenn das Plugin einmal installiert ist, unter "Einstellungen -> Recent Comments" vornehmen.

Hier können Sie bestimmen, wieviele Kommentare oder Trackbacks angezeigt werden sollen, in welcher Form die Kommentare angezeigt werden und vieles mehr.

Sie können auch bestimmte Kategorien ausschließen und festlegen, wie Gravatare behandelt werden sollen.

Sehr praktisch, dass alle diese Einstellungen auf eigenen Seiten vorgenommen werden können; das hält das Gewusel im Quellcode doch um einiges geringer und Schreibfehler werden so auch vermieden.

Na, und wenn Ihr WordPress-Theme widget-fähig ist, so müssen Sie noch nicht einmal mehr in irgendeiner PHP-Datei herumfuhrwerken, sondern können die Anordnung dieser Plugins gemütlich über das Widget-Panel vornehmen.

 

Alles neu macht der August: neues Layout für das Blog der koordinante

01. August 2007

In den letzten Tagen habe ich dieses neue Layout namens “Liquid” entworfen. Selbstgestellte Aufgabe war es, eine flexible Gestaltung zu erhalten, die bis zu einer bestimmten Größe mitwächst (bis 1200 Pixel Breite) und –schrumpft (bis 800 Pixel Breite).

Damit der Header auch wachsen und schrumpfen kann, besteht der Blog-Titel “die koordinante” aus einer PNG-Grafik mit transparentem Hintergrund, das ich in einer gesonderten Box untergebracht habe, damit es immer an der gleichen Stelle bleibt, während sich die Header-Grafik “mitbewegt”.

Damit auch der Internet Explorer unter Version 7.0 PNG-Grafiken mit transparentem Hintergrund richtig anzeigt, habe ich per Conditional Comment die JavaScript-Bibliothek von Dean Edwards eingesetzt, welche auch einige andere Probleme beim Layouting für den IE zu beheben hilft (wie z.B. die Sache mit den minimalen und maximalen Breitenangaben, die auf diese Art und Weise immerhin schon ein bisschen besser, wenn auch noch nicht perfekt funktioniert).

Na, und dann habe ich bei der Aufteilung der festen Seiten in zwei Navigationspunkte im Quermenü und zwei unter der Überschrift “Über Weblogs” sowie bei der Auflistung der Links im Archiv mit den Möglichkeiten der verschiedenen Parameter der entsprechenden  WordPress Template-Tags herumgespielt, wobei es mir bei letzterem insbesondere darum ging, die Darstellung ein wenig raumsparender zu gestalten.

Ansonsten besteht dieses Layout aus ziemlich vielen Grafik-Schnipseln, die bewirken, dass die dekorativen Schatten dort erscheinen, wo sie erscheinen sollen … Eckstückchen und kachelnde Elemente in Hülle und Fülle … und trotzdem ist diese Site immernoch barrierefrei – dank CSS! (Und ich hoffe, Ihr Browser lädt sich nicht zu Tode …)

Der Internet Explorer bis 6.0 und CSS-Gestaltungselemente

24. Juli 2007

Mal angenommen, Sie haben ein grafisch gestaltetes Feld, das im CSS aus drei Teilen besteht, wobei alle Grafik-Elemente als Hintergrund-Grafiken in CSS-Stilen definiert werden:

Der erste Teil  (CSS-Klasse “oben”) enthält die Grafik für den oberen Rand des Feldes und ist 7 Pixel hoch.
Der zweite Teil (CSS-Klasse “mitte”) enthält die Grafik für den Mittelteil des Feldes, welche so lange gekachelt wird, wie textliche Inhalte vorhanden sind.
Der dritte Teil (CSS-Klasse “unten”) schließlich enthält die abschließende Grafik und ist auch 7 Pixel hoch.

Im Quellcode haben wir also stehen:

<div class=”oben”></div>
<div class=”mitte”>Testtext<br />mit Zeilenumbruch<br />etc. pp.</div>
<div class=”unten”></div>

In der Regel funktioniert das auch ganz wunderbar … nur nicht im Internet Explorer bis zur Version 6.0, denn in diesem finden sich unerklärliche Lücken zwischen dem Teil, in dem der Text steht, und den beiden “Abschluss-Stücken” oben und unten.

Tjaa, der IE ist nämlich ganz schlau! An Stellen, wo kein Text steht, tut er einfach so, als würde dort trotzdem welcher stehen, und das hat fatale Auswirkungen, wenn Sie, wie im Beispiel oben beschrieben, DIV-Container notieren, zwischen deren einleitendem und ausleitendem Tag nichts weiter notiert ist, weil nichts notiert werden muss, denn alles wird durch das Stylesheet im Hintergrund gesteuert.

Bei <div class=”oben”></div> und <div class=”unten”></div> nimmt der IE also einfach mal an, dass selbstverständlich Text zwischen einleitendem und ausleitendem Tag vorhanden ist, und zieht deshalb die Höhe der DIV-Container auf die Größe des nichtvorhandenen Textes, wenn Sie verstehen, was ich meine. Da in den seltensten Fällen die Standard-Schriftgröße einer Webseite bei 7 Pixeln liegen wird, entsteht zwischen den Grafiken eine Lücke.

Grafische Box ohne
Font-Angabe für den IE:

Testtext
mit Zeilenumbruch
etc. pp.

Grafische Box mit
Font-Angabe für den IE:

Testtext
mit Zeilenumbruch
etc. pp.

Also müssen wir dem IE beibringen, dass der nicht vorhandene Text kleiner sein soll als die 7 Pixel der Grafikhöhen aus unserem Beispiel. Das erreichen wir am besten, indem wir den beiden o.g. DIV-Containern jeweils die Angabe “font-size:1px;” mitgeben.

Und schon funktioniert das auch im Internet Explorer.

Von der Trockenübung weg: rechts sehen Sie, wie ein grafisches Feld mit und ohne Angabe für die Schriftgröße aussieht; im Internet Explorer bis Version 6.0 erkennen Sie im ersten Beispiel die Lücken. Alle, die einen anderen Browser oder zumindest den IE 7.0 nutzen dürfen, sollten zwei völlig gleiche Felder sehen. (Wenn nicht, würde mich interessieren, mit welchem Browser Sie gerade auf diese Seite schauen.)