Hueman: Eine Schritt-für-Schritt-Anleitung

Hueman ist gleichzeitig das komplexeste und das individuell anpassbarste Theme, das bei Hypotheses verfügbar ist. Es erfreut sich seit Jahren großer Beliebtheit unter den Hypotheses-Blogs und ist auch hier im Bloghaus (ebenso wie auf der de.hypotheses-Startseite) das Theme der Wahl. Dieser Beitrag führt ein in die verschiedenen Konfigurationsmöglichkeiten, die sich im Customizer finden.

Um es gleich vorweg zu sagen: Wer keine Freude daran hat, ein wenig Zeit und Kreativität in das Design des Blogs zu stecken und sich schon allein beim Anblick des Backends überfordert fühlt, wird sich mit einem anderen Theme wohler fühlen. Aber alle, die sich viel Gestaltungsspielraum wünschen bei einem Theme, die gerne mit Bildern arbeiten und denen die “Twenties” zu karg wirken, werden hier eine Spielwiese für die individuelle Gestaltung ihres Blogs finden, auf der sie sich austoben können.

1. Ein besonderer Header
2. Eine Slideshow für Artikel
3. Zwei Spalten für die Artikel
4. Vielfältige Navigationsmöglichkeiten
5. Eins, zwei oder keine: Die Seitenleisten und Widget-Bereiche
6. Besondere Widgets bei Hueman

1. Ein besonderer Header

Während viele der älteren bei Hypotheses verfügbaren Themes mit einem Header arbeiten, der sich über die ganze Breite des Bildschirms erstreckt, ist die Breite des Headers bei Hueman begrenzt. Im Header kann der Titel und der Untertitel des Blogs angezeigt werden (oder auch nicht), außerdem kann dort ein Logo oder ein anderes Thumbnail-Bild eingefügt werden (wie hier im Bloghaus die rote Hypotheses-Rose¹). Es kann aber auch auch ein Header-Bild hinzugefügt werden. Da die Schriftfarbe des Titels und des Untertitels grundsätzlich weiß ist, sollte der Hintergrund des Headers in einem dunklen Farbton gewählt werden, um mit Blick auf den Farbkontrast den Standards für Barrierefreiheit zu entsprechen.

Tipp: Wen die weiße Schriftfarbe des Titels stört, kann sich stattdessen ein Headerbild entwerfen, in dem der Titel in einer anderen Schriftfarbe enthalten ist, wie in diesem Beispiel. Dann sollte darauf geachtet werden, dass im Customizer die Anzeige des Titels deaktiviert ist (Design > Customizer > Design einer Seite > Seitenidentität).

Titel und Untertitel des Blogs können wie bei allen Themes unter Einstellungen > Allgemein angepasst werden. Alternativ geht das auch direkt im Header unter Design > Customizer > Design einer Seite > Seitenindentität. Hier kann auch das Logo oder ein anderes Thumbnail-Bild eingefügt werden (siehe Screenshot).

Soll statt des leeren Headers ein Header-Bild hinzugefügt, kann unter Design > Customizer > Header-Design > Header-Bild ein Bild hochgeladen und eingefügt werden. Für das Header-Bild wird eine Größe von 1380 × 280 Pixel empfohlen. Es kann entweder in dieser Größe hochgeladen oder nach dem Upload zugeschnitten werden.

Wenn ein Headerbild hinzugefügt wurde und der Titel oder der Untertitel nicht angezeigt werden soll, wird im Customizer unter Header-Design > Seitenidentität der Schieber neben “Website-Title im Header anzeigen” deaktiviert. Weiter unten kann auch der Untertitel deaktiviert werden.

Achtung: Wer unter “Seitenidentität” händisch den Titel der Website und den Untertitel entfernt, hat beide auch aus den Metadaten entfernt, sie werden also zum Beispiel beim automatischen Zitierhinweis am Ende des Artikels nicht mehr angezeigt.

2. Eine Slideshow für Artikel

