Ich habe mich für das Theme Yoko entschieden, weil es bei Elmastudio kostenfrei zum download bereit steht, und habe es dazu noch an meine Bedürfnisse angepasst.

Als erstes legt man ein child theme an:

Ich habe mich dabei an die Anleitung von Elmastudio gehalten:  https://www.elmastudio.de/ein-wordpress-child-theme-anlegen-so-gehts-richtig/

  • Unterordner anlegen
  • Datei style.css anlegen und Inhalt anpassen:
/*
Theme Name: Yoko Child
Theme URI: https://www.elmastudio.de/wordpress-themes/yoko/
Description: Child Theme for the Yoko theme
Author: Michael Flügge
Author URI: http://www.fluegge.net
Template: yoko
Version: 0.8
*/

Laden des Original-CSS per functions.php:

<?php
/**
 * Theme Name child theme functions and definitions
 */

/*—————————————————————————————————————————*/
/* Include the parent theme style.css
/*—————————————————————————————————————————*/

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
  • Bei Elschy habe ich zum Beispiel das CSS gefunden, das die linkere sidebar ausblendet.
  • Dann habe ich noch den footer-Bereich, wie von Morvagor beschrieben, um 3 Spalten erweitert. (Leider ist die Seite nicht mehr online, so dass ich nicht prüfen kann, ob ich alles richtig gemacht habe …)
    Dazu habe ich die functions.php und die footer.php im child theme Ordner erstellt bzw erweitert.

Meine Anpassungen am css:

/*
Theme Name: Yoko Child
Theme URI: http://www.fluegge.net
Description: Child Theme for the Yoko theme
Author: Michael Flügge
Author URI: http://www.fluegge.net
Template: yoko
Version: 0.8
*/

@import url("../yoko/style.css");

body {
background-color: #efefef;
}

#page {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

#content .post {
background-color: #efefef;
padding: 10px 15px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

/* monospace verkleinern von 1.2em auf 1em,
damit die codeschnipsel besser auf die Seitenbreite passen
---------------------------------------------------------- */
#content pre {
background-color: #f0f0f0;
font-family: monospace;
font-size: 1em;
line-height: 1.3;
margin: 0 0 20px;
padding: 10px;
}

/* Struktur - blendet die linkere sidebar aus a la Elschys
--------------------------------------------- */
#main {
width: 75%;
float: left;
overflow: hidden;
}

#content {
width: 94%;
float: left;
text-align: justify;
margin-right: 4%;
}

#secondary {
width: 0;
margin-left: 0;
float: left;
}

#tertiary {
width: 21%;
float: right;
padding: 5px 5px 15px;
/* background-color: #DEB887; */
}

/*CSS fuer 3spaltiges footer Layout von Morvagor
--------------------------------------------- */
#colophon {
width: 100%;
padding: 0!important;
}

#colophon #supplementary {
font-size: 1.3em;
padding: 0 0 60px;
}

#supplementary {
padding: 15px!important;
}

#supplementary #first.widget-area {
float: left;
margin-right: 1%;
width: 29.55%;
padding: 15px 15px 0;
background: darkgrey;
}

/* F0F0F0 */
#supplementary #second.widget-area {
float: left;
margin-right: 1%;
width: 29.55%;
padding: 15px 15px 0;
background: darkgrey;
}

#supplementary #third.widget-area {
float: left;
margin-right: 0;
width: 29.55%;
padding: 15px 15px 0;
background: darkgrey;
}

/* --- Smartphones and small Tablet PCs --- */
@media screen and (max-width : 620px) {
#supplementary #first.widget-area, #supplementary #second.widget-area, #supplementary #third.widget-area {
float: none;
margin-right: 0;
width: 100%;
}
}

Die Erweiterungen in der functions.php:

<?php
if ( function_exists ('register_sidebar')) {

    register_sidebar( array (
        'name' => __( 'Footerbar 1', 'yoko' ),
        'id' => 'sidebar-3',
        'description' => __( '1st Footer Sidebar', 'yoko' ),
        'before_widget' => '<aside id="%1$s">',
        'after_widget' => "</aside>",
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ) );

    register_sidebar( array (
        'name' => __( 'Footerbar 2', 'yoko' ),
        'id' => 'sidebar-4',
        'description' => __( '2nd Footer Sidebar', 'yoko' ),
        'before_widget' => '<aside id="%1$s">',
        'after_widget' => "</aside>",
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ) );

    register_sidebar( array (
        'name' => __( 'Footerbar 3', 'yoko' ),
        'id' => 'sidebar-5',
        'description' => __( '3rd Footer Sidebar', 'yoko' ),
        'before_widget' => '<aside id="%1$s">',
        'after_widget' => "</aside>",
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ) );
}
?>

Die Änderungen in der footer.php

<div id="supplementary">
<div id="first">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('Footerbar 1') ) : ?>
<p>First</p>
<?php endif; ?>
</div>
<div id="second">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('Footerbar 2') ) : ?>
<p>Second</p>
<?php endif; ?>
</div>
  <div id="third">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('Footerbar 3') ) : ?>
<p>Third</p>
<?php endif; ?>
</div>
</div>