WordPress/Widgets

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Ein Widget ist ein kleines Computerprogramm, das in ein anderes Programm integriert wird. WordPress stellt mit den Widgets schon viele Elemente wie Suchfelder, Menüs, etc. einer Webseite bereit, die Sie nur passend aktivieren müssen.

Beachten Sie: Sollten Sie vor der Aktivierung des Child Themes bereits Festlegungen im Customizer getroffen haben, sind diese im neuen Child Theme nicht aktiviert.
Sie könnten diese mit einem Plugin importieren. Es ist jedoch empfehlenswert, diese jetzt erst einzustellen.

Widgets

Im Backend von WordPress können Sie unter Design > Widgets nun alle verfügbaren Widgets sehen und aktivieren. Sie können entscheiden, ob Sie in der Seitenleiste oder unterhalb des Inhalts angezeigt werden sollen.

Empfehlung: Viele der in den Standardeinstellungen vorhandenen Widgets wie „Meta“ und „Archiv“ sind eher unübersichtlich. Verwenden Sie gezielt nur einige wenige Widgets, damit Ihre Webseite übersichtlich bleibt.

Exkurs: RWD und Zugänglichkeit

Der Begriff „Seitenleiste“ stammt aus dem Printbereich und wurde für das Webdesign übernommen. Mittlerweile surfen über die Hälfte der Nutzer mit mobilen Geräten, auf deren kleinen Viewports alles untereinander dargestellt wird. Auch die Sprachausgabe von Webseiten für Nicht-Sehende, aber auch für Autofahrer, wird immer wichtiger.

Der Einsatz eines CMS wie WordPress stellt hier die Entwicklung auf den Kopf. Normalerweise wird ein Zusatzbereich bei ausreichend Platz mit CSS-Regeln neben dem Inhalt platziert. In WordPress ist die Seitenleiste bereits vorhanden und positioniert; sie schiebt sich bei zu wenig Platz automatisch nach unten und wird zu einem weiteren Bereich „unterhalb des Inhalts“.

Empfehlung:
  • Überprüfen Sie, welche Widgets Sie überhaupt benötigen.
  • Versuchen Sie diese Widgets in einem Seitenbereich zusammenzufassen. Wo dieser sich befindet, entscheidet der Browser je nach Viewport.

Exkurs: Inhaltsstruktur

Im vorherigen Kapitel wurde schon der Unterschied zwischen Beiträgen und Seiten angesprochen.

  • Ein Blog hat in seiner Grundform kein Inhaltsverzeichnis, sondern chronologisch absteigende Beiträge, die evtl. bei zu großer Anzahl auf weiteren Archiv-Seiten platziert werden.
  • Eine klassische Webseite hat eine Startseite, ein Menü und verlinkt auf Unterseiten, die weitere Unterseiten enthalten können. Dabei fällt es zunehmend schwer, Artikel passend einzuordnen, da sie häufig zu mehreren Unterseiten passen können. Dies kann durch eine Querverlinkung nur teilweise ausgeglichen werden.

WordPress bietet hier eine einfache Lösung: Beiträge können mehreren Kategorien zugeordnet und dort aufgelistet werden. Die Kategorien-Übersichten können einen erklärenden Inhalt erhalten. Die Kategorien-Übersichten (oder Inhaltsbereiche) können entweder in einem select-Menü in der Seitenleiste oder prominent in einem Hauptmenü angeboten werden.

Empfehlung:
  • Listen Sie alle vorhandenen oder zu erwartenden Inhalte auf.
  • Sortieren Sie diese Inhalte in mehrere Bereiche und legen entsprechende Kategorien an.

Menü

WordPress bietet unter Design > Menüs ein zugängliches Dropdown-Menü an, das bei :hover weitere Unterseiten öffnet, jedoch auch auf mobilen Geräten und nur mit der Tastatur mit den Tab-Tasten bedienbar ist.

Als Menüpunkte können Sie statische Seiten, Beiträge und auch Übersichtsseiten über Kategorien verlinken und dabei den Linkttext beliebig formulieren. Selbst Links auf externe Seiten sind möglich, aber wegen mangelnder Übersicht nicht erstrebenswert. Mit Drag & Drop können die Menüpunkte frei verschoben und in Unterlisten positioniert werden.

Empfehlung:
  • Gliedern Sie die vorhandenen und (geplanten) Inhalte in verschiedene Bereiche.
  • Verwenden Sie kurze, aussagekräftige Menüpunkte!
  • Verzichten Sie auf zu komplexe Verschachtelungen!
  • Erstellen Sie nun unter Beiträge > Kategorien die gewünschten Kategorien mit ihren Verschachtelungen (Übergeordnete Kategorie)
Als Werkzeug kann Bleistift und Papier, ein wireframe oder eine Live-Demo mit dem contenteditable-Attribut dienen.

Anschließend können Sie das Menü über seine Selektoren mit CSS formatieren:

<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Primäres Menü">

Exkurs: category base aus der URL entfernen

Wenn Sie Kategorien-Übersichten aufrufen, erhalten diese eine etwas umständliche URL, die den englischen Begriff category enthalten:

example.com/category/Kategorienname

Um diese unschöne URL zu vereinfachen, können Sie mehrere Ansätze verfolgen.

Der einfachste ist es, unter Einstellungen > Permalinks eine benutzerdefinierte URL mit den Schlagwörtern /%category%/%postname%/ als Permalink einzustellen und dann unter Optionen als Kategorie-Basis einen Punkt . zu notieren.

Bei dem Trick wird ein Unix-interne Verzeichnisstruktur ausgenutzt: ./ bedeutet “sich selbst” oder “das eigene Verzeichnis”. Durch das . wird die Category Base /category/ also nicht entfernt sondern “nur” auf /./ gekürzt, was die meisten Browser und Suchmaschinen als einfaches / interpretieren und nicht darstellen. Sauber ist das nicht, denn physisch gesehen ist der Link zur Kategorie und die Ordnungsstruktur immer noch unterschiedlich!

mizine.de: WordPress Category Base ‚category‘ aus der URL entfernen
Beachten Sie, dass die Beiträge dann auch die URL der ersten Kategorie beinhalten: example.com/Kategorienname/Beitragsname

Alternativ können Sie, besonders falls Sie ein bestehendes WordPress-Projekt übernehmen, dies in der htaccess erledigen:

RewriteRule ^category/(.+)$ http://www.example.com/$1 [R=301,L]

So gehen die Rankings der bestehenden Seiten bei Suchmaschinen nicht verloren.

Exkurs: Kategorie: category name aus der Überschrift entfernen

Passend dazu sollte man den den Wortlaut der Kategorie-Überschrift (auch Kategorie-Titel oder Category Archive Title genannt) in WordPress individualisieren.[1]

Dabei geht es um den Seitentitel, die h1, der Kategorien-Übersichten, die ein vorangestelltes Wort (im Deutschen Kategorie:) vor dem Kategoriennamen haben:

Kategorienübersicht mit vorangestelltem String Kategorie:

Dafür sollten Sie folgenden Filter in die functions.php des Child Themes hinzufügen:

"Filter, der Kategorientitel individualisiert
add_filter( 'get_the_archive_title', function ( $title ) {

    if( is_category() ) {

        $title = single_cat_title( '', false );

    }

    return $title;

});

Mit weiteren Filtern könnten auch andere Seitentitel geändert werden.[2]

Quellen

  1. david-asen-marketing.de: Wie du die Kategorie-Überschrift in WordPress und Headway ändern kannst
  2. wordpress.stackexchange.com: How to customize the_archive_title()?