Autor: Pit1

  • create Header/Footer mit Site-Editor

    Der vorliegende Beitrag beinhaltet den Beschrieb, wie mit dem Site-Editor ein Header und ein Footer erstellt wird. Der Site-Editor ist das Werkzeug, mit dem eine ganze Website erstellt werden kann. Eine Website besteht aus vielen Seiten und Beträgen mit Inhalten die ein Thema abdecken. Eine einzelne Webseite(Beitrag oder Seite) behandelt einen Teilaspekt des entsprechenden Themas. Eine solche Webseite besteht meistens aus einem Header und einem Footer und dazwischen, eingeklemmt ist der Inhalt. Häufig wird derselbe Header und Footer in vielen Webseiten verwendet.

    Eine Website besteht also aus Seiten und Beiträgen, welche wiederum aus Templates, Template-Teilen, Vorlagen, Medien zusammengesetzt sind. Diese bestehen wiederum aus Block-Elementen, das sind die kleinsten Bausteine in WordPress. Somit ist klar, dass die Block-Elemente(Blöcke), der wesentlichste Teil von WordPress ist. Diese Block-Elemente werden mit dem Block-Inserter(Site- und Blockeditor) hinzugefügt und anschliessend berarbeitet, bis so eine Website aufgebaut und entsprechend gestaltet ist. Das bededutet auch, dass ein Page-Builder(Website-Baukasten), nicht mehr nötig ist. Im Site-Editor von WordPress wir jeder Absatz, Bild, Video, Überschrift, usw. als „Block-Element“ dargestellt. Jeder Block wird mit einem eigenen Set von Bedienelementen geliefert, um Dinge/Eigenschaften wie Farbe, Breite, Ausrichtungn usw. zu ändern. Diese werden automatisch ein- und ausgeblendet, wenn ein Block ausgewählt ist. Alle zur Verfügung stehenden Blöcke befinden sich in der Block-Bibliothek, zu finden über das folgende blaue Plus-Symbol(ganz zuoberst in der oberen Werkzeug-Leiste, ganz links):

    Block-Inserter/Bibliothek

    Alle zur Verfügung stehenden Blöcke befinden sich in der Block-Bibliothek, zu finden über das blaue Plus-Symbol oben links im Block-Editor.

    create Header/Footer mit dem Site-Editor

    Die folgende Beschreibung kann Analog auch für den Footer angewendet werden. In WordPress gibt es Standard-Vorlagen für den Header und Footer als Template-Teil. Eine solche Vorlage verwenden wir(duplizieren), um nicht alles neu machen zu müssen. Ein neuer Header erstellen wird mit dem Site-Editor durch duplizieren. Dazu klicken wir im Backend auf Design>Editor, dann Vorlagen, dann Header (Header und Footer sind Template-Teile), so wählen wir eine der Standard-Vorlagen aus, indem wir unterhalb der Vorlage auf die 3 Punkte klicken und dann Duplizieren wählen, geben der neuen Vorlage den Namen HeaderSpez und wählen den Bereich Header und Duplizieren. So haben wir ein neues Header-Template-Teil, mit Name HeaderSpez erstellt. Diese Vorlage(Template-Teil) rufen wir jetzt zur Bearbeitung auf: Design>Editor>Vorlagen>Header>HeaderSpez. Wir klicken das 4-te Menüelement(Dokumentenübersicht) an, welches den Element-Baum listet. Nun können wir Elemente mutieren, hinzufügen oder löschen. Alle zur Verfügung stehenden Block-Elemente sind im 2-ten Icon(Plus-Symbol mit blauem Hintergrund) zu finden, wo wir Element-Blöcke wählen, am gewünschten Platz hinzufügen und mit entsprechenden Optionen versehen.

    Das 12-te Icon(die 3 übereinander liegenden schwarzen Punkte) sind Optionen. In diesen Optionen kann die Befehlspalette in die Werkzeugleiste als (Menü-Punkt 6) verankert werden, was vor allem der Übersichtlichkeit dient(sonst ist die Befehlspalette freischwebend und überdeckt den Inhaltsbereich).

    Die 5 Bereiche des Site-Editor: Oben(Werkzeugleiste/Menüleiste) mit den 12 Menüpunkten und darunter die 3 Bereiche Links(Block-Elementbaum), Center(Inhalt) und Rechts(Eigenschaften/Stile für die Blockelemente sowie für die Beiträge, Seiten, Vorlagen, Template-Teile, Templates) und ganz Unten die Status-Zeille.

    Was wir gerade bearbeiten, ob es eine Seite, ein Beitrag, ein Template, ein Template-Teil oder eine Vorlage ist, verrät uns der erste Titel im Site-Editor, im Bereich-Rechts direkt vor dem Titel Block. Im vorliegenden Fall ist es ein Template-Teil. Um einen Header zu gestalten, fügen wir nun Block für Block hinzu, bis wir das gewünschte Ergebnis haben. Um einen Block hinzuzufügen klicken wir auf das Element, nach oder vor dem, wir eine neues Element im Elementbaum(im Bereich Links)einfügen wollen. Auf der ausgewählten Linie finden wir die 3 untereinander liegenden Punkte, durck klick auf diese 3 Punkte erhalten wir die Optionen gelistet. Eine dieser Optionen ist ‚Danach hinzufügen‚ welche wir wählen. Dadurch wird automatisch, nach dem gewählten Element, ein Absatz-Block hinzugefügt und wir sind auf diesem Block positioniert. Klicken wir nun in der Menüzeile auf das Plus-Icon werden alle Blöcke gelistetet, hier scrollen wir herunter und wählen das Blockelement Website-Titel. Danach klicken wir auf das Menüelement(Menupunkt 4) mit den 3 Strichen, so wird der Blockelementbaum(linker Teil) mit dem neuen Element anzeigt. Nun kann mit gedrückter linker Maustaste das entsprechende Elemenet mit Drag and drop verschoben werden. Jetzt noch im Bereich Rechts ,die Eigenschaften und Stile des gewählten Element aus dem Bereich Links, anpassen (Grösse, Farbe, Abstände, usw.). So arbeiten wir mit jedem Element das wir für unseren Header benötigen, bis das gewünschte Ergebnis erzielt ist.

    Eigenschaften/Stile für Site- oder Block-Element

    • Zeile: für alle Header-Blockelemente
    • Richtung->Horizontal
    • Textfarbe->Orange
    • Hintergrundfarbe->Schwarz
    • Bildbreite->110px
    • Stile->Abgerundet
    • Breite->Anpassen
    • Anordnung->links
    • Richtung->vertikal
    • kleiner Innenabstand links für alle
    • Titel auf Homepage verlinken
    • Schrift->Standard
    • Schriftgrösse->Klein
    • Schrift->Standard
    • Schriftgrösse->Klein
    • Icon-Style Color->orange
    • Text-Style Color->schwarz
    • Telefon-Icon
    • +41 76 999 99 99
    • Mail-Icon
    • first.last@gmail.com
    • Anordnung->links ausrichten Richtung->Horizontal
    • Richtung->Horizontal
    • Anordnung->links ausrichten Richtung->Horizontal
    • Breite->Wachsen
    • Blockabstände->Sehr klein
    • Anordnung->rechts ausrichten Richtung->Vertical
    • Schriftgrösse->Mittel
    • Höhe->Anpassen
    • Anordnung->rechts ausrichten Richtung->Vertical
    • Breite->Anpassen
    • Blockabstände->Keine

    Im Bildteil links, Element-Baum, sehen sie die Blöcke des Headers:

    • Zeile linksbündig, die alle weiteren Blöcke aufnimmt wie:
      • Website-Logo
      • Stapel Vertical mit:
        • Website-Tilel
        • Website-Untertilel
        • Icon List für Telefon und Mailadresse
      • Zeile linkstsbündig mit:
        • Navigation mit zugewiesenem horizontalem Linkmenü
      • Stapel rechtsbündig mit:
        • Absatz als Titel für die folgenden Links
        • Navigation mit zugewiesenem vertikalem Linkmenü

    Dieser Element-Baum wird auf und zu gemacht durch klick auf das 4-te Icon(die drei Striche). Klickt man in diesem Bildteil auf einen Block, z.Beisp. Zeile, dann können die Einstellungen und Stile von diesem Block im Bildteil rechts (Optionen) eingesehen und bearbeitet werden.
    Die Einstellungen(Zahnradsymbol) + Stile(schwarz weises-Kreissymbol) die im Bildteil ganz rechts zu sehen sind, werden durch klick auf Block im rechten Bildteil sichtbar. Um den Header zu gestalten ist wie folgt vorzugehen:

    Als erstes navigieren wir im Backend zu Design>Editor dann Vorlagen dann Header. Dann zu den 3 Punkten und wählen dort Duplizieren. Wir wählen den Namen HeaderSpez und stellen den Bereich Header ein und Duplizieren das ganze.

    Im Bildteil rechts, Optionen, für die Gestaltung eines Block-Element oder Website-Element in Form von Einstelllungen(Zahnrad) und Stile(Kreis halb schwarz). Blockelemente haben Eigenschaften und Stile, die verändert werden können(Farbe, Grösse, Abstände, usw.). Diese veränderbaren Eigenschaften/Stile passen wir so an, bis der Header unserer Vorstellung entspricht. Nicht alle Blöcke haben Stile, aber alle Blöcke haben mindestens Eigenschaften.
    8-tung, die Blockelemente können noch anpassbare Eigenschaften in der Menüzeile, Punkt 6der Befehlspalette, des gewähltem Blockelement haben, wie z.B. der Cover-Block(Inhaltsposition) oder der Gutenverseblock Icon List-Block(Wahl eines Iconbild).

  • Seiten und Beiträge mit Inhalt füllen

    Die zu mutierende Seite oder Beitrag auswählen, mit Dashboard/Seite oder Dashboard/Seite. Als erstes wählen wir das Blockelement Spalten mit einem Layout von 66.66%(Spalte1) zu 33.33%(Spalte2). In der rechten Spalte platzieren wir ein Bild. In der linken Spalte platzieren wir einen Absatz mit Text.

  • Templates anpassen: Header, Footer, …

    Die zu mutierenden Templates erreichen wir aus dem Backend mit klick auf Design > Website-Editor dann klick auf Templates dann klick auf Template hinzufügen.

    Standard Templates

    Je nach dem was angepasst werden soll, muss das ensprechende Feature gewählt werden. Wenn wir einen Beitrag ändern wollen, dann muss das Einzelnes Element: Beitrag gewählt werden.

    Template Anzeige

    Für alle Beiträge wählen wir auch Alle Beiträge.

    Dort finden wir, Stand heute, 8 Templates:

    1 Template für Suche

    3 Templates für Beiträge

    4 Templates für Seiten

    Aufruf Editor
    Template Anzeige mit Website-Editor

  • Navigation erstellen

    Eine Navigation besteht in einem Block-Theme immer aus zwei Teilen:

    -einem Navigationsmenü mit Links und einem Navigationsblock dem die Links (Menü) zugewiesen sind

    -mit dem Gutenverse-Plugin haben wir eine 2-te Möglichkeiten für eine Navigations-Erstellung. Doch leider nur für klassische Themes. Desshalb ist diese Option für mich nicht geeignet(Obsolet).

    Standard: Backend > Design > Website-Editor > Navigation

    Gutenverse: Backend > Design > Menü

    Standard: Navigation-Block

    Gutenverse: „Nav Menu“-Block

    Der Navigationsblock kann in einem Block-Theme an einer beliebigen Stelle eingefügt werden. Ich habe mich für das Standard-Blockelement Navigation entschieden. Das „Nav Menu“-Blockelement hat bessere/mehr Optionen für Anpassungen, aber der grosse Nachteil ist, dass ich keine Möglichkeit für eine vertikale Navigation gefunden habe und eher nur für klassische Themes.

    Eine weitere Navigations-Möglichkeit ist eine Linkmarkierung. Hiermit kann ein Text/Bild/etc. markiert und mit einen Link verknüpfen werden. Fährt man mit der Maus über diese Markierung wird ein Handsymbol für einen Link-Hinweis angezeigt, mit einem klick springt man zu diesem Link. Mit dieser Methode können die Links vielfältiger gestaltet werden. Zum Beisp. auf einem Icon oder Bild. Diese Methode wenden wir im Footer an.

    Nameskonventionen für Menüs, bestehend aus 3 Teilen (menu-Name-horizontal/vertical):

    NamensteilMöglichkeitenMenüteilBeispiele
    Art (fix)menumenu
    ElementHeader, Footer oder/und Tätigkeit-Name-menu-HowToWebsite-vertical
    OrtLeft, Center oder Right-Name-menu–HeaderCent–horizontal
    menu    -HeadRight-vertical
    Orientierung (fix entweder oder)horizontal oder verticalhorizontal/verticalmenu-FooterCenter-horizontal
    menu-FooterCenter-vertical

    Navigations-Menü Erstellung:
    Backend>Design>Editor>Navigation

    Wenn wir auf das Bleistift-Icon klicken gelangen wir in den Bearbeitungs-Bereich um den Link anzupassen, wie: Text, Link und „in einem neuen Tab öffnen“.

  • leere Seiten/Beiträge nur Titel

    Ein neuer Beitrag, eine neue Seite, wird aus dem Backend gestartet

    • Navi für neuen Beitrag
    • neuer Beitrag nur mit Titel
    • Navi für neue Seite hinzufügen
    • neue Seite nur mit Titel

    Den Titel eingeben und 2 mal den Button Veröffentlichen klicken. Danach den nächsten Beitrag oder Seite auf dieselbe Weise erstellen. Dies ist die Grundlage, für eine sinnvolle Navigations-Erstellung.

    Anmerkung:
    Der Titel wird als Name für den Beitrag oder Seite verwendet–>zum Beispiel, aus „Wie geht es Dir“ wird zu wie-geht-es-dir

    Hat man, wie oben beschrieben, z.Beispiel einen neuen, leeren Beitrag, nur mit dem Tilel erstellt, kann jetzt der ganze Inhalt von einem anderen Beitrag wie folgt kopiert werden (ohne Plugin, je weniger Plugins, je besser):

    1. Auf den zu kopierenden Beitrag wechseln und dort in der Menüleiste des Block-Editor auf den letzten Menüpunkt, Optionen(Punkt 12), klicken und dort den Punkt „Alle Blöcken kopieren“ wählen. So wird der ganzen Inhalt des Beitrags kopiert.

    2. Auf den neu erstellten Beitrag wechseln und dort ganz zuvorderst einen Absatz einfügen und auf diesem Absatz-Element den kopierten Beitrag mit rechter Maustaste einfügen.

  • Stile für WebSite anpassen

    siehe auch: Stile für Websites

    Ein Weg, die Stile einer Website zu erkunden und anzupassen, ist mittels Site-Editor. Dort gibt es die Möglichkeit die Stile, ohne Risiko und in Ruhe zu durchstöbern. Erst wenn wir auf der angezeigten Webseite(Homepage oder Stillbuch) Speichern klicken, wird die Anpassung vollzogen. Das alles kann mit folgenden Schritten gemacht werden:

    1. Website-Editor Aufruf im Backend: Design>Editor
      (siehe Bild 1: Aufruf Editor)
    2. Aufruf des Stile-Bereich: klick auf Stile
      (siehe Bild 2: Bereich Stile wählen )
    3. Klick auf Stile durchstöbern
      (siehe Bild 3: Stil-Art wählen)
    4. Stil-Variante wählen
      (Kombination: Farbpalette, Typografie)
      (siehe Bild 4: Stil anschauen/mutieren)
    • Bild 1: Aufruf Site-Editor

    Anmerkungen:

    • Im 4-ten Bild, kann man die Stile durchstöbern, dazu eine Kombination auswählen. Da können alle Stilarten gefahrlos ausprobiert werden, jedoch nur solange wir nicht Speichern klicken.
    • Die 5 mutierbaren Stilarten sind:
      Typografie, Farben, Hintergrund, Schatten, Layout (siehe Bild 3)
    • Bild 2: Stile wählen
    • Bild3: Stil-Art wählen (durchstöbern)
    • Bild 4: Stil-Variante wählen
    Exkurs zur Stil-Bearbeitung

    In TT5, dem aktuellen Theme von WordPress, kannst du zuerst einen der 9 Stile wählen, so ein Stil hat immer eine Farbpalette, eine Typografie und ein Layout. Danach kannst du entscheiden, ob die zugehörige Farbpalette, Typografie und Layout OK ist, oder ob du vielleicht weitere Anpasssungen vornimmst.
    Ich bevorzuge gerne die Standard-Farbpalette, ein Layout mit 1920px Inhaltsbreite. Dem Header und Footer verpasse ich häufig eine schwarze Hintergrundfarbe und eine orange Textfarbe, siehe dazu auch Header+Footer anpassen. Dies ändere ich jeweils in den entsprechend gewählten Blöcken der Vorlagen Header+Footer.
    Auf der vorliegenden Site haben wir einen Header + Footer der nicht von den Farbvorgaben des Themes gestillt wird. Wir haben die entsprechenden Blöck im Header + Footer mit den entsprechenden Farben versehen (Hintergrund=Schwarz, Text- und Iconfarbe=Orange).
    Für die Typografie Farbe sind die 6 individuellen Farben(Orange, Green, Red, Blue, Skyblue, Gold), die aufgeführt sind sehr hilfreich, weil sie so auf einfache Weise zur Verwendung gewählt werden können.

    Bild 4: Stil-Variante wählen

    Layout

    Exkurs rem=r(wie root)+em: Die Einheit Pixel ist nicht flexibel. 16 Pixel sind immer 16 Pixel, ganz gleich, was um sie herum passiert.
    Wenn jemand in seinem Browser die Schriftgröße verändert, weil er alles ein bisschen größer sehen möchte, reagieren Texte, bei denen die Schriftgröße in Pixel angegeben ist, nicht auf diese Einstellung. Ist die Schriftgröße in em oder rem angegeben, skaliert der Text. Die Einheit rem bezieht sich auf das html-Root-Element, em bezieht sich auf den nächsthöheren Container.

    Farben

    ORANGE=#FFA500
    GREEN=#008000
    RED=#FF0000
    BLUE=#0000FF
    SkyBlue=#87CEEB
    Gold=#FFD700

    Bild5: Farbwahl

    Für die Farben wählen wir die Palette Standard und für Spezialitäten nehmen wir die 6, neben stehenden, individuellen Farben.
    Für die Textfarbe von Header + Footer nehmen wir Orange, dies müssen wir in der Block-Ebene der beiden Vorlagen anpassen. Dazu navigieren wir im Dashbord in den Site-Editor. Dort passen wir die Blöcke Zeile und Icon-List mit der entsprechenden Textfarbe an.

    Typografie

    Für die Typografie nehmen wir Vollkorn(2Varianten) & Fira Code, das entspricht der 4-ten Auswahl in der Typografie, des TT5 Theme. Dann stellen wir für Texttypen Text, Überschriften und Beschriftungen Vollkorn ein.

    Typografie für die diversen Texttypen

  • WordPresss Seite / Beiträge kopieren

    Variante 1: kopieren ohne Plugin

    In der ersten Variante werden nicht die gesamten Seiteneinstellungen kopiert, sondern lediglich der Inhalt der Seite / des Beitrags.

    Schritt 1: Rufe in WordPress die Seite oder den Beitrag auf, welche/r dupliziert werden soll. Es wird hierbei die Nutzung des Gutenberg Editors vorausgesetzt.

    Schritt 2: Klicke anschließend in der rechten oberen Ecke auf den Button mit den drei Punkten, um das Menü für weitere Optionen zu öffnen.

    Schritt 3: Im neu aufgeklappten Menü siehst du den Bereich „Werkzeuge“. Dort klickst du auf den Eintrag „Alle Blöcke kopieren“. Nun wurden sämtliche Inhalte des Beitrags oder der Seite in die Zwischenablage deines Computers kopiert.

    Schritt 4: Verlasse den Bearbeitungsmodus über das WordPress Symbol links oben. Nun öffnest du wieder den Bereich Beiträge beziehungsweise Seiten und legst einen neuen Eintrag an. Klicke anschließend im neuen Beitrag auf eine freie Zeile im Editor und füge mit der Tastenkombination STRG + V die kopierten Inhalte auf deiner neuen Seite ein.

    Variante 2: kopieren ohne Plugin

    Auch in der zweiten Variante werden nicht die gesamten Seiteneinstellungen kopiert, sondern lediglich der Inhalt der Seite / des Beitrags.

    Schritt 1: Rufe in WordPress die Seite oder den Beitrag auf, welche/r dupliziert werden soll. Es wird hierbei die Nutzung des Gutenberg Editors vorausgesetzt.

    Schritt 2: Klicke anschließend in der rechten oberen Ecke auf den Button mit den drei Punkten, um das Menü für weitere Optionen zu öffnen.

    Schritt 3: Im Gegensatz zur Variante 1 wählst du jetzt im Menü den Eintrag „Code Editor“ aus. Damit sollte sich die Anzeige deines Editors verändern. Markiere nun sämtliche Inhalte, die du duplizieren möchtest, und kopiere sie mit der Tastenkombination STRG + C.

    Schritt 4: Verlasse den Bearbeitungsmodus über das WordPress Symbol links oben. Nun öffnest du wieder den Bereich Beiträge beziehungsweise Seiten und legst einen neuen Eintrag an. Klicke anschließend im neuen Beitrag auf eine freie Zeile im Editor und füge mit der Tastenkombination STRG + V die kopierten Inhalte auf deiner neuen Seite ein. Schließe nun den Code Editor wieder, indem du erneut die drei Punkte rechts oben anklickst und im Bereich „Editor“ zurück auf den „visuellen Editor“ wechselst.

    Variante 3: Plugin Yoast Duplicate Post

    Wenn du dir aufwendige Kopierarbeit ersparen möchtest, lohnt sich ein Blick auf das Plugin „Yoast Duplicate Post“. Mit über 3 Millionen Installationen ist es eins der am häufigsten verwendeten Kopier-Plugins.

    Im Gegensatz zu Variante 1 & 2 ohne Plugin, kannst Du hiermit gesamte Seiten / Beiträge kopieren (Inhalt + Seiteneinstellungen).

    Wenn du das Yoast Duplicate Post Plugin installiert und aktiviert hast, wird unter anderem in der Übersicht deiner Seiten und Beiträge ein neues Feld „Duplizieren“ hinzugefügt. Du findest es, wenn du mit dem Mauszeiger über einen Beitrag fährst und damit die Zusatzoptionen eingeblendet werden.

    Yoast Duplicate Post bietet darüber hinaus vielfältige Optionen, mit denen du einen WordPress Beitrag kopieren kannst. Im WordPress Menü findest du unter „Einstellungen“ nach Installation den Eintrag „Duplicate Post“. In diesem kannst du festlegen, welche Beitrags- beziehungsweise Seitenelemente jeweils dupliziert werden sollen. Du kannst der Kopie auch einen Präfix (z.B. Kopie von (…)) oder einen Suffix (z.B. (…)-Duplikat) anfügen.

    Außerdem kannst du in den Einstellungen bestimmen, welche Benutzerrollen auf deiner WordPress-Seite Seiten oder Beiträge duplizieren dürfen. Wenn du es übersichtlicher brauchst, kannst du auch die Anzeige der verfügbaren Felder nach Belieben ein- und ausblenden.

    Variante 4: Plugin WooCommerce

    Zugegeben, WooCommerce ist in erster Linie kein Plugin zum WordPress Seiten kopieren. Das E-Commerce Plugin zählt zu den beliebtesten im Open Source Bereich, was den Aufbau und die Verwaltung von Online-Shops angeht. Im weiteren Sinne verfügt WooCommerce aber trotzdem über eine Kopieren-Funktion.

    Wenn du WooCommerce aktiviert und erste Produkte hochgeladen hast, klickst du im WordPress Menü auf den Eintrag „Produkte“. In der Auflistung der Produkte gibt es bereits den Button „Duplizieren“, wenn du den Mauszeiger über das gewünschte Produkt bewegst. Somit kannst du insbesondere Produkte leicht kopieren, die weitestgehend gleiche Eigenschaften haben. Du erkennst eine Duplizierung in WooCommerce an dem Suffix „(Kopie)“.

    Wenn du das Yoast Duplicate Post Plugin installiert und aktiviert hast, wird unter anderem in der Übersicht deiner Seiten und Beiträge ein neues Feld „Duplizieren“ hinzugefügt. Du findest es, wenn du mit dem Mauszeiger über einen Beitrag fährst und damit die Zusatzoptionen eingeblendet werden.

  • WordPress das gratis WebSite-Tool

    Willkommen zu WordPress, dem gratis Werkzeug, zur Erstellung einer WebSite. Das Dokument, das Sie gerade anschauen, ist der erste Beitrag einer Artikelserie(Blog), welche zeigt, wie WordPress installiiert und eine Website von Grundauf, Schritt für Schritt, erstellt wird. Um sofort loslegen zu können installieren wir WordPress in eine lokale Umgebung inklusive Datenbank und Webserver. Über folgenden Link gelangen sie in die Beschreibung zur lokalen Installation: WordPress-in-lokaler-Umgebung

    Die lokale Umgebung hat die Vorteile, dass alles gratis und nichts Online ist und so auch keine rechtlichen Konsequenzen zu fürchten sind. Man kann alles in Ruhe testen. – Ist WordPress in einer lokalen Umgebung installiert, beginnen wir eine Website aufzubauen. Um eine Website zu erstellen benötigen wir ein Thema, um welches wir die WebSite aufbauen. Unser Thema ist eine Hundeschule in welcher Hunde ganz ohne „goodeli“ und ohne Leine erzogen werden sollen. Unsere Website soll snsDogTraining heissen. Unser Konzept nach der wir die WebSite aufbauen ist folgedes:

    Unser Website Grobkonzept:

    Name:snsDogTraining
    Domain:snsDogTraining.ch
    Art:Verkaufswebsite
    Ziel:Umsatz, Klicks
    Vorbild:https://marc-welti.ch/ (Marc Welti – Hundetraining)
    Inhalt (Seiten/Beiträge):Start, Leistungen, Blog, Kontakt, Events, Über uns
    Stil:Modern, Klassisch, Plakativ, Flach, Zurückhaltend
    Schrift:Georgia, Palatino Linotype, Times New Roman, Arial, Comic Sans MS, Impact, Lucida Sans Unicode, Tahoma, Trebuchet MS, Verdana, Courier New, Lucida Console
    Farbe:Schwarz, Orange, Weiss, Grün, Rot, Blau
    Logo:weisser Hund mit weissem Schriftzug auf schwarzem Hintergrund
    Favicon:Hintergrund: Schwarz, Orangekreis mit schwarzem Text 100%

    In den folgenden Beiträgen, Menüpunkte 01-09 und dem WordPress Lexikon, wird gezeigt, wie das moderne WordPress Blöcke verwendet, um Websites zu erstellen. In Seiten und Beiträgen wird mittels eines Editor auf Blockelemente zugegriffen und so Inhalt schrittweise in eine WebSite eingebaut. Das nennt man Full-Site-Editing(FSE), Voraussetzung dazu ist, dass ein Block-Theme aktiviert ist. Hintergrund dieser Entwicklung ist, dass viele Techniken wie Menüs, Widgets, Shortcodes, Elementes, usw. so durch Blöcke ersetzt werden. Damit kann man die gesamte Website anpassen, inklusive Header, Footer und automatisch erzeugten Seiten wie zum Beispiel einer Beitragsseite und den Archivseiten – ohne Code-Berührung – ohne Page-Builder nur mit einem der folgenden, integrierten WordPress-Editoren:

    • Block-Editor ist nur für den Inhaltsbereich der Seiten und Beiträge zuständig. Wird direkt gestartet wenn eine Seite oder ein Beitrag aufgerufen wird.
    • Site-Editor im Menü Design zur Anpassung des Themes (Stile, Navigation, Seiten, Templates, Vorlagen). In den Vorlagen sind die wichtigen Template-Teile Header und Footer enthalten.

    Der Site-Editor, erreichbar aus dem Backend via Design > Editor startet im Browse-Modus, in dem man sich in den folgenden, wichtigsten fünf Design-Bereichen umschauen kann:

    • Stile (9 Varianten: Farben, Schriften, Layout, usw.)
    • Navigation
    • Seiten
    • Templates
    • Vorlagen (mit den Template-Teilen: Header, Footer und Allgemein)

    Linkliste, wie eine „neue Website“ erstellen:

    Wichtige WordPress-Begriffe:

    WordPress Lexikon

  • HTML in WordPress eingeben

    1. Möglichkeit: Die Bearbeitung des Contents per HTML im Editor

    Sie können den benutzerdefinierten HTML-Block-Editor oder auch Gutenberg-Editor verwenden, um ein brandneues HTML hinzuzufügen. Den Editor finden Sie für Seiten und auch für Beiträge in Ihrem Dashboard. Wählen Sie Ihre Seite aus, die Sie bearbeiten möchten.

    Hier haben Sie den Vorteil, dass es bereits Vorlagen für die Einbettung von Elementen gibt. Dies ermöglicht eine schnellere Bearbeitung und vereinfacht vieles für Sie. Über den Plus-Button haben Sie Zugriff auf viele verschiedene Elemente um Ihre Seite zu editieren. Wichtig ist, die Änderungen beziehen sich nur auf das aktuelle Theme.

    Ein Beispiel: Sie möchten Ihren YouTube-Kanal einbauen. Gehen Sie auf “Einbettung YouTube” und binden Sie Ihren gewünschten Kanal ein. Nun gefällt Ihnen zum Beispiel das Format von 16:9 nicht. Über das Dropdown-Menü können Sie unter dem Button „Als HTML bearbeiten“ die Größe anpassen. Über “Vorschau” können Sie sich das Ergebnis anschauen und über den Button “Aktualisieren” können Sie die Änderung übernehmen.

    Über das Dropdown-Menü neben der Aktualisierung können Sie auch auf die ganze Seite zugreifen und Ihre Codes bearbeiten. Dort können Sie dann unter dem “Code-Editor” auch Anpassungen des HTML-Codes an der gesamten Seite tätigen.

    Bei einem Beitrag ist es der gleiche Weg. Gehen Sie auf “Beiträge” und dann auf “Bearbeiten” und geben Sie einfach Ihren gewünschten Code ein.

    2. Möglichkeit: Die Website-Theme-Bearbeitung per HTML im CSS

    Eine weitere Möglichkeit ist die Bearbeitung der Website mit HTML direkt in Ihrem Editor.  Mit dem Child-Theme können Sie das Design der eigenen Website weiter individualisieren, als es mit den Standardeinstellungen bei WordPress möglich ist.  Dafür verändern Sie den Quellcode des Themes. Mit diesem Tool können Sie auch direkt in Ihrem Dashboard arbeiten. Gehen Sie auf “Design” und dann auf den “Theme-Editor”.

    Auf diese Weise können Sie PHP, Theme-Dateien, CSS und JavaScript bearbeiten. Im Grunde fast alles, was Sie wollen. Die Änderung wird direkt zu den Codedateien hinzugefügt. Diese Methode kann jedoch etwas riskanter sein. Es gibt keine Vorschau die Ihnen zeigt, was Sie verändert haben. Daher sollten Sie immer ein Backup erstellen, bevor Sie diese Schritte tätigen. So können Sie jederzeit auf Ihre ursprüngliche File zurückgreifen und diese per FTP wieder herstellen.

    3. Möglichkeit: Die Bearbeitung von Header und Footer in HTML per Plugin

    Die dritte Möglichkeit besteht darin, ein Plugin zu verwenden, um Ihre Code-Snippets zu verwalten. Je nachdem, welche Art von Code Sie hinzufügen möchten, müssen Sie verschiedene Plugins benutzen. Wir empfehlen das Plugin “Insert Headers and Footers”.

    Sobald es installiert und aktiviert ist, können Sie über die Einstellungen auf das Plugin zugreifen. Hier können Sie beliebige Code-Snippets einfügen, die Sie verwenden möchten.

    Wenn Sie beispielsweise versuchen ein Google Analytics-Snippet zu installieren, so können Sie es direkt in das Skript des Header-Felds einfügen. Ihre Änderung müssen Sie nur noch speichern.