Wordpress

Wenn man seiner Website einen kleinen Branding-Touch geben will, dann kommt sicherlich bald die Idee auf Text teile hervorzuheben. Während es einfach ist ein paar Wörter einfach fett zu schreiben, kursiv oder auch in Farbe – bei anderen Funktionen braucht man ziemlich schnell CSS.

Und genau so ging es mir vor kurzen mit einem Kunden. Er wollte den letzten Touch in seiner Website hineinbringen und dazu den Text farblich, halbhoch hinterlegen. So wie man es öfter auf verschiedenen Websites sieht in diese Richtung:

< bild>

Kurze Panik, verzweifelte Stunden das Ergebnis auf Google zu finden und diverse CSS Codes in das backend von WordPress einbauen – hab ich es am Schluss geschafft und endlich ist dieser coole Highlight-Effekt kein Mysterium mehr für mich. Und für dich bald auch nicht mehr.

Texte hervorheben in WordPress

Standardmäßig kann man in WordPress mit den Überschriften oder Paragraf Block einen Text oder Teile davon auf folgende weiße einfach hervorheben:

• Fett schreiben
• Kursive Schreiben
• Durchstreichen
• In Farbe schreiben

Wenn man allerdings einen aufwändigen und cooleren Effekt will, ist man bald am Ende angelangt, mit den Standardfunktionen. Dann bleiben einem zwei Möglichkeiten:

• Ein Plugin zu suchen, welches dir den gewünschten Effekt gibt
• Ein kleinen HTML Code einbauen, der dir den gewünschten Effekt gibt.

Klar ist hier, dass zweiteres einfacher und weniger auf deiner Website und deren Performance lastet. Daher hab ich mich im Internet schlau gemacht, wie ich diesen Effekt erzeugen kann, mit einem HTML Code.

HTML bietet uns die Möglichkeit, mit einem ganz einfachen Codeschnipsel verschiedene Text Highlights einzufügen. Mit dem <span> Element kannst du nämlich CSS Code einbinden. Und CSS ist prinzipiell zuständig dafür, deine Website zu gestalten. 

Erstellen wir nun unseren HTML Code:

Schritt 1: Die Basics

Zuerst müssen wir ein Grundelement für unseren HTML Code auswählen, den der “span”-tag ist nur ein Inline Tag und muss innerhalb eines anderen verwendet werden. Das heißt wir entscheiden uns ob wir eine Überschrift oder einen normalen Text wollen.

Überschriften sind folgende: h1, h2, h3, h4, h5 und h6
H1 ist dabei eine Überschrift 1, h2 eine Überschrift 2, usw. 
Wie, wenn du in Word eine Überschrift auswählst.

Ein Absatz, also normaler Text, wäre ein <p> für paragraph. 

Wir verwenden für unser Beispiel eine Zwischenüberschrift <h2>:

<h2> Ich liebe Pizza </h2>

Vergiss nicht, das Element am Ende des Textes wieder zu schließen, wie ich das gemacht habe. 

Schritt 2: Gestaltungselement hinzufügen

Nun fügen wir den span-tag hinzu, der es uns ermöglicht den Text zu gestalten mit CSS Code. 

<h2> <span> Ich liebe Pizza </span> </h2>

Allerdings macht dieser noch nicht wirklich viel. Den jetzt gehts zum wichtigsten Schritt: dem Gestalten des Textes.

Schritt 3: Style it!

Prinzipiell kannst du jeglichen CSS code nun in das span Element einfügen. Hier ein paar Beispiele:

<h2><span style="background: #f5c143;">Ich liebe Pizza</span></h2>

Ich liebe Pizza

<h2><span style="text-decoration: underline 5px #F9D058 !important;">Ich liebe Pizza</span></h2>

Ich liebe Pizza

Was wir jetzt aber wollen, ist einen coolen Hintergrund als Highlight.

<h2><span style=" background: linear-gradient(120deg, #F9D058 0%, #F9D058 100%); background-repeat: no-repeat; background-size: 100% 20%; background-position: 0 60%;">Ich liebe Pizza</span></h2>

Ich liebe Pizza

Jetzt geht der Spaß aber erst richtig los, indem wir einfach herumprobieren was passiert, wenn wir etwas ändern.

Dickere Linie? Kein Problem, du musst nur „background-size“ raufstellen:

