-->Wordpress: YOKO anpassen mit Hilfe eines Child Themes | PC-Notfallhilfe

PC-Notfallhilfe

Tipps und Tricks aus der IT Welt

WordPress: YOKO anpassen mit Hilfe eines Child Themes

| Keine Kommentare

Als erstes ein großes Dankeschön an Elmastudio, für die Entwicklung und zur Verfügungstellung des Themes YOKO, das die Basis für unseren Auftritt darstellt.

Für die meisten Themes gilt, dass sie mitunter noch „nach“ angepasst werden, auf die jeweiligen Bedürfnisse des jeweiligen Blogs. Ich liste hier einmal einige meiner Änderungen auf, vielleicht nutzt es ja jemanden.

Als erstes empfehle ich, dass ein Child-Theme erstellt wird.

Grundsätzliche Vorgehensweise:

  1. Ihr erstellt euch einen Ordner im „Theme“ Ordner, parallel zum existierenden Yoko Ordner.
  2. Dort hinein kommt eine styles.css und eine functions.php mit folgenden Inhalten
  3. Damit euch die Bilder (Header) erhalten bleiben auch einen Image Ordner mit Unterordner Header

Der Inhalt der style.css sieht folgendermaßen aus:

/*
Theme Name: Yoko Child
Theme URI: http://www.dein-blog.de
Description: Yoko Child Theme
Author: Dein Name
Author URI: http://www.dein-blog.de
Template: yoko
Version: 1.0
*/
/* =Ab hier können Sie Änderungen vornehmen
------------------------------------------------------- */

Die Einträge hinter „Theme Name“ und „Template“ sind wichtig.

Als nächstes kommt die functions.php ran. Diese mit einem normalen Editor (notepad oder notepad++ oder ein anderer Ascii Editor aber nicht mir Word) öffnen.

In die functions.php kommt folgender code:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

Wenn alles so eingerichtet wurde, gibt es zwei Wege, das neue Child-Theme zu aktivieren. Entweder ihr ladet alles per FTP auf den Server, geht in den Themesbereich unter WordPress Administration und aktiviert dort das neue Child-Theme oder ihr packt alles lokal auf euren Rechner in einen Ordner, zippt diesen und ladet ihn über die Theme-Installationsroutine von WordPress hoch und aktiviert es anschließend.

Wordpress, Yoko, Theme

Der Vorteil eines Child-Themes liegt darin, das Änderungen, die von euch speziell für euren Blog im Theme gemacht wurden, nicht beim nächsten Themeupdate verloren gehen. Dazu muss man aber folgendes dringend beachten.

Die style.css und functions.php aus dem Eltern-Theme werden als erstes gelesen und die Einträge aus dem Child-Theme „überschreiben/ergänzen“ diese. Einträge an „Standard Template Dateien„, wie der footer.php, single.php, header.php usw. werden komplett übernommen, das heisst wenn z.B. die single.php aus dem Eltern-Theme gelesen wird und es eine single.php im Child-Theme gibt, wird die aus dem Child-Theme KOMPLETT übernommen und die vom Eltern-Theme verworfen !!!! Daher gibt es auch viele Foren, die davon berichten, dass beim Anlegen eines Child-Themes, der komplette Blog zerschossen wurde, weil nur die Änderungen in der single.php des Child-Themes vorhanden waren.

Ich hoffe ich habe das einigermaßen verständlich rüber gebracht.

[affilinet_performance_ad size=300×250]

Anpassung der style.css

In manchen Artikeln dieses Blogs zeige ich Formeln, die zusammengeschrieben mehr als die Contenbreite des Artikels ist. Im normalen style.css, werden die Informationen „abgeschnitten“ und somit die Formel nicht in voller länge dargestellt. Das sieht dann z.B. so aus:

Wordpress: Theme YOKO anpassen

WordPress: Theme YOKO anpassen

Das passierte mir in den jeweiligen Artikeln, sowie in manchen Kommentaren, wenn dort Formelbeispiele oder Änderungen gepostet wurden. Ich habe dazu die style.css aus dem Child-Theme Bereich mit dem Zusatz „overflow: auto;“ folgendermaßen angepasst.

Für den Bereich in den Artikeln:

#content pre {
background-color: #f0f0f0;
font-family: monospace;
font-size: 1.2em;
line-height: 1.3;
margin: 0 0 20px 0;
padding: 10px;
overflow: auto;
}

Für den Bereich in den Kommentaren:

#comments .comment-body p {
padding: 0 0 10px;
overflow: auto;
}

Danach zeigte sich folgendes:

2016-11-06-16_41_16-excel_-beispiel-fuer-sverweis-mit-2-tabellen-_-pc-notfallhilfepc-notfallhilfe

WordPress, Yoko, Theme

2016-11-06-16_41_39-excel_-beispiel-fuer-sverweis-mit-2-tabellen-_-pc-notfallhilfepc-notfallhilfe

WordPress, Yoko, Theme

Ein Scrollbalken unter der jeweiligen Formel ermöglicht nun jedem Leser, die gesammte Formel anzuschauen und auch zu kopieren.

Anpassung einzelner Standard template Dateien, wie single.php, header.php oder footer.php

Bevor ihr irgendwelche Änderungen an den Standard Template Dateien vornehmt, solltet ihr diese Dateien erst komplett ins Child-Theme rüber kopieren und dann dort anpassen.

Verschiedene Anpassungen:

Im Standard werden auf der Hauptseite alle Artikel komplett angezeigt und nicht nur der Auszug (excerpt). Wer das ändern möchte, kopiert sich die „content.php“ ins Child-Theme und ändert folgendes:

2016-11-06-17_00_50-themes-bearbeiten-pc-notfallhilfe-wordpress

WordPress, Yoko, Theme

Von

2016-11-06-17_01_29-themes-bearbeiten-pc-notfallhilfe-wordpress

WordPress, Yoko, Theme

Nach

 

Genauso geht man vor, wenn man bestimmte Informationen, wie Google codes (Analytics oder Adsense) oder andere „Meta -Informationen“ in den Headerbereich einbinden möchte. Dazu bietet sich folgende Vorgehensweise an. Ihr erstellt euch eine Datei mit einem aussagekräftigen Namen und der Dateiendung .php und kopiert dort den Google code oder eben das, was am Ende im Headerbereich angezeigt werden soll rein. Z.B. so:

2016-11-06-17_11_29-s__transfer_hp_pa_themes_child_theme_yoko-child

WordPress, Yoko, Theme

Diese Datei wird dann in der header.php folgendermaßen eingebunden:

<?php include_once("analyticstracking.php") ?>

Soweit einmal meine Anpassungen bezüglich des Yoko Themes, die natürlich auch auf alle anderen WordPress Themes angewendet werden können.

Anregungen gerne über die Kommentarfunktion…LG John

[affilinet_performance_ad size=300×250]

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.


Related Posts