Philip Hetjens » Wordpress

Google Font API: Mehr Schriften im Web

Philip Hetjens — Thu, 20 May 2010 06:49:38 +0000

Google hat gestern die Google Font API vorgestellt. Damit ist es möglich, wie bereits auch mit anderen Diensten, auf eine grössere Anzahl Schriften im Web zuzugreifen. Google hat ein Font Directory aufgesetzt (könnte noch etwas grösser werden), das zeigt welche Schriften verfügbar sind. So wie es aussieht sind diese Schriftarten auch lizenztechnisch unproblematisch. Google versichert auch die Funktionalität unter Internet Explorer ab Version 6 und natürlich allen anderen wichtigen Browsern. Aber da keine SVG-Version der Schrift ausgeliefert wird, funktioniert Googles Font API bis jetzt nicht unter iPhone/iPad.

Der Trick basiert rein auf CSS, das bedeutet, dass im gegensatz SiRF kein Flash geladen werden muss, und auch der Text einfach markiert und kopiert werden kann durch den Websitebesucher.

Ein Beispiel:





  
  untitled
  
  


  Hello World

Wirklich, es funktioniert:

Das ist jetzt in der Schriftart Reenie Beanie

Verwandter Artikel

CSS: Runde Ecken
Abgerundete Ecken werfen ihren Schatten voraus. In Firefox und Webkit-basierten Browsern (Chrome und Safari) funktionieren sie schon. (10. Dezember 2009)

CSS: Runde Ecken

Philip Hetjens — Thu, 10 Dec 2009 19:40:51 +0000

Abgerundete Ecken werfen ihren Schatten voraus. In Firefox und Webkit-basierten Browsern (Chrome und Safari) funktionieren sie schon, aber unterschiedlich. Und das ist Nervkram.

Zuerst muss definiert werden, dass überhaupt eine Border angezeigt wird. Sagen wir mal, dass alle Elemente mit der Klasse rundjetzt Runde Ecken haben sollen:

.rundjetzt { border: 1px solid black; }

Jetzt definieren wir abgerundete Ecken für Firefox:

.rundjetzt { -moz-border-radius: 5px; }

Und jetzt für Webkit:

.rundjetzt { -webkit-border-radius: 5px; }

Bis jetzt ist es quasi gleich. Wenn man nur eine Ecke definieren will, wird es komplizert. Mozilla verwendet folgende Syntax:

-moz-border-radius-topleft
-moz-border-radius-bottomright

Webkit hingegen hätte gerne:

-webkit-border-top-left-radius
-webkit-border-bottom-right-radius

Naja, besser so komisch unterschiedlich benutzen können, als gar nicht benutzen können wie z.B. im Internet Explorer im Opera.

WordPress 2.8 Widget-API: Widgets objekt-orientiert entwickeln

Philip Hetjens — Fri, 27 Nov 2009 19:29:07 +0000

Mit WordPress 2.8 wurde eine neue Widget-API eingeführt. Durch die neue Schnittstelle wurde die Widgetentwicklung objekt-orientiert und viel einfacher.

Bis einschließlich Version 2.7 war die Entwicklung von Widgets eingeschränkt oder kompliziert: Je nachdem ob nur eine Instanz des Widgets gebraucht wird oder ob es mehrmals aktiviert werden sollte. WordPress 2.8 räumt damit auf. Es gibt gar nicht mehr die Möglichkeit ein Widget nur einmal zu aktivieren.

Um ein Widget zu schreiben, muss eine Klasse mit vier vorgegebenen Methoden von WP_Widget abgeleitet werden.

class Mein_Neues_Widget extends WP_Widget {
  function Mein_Neues_Widget() {
  }

  function widget($args, $instance) {
  }

  function update($new_instance, $old_instance) {
  }

  function form($instance) {
  }
}