<h2><span style=" background: linear-gradient(120deg, #F9D058 0%, #F9D058 100%); background-repeat: no-repeat; background-size: 100% 50%; background-position: 0 60%;">Ich liebe Pizza</span></h2>

Ich liebe Pizza

Dünnere Linie? Kein Problem, wir machen einfach das Gegenteil, nämlich „background-size“ runterstellen:

<h2><span style=" background: linear-gradient(120deg, #F9D058 0%, #F9D058 100%); background-repeat: no-repeat; background-size: 100% 10%; background-position: 0 60%;">Ich liebe Pizza</span></h2>

Ich liebe Pizza

Nur am oberen Teil der Farbe? Das kannst du mit der „background-position“ bestimmen:

<h2><span style=" background: linear-gradient(120deg, #F9D058 0%, #F9D058 100%); background-repeat: no-repeat; background-size: 100% 40%; background-position: 0 30%;">Ich liebe Pizza</span></h2>

Ich liebe Pizza

Nur am unten Farbe? Auch das kannst du mit der „background-position“ bestimmen:

<h2><span style=" background: linear-gradient(120deg, #F9D058 0%, #F9D058 100%); background-repeat: no-repeat; background-size: 100% 40%; background-position: 0 90%;">Ich liebe Pizza</span></h2>

Ich liebe Pizza

Schritt 4: Advanced

Naja ganz so fortgeschritten wirds nun auch wieder nicht. Aber was ist, wenn wir zum Beispiel in einem Text nur ein Wort hervorheben wollen. Das Wort Pizza in unserem Falle:

<h2>Ich liebe <span style=" background: linear-gradient(120deg, #F9D058 0%, #F9D058 100%); background-repeat: no-repeat; background-size: 100% 40%; background-position: 0 90%;">Pizza</span></h2>

Ich liebe Pizza

Ganz einfach: wir schreiben nur das Wort Pizza in unserem „span“-tag, also genau zwischen dem öffnen und dem Schließen dieses Tags.

Oder wir wollen einen Gradient Effekt über die ganze Überschrift:

<h2>Ich liebe <span style=" background: linear-gradient(120deg, #eb8080 0%, #F9D058 100%); background-repeat: no-repeat; background-size: 100% 40%; background-position: 0 90%;">Pizza</span></h2>

Ich liebe Pizza

Wir ändern also einfach die Farbe, mit der wir starten oder enden.

HTML Block im Gutenberg

Nachdem wir nun unseren tollen Codeschnipsel haben, stellt sich nur noch die Frage, wie wir das Ganze in Gutenberg einbinden. Dazu findest du einen “HTML” Block, mit dem du diesen Code einfach einbinden kannst. 

In diesem kannst du ganz einfach deinen Code hineinkopieren und diesen dann sogar im Editor von WordPress anzeigen lassen.

Meine Quelle

Prinzipiell findet man zu dem ganzen sehr viel im Internet und das meiste nicht allzu sinnvoll. Was mir geholfen hat, war dieser wundervolle Beitrag von Shannon Payne:

Theme Forest ist der weltweit größte Marktplatz für WordPress-Themes. Hier findest du Hunderte oder Tausende von Themes, aber es ist nicht alles Gold, was glänzt, denn hinter vielen schönen Designs verbergen sich Berge von technischen Problemen: langsame Ladegeschwindigkeiten, Theme-Abhängigkeit, Kompatibilitätsprobleme usw.

Ein weiteres großes Problem ist, dass viele dieser Themen voller Designfunktionen sind und man könnte denken: wie schön

Es tut mir leid, aber… Nein.

Themes sollten sich auf das Hauptdesign der Website beschränken und niemals zusätzliche Funktionen zu WordPress hinzufügen, denn dafür sind Plugins da.

Auch wenn es unwichtig erscheinen mag, ist es das nicht. In dem Moment, in dem du mit einem Theme Funktionen hinzufügen, bindest du dich an dieses. Von diesem Moment an bist du völlig abhängig von dem Theme, das du gewählt hast. Und wenn du dich eines Tages entscheidest, zu einem anderen Theme zu wechseln, werden alle diese Funktionen verschwinden.

Das bedeutet, dass deine Website ihre gesamte Struktur verliert, und wenn ich sage alles, dann meine ich auch alles: Spaltenstruktur, Schaltflächen, Fotogalerien und alles, was du vorher hinzugefügt haben.

