Umbau abgeschlossen / Das war noch nötig

2
1219
simplu27 / Pixabay

Der  Theme-Wechsel meines Blogs auf YOKO ist nun so gut wie abgeschlossen. Alles sitzt wieder da wo es hin soll. Um alle Änderungen zukünftig auch nach einem Upgrade des Themes beizubehalten, habe ich ein Child-Theme von YOKO angelegt. Dazu wurde ein Verzeichnis yoko-child im Theme-Ordner auf dem FTP-Server erstellt. Hierein habe ich die style.css von YOKO kopiert.  Folgender Eintrag muss hierbei an den Anfang der Datei gesetzt und angepasst werden, um das Child im Backend sichtbar zu machen. Wichtig ist hierbei der korrekte Eintrag des Eltern-Themes.

/*
Theme Name:     Yoko Child
Theme URI:      http: //www.intux.de/
Description:    Child Theme for the Yoko theme 
Author:         intux
Author URI:     http: //www.intux.de/
Template:       yoko
Version:        1.0
*/

Nun habe ich noch die index.php und die footer.php von YOKO in das Child-Theme kopiert, um hier die nötigen Änderungen u.a. für Piwik vorzunehmen.

Die größten Schwierigkeiten aber bereitete die Darstellung der als <pre> definierten Code-Zeilen. Diese werden im Theme YOKO nicht umgebrochen und waren so für Besucher nicht komplett kopierbar. Abhilfe schaffte hier das Einfügen folgenden Codes an das Ende der style.css im Child Theme von YOKO.

pre {
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Um WP-PageNavi zu einzubinden musste ich dieses Plugin erst einmal installieren. Dann habe ich die Dateien author.php, category.php, index.php, search.php und tag.php aus dem Eltern-Theme zusätzlich noch in den Child-Ordner kopiert. Diese Dateien wurden dann bearbeitet, indem ich jeweils den Eintrag

<nav id="nav-below">
 <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'yoko' ) ); ?></div>
 <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'yoko' ) ); ?></div>
</nav>

durch

<nav id="nav-below">
 <div id="pagenavi"><?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?></div>
</nav>

ersetzte. Abschließend fügte ich noch

.wp-pagenavi {
 clear: both;
 text-align:center;
 height:30px;
 padding-left: 22.507%;
}

@media screen and (max-width : 620px) {
 .wp-pagenavi {
 padding-left: 0;
 }
}

.wp-pagenavi a, .wp-pagenavi span, #pagenavi .page {
 border: 1px solid #BFBFBF;
 margin: 2px;
 padding: 3px 5px;
 text-decoration: none;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
 border-color: #000000;
}
.wp-pagenavi span.current {
 font-weight: bold;
}

and das Ende der style.css des Child-Themes ein.

Nun ist das Plugin einsatzbereit und ich kann es nach meinen Wünschen in den Einstellungen entsprechend konfigurieren.

Für AdSense setze ich im Moment auf das Plugin Easy AdSense und für Bilder auf die Easy FancyBox.

So ein Umstieg auf ein neues System bzw. Theme ist immer spannend. Einige Erweiterungen bzw. Einstellungen sind in der Regel einfach noch nötig, damit das Resultat dann auch den eigenen Ansprüchen genügt.

Nachtrag

Auf den oben im Beitrag erwähnten Zeilenumbruch habe ich nun verzichtet und setze stattdessen das Plugin Crayon Syntax Highlighter zur besseren Darstellung von Programm-Codes ein.

2 Kommentare

Schreibe einen Kommentar zu Header-Grafik in YOKO ändern | intux Antwort abbrechen

Bitte bestätige diesen Kommentar!
Bitte den Namen hier eingeben

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.