WordPress

WordPress: Inhalte bestimmter Kategorien ausschließen

Um die Artikel einer bestimmten Kategorie auszuschließen, zum Beispiel auf der Startseite, gibt es wie immer in WordPress mehrere Vorgehensweisen. Entweder man begebt sich auf die Code-Ebene und bearbeitet den Loop mittels der Funktion query_posts. Einen Beispiel dafür liefere ich einem Artikel auf perun.net: WordPress: Inhalte auf der Startseite steuern.

Allerdings hat nicht jeder Lust und die notwendigen Kenntnisse um auf der Code-Ebene zu arbeiten. Hier kann man dann alternativ auf einige Plugins zurückgreifen und einen dieser Plugins will ich hier näher vorstellen. (weiterlesen …)

Menüpunkt "Home" in TwentyTen von WordPress anpassen

Vorhin hat mich zum wiederholten Mal die Frage erreicht, wie man in dem neuen Standard-Theme von WordPress (TwentyTen) den Menüpunkt für die Startseite von Home in irgendetwas anderes umbenennt, zum Beispiel in Startseite.

Wie üblich gibt es in WordPress mehrere Lösungswege. Zum einen kann man die functions.php beackern, wie Heiko Rabe es zum Beispiel beschreibt. Damit kann man den Menüpunkt umbenennen oder entfernen. (weiterlesen …)

WordPress: HTML-Code in Artikeln einbinden

Nehmen wir mal an du musst innerhalb eines WordPress-Artikels oder einer Seite ein iframe einbinden. Bei den iframes handelt es sich um eingebettete Frames, die es einem ermöglichen, Inhalte anderer Quellen bzw. Websites in eigener Website einzubinden.

Ein Beispiel dafür ist der Google Kalender. Wir haben neulich auf unserer Herr der Ringe Website einen Tolkien-Kalender mit verschiedenen Daten, Events und Terminen eingebunden. (weiterlesen …)

Bilder beschriften – reloaded

Schon vor einiger Zeit habe ich hier einen Artikel mit dem bezeichnenden Titel Bilder beschriften in WordPress verfasst. Konkret ging es dabei darum das Formular bzw. die Angaben in dem Formular zu erläutern, das erscheint nachdem man ein Bild hochgeladen hat, um es in einen Artikel oder auf einer Seite einzufügen.

Seit dem hat sich allerdings einiges in WordPress getan und so wurde auch dieses Formular verändert bzw. ergänzt. Hier also eine aktualisierte Erläuterung der Eingabefelder: (weiterlesen …)

WordPress ohne Risiko auf 2.7 updaten

Nachtrag: diese Anleitung gilt natürlich auch für die Version 2.8., 2.9, 3.0 und 3.1.

Ich habe seit dem Erscheinen der Version 2.7 mehrere Weblogs auf die Version 2.7 aktualisiert. Dabei waren bei den verschiedenen Instalaltionen, die Versionen 2.2 bis 2.6 im Einsatz. Seit langer Zeit habe ich mir eine recht ausführliche Vorgehensweise angeeignet, wenn es darum geht, bei einem manuellen Update mehrere Versionen zu überspringen z. B. von 2.3 auf 2.7 oder im allgemeinen wenn es Änderungen in der Datenbank-Struktur von WordPress  gab. So schaut die ausführliche Vorgehensweise aus: (weiterlesen …)

Bilder beschriften in WordPress

Wenn man Bilder in seine WordPress-Artikel einfügt, kommt es auch auf die korrekte "Beschriftung" an: die Inhalte des alt- und des title-Attributts. Nur so können die Bilder z. B. zu einer suchmaschinenoptimierten Website beitragen.

Der Inhalt des alt-Attributts ist außerdem wichtig wenn es darum geht, dass Bilder einmal nicht geladen werden können bzw. darum, dass eine Website auch von Anwendungen besucht wird, die keine Bilder darstellen könne: Textbrowser, Suchmaschinen und Screenreader.

Hat man ein Bild in WordPress hochgeladen, bekommt man auch gleich ein Formular präsentiert, das man ausfüllen kann. Dabei erschließen sich allerdings die Felder nicht unbedingt jedem.

Beispiel-Galerie:

Titel