Jede Methode übernimmt eine Aufgabe. Der Konstruktor (in diesem Fall die Methode Mein_Neues_Widget muss den Konstruktor der Basisklasse WP_Widget aufrufen. Bei dem Aufruf müssen aber Parameter übergeben werden, die erst definiert werden müssen. Der komplette Konstruktor kann wie folgt aussehen:

function Mein_Neues_Widget() {
  $widget_ops = array(
    'classname' => 'Mein_Neues_Widget',
    'description' => 'Hier die Beschreibung für die Widgetseite im wp-admin eintragen'
  );
  $this->WP_Widget('Mein_Neues_Widget','Name des Widgets im wp-admin',$widget_ops);
}

Die Widget-Methode wird von WordPress aufgerufen, sobald das Widget im Blog angezeigt wird. Der Parameter $args ist das bereits von früher bekannte Array mit den Elementen before_widget, before_title, after_title und after_widget damit alle Widgets gleich aussehen und die Struktur vom Theme vorgegeben werden kann. Der zweite Parameter $instance enthält alle Einstellungen, die für diese Widget-Instanz im wp-admin durch den Administrator vorgegeben wurden.

Durch die beiden Methoden form und update kann für jede Instanz im wp-admin ein Konfigurationsfenster angezeigt werden und die Einstellungen gespeichert werden. In form wird das Formular ausgegeben und update sorgt für die Speicherung. Es gibt ein paar Funktionen in WordPress, die dafür sorgen, dass die Input-Felder korrekt den verschiedenen Widgets zugeordnet werden können. Ein Beispiel für ein Feld mit dem Namen title sieht wie folgt aus:

function update($new_instance, $old_instance) {
  $instance = $old_instance;
  $instance['title'] = strip_tags($new_instance['title']);
  return $instance;
}

function form($instance) {
  $instance = wp_parse_args($instance, array(
    'title'=>'Standardtitel'
  ));
  $title = strip_tags($instance['title']);
  echo 'Title:
    ';
    ';
}

Die Update-Methode hat zwei Parameter. Im ersten Array sind die gerade vom Benutzer neueingegeben Werte und im zweiten Array die alten, bereits gespeicherten Werte. Die Methode muss ein Array zurückgeben, dadurch ist es möglich zu überprüfen, ob die neuen Werte überhaupt einen Sinn ergeben und die Speicherung ggf. zu unterbinden. Wenn überhaupt keine Prüfung stattfinden soll, kann auch einfach die $new_instance-Variable zurückgegeben werden.
In der form-Methode wird zuerst die Funktion wp_parse_args aufgerufen um Standardwerte, falls das Widget gerade zum ersten Mal hinzugefügt wurde, festzulegen. Die beiden Methoden der Basisklasse WP_Widget $this->get_field_id und $this->get_field_name geben eine ID und einen Namen für input-Felder zurück. Wenn diese Funktionen, vor allem die get_field_name, verwendet wird, wird sichergestellt, dass WordPress die Werte korrekt übernehmen kann.
Das Feld title übernimmt übrigens eine besondere Rolle. WordPress zeigt den eingegeben Wert im wp-admin auch im zugeklappten Zustand des Widgets an.

Die Klasse ist nun komplett definiert. Jetzt muss WordPress nur noch gesagt werden, dass diese Klasse auch initialisiert werden soll. Ein eleganter Weg dazu ist die Action widgets_init kombiniert mit einer anonymen Funktion:

add_action('widgets_init', create_function('', 'return register_widget("Mein_Neues_Widget");'));

Verwandte Artikel

	Settings API: Wordpress Standardoptionsseiten erweitern Mit der Settings-API von Wordpress ist es einfach die Optionen des eigenen Plugins in die Wordpress-Optionen einzubinden. (5. August 2009)
	Default Link Widget: Eigenen Titel für das Link-Widget einstellen Dieses Widget ermöglicht einen eigenen Titel für jedes Link-Widget einzustellen. (31. Juli 2009)

wpSEO: Benutzen wir bei Blogwerk schon sehr lange

Philip Hetjens — Thu, 06 Aug 2009 11:12:14 +0000

Das WordPress-Plugin wpSEO benutzen wir bei Blogwerk schon sehr lange. Vor ziemlich genau einen Jahr haben wir auf die kostenpflichtige Version gewechselt (am Anfang gab es noch eine kostenlose Version). Und wir haben es bis heute nicht bereut. Von den Funktionen her bietet WPSEO alles, was man sich wünschen kann (abgesehen vielleicht von einer automatischen Erstellung einer XML-Sitemap). Die Funktionsliste läst sich überall im Internet lesen, darauf möchte ich gar nicht eingehen.

Ich schreibe hier, weil ich mit der Unterstützung von Sergej, dem Entwickler, super zufrieden bin. Er ist (fast) immer erreichbar, nett und hilfreich. Neue Funktionswunsch? Kein Problem! Gibt’s meistens mit dem nächsten Update. Das ist genau der Vorteil von kostenpflichtiger Software im Vergleich zur open source Software. Man bekommt guten Support. Bei Open Source Software kann es passieren, dass der Entwickler keine Lust mehr hat, und das Produkt einfach von heute auf morgen einstellt. Bei bezahlter Software passiert das nicht so einfach.

WPSEO gibt es auf www.wpseo.de (Affiliate-Link). Sergej hat auch noch ein paar andere Plugins geschrieben, u.a. die AntispamBee. Und sein Twitter-Stream ist auch interessant.

Verwandte Artikel

	Settings API: Wordpress Standardoptionsseiten erweitern Mit der Settings-API von Wordpress ist es einfach die Optionen des eigenen Plugins in die Wordpress-Optionen einzubinden. (5. August 2009)
	Feedburner + Wordpress: Neues Plugin bietet Zugriff auf verschiedene Feeds Das Feedsmith-Plugin ist alt und nicht so flexibel. Mein neues Plugin räumt damit auf. (3. August 2009)
	Privates Blog: Anmeldung bevor das Blog angezeigt wird Dieses Plugin zeigt jedem nicht angemeldeten Besucher des Blogs zuerst den Wordpress-Anmeldebildschirm. Somit kann ein privates Blogs eingerichtet werden. (1. August 2009)

Settings API: WordPress Standardoptionsseiten erweitern

Philip Hetjens — Wed, 05 Aug 2009 10:46:41 +0000

Die Settings-API ist ein einfacher Weg die Optionen eines Plugins in die Standardoptionsseiten von WordPress zu integrieren. Für Plugins mit vielen Optionen eignet sich die API nicht, da dann die Seiten überladen wären, aber für kleine Plugins mit wenigen Optionen ist sie ideal. Der Codex erklärt die Settings-API schon ganz gut, aber ich hatte trotzdem ein paar Probleme und darum hier dieses Tutorial.

Alle Aufrufe der Settings-API sollten im Hook ‘admin_init’ gemacht werden. Die zwei wichtigsten Aufrufe der API sind die beiden Funktionen add_settings_field zum Anzeigen einer Option und register_setting zum Speichern. Hier zunächst ein Beispiel. Hier wird ein Textfeld auf der “Schreiben”-Optionsseite hinzugefügt:

add_action('admin_init', 'test_admin_init');
function test_admin_init() {
  add_settings_field(
    'test_option',
    'Test',
    'test_option',
    'writing',
    'default',
    array()
  );
  register_setting('writing','test_option');
}

function test_option() {
  $value = get_option('test_option');
  echo '';
}

Fangen wir mit der einfachen Funktion an: register_setting

register_setting sorgt dafür, dass eine Option gespeichert wird sobald auf der entsprechenden Seite der Speichern-Button gedrückt wurde. Sie hat zwei Parameter. Der erste Parameter gibt an auf welcher Seite die Option hinzugefügt wurde und beim Speichern mitgespeichert werden soll. Der zweite Parameter ist der Name der Option. Genau unter diesem Namen wird die Option auch in der Datenbank abgelegt. In dem Fall oben ist es die Option test_option auf der Seite writing. Optionen können auf allen acht Standardoptionsseiten von WordPress hinzugefügt werden:

general
writing
reading
discussion
media
privacy
permalink
misc

Die andere Funktion add_settings_field hat einige Parameter mehr.

add_settings_field(
  $option_name,
  ''.
    $option_description.
  '',
  $callback_function_name,
  $page,
  'default',
  array()
);

Ich denke die meisten Parameter sind so bereits klar. Hier einige Anmerkungen:
Der zweite Parameter gibt den Text vor dem Optionsfeld aus. Bei WordPress ist es üblich, dass dieser Text ein Label ist (also den Fokus an das Input-Element weitergibt). Das geschieht aber nicht automatisch und muss extra angegeben werden. Mit diesem Funktionsaufruf wird noch nicht das Eingabefeld angezeigt. Darum kümmert sich die Callback-Funktion. Hier das passende Beispiel:

function test_option() {
  $value = get_option('test_option');
  echo '';
}

Die Funktion muss den aktuellen Wert selbst laden und anschließend das komplette Input-Element ausgeben. Der Name des Input-Elements muss der Name der Option sein (s. register_setting). Bitte nicht die ID vergessen, sonst funktioniert das label nicht.

Gruppieren

Wenn das Plugin mehr als eine Option hat, ist es sinnvoll die Optionen zu gruppieren. Dafür muss zuerst eine Gruppe anlegt werden und anschließend können die Optionen dieser Gruppe zuordnen werden. Gruppe anlegen:

add_action('admin_init', 'test_admin_init');
function test_admin_init() {
  add_settings_section(
    'test_section',
    'Test Titel',
    'test_section_description',
    'writing'
  );
  ...
}

function test_section_description() {
  echo 'info';
}

Die Callback-Funktion gibt die Beschreibung zu der Gruppe aus und wird vor den Optionsfeldern angezeigt. Damit sie richtig formatiert wird, sollte in der Callback-Funktion auch ein Absatz ausgegeben werden. Um ein Optionsfeld dieser Gruppe zuzuordnen, muss nur der vorletzte Parameter in der add_settings_field von ‘default’ auf den Sectionname (im Beispiel ‘test_section’) geändert werden. Beispiel:

add_settings_field(
  'test_option',
  'Test',
  'test_option',
  'writing',
  'test_section',
  array()
);

Best Practise

Ich habe jetzt schon einige male die Settings-API benutzt. Dabei wurde mir eins klar. Es ist wichtig die Bezeichner überall gleich zu wählen, sonst kommt man durcheinander. Was meine ich damit: Im Falle der test_option habe ich an allen Stelle test_option verwendet:

Optionsname
Name der Callback-Funktion (ggf. mit einheitlichem Prefix versehen)
Name und ID des Input-Elements

Das Gleiche gilt natürlich auch für die Section und deren Callback-Funktion. Wenn möglich sollte auch eine Vereinheitlichung über Plugingrenzen angestrebt werden.

Die Settings-API unterstützt auch die objekt-orientierte Programmierung. Alle Callback-Funktionen können auch als array mit Verweis auf &$this angegeben werden.

Verwandte Artikel

	Feedburner + Wordpress: Neues Plugin bietet Zugriff auf verschiedene Feeds Das Feedsmith-Plugin ist alt und nicht so flexibel. Mein neues Plugin räumt damit auf. (3. August 2009)
	Privates Blog: Anmeldung bevor das Blog angezeigt wird Dieses Plugin zeigt jedem nicht angemeldeten Besucher des Blogs zuerst den Wordpress-Anmeldebildschirm. Somit kann ein privates Blogs eingerichtet werden. (1. August 2009)
	Default Link Widget: Eigenen Titel für das Link-Widget einstellen Dieses Widget ermöglicht einen eigenen Titel für jedes Link-Widget einzustellen. (31. Juli 2009)

Privates Blog: Anmeldung bevor das Blog angezeigt wird

Philip Hetjens — Sat, 01 Aug 2009 13:31:21 +0000

Es gibt Situationen da ist es praktisch, wenn das Blog nicht öffentlich zugänglich ist. Dafür gibt es (neben einigen anderen Plugins) jetzt auch das “Hetjens Registered Only”-Plugin. Es basiert auf der Arbeit von Carthik A. Sharma wurde aber trotz nur 20 Zeilen Code stark verändert.

Sobald das Plugin aktiviert ist, wird jedem nicht angemeldeten Besucher der WordPress-Anmeldebildschirm gezeigt. Nach der erfolgreichen Anmeldung wird der Besucher weitergeleitet zu der Seite, die er eigentlich aufrufen wollte (egal, ob Homepage, wp-admin oder einen Artikel) [Das ist aber in WordPress eingebaute Funktionalität und wird nicht durch das Plugin bereitgestellt].

Version 0.3 – Download

Verwandter Artikel

Default Link Widget: Eigenen Titel für das Link-Widget einstellen
Dieses Widget ermöglicht einen eigenen Titel für jedes Link-Widget einzustellen. (31. Juli 2009)

Default Link Widget: Eigenen Titel für das Link-Widget einstellen

Philip Hetjens — Fri, 31 Jul 2009 21:20:10 +0000

Automattic hat bei der Entwicklung von WordPress leider nicht vorgesehen, dass bei dem Link-Widget der Titel eingestellt werden kann. Es wird immer der ausgewählte Kategoriename angezeigt.

Manchmal kann es aber sinnvoll sein einen abweichsenden Titel einzustellen. Diese Möglichkeit bietet das “Hetjens Link Widget Title Plugin”. Es wurde nur mit WordPress 2.8.x getestet. Mit älteren Versionen kann es nicht funktionieren, da mit WP-2.8 die Schnittstelle für Widgets geändert wurde.

Nach der Aktivierung gibt es in dem Einstellungsdialog des Widgets eine Text-Box für den Titel. Dieser eingegebene Titel wird als Widget-Title auf dem Blog angezeigt. Wird das Feld leer gelassen, zeigt das Plugin den Standardtitel (Kategorienamen) an.

Version: 0.1 – Download