Google Fonts bei Astra und Elementor FREE lokal einbinden

Google Fonts bei Astra und Elementor FREE lokal einbinden

Wer den Elementor PRO nutzt, kann Google Fonts relativ einfach über den Page Builder Elementor hochladen und lokal einbinden.

Auch mit der Version Elementor FREE ist es möglich, Google Fonts lokal einzubinden.

Schritt für Schritt:

  • Installieren des Plugins „Custom Fonts“
  • Download der gewünschten Schriften
  • Upload der Schriften zu WordPress und Elementor

Installieren und Aktivieren des Plugins

Custom Fonts“ ist eines der besten Plugins, um eine Schriftart in WordPress zu installieren

 

Google Fonts downloaden

Google Fonts aussuchen, herunterladen und entpacken.

Super einfach geht es über die Seite Google Webfonts Helper.

 

Upload der Schriften zu WordPress und Elementor

In WordPress unter Desigen -> Astra Optionen -> Custom Fonts aufrufen

WP Astra und Elementor FREE - Plugin C

 

Unter „Add New Font“ Felder ausfüllen:

Name:                  geben Sie hier den Namen der Schrift an

Font Fallback:    Fallback Schriften, mit Komma getrennt angeben (z.B. Arial, Serif)

Font Weight:     Wählen Sie den Schriftstil aus

Nun die Schriften mit den Endungen .woff2, .woff, .ttf, .eot und .svg uploaden

Mit „Add Font Variation“ eventuell zusätzliche Schriftstile hochladen.

Am Ende mit „Add New Font“ alles speichern.

 

Lokale Schriftart in Elementor auswählen:

Seite mit Elementor öffnen

Gewünschten Text auswählen

Stil und Typographie wählen

Unter Schriftfamilie und Costum ist die hochgeladene und lokal eingebundene Schriftart zu finden.

WP Astra und Elementor FREE

WordPress – aktuellen Seitennamen ermitteln

WordPress – aktuellen Seitennamen ermitteln

Mit der Variablen $pagename kann auf einfache Art der Name der aufgerufenen Seite ermittelt werden.

Beispiel 1:

<?php
    $pagename = get_query_var(‘pagename’);
    echo $pagename;
?>

Beispiel 2:

    <?php
    $pagename = get_query_var(‘pagename’);
    if ( $pagename == ‘contact-neu-neu’ ) { ?>
        <div id=”primary” class=”content-area-contact”>
    <?php } else { ?>
        <div id=”primary” class=”content-area”>
    <?php } ?>

WordPress Child Theme

WordPress Child Theme

Als Beispiel dient das WordPress-Theme “Freestore”.

Um in WordPress ein Child Theme anzulegen, gehen Sie folgendermaßen vor:

  • Legen Sie im Themes-Verzeichnis (…wp-content/themes) einen neuen Ordner an. Z.B. “freestore_child”. Das Original-Theme “freestore” muss sich ebenfalls im Themes Verzeichnis befinden.
  • Im neuen Child Theme-Ordner muss eine neue style.css Datei angelegt werden (mit einem Editor, z.B. Notepad++). Im Kopf der style.css Datei müssen folgende Informationen angegeben werden:

  • Die wichtigste Information ist der Punkt Template. Hier muss der Name des Eltern Themes eingetragen werden. Ab jetzt wird das Child Theme bereits unter Themes angezeigt.

CSS-Anpassungen

Sobald das Child Theme aktiviert ist, gilt die style.css Datei des Child Themes. Ab jetzt können in dieser Datei neue CSS-Regeln für das Child Theme festgelegt werden.

Sollen jedoch nur einige CSS-Styles des ElternThemes überschrieben werden, kann die style.css Datei des Eltern Themes importiert werden. Dies geschieht mit nachfolgender Codezeile:

Alle nun eingefügten CSS-Regeln überschreiben den Code der style.css aus dem Eltern Theme.

WordPress: WP_Query – Artikel einer Kategorie sortiert darstellen

WordPress: mit WP_Query Artikel einer Kategorie sortiert darstellen

Beispiel: Bestimmte Artikel sollen im Sidebar-Feld “Kurznachrichten” angezeigt und individuell sortiert werden.

Dazu wurde die Kategorie “Kurznachrichten” und 2 benutzerdefinierte Felder “linkname” und “KNR-Sort” erstellt.

Für die Darstellung des Artikels im Sidebar-Feld ist die Kategorie “Kurznachrichten” zu aktivieren, ein Linkname in das Feld “linkname” und die Sortierziffer in das Feld “KNR-Sort” einzugeben.

“linkname”: Der Text wird im Sidebar-Feld angezeigt und stellt einen Link zum Artikel dar.
“KNR-Sort”: Ist die Sortierziffer des Artikels. Es erfolgt eine aufsteigende Sortierung.

In der Datei “sidebar.php” wurde folgender Code implementiert:

<h3>Kurznachrichten</h3>
   <?php
    $i = 1;
    $recent = new WP_Query( array ( ‘category_name’ => ‘kurznachrichten’, ‘orderby’ => ‘meta_value_num’, ‘meta_key’ => ‘KNR-Sort’, ‘order’ => ‘ASC’ ) );
    while($recent->have_posts()) : $recent->the_post();
    $link_name = get_post_meta($post->ID, “linkname”, true);
   ?>
   <!– Ausgabe des Titels mit Link zum Artikel –> 
    <a href=”<?php the_permalink() ?>” rel=”bookmark”>
    <?php //the_title(); ?>
    <?php 
     echo $link_name;
     echo “<br />”;
    ?>
    </a>   
   <?php
    $i = $i + 1;
    endwhile;
   ?>
   <h4<a href=”http://www.huculvi.de/category/kurznachrichten”>mehr Kurznachrichten</a></h4>