Wird für das title-Attribut verwendet. Der Text, der erscheint, wenn man den Mauscursor über das Bild hält (auch bekannt als «Tooltip»).

Titel

Dieser Text wird für das alt-Attribut verwendet. Der Text erscheint, wenn das Bild nicht geladen werden kann. Gleichzeitig generiert WordPress daraus auch die Bildunterschrift («Caption»). Dieser Text wird in der Mediathek als "Beschreibung" ausgegeben.

Beschreibung

Diese Beschreibung ist relevant falls man eine Galerie einfügen möchten. Jedes Galeriebild erhält dann eine eigene Seite und auf dieser erscheint dann auch der Text. Es handelt sich hierbei nicht mehr, wie in älteren Versionen von WordPress, um einen internen Beschreibungstext, den man in der Mediathek einsehen konnte.

URL

Hier bestimmt man, ob man das eingefügte Bild verlinken möchte und falls ja, wohin der Link führen soll. Zur Auswahl hat man deswegen: Keine (das Bild ist nicht verlinkt), Datei-URL (= das Bild in originalgröße wird verlinkt) und Artikel-URL (das Bild verlinkt auf den Artikel in dem es erscheint). Selbstverständlich hat man aber auch die Möglichkeit eine eigene URL anzugeben.

Ausrichtung

An dieser Stelle legt man die Ausrichtung des Bildes innerhalb des Artikels fest: keine (resultiert als "mit dem Text"), links, zentriert, rechts

Größe

Hier können Sie festlegen in welcher Größe, dass hochgeladene Bild im Artikel erscheinen soll. Welche Größen sich hinter den Bezeichnungen Vorschaubild und Medium verbergen, können Sie unter Einstellungen » Verschiedenes festlegen.

Die Größe für die Bilder festlegen

Welche Angaben man in der CSS-Datein tätigen muss um die Bilder und die Bilderunterschriften zu stylen, habe ich vor gut fünf Tagen beschrieben: CSS für Bilder in WordPress.

Jetzt folgt ein kleiner Hinweis, wie und an welcher Stelle man die Ausmaße der verschiedenen Bildformate einstellen kann.

Einfach zu "Einstellungen" » "Verschiedenes" begeben (siehe Abbildung) und dort kann man unter "Größe Vorschaubild" die Ausmaße des Vorschaubildes (engl. Thumbnail) einstellen. Falls man die Checkbox "Beschneide die Thumbnails…" aktiviert, dann generiert WordPress aus dem hochgeladenen Bild automatisch ein Vorschaubild nach dem Maßen, welche du festgelegt hast. Sonst generiert er ein proportionales Vorschaubild.

Darunter hat man die Möglichkeit, die Maße für die mittlere Bildgröße festzulegen. Wenn man jetzt ein Bild hochlädt, dann hat man die Möglichkeit es sich auszusuchen, ob man im Beitrag ein Vorschaubild, ein Bild in mittlerer Größe oder das Bild vollständiger Größe einbindet. Wobei zumindest hier und in meinen weiteren Weblogs, die "Originalgröße" auf 500 Pixel begrenzt wird.

Wenn man dann ein Bild hochlädt und einbinden möchte, dann hat man die Auswahl zwischen diesen drei Größen:

WordPress komplett mit Passwort schützen

Manchmal ist es notwendig, die komplette WordPress-Installation mit einem Passwort zu schützen. Hierbei gibt es verschiedene Methoden und Vorgehensweisen. Einer dieser Möglichkeiten bietet das Plugin von Frank Bültge mit dem Namen Authenticator.

Diese WordPress-Erweiterung sperrt sowohl das Frontend als auch das Backen (Admin-Bereich) für alle Besucher, die kein Account in diesem Weblog haben. Nur wer sich einloggt kann das Frontend sehen und je nach dem welche Rechte man hat, kann man auch im Backend arbeiten.

Somit eignet sich diese Plugin prima, wenn man mit einem oder mehreren Autoren einem begrenzten Kreis an Lesern, die Inhalte zugänglich machen möchte … oder natürlich auch als eine vorübergehende Lösung, wenn das Projekt noch nicht richtig online ist, aber mehrere Leute z.B. das Design begutachten sollen.

CSS für Bilder in WordPress

