Codefieber.de

IT-Blog

WordPress – Nur eine Sidebar im YOKO-Theme

| 15 Kommentare

Wer als WordPress-Theme YOKO von Elmastudio nutzt und die erste Sidebar entfernen möchte, für den habe ich hier ein kleines Tutorial:

Als Erstes muss man wissen, dass man am besten im Yoko-Theme selbst nichts verändert und das THeme so lässt wie es ist. Stattdessen sollte man ein Child-Theme erstellen.
Also man erstellt einen neuen Ordner mit dem Namen: yoko-child

Als nächstes muss eine Style.css-Datei erstellt und angepasst werden:

/*
*	Theme Name:     Yoko Child
*	Theme URI:      https://www.codefieber.de
*	Description:    Child Theme for the Yoko theme
*	Author:         Pascal Betke
*	Author URI:     https://www.codefieber.de
*	Template:       yoko
*	Version:        1.0
*/

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

/* Start child theme CSS here */

#content {
        width: 100%;
        float: left;
        margin-right: 4%
}
#secondary {
        display: none;
}
#tertiary {
        width: 21%;
        float: right;
        overflow: hidden;
}

Diese lädt die Standard style.css aus dem Yoko-Theme ( @import url("../yoko/style.css"); ) und ergänzt diese sozusagen mit dem restlichen Code aus der neuen style.css-Datei.

Nun erstellt man noch eine functions.php-Datei und fügt in diese folgenden Code ein:

/**
* Disable Sidebar1
* by Gurki 2013
*
* ============================================================================================
*/
add_action( 'init' , 'mh_unregister_sidebar' , 11 );
     
    function mh_unregister_sidebar() {
            unregister_sidebar( 'sidebar-1' );
            unregister_sidebar( 'sidebar-2' );
     
            register_sidebar( array (
                    'name' => __( 'Sidebar', 'yoko' ),
                    'id' => 'sidebar-2',
                    'description' => __( 'One Sidebar Only', 'yoko' ),
                    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
                    'after_widget' => "</aside>",
                    'before_title' => '<h3 class="widget-title">',
                    'after_title' => '</h3>',
                    )
            );     
    }
/**
* ============================================================================================
*/

Danach wählt man unter Design => Theme sein neues Yoko-Child-Theme aus und man hat nun statt der zwei Sidebars recht nur noch eine Sidebar.

Sollte der obere Code in der functions.php nicht funktionieren, müssen die original Funktionen des Yoko-Themes mitverwendet werden. Das Problem hatte ich nämlich:

<?php
/**
 * @package WordPress
 * @subpackage Yoko
 */

/**
* Disable Sidebar1
* by Gurki 2013
*
* ============================================================================================
*/
add_action( 'init' , 'mh_unregister_sidebar' , 11 );
     
    function mh_unregister_sidebar() {
            unregister_sidebar( 'sidebar-1' );
            unregister_sidebar( 'sidebar-2' );
     
            register_sidebar( array (
                    'name' => __( 'Sidebar', 'yoko' ),
                    'id' => 'sidebar-2',
                    'description' => __( 'One Sidebar Only', 'yoko' ),
                    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
                    'after_widget' => "</aside>",
                    'before_title' => '<h3 class="widget-title">',
                    'after_title' => '</h3>',
                    )
            );     
    }
/**
* ============================================================================================
*/

/**
 * Make theme available for translation
 * Translations can be filed in the /languages/ directory
 */
load_theme_textdomain( 'yoko', TEMPLATEPATH . '/languages' );

[... WEITERER CODE AUS DER ORIGINAL FUNCTIONS.PHP...]

Autor: Pascal

Codefieber.de wird von Pascal Betke geführt, administriert und gestaltet. Alle Inhalte sind persönlich von mir ausgewählt und erstellt, nach bestem Gewissen und Können, was die Möglichkeit von Fehlern nicht ausschließt.