Hueman bietet die Möglichkeit, einzelne Artikel im Rahmen einer Slide-Show besonders hervorzuheben. Dazu werden automatisch die Beitragsbilder der Artikel verwendet. Damit die Bilder auf der Startseite alle in der gleichen Größe erscheinen ist es sinnvoll, die Beitragsbilder grundsätzlich immer in der gleichen Größe hochzuladen: Wir empfehlen 720 x 340 Pixel, wenn die Slideshow verwendet werden soll. Sollen die Artikel auf der Startseite ohne Slideshow angezeigt werden, reicht eine Größe von 345×163 Pixel für die Beitragsbilder.

Die Einstellungen für die Slide-Show finden sich unter Design > Customizer > Inhalt der Startseite. Dort findet sich ganz unten der Bereich “Hervorgehobene Beiträge”. Wenn mindestens ein Beitrag auf der Startseite hervorgehoben werden soll, wird hier der Schieber “Beiträge im oberen Bereich des Blogs hervorheben” gesetzt. Wer mag, kann die Beiträge auch nach Kategorien filtern. Um mehrere Beiträge in einer Slide-Show anzeigen zu lassen, wird zunächst bei “Anzahl der hervorgehobenen Beiträge” die Zahl auf mindestens 2 gesetzt. Dann wird bei “Animiere deine hervorgehobenen Beiträge mit einer Slideshow” der Schieber gesetzt und direkt darunter eingestellt, in welcher Geschwindigkeit die Beiträge durch die Slide-Show gleiten sollen.

Tipp: Damit eine Slide-Show angezeigt werden kann, muss mindestens ein Artikel der Slide-Show ein Beitragsbild enthalten. Standardmäßig werden die zuletzt publizierten Beiträge in der Slide-Show angezeigt. Was ein Beitragsbild ist und wie es sich von einem Bild im Beitrag unterscheidet, wird im Artikel “Alles rund ums Bild” erklärt.

Direkt oberhalb der Einstellungen zu den hervorgehobenen Beiträgen findet sich der Bereich “Beitragszusammenfassung”. Hier wird bestimmt, wie lang der Textauszug sein soll, der auf der Startseite angezeigt wird – zum Beispiel die ersten 34 Wörter des Artikels. Soll nicht der Anfang des Beitrags, sondern ein separater Teasertext angezeigt werden, muss dieser jeweils in der Beitragsansicht festgelet werden: Unter dem Reiter “Beitrag” wird der Teasertext bei “Textauszug hinzufügen” festgelegt (hier ein Beispiel).

Zuletzt bleibt noch zu entscheiden, ob die hervorgehobenen Beiträge auch in der Beitragsliste angezeigt werden sollen. Das empfiehlt sich vor allem, wenn viele Beiträge in die Slide-Show aufgenommen wurden.

3. Zwei Spalten für die Artikel

Als einziges der bei Hypotheses verfügbaren Themes bietet Hueman die Möglichkeit, Blogartikel auf der Startseite in zwei Spalten anzeigen zu lassen.² Wahlweise können die Beiträge mit oder ohne Bild angezeigt werden.

Das gilt übrigens nicht nur für die Startseite, sondern auch für die Anzeige der Beiträge nach Kategorien (zum Beispiel hier).

Wer die Beiträge nicht in zwei Spalten, sondern in einer anzeigen lassen möchte, setzt unter Design > Customizer > Design des Inhalts (Body) > Beitragslistendesign und Inhalt den Schieber bei “Beiträge als normale Liste zeigen”. Die Artikelbilder werden dann in einer Reihe links neben den Beiträgen angezeigt. Hier kann auch festgelegt werden, ob das Beitragsbild in der Liste der Beiträge angezeigt werden soll. Wer kein Bild zeigen möchte, deaktiviert den Schieber bei “Beitrags-Vorschaubild anzeigen”. Wenn der Schieber hier aktiviert ist, ein Beitrag aber kein Beitragsbild hat, wird automatisch ein Platzhalterbild angezeigt. Die Anzeige der Platzhalterbilder können unter Design > Customizer > Design des Inhalts (Body) > Thumbnail-Einstellungen bearbeitet werden. Wenn kein Platzhalterbild angezeigt werden soll, falls ein Beitragsbild fehlt, wird hier der Schieber bei “Thumbnail Platzhalter” aktiviert. Hier kann auch eingestellt werden, ob über dem Bild die Anzahl der Kommentare unter einem Artikel angezeigt werden soll.

