Kategorie: Webdesign

  • Viel einfacher als gedacht: neues Template für die Autorenprofilseite in WordPress erstellen

    Viel einfacher als gedacht: neues Template für die Autorenprofilseite in WordPress erstellen

    Heute habe ich mich ein wenig mit meiner Homepage beschäftigt. Diese habe ich bewusst einfach gehalten und auf der Basis des WordPress-Standard-Themes Twentytwentyfive aufgebaut. Vor allem beschäftigte ich mich damit, meinen Blog-Beiträgen Autoreninformationen hinzuzufügen. Das ist mir auch gelungen, wie Ihr beim Blick ans Ende dieses Beitrags feststellen werdet. Dort befindet sich nun eine kleine Autorenbox. Mir gefällt’s einstweilen.

    Während ich an dieser Aufgabe herumtüftelte, fiel mir noch auf, dass es ja Autorenprofilseiten gibt. Klickt einfach mal unter dem Beitrag auf meinen Namen oder macht dasselbe bei meinem Namen im Titel der Autorenbox. Dann landet Ihr auf meiner Profilseite. Diese listet im Wesentlichen die von mir verfassten Blog-Beiträge auf.

    Standardeinstellung lieferte viel zu viel Text

    Und da begann das Problem: In der Standardeinstellung listete die Autorenprofilseite stumpf all meine Beiträge untereinander im Volltext auf. Das ist bereits jetzt eine Menge Holz, und es wird noch mehr werden, versprochen. Mir schwebte hingegen eine einfache Übersicht mit Beitragstiteln, kurzen Textauszügen und eventuell dem Beitragsbild vor.

    Auf der Suche nach einer Lösung für meine Aufgabe googelte ich logischerweise. Es kam, wie es immer kommt, wenn Google Lösungshinweise für WordPress-Herausforderungen anbietet: Entweder finden sich Beiträge von Nerds, die zu umfassenden Änderungen im Quellcode des Themes – bzw. dem Child-Theme, ein solches nutze ich natürlich auch für meine Modifikationen an Twentytwentyfive – vorschlagen, oder es wird auf praktische Plugins verwiesen (so etwa hier, hier und hier).

    Bei vielen WordPress-Plugins bin ich eher skeptisch

    Ich bin, was WordPress-Plugins angeht, ein wenig skeptisch. Meine Erfahrung ist, dass sie oft Basisfunktionalitäten anbieten und für alles, was den Nutzenden wirklich Gestaltungsspielraum verschaffen würde, die Bezahlschranke herunterklappen lassen. Das ist auch der Grund, warum ich möglichst viel auf dieser Homepage mit den Fähigkeiten des Standard-WordPress und des „TT5“-Themes erledigen möchte.

    Ich probierte dies und jenes aus der Menge der vorgeschlagenen „manuellen“ Lösungen aus. Zielführend war nichts davon. Die Lösung war dann viel einfacher als gedacht. Denn bei einem Block-orientierten Theme wie TT5 könnt Ihr recht einfach Templates und Inhaltselement-Vorlagen selbst erstellen. Im Detail gehe ich darauf hier nicht ein. Gewisse Grundkenntnisse solltet Ihr bereits haben. Das grundsätzliche Vorgehen schildere ich aber in den folgenden Absätzen.

    Twentytwentyfive bringt die wichtigen Templates schon mit

    Wordpress-Übersichtsseite aller vorhandenen Templates

    Wenn Ihr im WordPress-Backend den Menüpunkt „Design-Editor“ aufruft, könnt Ihr auf der dann erscheinenden Seite ins Template-Menü wechseln. Es erscheint eine Übersicht aller im Theme vorhandenen Templates samt Voransicht. Im Klartext seht Ihr hier Musterseiten für verschiedene WordPress-Beitrags- und Seitentypen wie etwa die Übersicht der Blog-Startseite, eine typische Inhaltsseite, die Trefferseite für Suchen aller Art und einiges mehr.

    Auf dieser Seite seht Ihr rechts oben den Button „Template hinzufügen“. Diesen habe ich dann einfach angeklickt, und war der Erfüllung meiner Wünsche auf einmal ganz nah.

    Dann erscheint nämlich ein Popup, das Euch anbietet, Templates für bestimmte Zwecke neu zu erstellen. Eine der Auswahloptionen ist „Autoren-Archive“. Dies war genau das, was ich suchte, also wählte ich dieses Angebot. Es erscheint noch ein Hinweis, dass das Template nur für die Autorenprofilseite verwendet werden wird, also genau das, was ich wollte, und schon öffnet sich die Bearbeitungsansicht einer Block-orientierten Seite.

    Vorhandenes Template fürs Autorenprofil nur leicht ändern

    Diese Ansicht seht Ihr oben im Beitragsbild. Vorausgefüllt ist das neue Template bereits mit sinnvollem Standardinhalt, der sich in diesem Fall als der Inhalt des Templates erwies, das bereits die Autorenprofilseite mit den Beitrags-Volltextansichten anzeigt. Dieses musste ich nun nur noch anpassen.

    Das geht ganz leicht, wenn Ihr die Listenansicht der einzelnen Blog-Elemente öffnet, die nicht erwünschten Elemente entfernt und per Drag & Drop neue einfügt. Probiert es einfach aus. Es ist gar nicht schwer. Mit Gruppen- und Spalten-Elementen könnt Ihr das Layout gestalten und dort hinein dann weitere inhaltlich relevante Blöcke einfügen. Die wesentliche Änderung, die ich vornahm, war der Austausch des Beitragsinhalts-Blocks durch ein Textauszug-Element.

    Dann reduzierte ich noch die Schriftgrößen und die Dimensionen des Beitragsbildes – die entsprechenden Kontextmenüs werden in der rechten Seitenleiste angezeigt –, setzte Bild- und Textinformationen in zwei Spalten, und das war’s im Wesentlichen. Das ein oder andere Mal kontrollierte ich das Ergebnis im Browser, dann war ich vorerst zufrieden.

    Alles in allem ist es also gar nicht schwer, typische Templates im WordPress-Theme Twentytwentyfive anzupassen. Und zwar ganz ohne Coden und neu zu installierende Templates.

  • Header-mäßige Begriffsverwirrung in WordPress

    Header-mäßige Begriffsverwirrung in WordPress

    WordPress ist ein Content-Management-System (CMS), das für fast alle Einsatzzwecke gut geeignet ist, um Homepages rasch und unkompliziert zu erstellen. Auch diese Seite ist damit gestaltet worden. Nahezu jede Homepage-Gestaltung in WordPress beginnt mit der Frage: „Welches Theme sollen wir benutzen?“

    Diese Frage ist alles andere als trivial, werden doch unzählige Themes feilgeboten und sind über das WordPress-Backend leicht zu installieren. Wer dies bereits ausprobiert hat, kennt das folgende Erlebnis: Das Theme wurde aktiviert, dann ging es daran, es individuell anzupassen. Sehr schnell war dann der Punkt erreicht, dass eine gewünschte Funktion nicht realisierbar war – bzw. erst dann hätte umgesetzt werden können, wenn die kostenpflichtige Premiumversion des Themes erworben wurde.

    Kauf-Themes sind meistens nicht nötig

    Ich bin davon überzeugt, dass kaum jemand ein kostenpflichtiges WordPress-Theme benötigt. Das System liefert nämlich kostenfreie Grund-Themes mit, die die wichtigsten Inhaltselemente gleich mitliefern und die sich recht flexibel anpassen lassen. Die Namen dieser Layout-Muster beginnen jeweils mit „Twentytwenty“. Gerade ist „Twentytwentyfive“ aktuell. Warum so viele WordPress-Nutzerinnen und -Nutzer viel Zeit darauf verwenden, andere Themes zu nutzen, mag daran liegen, dass eine beliebige Seite eher karg und „frugal“ aussieht, sobald für sie eines der „Twentytwenty“-Themes aktiviert worden ist.

    Was viele anfangs übersehen mögen, ist die Vielfalt von vorformatierten Inhaltselementen, die beispielsweise Twentytwentyfive bereitstellt. Auch dass eine Seite in den Seiteneinstellungen ganz einfach von einem Template auf ein anderes umgestellt werden kann, springt nicht sofort ins Auge. Wer dann noch erkennt, dass sich recht leicht eigene Seitentemplates und Inhaltsblockvorlagen anfertigen lassen, verliert schnell die Scheu vor dem Einsatz von Twentytwentyfive.

    Es gibt viele Tutorials, um Twentytwentyfive anzupassen

    Tutorials, wie die genannten Blockelemente und Seitentemplates erzeugt werden können, finden sich mit einer einfachen Google-Suche schnell.

    • Bevor Ihr mit Umgestaltungen der vorhandenen Themes anfangt, solltet Ihr ein sogenanntes „Child-Theme“ erstellen. Wie das geht, erklärt unter anderem Tobias Steinmann in diesem Text.
    • Ursula Baliko zeigt Dir, wie man einen Header-Block samt Navigation erstellt. Eingängig ist der Text – weder visuell noch textlich – nicht, dranbleiben lohnt sich aber, es steht nämlich alles Wichtige drin.
    • Dieselbe Autorin erklärt in einem anderen Beitrag, die Geheimnisse hinter Block-Vorlagen und Pattern. Das ist sehr nützlich, damit kann man sich nämlich ein kleines Arsenal an immer wieder benötigten Inhaltselementen anlegen.
    • Einen Blick wert ist auch dieser Artikel von Christina Widner zu nützlichen Patterns in WordPress, also den eben bereits genannten, vorgefertigten Inhaltselementen, die einfach eingefügt und gegebenenfalls angepasst werden können.

    Ganz schön knifflig: der Sticky-Header

    Hier ist nicht der Platz für eine vollständige Link-Liste mit Tutorials zu WordPress-Templates und -Vorlagen. Auf einen Aspekt möchte ich nun aber noch etwas genauer eingehen. Ich hatte mir in den Kopf gesetzt, einen Header-Bereich samt Navigation zu erzeugen, der immer oben auf der Seite präsent bleibt, auch wenn weiter nach unten gescrollt wird. Ich wollte also genau so etwas haben, wie Ihr es mittlerweile auf dieser Seite seht.

    Auch dazu findet Ihr mit einer Google-Suche reichlich Hinweise. Viele Tipps gehen den Weg, über „Custom CSS“, das jedem Template hinzugefügt werden kann, dem jeweils passenden Header-Element die CSS-Anweisung „position:sticky“ mitzugeben. Genau dies funktionierte bei mir aber nicht. Mir gelang es nicht, die passenden Inhaltselemente dafür zu identifizieren.

    Twentytwentyfive bietet Lösung aus Boardmitteln

    Bald wurde mir klar, dass der Weg zur Lösung viel einfacher ist. Denn Twentytwentyfive ist ein sogenanntes blockbasiertes Template. Damit bietet es die Möglichkeit, über die Layoutoptionen der jeweiligen Blöcke festzulegen, dass ein Header-Bereich auf der Seite immer oben gehalten werden muss. Sehr nützlich dafür ist es, die Dokumentenübersicht einzublenden, die Ihr in der Bearbeitungsansicht von Seiten oder Blogbeiträgen, aber auch von Templates und Blöcken im linken oberen Bereich des Bildschirms entdeckt.

    Screenshot der Dokumentenübersicht für den Headerbereich von ulrichklose.de.

    Denn dort könnt Ihr, ganz grob gesagt, den Header als „sticky“ markieren. Achtet beim hier eingeblendeten Bild mal auf das Heftzwecken-Symbol. Dieses zeigt an, dass das entsprechende Blockelement immer oben gehalten wird.

    Geleitet hat mich beim Erstellen dieses „Sticky Headers“ diese Anleitung von Bernd Schmitt. Sie ist vollständig und korrekt – und hat trotzdem zunächst nicht funktioniert! Eine Kleinigkeit hatte ich nämlich übersehen. Zunächst erläutert der Autor die CSS-Option. Dass ich damit nicht klarkam, wusste ich bereits. Dann handelt er aber kurz und knapp den hier bereits skizzierten Lösungsweg für Block-Themes ab.

    Und diese Variante geht so: Die anzuheftenden Elemente werden in der Dokumentenübersicht gruppiert, woraufhin in den Konfigurationsoptionen in der rechten Seitenleiste bei „Position“ die Option „oben gehalten“ ausgewählt wird. Das ist schon alles. In der Tat!

    Nur dass dies bei mir nicht alles war! Ich habe dies, wie ich dachte, folgerichtig im von mir zuvor entsprechend der oben verlinkten Tipps in der Blockvorlage für meinen Seiten-Navigationsheader erledigt. Dort konnte ich wunderbar die entsprechenden Gruppen im Header mit „oben gehalten“ markieren. Allerdings blieb der erwünschte Effekt aus.

    Screenshot des Header-Bereichs inklusive Navigation auf ulrichklose.de
    Ansicht des Header-Bereichs in den WordPress-Vorlagen. Hier ist keine Sticky-Position definiert.

    Blockvorlagen und Templates sind nicht dasselbe – ehrlich!

    Es dauerte eine ganze Weile, bis ich meinen wesentlichen Irrtum bemerkte. Es gibt einen Unterschied, ob man derartige Einstellungen in der Blockvorlage vornimmt oder im Seitentemplate. Zwar habe ich dort einst exakt diese Blockvorlage eingefügt, trotzdem besteht ab diesem Moment keine Verbindung mehr zwischen beiden. Denn ein Blick in das Seitentemplate zeigte mir, dass dort die Sticky-Markierungen nicht vorhanden waren.

    Daraufhin nahm ich mir den Header-Bereich im Seitentemplate vor, umgab den Header mit einer umfassenden Gruppe und stellte für diese die Option „oben gehalten“ ein. Außerdem wies ich noch eine Hintergrundfarbe zu, damit der Sticky-Header den darunter gescrollten Inhalt verdeckt. Schon funktionierte alles wie gewünscht.

    Wenn Ihr bis hierher gekommen seid und Euch nun fragt, wovon ich rede –, dann schaut mal im WordPress-Backend unter „Design – Theme – Customizer“ nach. Dort findet Ihr die Bereiche Vorlage und Templates. Vorlagen sind einzelne Inhaltsblöcke, die einzeln in Seiten oder Beiträge eingesetzt werden können. Sie erscheinen beim Anlegen eines neuen Blocks zur Auswahl, also dort, wo Ihr auch ein Absatz- oder Listenelement auswählen könnt. Templates wiederum sind komplette Seitenvorlagen, in die verschiedene Blockvorlagen eingefügt worden sind. Sie weisen üblicherweise auch Header- und Footer-Elemente auf. Letztgenannte bleiben immer gleich, wenn Ihr eine neue Seite anlegt.