Kategorie: Blog

Your blog category

  • ein paar leere Seiten/Beiträge

    Ein neuer Beitrag, eine neue Seite, wird aus dem Dashboard durch klick auf:

    • Beiträge > Neuen Beitrag erstellen
    • Seiten > Neue Seite erstellen

    Den Titel eingeben/erfassen und Button Veröffentlichen klicken. Danach den nächsten Beitrag oder Seite auf dieselbe Weise erstellen.

  • Stile für WebSite anpassen

    Ein Weg, die Stile einer Website anzupassen, ist mittels Website-Editor(siehe Bild). Den Website-Editor erreichen wir über das Dashboard durch klick auf Design>Website-Editor.

    Wir können die folgenden 5 Stile bearbeiten: Typografie, Farben, Hintergrund, Schatten, Layout

    Bild Stile bearbeiten

    Layout

    Für Layout wählen wir eine Inhaltsbreite und „Weite Breite“ von 1920px. Innenabstand unten und oben 0px und links und rechts 20px. Für die Block-Abstände wählen wir 1 rem.

    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

    Für die Farben wählen wir die Palette Standard. Für die individuellen Farben nehmen wir:
    ORANGE=#FFA500
    GREEN=#008000
    RED=#FF0000
    BLUE=#0000FF

    Typografie

    Für die Typografie wählen wir die 3-te von 8 Varianten: Fira Code(1 Variante) & Vollkorn(2 Varianten).
  • 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 einen lokalen Umgebung. Ü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 wird gezeigt wie man WordPress verwendet um Websites zu erstellen. Aktuell verwendet WordPress Blöcke, auf die mit dem Website-Editor und dem Block-Editor zugegriffen werden, um so Schrittweise eine WebSite zu bearbeiten:

    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.

    • 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.
    • Website-Editor im Menü Design zur Anpassung des Themes (Navigation, Stile, Seiten, Templates, Vorlagen). In den Vorlagen sind die wichtigenTemplate-Teile Header und Footer enthalten.

    Der Website-Editor startet im Browse-Modus, in dem man sich in den folgenden, wichtigsten fünf Design-Bereichen umschauen kann:

    • Navigation
    • Stile (9 verschiedene Farben, Schriften, usw.)
    • Seiten
    • Templates
    • Vorlagen (mit den Template-Teilen: Header, Footer und Allgemein)
  • 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.