Tipp: In Hueman ist es zwar nicht nötig, den “Weiterlesen”-Block zu verwenden, da das Theme selbst einen Textauszug für die Startseite definiert. Es empfiehlt sich aber dennoch, den Weiterlesen-Block standardmäßig zu jedem Beitrag hinzuzufügen: Wenn irgendwann eine Theme-Wechsel ansteht und eines der älteren Twenties gewählt wird, würden sonst auf der Startseite alle Beiträge in voller Länge gezeigt.

4. Vielfältige Navigationsmöglichkeiten

Um Leserinnen und Leser verwandte Inhalte unter einem Beitrag anzuzeigen – und sie so nebenbei zu animieren, mehr Zeit auf dem Blog zu verbringen, was sich positiv auf die Auffindbarkeit in Suchmaschinen auswirkt – gibt es bei Hueman die Möglichkeit, unter einem Beitrag verwandte Inhalte anzuzeigen. Diese werden zufällig generiert und basieren entweder auf den Schlagwörtern oder den Kategorien des Artikels. Die Anzeige ähnlicher Beiträge kann unter Design > Customizer > Design des Inhalts (Body) > Einstellungen für einzelne Beiträge eingestellt werden.

Direkt darunter (im Bereich “Beitragsnavigation”) kann auch eingestellt werden, ob in der Seitenleiste – wenn eine verwendet wird – neben dem Beitrag der nächste und der vorherige Beitrag angezeigt werden sollen.

Das Menü kann bei Hueman an drei verschiedenen Stellen platziert werden: In der Topbar, im Header und im Footer. Wenn die Position “Topbar” ausgewählt wird, wird das Menü direkt über dem Header und unterhalb der weißen Leiste von OpenEdition platziert. Diese Positionierung des Menüs bietet eine Suchfunktion auf dem Blog (indem auf die Lupe oben rechts geklickt wird). Das hat den Vorteil, dass das ausgewählte Menü immer im Bild bleibt, wenn nach unten gescrollt wird. Die Leserinnen und Leser haben auf diese Weise immer unmittelbaren Zugang zum Menü. Die Position “Header” platziert das Menü unter den Header und über den Artikel bzw. über der Slideshow, die Position “Footer” lässt das Menü ganz unten auf Ihrem Blog auftauchen, unter der Fußzeile.

In Hueman kann auch ein separates Menü für die mobile Ansicht erstellt werden. Es muss aber nicht zwingend ein mobiles Menü angelegt werden: Soll nur ein Menü verwendet werden, das sowohl auf Desktop-Computern als auch auf mobilen Geräten angezeigt wird, wird automatisch das Header- bzw. Topbar-Menü verwendet. Die Einstellungen für das Menü finden sich unter Design > Menüs. (Speichern nicht vergessen!)

Eine weitere Besonderheit bei Hueman ist das Social-Media-Menü. Hier können über die entsprechenden Icons direkt die zum Blog zugehörigen Social-Meida-Kanäle verlinkt werden. Das Social-Media-Menü in der primären Seitenleiste kann unter Design > Customizer > Design des Inhalts (Body) > Seitenleiste: Design und Mobile-Einstellungen bearbeitet werden (einfach auf den Bleistift neben “Folgen” klicken). Es ist aber auch über Design > Customizer > Design einer Seite > Social-Media-Links ansteuerbar. Hier lassen sich die Social Media-Accounts hinzufügen, indem das zugehörige Icon ausgewählt wird (Bluesky fehlt leider noch). Hier hinterlegte Links erscheinen auch in der Fußzeile des Blogs.

5. Eins, zwei oder keine: Die Seitenleisten und Widget-Bereiche