In den extremsten Fällen könnte der Inhalt selbst verloren gehen. Und obwohl dieses Problem behebbar und wiederherstellbar ist, ist es ein Problem, das du nicht über Nacht lösen kannst und das dir eine Menge Sorgen bereiten wird.

Du fragst dich vielleicht…. Warum macht ein professioneller Entwickler das? Nun, die Antwort ist einfach. Wenn du erst einmal das Produkt des Unternehmens gekauft und dein gesamtes Projekt auf das Produkt des Unternehmens ausgerichtet hast, wird es für dich viel schwieriger sein, zur Konkurrenz zu wechseln. Und je mehr zusätzliche Funktionen die Entwickler Ihrem Theme hinzufügen, desto attraktiver wird es für unerfahrene Nutzer. Und sie können mehr verlangen als die Konkurrenz, selbst wenn ihr Produkt technisch schlechter ist.

Die Lösung für all dies ist einfach: Wähle ein Theme, das sich auf das Design beschränkt, wie Genesis Framework, GeneratePress oder Astra (unsere Favoriten), und mache alles andere mit Plugins.

Ein Framework ist ein Satz von Werkzeugen oder Dienstprogrammen (Code-Bibliothek), die die Arbeit eines Entwicklers erleichtern, da es nicht notwendig ist, alle Funktionen neu zu programmieren. Man kann die bereits im Framework vorhandenen Funktionen verwenden, was das Schreiben von Code vereinfacht. Der Entwickler muss nicht mehr die gesamte Funktion programmieren, sondern nur noch das, was im Framework nicht mitgeliefert wird.

Einfacher ausgedrückt: Ein Framework ist eine Bibliothek von Dateien, die auf einer Basissoftware installiert wird und diese erweitert und um neue Funktionen ergänzt.

Durch die Verwendung eines Frameworks in WordPress vermeiden wir es, eine Website von Grund auf zu entwickeln, und entwickeln sie einfach, indem wir die Funktionen aufrufen, an denen wir interessiert sind.

WordPress ist das Basisprogramm, der Motor, der die Website zum Laufen bringt, aber wir müssen ein Theme verwenden, das der Website ihr Aussehen verleiht.

Frameworks für WordPress

WordPress-Frameworks sind Code-Bibliotheken, die als Grundlage für WordPress-Themes verwendet werden können.

Sie dienen als Gerüst und enthalten die grundlegenden Funktionen und Designdetails, die für die Erstellung eines WordPress-Themes erforderlich sind. Frameworks können den Entwicklungsprozess einer Website beschleunigen, da es nicht notwendig ist, ein Theme von Grund auf zu erstellen.

Es gibt zwei Haupttypen von WordPress-Theme-Frameworks: interne Frameworks und eigenständige Frameworks.

Viele Marken verwenden interne Frameworks, um ihre eigenen Themen zu entwickeln. TeslaThemes verwendet zum Beispiel das Tesla-Framework, während WPZoomthat das Zoom-Framework verwendet.

Ein eigenständiges Framework hingegen ist eine kostenlose oder kostenpflichtige Option, die jeder nutzen kann, wie z. B. CherryFramework oder Genesis.

Eines der wichtigsten Merkmale von WordPress-Frameworks ist die Möglichkeit, mit Child-Themes zu arbeiten

Ein Child-Theme ist eine Kopie, die die Eigenschaften des Parent-Themes erbt. Es hält den Framework-Ordner separat, sodass bei einem neuen WordPress-Update nicht Ihre gesamte Arbeit verlieren. Child-Themes können auch als Backup im Falle von Entwicklungsfehlern dienen.

Was ist der Unterschied zwischen einem Framework und einem WordPress-Theme?

Der Hauptunterschied zwischen einem WordPress-Framework und einem WordPress-Theme besteht in den Anpassungsmöglichkeiten. Da Theme-Frameworks in erster Linie dazu gedacht sind, die Entwicklung von Websites zu erleichtern, eignen sich ihre Code-Bibliotheken und Tools eher für umfangreiche Änderungen.

WordPress-Themes hingegen sind sofort einsatzbereit. Aber obwohl die Nutzer das Design ändern können, ist die Anpassung begrenzt, da sie weniger Optionen haben.