15 Kommentare

  1. Hi,
    danke für den Code, ich passe es bei meiner Seite auch gerade an. Damit die Sidebar auf mobilen Geräten auch wieder hübsch aussieht sollte noch folgendes in die style.css hinein:

    @media screen and (max-width: 880px) {
    #tertiary {
    width: 100%;
    float: none;
    }
    }

    Beste Grüße

  2. Hallo Pascal,

    kannst Du mir sagen, wie ich das Drop Down Menü hinkriege? So wie Du es oben hast? ich habe mir auch ein Yoko Child gebastelt und würde gerne meine Unterpunkte so einblenden lassen.

    Beste Grüße

    • Hallo Antje,
      war das nicht Standardmäßig so bei dem Yoko Theme? Ansonsten kann man das unter Design > Menüs > Menüs bearbeiten, einstellen bzw. sich seine Seiten als Menü anlegen.

      Menü Codefieber

      Vielleicht konnte ich dir ja helfen. Wenn Du weitere Fragen hast, gerne hier posten.

      Gruß Pascal

  3. Hallo Pascal,

    genau nach so einer Anleitung habe ich gesucht. Da ich technisch nicht so bewandert bin, habe ich es mit Copy und Paste probiert.

    Leider wird mir der Text aus der functions.php mit auf der Website angezeigt:

    “add_action( ‘init’ , ‘mh_unregister_sidebar’ , 11 ); function mh_unregister_sidebar() { unregister_sidebar( ‘sidebar-1’ ); unregister_sidebar( ‘sidebar-2’ ); register_sidebar( array ( ‘name’ => __( ‘Sidebar’, ‘yoko’ ), ‘id’ => ‘sidebar-2’, ‘description’ => __( ‘One Sidebar Only’, ‘yoko’ ), ‘before_widget’ => ‘
    ‘, ‘after_widget’ => ”
    “, ‘before_title’ => ‘
    ‘, ‘after_title’ => ‘
    ‘, ) ); }”

    Grundsätzlich scheint es aber zu funktionieren doch wie bekomme ich den Text ausgeblendet? 🙂

    Vielen Dank im Voraus, ich hoffe es ist nur ein kleines Thema…

    VG Mario

    • Hallo Mario,

      wie sieht denn deine functions.php aus? Ist nur der oben genannte Code drin? Hast Du ein Child-Theme erstellt? Ist der komplette functionscode aus dem Eltern-Theme drin UND der oben genannte Code? Wird die Leiste schon ausgeblendet, nur der Text ist noch zu sehen?

      Gruß Pascal

  4. Hi,

    hat den Hack schon jemand mit Yoko 1.2.1. gestestet? Nicht das ich mir meine Seite zerschiesse. Erfahrungen gerne hier posten!

    Grüsse,
    Oliver

    • Hallo Oliver,

      also ich habe die Version 1.2.1 installiert und keine Probleme. Wenn Du es ausprobierst, würde ich aber selbstverständlich vorher ein Backup der Datenbank und der Dateien machen.

      Gruß Pascal

  5. Hallo,
    ich bekomme folgende Fehlermeldung:

    Beschädigte Themes

    Die folgenden Themes sind installiert, aber nicht vollständig. Themes müssen ein Stylesheet und ein Template haben.

    Name Beschreibung
    Yoko Child\ Das übergeordnete Theme fehlt. Bitte installiere das übergeordnete Theme „yoko\“, da du Child-Themes sonst nicht nutzen kannst.

    Aber ich denke, dass ich das parent-theme Yoko ja installiert habe! Vielleicht kannst du ja weiterhelfen 🙂

    Liebe Grüße

    • Hey, schau mal hier: http://forum.wpde.org/design/95816-design-anpassen.html#post422862

      Du hast:
      /*
      Theme Name: Twenty ElevenChild
      Description: Child Theme of Twenty Eleven
      Version: 1.3.0
      Author: Michael Madej
      Template: Twenty Eleven
      */

      Du solltest haben:
      /*
      Theme Name: Twenty ElevenChild
      Description: Child Theme of Twenty Eleven
      Version: 1.3.0
      Author: Michael Madej
      Template: twentyeleven
      */

      @import url('../twentyeleven/style.css');

      Das auf das Yoko-Child beziehen. Probier das mal aus. Wenn es nicht klappt, kannst Du ja nochmal nachhaken 🙂

  6. Hallo, ich nutze ebenfalls das Yoko-Theme und habe ein Problem, das auch auf deiner Seite hier auftritt. Und zwar steht bei deinen Beiträgen “nach Pascal” statt “von Pascal”. Weißt du zufällig wie man das ändern kann? Ich habe bis jetzt noch keine Lösung gefunden…

    • Hi,

      ich hatte grade mal kurz geschaut, es scheint diese Zeile zu sein:

      In den Dateien content-aside.php und content.php

      Bei Zeiten schaue ich mal ob und wie man das ändern kann. Ggf. funktioniert da was nicht ganz mit der Übersetzung.

  7. Hallo,

    herzlichen Dank für diesen Beitrag.

    Die Code-Fetzen im Adminbereich als auch auf der Seite kommen daher, dass bei dem ersten Fenster für die functions.php in der ersten Zeile das “<?php" fehlt. Im zweiten Fenster, nach dem Absatz "Sollte der obere Code in der functions.php nicht funktionieren …" steht es drin – das entfernt die Code-Fetzen.

    Danke auch für die css-Angaben für die mobile Version.

  8. Auch nach Jahren noch aktuell. 🙂

    Nun möchte ich den gewonnenen Platz für den Text nutzen, dazu war ja die Aktion bei mir gedacht.

    Wie bewerkstellige ich das denn?

    Liebe Grüße
    Andreas

  9. klasse, das funktioniert gut – beide Versionen.
    Allerdings nur im Firefox. Chrome und Edge lassen die Spalte 1 leider leer.
    Hat das Jemand inzwischen vielleicht angepasst?

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.