Auch im allgemeinen Layout bietet Human eine Bandbreite von Optionen: Die Inhalte können von zwei Seitenleisten gerahmt angezeigt werden, es kann nur eine Seitenleiste verwendet werden oder es wird ganz ohne Seitenleisten gearbeitet.

Hier im Bloghaus wird das Theme mit einer Seitenleiste genutzt, die auf der linken Seite platziert wurde:

Mit zwei Seitenleisten arbeitet zum Beispiel das Blog “Entzauberte Rituale“:

Ganz ohne Seitenleisten kommt das Blog Kinder aus:

Ob eine, zwei oder keine Seitenleiste verwendet werden sollen, lässt sich unter Design > Customize > Design des Inhalts (Body) > Spalten-Layout für den Hauptinhalt einstellen. Das globale Layout meint die Einstellung, die für alle Bereiche des Blogs gelten soll. Falls auf der Startseite Seitenleisten angezeigt werden sollen, nicht aber in den Beiträgen (oder umgekehrt), können für die Startseite, die Einzelnen Beiträge und diverse andere Inhalte jeweils eigene Einstellungen festgelegt werden. Der Einfachheit halber kann, wenn ohnehin alle Inhalte des Blogs im gleichen Design angezeigt werden sollen, auch der Schieber bei “Globales Layout erzwingen” gesetzt werden. Die Einstellungen können für folgende Bereiche angepasst werden:

Tipp: Wenn bei Hueman keine Seitenleiste verwendet wird, erstreckt sich der Text über die ganze Breite des Bildschirms. Das kann das Lesen des Textes am Bildschirm erschweren. In der mobilen Ansicht erübrigt sich das Problem, da die Seitenleisten dort ohnehin verschwinden.

Die Farbe der Seitenleisten lässt sich unter Design des Inhalts (Body) > Seitenleiste: Design und Mobile-Einstellungen anpassen: Dazu zum Bereich “Beitragsnavigation” herunterscrollen und bei “Hintergrundfarbe der Seitenleisten” auf “Farbe auswählen” klicken.

Eine Besonderheit bei Hueman ist, dass in der Kopfzeile oberhalb der Seitenleisten Boxen angezeigt werden, die Platz für einen Titel bzw. ein Social Media-Menü lassen. Wer die Boxen nicht anzeigen möchte, kann unter Design > Customizer > Design des Inhalts (Body) > Seitenleiste: Design und Mobile-Einstellungen den Schieber “Boxen oberhalb der Seitenleiste” deaktivieren. Hier lassen sich auch die Titel anpassen.

Die Widgets – so nennen sich bei WordPress zusätzliche Elemente wie Bilder, Schlagwörterwolken, Kalenderlisten etc. – können bei Hueman an drei verschiedenen Stellen untergebracht werden: Entweder in den Seitenleisten (wenn sie benutzt werden) oder im Footer. Die Widgets können unter Design > Widgets bearbeitet werden. Der primäre Widget-Bereich ist die linke Seitenleiste, der sekundäre Widget-Bereich die rechte Seitenleiste. Der Footer ist in mehrere Widget-Bereiche aufgeteilt (Footer 1, 2, 3 und 4). Die verschiedenen Footer-Bereiche erlauben es, Widgets nebeneinander zu stellen. Es können auch Widgets übereinander gestapelt werden, in dem die jeweils zu stapelnden Widgets in den selben Footerbereich gezogen werden: Im unteren Beispiel wurden im Footer-Bereich 1 und 4 jeweils zwei Logos übereinander gestapelt.

Als nächster Schritt können nun unter Design > Widgets die gewünschten Widgets per Drag & Drop an die Stelle gezogen werden, wo sie erscheinen sollen.

6. Besondere Widgets bei Hueman

Bei Hueman stehen einige Widgets zur Auswahl, die bei anderen Themes nicht zur Verfügung stehen: Hueman Videos, Dynamische Hueman-Tabs und Hueman Beiträge. Das Widget “Hueman Beiträge” ermöglicht eine schöne Übersicht über Blogartikel, die mit oder ohne Beitragsbild (Thumbnail) angezeigt werden sollen und nach Kategorien, Datum und Alter gefiltert werden können. Auch die Anzahl der anzuzeigenden Blogposts im Widget kann definiert werden. Hueman Videos lässt Youtube- oder Vimeo-Videos als Widget einbetten.