Vor- und Nachteile eines Framework

Wenn du noch nicht weißt, ob du ein WordPress-Framework verwenden solltest, hab ich hier die folgenden Vor- und Nachteile für dich:

Vorteile:

• Viele integrierte Funktionen: von umfangreichen Code-Bibliotheken und benutzerdefinierten Hooks bis hin zu vorgefertigten Widgets und Drag-and-Drop-Funktionen – sie machen die Entwicklung einfacher und schneller.
• Effizienter: Sie werden unter Verwendung der besten Programmierpraktiken erstellt und von Fachleuten überprüft, sodass sie in der Regel sicherer und besser programmiert sind.
• Eine große Community und zahlreiche Ressourcen: Die beliebtesten Frameworks verfügen über eine Vielzahl von Entwicklernetzwerken, an die du dich wenden kannst, um Rat und Unterstützung zu erhalten.
• Zukunftssicher: Bereits vorgenommene Anpassungen werden nicht mit jeder neuen Kernaktualisierung überflüssig. So können die Entwickler Änderungen vornehmen, ohne dass deine Arbeit verloren geht.

Nachteile:

• Lernkurve und Einschränkungen: Es kann eine Weile dauern, bis man den benutzerdefinierten Code beherrscht, und es gibt Einschränkungen, die nur durch Patches oder komplexe Anpassungen aufgehoben werden können.
• Preis: Da sie so viele Funktionen haben, sind sie in der Regel nicht billig, vor allem wenn man vorrangig Support und Updates benötigt.
• Veraltete Funktionen: Da sich dein Theme stark auf den Code des Frameworks stützt, besteht bei einigen Funktionen die Gefahr, dass sie veraltet sind, wenn das Framework nicht mit dem neuesten WordPress-Update aktualisiert wurde.

Genesis Framework

• Hauptmerkmale: eine Vielzahl von Child-Theme-Optionen, Widgets und Design-Tutorials.
• Ideal für: Theme-Entwickler, die ein Framework suchen, das auf Geschwindigkeit ausgerichtet ist.
• Preis: $59,95 pro Lizenz, $360 pro Jahr (Pro).
• Vorteile: Minimalistisch, sauberer Code für schnelle Leistung, guter Support.
• Nachteile: teuer, steile Lernkurve.

Das Genesis Framework ist eines der beliebtesten WordPress-Theme-Frameworks. Obwohl es vergleichsweise nicht so funktionsreich ist wie die anderen Optionen, zeichnet es sich durch seine Effizienz aus. Dieses Framework ist gut kodiert, sicher und SEO-freundlich, sowohl auf PC als auch auf mobilen Geräten.

Das Genesis Framework bietet viele attraktive Child-Themes als Basis an, die mit einem einzigen Klick installiert werden können. Der Theme-Customizer des Frameworks ermöglicht es den Nutzern, Farben, Elemente und andere Designattribute in Echtzeit zu ändern.

Dieses WordPress-Framework bietet drei Hauptseitenvorlagen zur Auswahl: Archiv, Blog-Seite und Standard. Es stehen mehrere Widgets zur Auswahl, um die Funktionalität dieser Seiten zu verbessern. Du kannst die Funktionalität auch durch benutzerdefinierten Code erweitern.

Ein weiterer Vorteil der Verwendung dieses WordPress-Frameworks ist, dass es von den Entwicklern gut unterstützt wird. Es ist vollständig dokumentiert und hat eine große Community.

Allerdings fehlt es dem Genesis Framework an Styling-Optionen. Zum Beispiel können Farbänderungen nur auf der Ebene der Website und nicht in einzelnen Teilen vorgenommen werden, es sei denn, man installiert das Plugin Genesis Design Palette Pro.

Darüber hinaus erschwert der standardmäßige minimalistische Stil die meisten komplexen Anpassungen ohne fortgeschrittene Programmierung, sodass Genesis Framework für unerfahrene Benutzer ungeeignet ist.

Du kannst eine einmalige Gebühr von $59,95 zahlen, um das Framework und ein Theme zu erhalten, mit dem du das Tool verwenden können. Oder du kannst den Genesis Pro Plan für $360 pro Jahr abonnieren, um Zugang zu allen Themenoptionen, mehr Designs und Support zu erhalten.