Entscheidender WP_Query String:
$recent = new WP_Query( array ( ‘category_name’ => ‘kurznachrichten’, ‘orderby’ => ‘meta_value_num’, ‘meta_key’ => ‘KNR-Sort’, ‘order’ => ‘ASC’ ) );

Mehr Informationen zur Klasse “WP_Query” unter http://codex.wordpress.org/Class_Reference/WP_Query

 

 

WordPress: vertikales Menü am Beispiel des Twenty Eleven Theme

Twenty Eleven Theme – Horizontales Menü durch vertikales Menü ersetzen.

Mit dem Plugin “JQuery Vertical Mega Menu” von Lee Chestnutt lässt sich relativ einfach ein vertikales Menü erstellen.

Das Menü soll in der linken Sidebar des Twenty Eleven Theme erscheinen und wird folgendermaßen erzeugt:

  1. Plugin “Jquery Vertical Mega Menu” installieren und aktivieren.
  2. Im Dashboard unter Design -> Theme-Optionen das Layout auf die Option “Inhalt rechts” ändern.
  3. Das Plugin wird unter Design -> Widgets angezeigt. Dieses Plugin in das Feld “allgemeine Sidebar” ziehen. Die anderen Widgets entfernen bzw. in das Feld “inaktive Widgets” ziehen.
  4. Unter Design -> Menüs lässt sich das Vertikale Menü bearbeiten. In der linken Spalte werden die vorhandenen Seiten aufgelistet. Die Seiten können ausgewählt und dem vertikalen Menü hinzugefügt werden. Die rechte Spalte zeigt das erstellte Menü. Hier können Menüpunkte umbenannt, verschoben und gelöscht werden. Dem Menü kann ein beliebiger Name gegeben werden. Somit können mehrere Menüs in der Widgetleiste verwaltet werden. Mit “Menü erstellen” wird das erzeugte Menü gespeichert.
  5. Unter Design -> Widgets -> Allgemeine Sidebar kann nun das Styling des “JQuery Vertical Mega Menu” bearbeitet werden. Mit “Speichern” wird das Menü in der linken Spalte der Webseite angezeigt.

Horizontales Menü ausblenden:

Dazu muss die Datei “header.php” im Verzeichnis “wp-content/themes/twentyeleven” bearbeitet werden.

Die Zeilen 128 bis 135 auskommentieren (nur für versierte Entwickler).

ALT:
<nav id=”access” role=”navigation”>     <h3><?php _e( ‘Main menu’, ‘twentyeleven’ ); ?></h3>     <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>     <div><a href=”#content” title=”<?php esc_attr_e( ‘Skip to primary content’, ‘twentyeleven’ ); ?>”><?php _e( ‘Skip to primary content’, ‘twentyeleven’ ); ?></a></div>     <div><a href=”#secondary” title=”<?php esc_attr_e( ‘Skip to secondary content’, ‘twentyeleven’ ); ?>”><?php _e( ‘Skip to secondary content’, ‘twentyeleven’ ); ?></a></div>     <?php /* Our navigation menu. If one isn’t filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn’t assigned, the menu with the lowest ID is used. */ ?>     <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) ); ?>    </nav><!– #access –>

 

NEU:
<!- –
<nav id=”access” role=”navigation”>     <h3><?php _e( ‘Main menu’, ‘twentyeleven’ ); ?></h3>     <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>     <div><a href=”#content” title=”<?php esc_attr_e( ‘Skip to primary content’, ‘twentyeleven’ ); ?>”><?php _e( ‘Skip to primary content’, ‘twentyeleven’ ); ?></a></div>     <div><a href=”#secondary” title=”<?php esc_attr_e( ‘Skip to secondary content’, ‘twentyeleven’ ); ?>”><?php _e( ‘Skip to secondary content’, ‘twentyeleven’ ); ?></a></div>     <?php /* Our navigation menu. If one isn’t filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn’t assigned, the menu with the lowest ID is used. */ ?>     <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) ); ?>    </nav> – -> <!– #access –>

XML Sitemap für WordPress

XML Sitemap für WordPress

Eine Sitemap ist eine Datei, die für Suchmaschinen (sogenannte Crawler) erstellt wird und vom Besucher der Webseite normalerweise nicht gesehen werden kann. Die Sitemap unterstützt Suchmaschinen beim Auffinden und Indexieren der Seiten eines Webauftritts. Damit sollte auch ein besseres Ranking bei Suchmaschinen einhergehen.

Für WordPress verwende ich das Plugin “Google XML Sitemaps”. Es ist kostenlos, relativ einfach und schnell installiert. Zu finden ist es unter “Einstellungen -> XML-Sitemap”. Am einfachsten ist es, die Standardeinstellungen beizubehalten. Mit “Änderungen speichern” wird die Datei “sitemap.xml” erzeugt.

Eine Überprüfung der erzeugten Sitemap ist sinnvoll und kann mit dem Aufruf der URL www.meinedomain.de/sitemap.xml erfolgen.

Anschließend sollte man seine Seite bei den Google Webmaster Tools anmelden, da Google die derzeit wichtigste Suchmaschine ist.

Google Webmaster Tools

Man meldet sich bei Google Webmaster Tools an oder registriert sich. Auf die entsprechende Webseite klicken oder “Webseite hinzufügen”. Unter Crawling verbirgt sich der Menüpunkt “Sitemaps”. Hier kann die Sitemap hinzugefügt oder getestet werden.