Tipps zur Programmierung unserer Homepage
Von Matthias, DL3VCO
Ich benutze aktuell den Microsoft-Browser ‚Edge‘. ‚Firefox‘ hat immer mal wieder für „Überraschungen“ gesorgt. Im Editor als auch in der Vorschau gut aussehender Inhalt sah auf der Webseite grottig aus (Formatierung).
Auf Grund meiner nur puzzleartigen Programmierkenntnisse, nutze ich, auf Christian’s (DL9NL) Tipp hin, für das Suchen fehlender Puzzlestücke die Webseite von „W3Schools“ (engl.). Ich habe sie als hervorragende Wissensergänzung schätzen gelernt.
WP-Editor
Für einen komfortablen Überblick über den Seiten-/Beitragsaufbau kann man die Listenansicht öffnen. Diese ist auf der oberen Menüzeile durch die im linken Bereich befindlichen 3 waagerechten, versetzten Striche zu erreichen. Sie eignet sich gut, in einem Rutsch Blöcke zu verschieben, zu löschen (Alt+Shift+Z) oder neue einzufügen. Damit sind ganze Blöcke schnell verschoben, ohne umständlich Copy/Paste machen zu müssen. Wenn man keine inhaltlichen Änderungen machen muss, haben ganze Beiträge/Seiten recht schnell ein anderes Outfit.
CSS
Neben der Programmierung im WP-Editor ist es in erster Linie der Einsatz von CSS, der den Beiträgen/Seiten den letzten optischen Schliff verpasst. Bei vielen Blockarten ist in der rechten Settingspalte der Menüpunkt ‚Custom CSS‚ vorhanden. Damit besteht die Möglichkeit, die vom System vorgegeben optischen Einstellungen zu erweitern oder gar zu überschreiben.
Farbbezeichnungen können als englischer Klartext( z.B grey ) oder HEX-Code (z.B. #465058 ) eingegeben werden.
Text ausrichten und erste Zeile einrücken
- Einen Block, der Text enthält, markieren.
- Im ‚Custom CSS‘ folgendes eintragen:
- selector { text-align: justify; text-indent: 20px;}
- Der Text wird in Blocksatz (linker und rechter Rand gleich) ausgerichtet. Die erste Zeile ist 20px eingerückt. Als Beispiel ist der Textabsatz ‚WP-Editor‘ so ausgerichtet. Sieht auf dem Desktop gut aus, auf dem Smartphone aber nicht!
Einen Abstandshalter als Trennstrich verwenden
- Block Abstandshalter einfügen
- Höhe (z.B 1 ) auswählen
- Custom CSS öffnen: selector {background-color: grey;} eingeben. selector{} ist manchmal schon vorhanden
- Es entsteht ein schmaler, grauer, sich der Breite automatisch anpassender Trennstrich.
Immer wieder benötigte Blöcke als „Wiederverwendbarer Block“ festlegen
- Einen Block markieren -> Es öffnet sich das Blockmenü
- Am rechten Ende des Blockmenüs sind 3 senkrechte Punkte -> es öffnet sich ein weiteres Menü
- Den Menüpunkt „Zu wiederverwendbaren Blöcken hinzufügen“ auswählen
- Einen Namen eingeben und abspeichern
„Wiederverwendbarer Block“ ändern
- Seite/Beitrag sichern !!!
- in den Beitrags-/Seiten-Settings (Zahnrad) auf ‚Block‘ klicken -> darf nicht auf Beitrag/Seite stehen
- Den oberen, rechten Menüpunkt mit den 3 senkrechten Punkten anklicken
- „Wiederverwendbare Blöcke verwalten“ öffnet den Editor für diese Blockart -> ursprüngliche Seite wird verlassen, daher Punkt Eins.
- ACHTUNG: eine Änderung an so einen Block wirkt sich auf der gesamten Homepage aus, überall dort, wo dieser Block verwendet wird !
„Wiederverwendbarer Block“ aufrufen
- Mit (+) das Blockeinfügemenü öffnen
- in der Suchzeile (mit der Lupe) wieder eingeben -> es werden alle verfügbaren wiederverwendbaren Blöcke angezeigt
- Block auswählen -> wie bei jeden anderen Block
Ein Bild mit einem Rand versehen
- Das Bild in einem Block markieren
- Im ‚Custom CSS‘ selector img {border: 10px solid grey;} eingeben
- Bild wird von einen dicken (10px) , durchgehenden (solid), grauen (grey) Rand (border) umgeben
Ein Bild mit abgerundeten Ecken darstellen
- Das Bild in einem Block markieren und im ‚Custom CSS‘ eingeben:
- selector img{ border: 0px solid white; border-radius: 20px 0px 20px !important;}
- Es muss ein Rand mit 0px Breite definiert werden, denn ohne einen Rand kann ich auch den (Bild)-Rand nicht abrunden!
- Durch das !important am Befehlsende werden alle anderen Einstellungen überschrieben und es entsteht eine zusätzliche CSS-KLasse, welche man unter ‚Erweitert‘ anschauen kann.
Die nachfolgenden, am Beitragsende vorhandenen, ‚OceanWP‘-Settings sind nur für Admins sichtbar
Bestimmte Einstellungen sind im Customizer festgelegt und können nicht überschrieben werden!
Main
Content Layout: Darstellungsbreite des Beitrages
‚100% Full-Width‚ hat keine Ränder, ‚Full-Width‚ dagegen schon
Sidebar: kann man eigene Sidebar’s anwählen – wenn in ‚My Library‘ vorhanden!
Paddings: bei an-/Abwahl noch keine großen Änderungen gesehen
<>Shortcodes
Vor oder nach verschiedenen Seiten-/Beitragspositionen können defacto alle Elemente eingefügt werden, die über einen Shortcode verfügen. Das können z.B. Terminlisten, Bilderfolgen (Slider), Beitragslisten u.v.m. sein. Vorrausetzung ist, das die Beitrags-/Seitenelement überhaupt freigeschalten ist. Wenn z.B. die Top Bar nicht ‚Enable‚ ist, kann der dort dazugehörende Shortcode auch nicht angezeigt werden. In diesem Beitrag ist die Top Bar freigegeben und in ‚Shortcode Before Top Bar‚ der Shortcode metaslider id=“12310″ eingetragen. Damit erscheint ÜBER dem DARC-Logo eine Bilderfolge. Hätte ich den Shortcode stattdessen in ‚Shortcode After Top Bar‚ eingetragen, würde die Bilderfolge zwischen unseren Seitentitel und dem Menü erscheinen.
Header
Display Top Bar: Ein-/Ausschalten unser Überschrift „Funkamateure Ortsverband…“ mit DARC-Logo
Display Header: Ein-/Ausschalten des Menüs
Header Style: bei eingeschalteten Header und der dann möglichen Auswahl von ‚Custom Header‘ kann man ein Template (Vorlage) aus ‚My Library‘ auswählen. In diesem Beitrag ist es die ‚dl3vco_nav‘. In ‚dl3vco_nav‘ wiederum ist festgelegt, das unter der Top Bar das ‚Menü 2‘ angezeigt wird.
Logo
Auswahlmöglichkeit für ein Logo-Bild und dessen Platzierung. Konnte ich kein Resultat feststellen.
Title
‚Enable‚: man kann einen zusätzliche Seiten-/Beitragstitel eingeben. Verschwindet aber hinter unserem Seiten-/Beitragsüberbau. Müsste man als Headertyp ‚transparent‘ verwenden
Dinge, worüber man stolpern kann
Ultimative Beitragsliste
Wenn man im Abschnitt „Category Flters“ nur bestimmte Kategorien sehen möchte und diese mit gedrückter STRG-Taste markiert hat, darf man das Häkchen „Show only posts that are in all selected categories“ auf keinen Fall setzen, da sonst überhaupt keine Beiträge gefunden werden !