In den letzten Versionen wurde u.a. auch die "Bilder einfügen"-Funktion stark erweitert und seit der Version 2.6 kann man den Bildern automatisch beim Hochladen eine Bild-Unterschrift vergeben. Daher verdient diese Funktion es, dass man ein paar erklärende Sätze verfasst.

Nach dem man ein Bild hochgeladen hat, kann man diverse Eingaben tätigen. Als erstes kann man den Text für den Mousover (title-Attribut) eingeben. Im zweiten Textfeld gibt man den Text für die Bildunterschrift, welcher gleichzeitig auch der Inhalt des alt-Attributes ist.

Weiter darunter im größeren Textfeld mit dem Namen "Beschreibung" notiert man den Text, der bei der Galerie-Funktion erscheint. Dieser Text diente in den früheren Versionen lediglich internen Zwecken. Darunter wird eine URL generiert, je nach dem wofür man sich entscheidet: keine, Link zu dem Bild oder die Adresse des Beitrages.

In den beiden letzten Punkten entscheidet man sich für die Ausrichtung des Bildes und für die Größe bzw. die Ausmaße des Bildes. Die Dimensionen von "Vorschaubild" und "Medium" kann man komfortabel in "Einstellungen" » "Verschiedenes" einstellen.

Die zuständigen CSS-Regeln

So weit, so gut. Nun geht es darum für die Ausrichtungen des Bildes und für Bildunterschrift-Funktion, die passenden CSS-Regeln zu definieren. Hier zuerst (beispielhaft) die Angaben für die Ausrichtung der Bilder:

.aligncenter, div.aligncenter {
    display: block;
    margin-left: auto; margin-right: auto;
    text-align: center;
}

.alignleft {
    float: left; margin-right: 10px;
}

.alignright {
    float: right; margin-left: 10px;
}

Der obere Code sollte klar sein. Dier erste Regel sorgt dafür, dass das Bild bzw. der umgebende div-Block znetriert ist, die zweite Regel sorgt dafür, dass das Bild links floatet und die letzte Regel sorgt dafür, dass das Bild rechts ausgerichtet wird.

.wp-caption {
    text-align: center;
    background: #e4f2fd; border: 1px solid #cde;
    padding: 11px 9px 9px 9px; 
    margin-top: 3px; margin-bottom: 10px;
    /* Abgerundete Ecken fuer Browser die es koennen */
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.wp-caption img {
    margin: 0; padding: 0; border: 1px solid #cde;
}

div.wp-caption a { border: none; }

.wp-caption p.wp-caption-text {
    font-size: 11px; line-height: 17px; 
    margin: 0; padding-top: 5px;
}

Der obere Code besteht aus vier Regeln. Mit der ersten Regel wird eine Box definiert in der sich dann später das Bild befinden wird. Je nach dem restlichen Layout der Website, werden hier entsprechend andere Werte für Abstand, Farbe und Rahmen angegeben.

Die zweite Regel kümmert sich um das Bild innerhalb der Box. Die dritte Regel kümmert sich um den Link, welcher das Bild umschließt und die letzte Regel ist zuständig für die eigentliche Bildunterschrift. Wie das ganze ausschauen kann, sieht man in der oberen Abbildung.

Abgerundete Ecken mit CSS

Auch mit CSS kann man abgerundete Ecken realisieren, hier der Code, der schon weiter oben zum Einsatz kam:

-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

Alle vier Deklarationen tun das gleiche. Eigentlich sollte die letzte Deklaration reichen. Blöderweise unterstützt momentan kein einziger Browser auf dem Markt CSS 3 komplett und daher auch nicht die Eigenschaft border-radius. Die Eigenschaft belasse ich dennoch, falls in nahen Zukunft ein Browser doch diese Eigenschaft unterstützen sollte.

Bis dahin muss man sich proprietären Angaben begnügen: -moz für Geckos, -khtml für Konqueror & Co. und -webkit für Safari & Co.

Aktive Menüpunkte hervorheben

In meinem Weblog beschreibe ich nicht nur wie man den aktuellen bzw. den aktiven Menüpunkt visuell hervorhebt, sondern wie man auch die entsprechende übergeordnete Eltern-Seite hervorheben kann, wen man sich auf den untergeordneten Seiten befindet.