Das Widget “Dynamische Hueman-Tabs” besteht aus bis zu vier Reitern:

• Der Reiter “Recent Posts” zeigt die zuletzt publizierten Artikel des Blogs an. Wird “Show thumbnails” ausgewählt, wird zudem das Artikelbild angezeigt, sofern eines eingestellt wurde. Unter “Items to show” kann die Anzahl der angezeigten Artikel festgelegt werden. Mit dem Dropdown-Menü “Category” kann ausgewählt werden, ob die zuletzt publizierten Artikel aus allen Kategorien (indem “All” ausgewählt wird) oder ob lediglich Artikel aus einer bestimmten Kategorie angezeigt werden sollen. Soll der Reiter “Recent Posts” im Widget AlxTabs nicht angezeigt werden, muss die Auswahl “Enable recent posts” aufgehoben werden.
• Der Reiter “Most Popular” zeigt die “beliebtesten” Blogartikel des Blogs an. Diese Auswahl beruht auf der Anzahl der Kommentare unter den jeweiligen Artikeln. Die Einstellungen für diesen Reiter entsprechen denen unter “Recent Posts”. Auch hier: Soll der Reiter “Most Popular” nicht angezeigt werden, muss die Auswahl “Enable most popular posts” aufgehoben werden.
• Der Reiter “Recent Comments”, der ebenfalls durch Aufheben der Auswahl bei “Enable recent comments” verborgen werden kann, zeigt die letzten Kommentare auf dem Blog an. Die Profilbilder der Verfasser der Kommentare können wahlweise angezeigt werden, indem “Show avatars” angekreuzt wird. Auch kann die Anzahl der angezeigten Kommentare unter “Items to show” bestimmt werden.
• Der letzte Reiter, “Tag”, zeigt die Schlagworte der verschiedenen Blogartikel an. Indem die Auswahl “Enable tags” aufgehoben wird, kann dieser Reiter verborgen werden.
  Der Abschnitt “Tab Order” ermöglicht das Neuordnen der vier Reiter, indem ihnen die Zahlen 1 bis 4 zugeordnet werden, wobei derjenige mit der 1 als erstes angezeigt wird.

Im Abschnitt “Tab Infos” kann schließlich bestimmt werden, ob die Kategorien und/oder das Publikationsdatum der Artikel unter den Reitern “Recent Posts” und “Most Popular” angezeigt werden sollen.

Und nun viel Spaß beim Ausprobieren!

---

Zum Weiterlesen ⬇:

Alles rund ums Bild: https://bloghaus.hypotheses.org/2843

Unser Blog soll schöner werden: https://bloghaus.hypotheses.org/3474

Mehr Inhalte anzeigen mit dem Abfrage-Loop: https://bloghaus.hypotheses.org/5726

---

Dieser Artikel ist eine erweiterte und grundlegend überarbeitete Version des Beitrags “Blogfashion: Hueman” vom 25. Juni 2015, https://bloghaus.hypotheses.org/1496.

Beitragsbild: wal_172619 auf Pixabay

1. Damit das Logo wie hier rechts im Header angezeigt wird, wird zunächst das Logo in der gewünschten Größe in die Mediathek hochgeladen. Dann wird im Customizer unter Header-Design > Header-Widget für Werbung der Schieber bei „Ein Widget im Header anzeigen“ gesetzt. Zuletzt wird unter Design > Widgets dann dieses Widget befüllt: Dorthin wird das Bild-Widget gezogen und dann das Logo aus der Mediathek eingefügt. ↩︎
2. Mit dem Abfrage-Loop lässt sich diese Funktion auch in anderen Themes integrieren, allerdings nur dann, wenn das Loop in eine Seite integriert wird und diese als statische Startseite festgelegt wird. Siehe dazu auch den Beitrag zum Abfrage-Loop im Bloghaus. ↩︎

---

---