WordPress – Das Astra Theme
Alle in dieser Rubrik Hinweise und Tipps, gelten ausschließlich für das Astra Theme. Ob die jeweiligen Hinweise auch bei Ihnen funktionieren, kann auch davon abhängen, ob Sie mit der normalen Astra Version arbeiten oder schon mit der Astra Pro Version, also der bezahlten Vollversion.
Thema und der entsprechende Link, direkt zum Thema, oder einfach Scrollen.
Wie geht das ?
beachten Sie auch die Rubrik:
WordPress mit Programmen und PlugIns erweitern
Inhaltsverzeichnis
Astra Theme – Menu Umbruch
Unter dem Umbruch des Menus versteht man die normale Lesbarkeit des Menus. Auf kleineren Geräten wie z.B. Laptop, Tablet oder Handy ist das schon deshalb wichtig, um dem Benutzer, die möglichst Optimale Lesbarkeit, zu Gewährleisten. In der Regel tritt dieser Umstand jedoch frühestens bei älteren Laptop Geräten auf, deren Auflösung zu gering ist.
Um die Richtigen Einstellungen zu finden, habe ich mich jeweils an der Größe des Menus Orientiert und das einfach mit JRuler ausgemessen. Haben Sie kein großes Menu ( gesamte Länge der Links ), können Sie den Umbruch, vielleicht sogar noch bei 800 Pixeln einstellen. Diese Vorgehensweise muss nach jedem Menu Punkt der hinzu kommt ( nicht beim Untermenu ), jedoch auch wiederum erweitert/angepasst werden.
Um zu sehen wann das Menu aktuell Umbricht, klicken Sie ganz oben Rechts in das Fenster, welches zwei hintereinanderliegende Fenster anzeigt. Nun ziehen Sie mit der Maus, das Fenster in der Breite kleiner, bis das Menu fast am Rand links anstößt, bzw. durch Ihr Logo begrenzt wird. Jetzt ausmessen ob Sie noch Platz links haben oder nicht. Wenn Ja, so können Sie den Umbruch des Menus noch etwas kleiner machen, bzw. Sie müssen den Umbruch vergrößern. Meine Einstellungen liegen bei 1440 Pixeln, je nachdem wie Ihre Auflösung ist, passen Sie es an.
Achten Sie aber darauf, nicht über 1600 Pixel zu gehen, sonst könnte auch bei einem Laptop, der Umbruch schon Angezeigt werden, obwohl noch genug Platz für Ihr Menu wäre.
Den Umbruch können Sie im Customizer von Astra vornehmen. Unter dem Menu Punkt, Primäres Menu, Mobile Menu – Mobile Breakpoint.
Astra Theme – Shortcodes
Nutzen Sie Shortcodes so oft es geht, das spart nicht nur Zeit und Mühe. Ob nun beim Schreiben oder einfügen Ihrer Logos und allgemeinen Hinweise, es veringert auch die Ladezeit Ihrer Seite.
Die Shortcodes konnen Sie entweder im Customizer eintragen, mit Angabe von Schriftgrößen und Farben, wie auch in den Texten. Auch bei Elementr funktioniert das sehr gut, indem Sie den Text Editor einsetzen. Dieser ist zwar etwas gewöhnungsbedürfitig für Unerfahrene, aber sehr wirkungsvoll in Ihrer Darstellung.
Astra Theme – Besucherzähler
Einen Besucherzähler, so wie auch auf meiner Seite im Footer, ist nicht nur für den Betreiber der Webseiten interessant. Auch die Besucher können daran erkennen wie viele andere Personen, auch an Ihren Webseiten interessiert sind.
Ich benutze hierzu das Plugin “ Count per Day „, es ist recht einfach einzustellen. Das Plugin zählt jeden Besucher, leider auch Browser Robots, aber selbst die kommen nicht jeden Tag 10-mal vorbei.
Wichtiger Hinweis:
- das original PlugIn vers. 3.61 funktioniert nur bis zur PHP Version 7.4
- für alle höheren Versionen von PHP ( 8.0, 8.1 ) benötigen Sie eine von mir modifizierte Version, die Sie hier Downloaden können. Besuchen Sie für weitere Informationen und Download bitte die Seite “ Count per Day “ aufsuchen, dort wird nochmals alles Beschrieben.
- das PlugIn stammt nicht von mir. Ich habe es nur so angepasst, dass es lauffähig ist, auch mit höheren PHP Versionen (8.0, 8.1)
Die Anzeige ist zunächst für Ihr Dashboard vorgesehen, aber kann erweitert werden wenn Sie das möchten, auch im Footer. Durch die Eingabe von einfacher Beschreibung und den Shortcodes, kann das sehr anschaulich dargestellt werden.
Die Dokumentation hierzu finden Sie in der Installationsdatei unter der Bezeichnung “ readme.txt „, leider nur in Englisch. Damit Sie sich nicht allzu sehr quälen müssen, habe ich hier einige der wichtigsten ShortCodes, wie auch auf meiner Seite vorhanden, hier vermerkt.
Ich habe dabei alle ShortCodes, damit auch auf jeder Seite sichtbar, über den Customizer von Astra, im Footer Text eingegeben. Sie können natürlich die Shortcodes auch überall auf anderen Seiten oder Beiträgen einsetzen.
Anmerkung: Die Farben der Darstellung sind natürlich auf meine Seite abgestimmt, die müssten Sie gegebenenfalls noch ändern.
Alle ShortCodes die Sie verwenden können sind hier aufgeführt. Ich hätte Sie Ihnen gerne zum Kopieren eingefügt, dies ist jedoch leider nicht möglich, denn sobald die eckigen Klammern um den ShortCode sind, wird dieser sofort durch/mit Werten ersetzt.
Möchten Sie nur einen Shortcode davon nutzen, dann funktioniert natürlich alles andere auch. Das Plugin “ BerDin-Funktionen “ ist nicht zum Einstellen vorbereitet, sondern es muss mit der Hand mit einem Editor, wie z.B. Notepad++, ( auf keinen Fall Word, wegen der Formatierungen ) bei Bedarf, geändert werden
Astra Theme – Seiten schneller und einfach erstellen
Die größte Arbeit ist es eigentlich die Startseite zu erstellen und eine Ihrer Nachfolgenden Seiten. Wenn Sie diese erst einmal haben ist das meiste schon geschafft.
Alles funktioniert, die Farben Stimmen und der Aufbau, die Schrift ist grundlegend schon festgelegt. Damit haben Sie eigentlich alles für eine gut strukturierte Webseite erledigt.
Sie müssen jetzt nicht mehr das Rad ( die Webseite ) neu erfinden und jede neu bauen und erstellen. Kopieren Sie einfach die letzte erstellte Seite, benennen Sie sie um und das war es schon für Sie. Jetzt nur noch Texte Austauschen, Bilder und die nächste Seite ist fast schon fertig. Sie müssen nicht jedes Mal die Seite neu entwerfen, wenn Sie nicht grundlegende Strukturen ändern wollen. Halten Sie an einem festgelegten Muster fest, das macht es auch einfacher für Ihre Besucher, sich zurecht zu finden.
Das mach auch Zeitungsredaktionen nicht, die Grundlegende Struktur wird beibehalten, ein paar Spalten verschoben und fertig ist die neueste Ausgabe von Zeitung oder Magazin.
Vergleich sie einmal meine Seiten, sehen alle unterschiedlich aus, aber der Grundstil und Seitenaufbau ist exakt gleich. Ich entwerfe auch nicht jede Seite neu, Kopieren, Texte Tauschen, Bilder, erledigt. Ich möchte ja auch fertig werden und mache es mir einfach. Viele außer mir, machen das übrigens auch.
Ein einfaches PlugIn hilft Ihnen dabei und ist auch oft schon vorhanden, Sie haben es bisher nur vielleicht noch nicht gesehen oder beachtet. Falls bei Ihnen noch keines da ist, Installieren Sie z.B. Yoast Duplicate Post oder ein anderes PlugIn und Ihre Seite/Beitrag wird komplett mit allen Texten, Bildern und Formatierungen als Entwurf kopiert.
Gehen Sie hierzu in das Dashboard, zum Menu punkt Seiten/alle Seiten und duplizieren Sie einfach die komplette Seite/den Beitrag. Damit Sie nicht Durcheinanderkommen, ist der nächste Schritt gleich Quickedit und Sie Benennen die Seite gleich um, in den neuen Titel. Denn falls Sie z.B. mit dem Pagebuilder Elementor Arbeiten, wird die Seite gleich beim Speichern veröffentlicht und nur am Titel könnte das schwer zu erkennen sein, da müssten Sie schon das Datum beachten. Auf diese Art vermeiden Sie es, die falsche Seite zu Bearbeiten.
Astra Theme – Copyright Anzeige auf jeder Seite
Der Copyright vermerk ist eigentlich fast schon ein muss auf jeder Internet WebSeite. Dieser taucht dann automatisch auf jeder erstellten Seite, meistens auch bei jedem Theme, auf die selbe Art auf. Sie setzen einfach den Copyright Vermerk in den Footer des Astra Themes.
Eines gleich zu Beginn, das Copyrightzeichen © erreichen Sie mit der Tastenkombination:
“ Alt-Taste und 0169 “ ( wichtig: auf dem Ziffernblock)
Tragen Sie hierzu einfach im Textteil des Footers ein:
<b>Copyright © 2016 – [current_year] by
<a href=“https://www.ihre-domain.de/“>[site_title]</a></b>
<br><br>
Das ganze heißt übersetzt:
- <b> HTML Zeichen für Fettschrif (bold) beginnt
- Copyright © 2016 – bezeichnet z.B. den beginn seit dem Ihre Seite Online ist
- [current_year] Bezeichnung für das aktuelle Jahr (wechselt jedes Jahr automatisch)
- by die Urheberechte liegen bei
- <a href=“https://www.ihre-domain.de/“> der Link zu Ihrer Webseite
- [site_title] Titel Ihrer Webseite
- </a></b> ende des Links, ende der Fettschrift (bold)
- <br> HTML für Zeilensprung
Das einzige Problem das sich für Sie als Anfänger noch ergeben könnte, wären die farben der Schrift.
Ich habe einen dunkleren Hintergrund, viele nutzen aber auch reines Weiß oder etwas dunkler, dann wäre die Schrift schlecht zu sehen.
Nutzen Sie dann diesen Zusatzteil für die Schrift Formatierung:
<span style=“color:#000;font-size: 20px; font-weight: bold;“>
<b>Copyright © 2016 – [current_year] by
<a href=“https://www.ihre-domain.de/“>[site_title]</a></b></span>
<br><br>
Sollte Ihnen die fette Schrift zu stark sein, einfach das <b> entfernen
Astra Theme – Letztes Update der Seite
Wenn Sie öfters Seiten bearbeiten oder mit Beiträgen erweitern, finde ich es auch selbst gut, wenn der letzte Stand der Bearbeitung auch ersichtlich ist. Das liegt vor allem daran, dass ich ja auch keine uralten Beträge zu aktuellen Themen lesen mochte.
Die Grundidee war damals, den letzten Stand der Bearbeitung zu erkennen und vor allem diesen Text nur einmal zu entwerfen. Dies ist mit diesem HTML Text und etwas ShortCode möglich. Der Text bleibt zwar immer gleich
letzte Aktualisierung der Seite
Jetzt kommt der Seitentitel der sich je nach der gewählten Seite verändert. Danach
war am:
der Wochentag ausgeschrieben, Datum der letzten Bearbeitung und die Uhrzeit.
Der HTML Befehl und Shortcode:
- <span style=“color:#FFCF61; font-size: 18px; font-weight:bold;“>‘ .get_the_modified_date( ‚l, d.m.Y – H:i‘) . ‚ Uhr </span>‘;
Das ganze heißt übersetzt:
- <span style= einleitender HTML Tag
- „color:#FFCF61; Farbe in die Schrift erscheinen soll der
- font-size: 18px; Schriftgröße in Pixeln
- font-weight:bold;“> Schriftstil Fett
- ‚ .get_the_modified_date ShortCode – aktuelles Datum der letzten Bearbeitung
- ( ‚l, d.m.Y – H:i‘) . ‚ Kleines L = Wochentag ausgeschrieben, Komma, Leerzeichen, Tag. Monat Jahr, Bindestrich, Stunde: Min
- Uhr normaler Text
- </span>‘; abschießender HTML Tag
Die Darstellung könnte auch noch verändert werden in dem man z.B. mit dem Texteditor folgenden Teil abändert:
- ( ‚D, d.m.Y – H:i‘) . ‚ Wochentag gekürzte Schreibweise
- ( d.m.Y – H:i‘) . ‚ Wochentag komplett weglassen
- ( d.m.Y – H:i:s‘) . ‚ Stunde, Minute Sekunde anzeigen lassen
- ( d.m.y – H:i:s‘) . ‚ das Jahr zweistellig ausgeben lassen
Wie Sie sehen werden nur Buchstaben geändert, diese haben aber entscheidende Auswirkungen in der Darstellung des Schriftzugs.
Die Angaben zu Wochentag und Zeit können Sie willkürlich mischen je nachdem wie es Ihnen gefällt.
Wenn Sie das Wort Uhr nicht angezeigt haben möchten löschen Sie es einfach, nicht jedoch das Hochkomma vor dem Wort Uhr.
Den Text und Shortcode tragen Sie folgendermaßen im Customizer/Footer und danach im Textteil ein:letzte Aktualisierung der Seite WordPress – Das Astra Theme – Tipps war am: Sonntag, 01.01.2023 – 19:27 Uhr
Damit alles, nur der Teil: Letzte Aktualisierung auch richtig funktioniert, müssten Sie noch ein PlugIn ( die Größe: 3kB, also lächerlich ) von mir herunter laden. Dieses enthält den Shortcode, für die Monate und deren Schreibweiset, herunterladen. ( aktualisiert sich auch automatisch ) Sie können diesen Teil natürlich auch nutzen, um Ihre eigenen ShortCode hinzuzufügen.
In dem Plugin zu Herunterladen, ist auch der Shortcode: Copyright enthalten. den Sie für die Anzeige:
- Copyright ©
brauchen, falls Sie diese nutzen wollen.
Möchten Sie nur einen Shortcode davon nutzen, dann funktioniert natürlich alles andere auch. Das Plugin “ BerDin-Funktionen “ ist nicht zum Einstellen vorbereitet, sondern es muss mit der Hand mit einem Editor, wie z.B. Notepad++, ( auf keinen Fall Word, wegen der Formatierungen ) bei Bedarf, geändert werden.
Astra Theme – die Unter-Menu Richtung
Wenn Sie ein normales Menu erstellen werden Sie diesen Hinweis nicht benötigen. Erst wenn Sie ein Untermenu einplanen, könnte es zu Problemen mit der Lesbarkeit und der Darstellung des Menus kommen.
Standardgemäß werden Untermenus immer rechts neben dem Hauptmenu angzeigt. Dieser Umstand kann jedoch dann stören, wenn etwa der Titel des Menupunktes zu lange ist und/oder Sie bereits, zu nahe am Bildschirmrand sind.
Durch einen einfachen CSS Befehl kann dieser Umstand behoben werden, indem Sie einfach die Richtung, in die sich das Menu öffnen soll, abändern.
Achtung: Der Standard ist rechts, Sie müssen den Befehl nur eingeben, wenn Sie vom Standard abweichen möchten.
- Unter-Menu nach rechts öffnen: ast-right-align-sub-menu
- Unter-Menu nach links öffnen: ast-left-align-sub-menu
Gehen Sie zum WordPress Dashboard wählen den Menupunkt Design und dann den Punkt Menu.
Nicht Vergessen, dieser Eintrag muss nur einmal gemacht werden, dann gilt der Eintrag für alle Punkte in diesem Menupunkt.
Wenn Sie einen weiteren Menupunkt erstellen wollen, muß dieser Vorgang wiederholt werden, sonst geht das Menu wieder in die andere Richtung auf.