Seitentemplate mit Seitenbar erstellen

  • Hi,

    ich würde gerne nur für meine Startseite ein eigenes Template erstellen, dass auf der rechten Seite über eine Sidebar verfügt, die 15 % Breite des gesamten Inhalts ausmacht.

    Ich hab mich in die Materie eingelesen, aber es hat nicht so richtig geklappt. Was ich verstanden habe ist, dass ich
    eine neue page.php anlegen - z.B. page-startseite.php - und dort die Sidebar definieren soll.
    Über style.css soll ich dann die Breite, Farbe... festlegen. Über "Seite bearbeiten" kann ich dann das Template wechseln.

    Kann mir jemand einen Standard-Code für eine rechte Sidebar posten, die 15 % der Breite ausmacht - für php und CSS?

    Viele Grüße

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Kann man Sidebars aus verschiedenen Themens mit Anderen einfach so kombinieren?

    Jein. Der Code zum registrieren einer Sidebar sollte aber immer (weitestgehend) der gleiche sein. Und die entsprechende Gestaltung mit CSS kannst du dir dort auch grob abschauen.

    Theoretisch kannst du mit ein paar Anpassungen fast alles miteinander kombinieren. Letztlich bestehen die Themes ja immer aus HTML/PHP/CSS (und ggf. Javascript).

  • ich wollte meine Showcase Sidebar fürs Theme Twenty Eleven benutzen, jedoch lädt er die eingeladenen Vorlagen nur in den Footer und zerlegt diesen auch. Wenn ich die Sidebar mit dem Inspektor anschaue, dann taucht auch nirgendwo die Bezeichnung sidebar auf, sondern nur div.

    Wo kann ich die Sidebar so definieren, dass sie nur im Content Bereich sichtbar ist. Ich hab folgende Formatierungen in der style CSS des moz theme gefunden. Im Child Theme sind keine Codes bzgl. der Sidebar.


    /* Showcase */
    .page-template-showcase-php #primary,
    .left-sidebar.page-template-showcase-php #primary {
    margin: 0;
    }
    .page-template-showcase-php #content,
    .left-sidebar.page-template-showcase-php #content {
    margin: 0 7.6%;
    width: auto;


    .left-sidebar #primary {
    float: right;
    margin: 0 0 0 -26.4%;
    width: 100%;
    }
    .left-sidebar #content {
    margin: 0 7.6% 0 34%;
    width: 58.4%;
    }
    .left-sidebar #secondary {
    float: left;
    margin-left: 7.6%;
    margin-right: 0;
    width: 18.8%;
    }


    Hier ist noch die sidebar.php

    <?php
    /**
    * Sidebar containing the main widget area
    *
    * @package WordPress
    * @subpackage Twenty_Eleven
    * @since Twenty Eleven 1.0
    */


    $options = twentyeleven_get_theme_options();
    $current_layout = $options['theme_layout'];


    if ( 'content' != $current_layout ) :
    ?>
    <div id="secondary" class="widget-area" role="complementary">
    <?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>


    <aside id="archives" class="widget">
    <h3 class="widget-title"><?php _e( 'Archives', 'twentyeleven' ); ?></h3>
    <ul>
    <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
    </ul>
    </aside>


    <aside id="meta" class="widget">
    <h3 class="widget-title"><?php _e( 'Meta', 'twentyeleven' ); ?></h3>
    <ul>
    <?php wp_register(); ?>
    <li><?php wp_loginout(); ?></li>
    <?php wp_meta(); ?>
    </ul>
    </aside>


    <?php endif; // end sidebar widget area ?>
    </div><!-- #secondary .widget-area -->
    <?php endif; ?>

  • Klassen und IDs im Quelltext müssen mit den jeweiligen Regeln übereinstimmen. Das ist hier nicht der Fall.
    Das heißt, die musst zwangsläufig entweder die CSS Regeln ändern oder die Klassen und IDs im HTML anpassen.

  • Ich hab in der moz theme style.css folgendes verändert = .left-sidebar durch .widget-area ersetzt
    Tut sich nix.
    Ich verwende gerade das Standardtemplate bei WP und nicht das Showcase Template.
    Beim Standardtemplate taucht überhaupt keine Sidebar auf, beim Showcase Template ist sie im footer.
    Ich möchte eigentlich nur für das Standardtemplate eine Sidebar auf der rechten Seiten.
    Welche Einstellungen muss ich da vornehmen?


    /* Right Content */
    .widget-area #primary {
    float: right;
    margin: 0 0 0 -26.4%;
    width: 100%;
    }
    .widget-area #content {
    margin: 0 7.6% 0 34%;
    width: 58.4%;
    }
    .widget-area #secondary {
    float: left;
    margin-left: 7.6%;
    margin-right: 0;
    width: 18.8%;
    }

  • Ich hab in der moz theme style.css folgendes verändert = .left-sidebar durch .widget-area ersetzt
    Tut sich nix.
    Ich verwende gerade das Standardtemplate bei WP und nicht das Showcase Template.
    Beim Standardtemplate taucht überhaupt keine Sidebar auf, beim Showcase Template ist sie im footer.
    Ich möchte eigentlich nur für das Standardtemplate eine Sidebar auf der rechten Seiten.
    Welche Einstellungen muss ich da vornehmen?

    Was ist denn "moz theme style.css"?

    Standardtemplate heißt [COLOR=#333333]Twenty_Eleven? Meinst du mit "Template" das Theme oder das Seitentemplate? Was genau ist "Showcase"?


    Ich verstehe gerade nicht so richtig, was du wie verwendest. Die Sidebar taucht natürlich nur in dem (Seiten-)Template auf, in das du sie eingefügt hast.[/COLOR]

    Das ergibt in Kombination mit dem von dir gezeigten Code der sidebar.php irgendwie keinen Sinn. Wie ist denn das gesamte Page-Template aufgebaut und an welche stelle fügst du die Sidebar ein?

    [COLOR=#333333]Gibt es einen Link zur Seite?[/COLOR]

  • moz theme = Mother Theme ; Mit Template meine ich das Seitentemplate; Showcase Sidebar ist auch ein Seitentemplate.
    Eigentlich möchte ich nur fürs Standardtemplate (Seitentemplate) eine Sidebar haben, ganz normal wie es im Ausgangstheme auch immer der Fall ist. Anfangs war die Sidebar da, dass ist schon ein bißchen her. Dann hatte ich sie rausgenommen, ich weiß aber nicht mehr wie genau. Nun würde ich sie ganz gerne wieder reaktivieren, aber das klappt nicht ganz.

    Im Prinzip braucht man doch nur die sidebar.php und das zugehörige Styling in der style.css oder?

  • Anfangs war die Sidebar da, dass ist schon ein bißchen her. Dann hatte ich sie rausgenommen, ich weiß aber nicht mehr wie genau. Nun würde ich sie ganz gerne wieder reaktivieren, aber das klappt nicht ganz.

    Dann im Zweifelsfall einfach aus einem Backup wiederherstellen (falls vorhanden).

    moz theme = Mother Theme

    Das wäre das Parent Theme. "Mother Theme" oder "moz theme" ist nicht gebräuchlich und deshalb missverständlich.


    Im Prinzip braucht man doch nur die sidebar.php und das zugehörige Styling in der style.css oder?

    Nein, die sidebar.php muss im jeweiligen Seitentemplate geladen werden.

    Jenachdem, wie die Sidebar registriert ist, musst/kannst du eine der folgenden Funktionen verwenden:
    https://codex.wordpress.org/Function_Reference/dynamic_sidebar
    https://developer.wordpress.org/reference/functions/get_sidebar/


    Das von b3317133 als Vorlage vorgeschlagene Twentytwelve verwendet get_sidebar():
    https://github.com/WordPress/Word…twelve/page.php

  • Also muss ich die Sidebar auch mit der page.php verbinden?
    Kannst du mir bitte ganz kurz die Grundstrukturen des Ladens einer Sidebar erklären
    sidebar.php + page.php + style.css??

    Danke für Deine Geduld

  • Also muss ich die Sidebar auch mit der page.php verbinden?
    Kannst du mir bitte ganz kurz die Grundstrukturen des Ladens einer Sidebar erklären
    sidebar.php + page.php + style.css??

    Danke für Deine Geduld

    Schau mal hier:
    http://devotepress.com/tutorials-hack…s-in-wordpress/

    Da steht es Schritt für Schritt erklärt.

    Ansonsten (wenn auch etwas weniger ausführlich) hier der entsprechende Artikel im Codex:
    https://codex.wordpress.org/Sidebars


    Was in den Anleitungen fehlt ist das Styling per CSS. Das funktioniert aber "ganz normal" wie immer. Dazu würde ich folgenden Link empfehlen:
    https://wiki.selfhtml.org/wiki/CSS/Einstieg_in_CSS

    Edit: Link zum Codex ergänzt.

  • Also ich muss die Sidebar erst in der function.php registrieren

    In meiner function-php des Child Themes ist folgendes:

    function wpb_widgets_init() {

    register_sidebar( array(
    'name' => 'Custom Header Widget Area',
    'id' => 'custom-header-widget',
    'before_widget' => '<div class="chw-widget">',
    'after_widget' => '</div>',
    'before_title' => '<h2 class="chw-title">',
    'after_title' => '</h2>',
    ) );

    }

    Dies (Custom Header Widget Area) ist der Bereich, wo ich meinen Header reinlade?!

    Wenn ich jetzt bspw. die Sidebar des Twentythirteen nehme, dann lasse ich die ebenfalls in der function.php registrieren, dass heißt dann aber ohne den Style = Maße, Farbe...
    Nun muss ich eine Verbindung zum Seitentemplate herstellen - > Das passiert über die page.php = mit [COLOR=#211A44]if ( is_page('3') ) {[/COLOR][COLOR=#211A44] get_sidebar(); [/COLOR][COLOR=#211A44]} ? [/COLOR][COLOR=#211A44]
    [/COLOR]Und um der Sidebar Größe und Farbe zu geben muss ich sie in der style.css mit einer Klasse ansprechen und dann beliebig verändern = mit der richtigen ID wie etwa .sidebar-neu, die ich genauso in der function.php registriert habe.
    Ist das so ungefähr richtig?

  • Also ich muss die Sidebar erst in der function.php registrieren

    Wenn noch keine vorhanden ist, die du benutzen kannst/willst, dann ja.

    Das ist eine Sidebar. Dem Namen nach vermutlich eine Sidebar (= Widget-Bereich) im Header. Der Header wird aber nicht in eine Sidebar "reingeladen" (eher umgekehrt).


    Wenn ich jetzt bspw. die Sidebar des Twentythirteen nehme, dann lasse ich die ebenfalls in der function.php registrieren, dass heißt dann aber ohne den Style = Maße, Farbe...

    Genau


    Nun muss ich eine Verbindung zum Seitentemplate herstellen - > Das passiert über die page.php = mit [COLOR=#211A44]if ( is_page('3') ) {[/COLOR][COLOR=#211A44] get_sidebar(); [/COLOR][COLOR=#211A44]} ? [/COLOR][COLOR=#211A44]
    [/COLOR]

    Ja, das wäre eine Möglichkeit. Aber du wolltest doch unterschiedliche Seitentemplates erstellen (einmal mit und einmal ohne Sidebar), oder? Damit hast du doch schon die Unterscheidung und brauchst das Conditional Tag nicht mehr.


    [COLOR=#211A44]
    [/COLOR]Und um der Sidebar Größe und Farbe zu geben muss ich sie in der style.css mit einer Klasse ansprechen und dann beliebig verändern = mit der richtigen ID wie etwa .sidebar-neu, die ich genauso in der function.php registriert habe.
    Ist das so ungefähr richtig?

    Im Prinzip ja. Aber du würfelst ID, Klasse und Regel durcheinander. Im HTML stehen IDs und Klassen, in der CSS-Datei stehen die Regeln. Dazu am besten nochmal meinen Link oben anschauen.


  • Ja, das wäre eine Möglichkeit. Aber du wolltest doch unterschiedliche Seitentemplates erstellen (einmal mit und einmal ohne Sidebar), oder? Damit hast du doch schon die Unterscheidung und brauchst das Conditional Tag nicht mehr.


    Die Seitentemplates kann ich über "Seite bearbeiten" individuell reinladen, aber die müssen doch irgendwo definiert werden = page.php? Wie kann ich z.B. 4 Seitentemplates erstellen, ohne dafür die page.php mit einzubeziehen.
    page.php = Definition des Content-Bereichs der Seite, also ohne Header und Footer ??

    Muss in der functions.php im Child die Sidebar registriert sein oder übernimmt das Child dies automatisch vom Parent?

  • Sidebar wird im Widget Bereich als 'Sidebar (Page)' angezeigt = Widgets sind reingeladen.
    Jedoch wird die Sidebar nirgends angezeigt. Was hab ich vergessen?


    Hab jetzt folgendes gemacht:


    SIDEBAR.PHP


    <?php


    $options = twentyeleven_get_theme_options();
    $current_layout = $options['theme_layout'];


    if ( 'content' != $current_layout ) :
    ?>
    <div id="secondary" class="widget-area" role="complementary">
    <?php if ( ! dynamic_sidebar( 'Sidebar-1' ) ) : ?>


    <aside id="archives" class="widget">
    <h3 class="widget-title"><?php _e( 'Archives', 'twentyeleven' ); ?></h3>
    <ul>
    <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
    </ul>
    </aside>


    <aside id="meta" class="widget">
    <h3 class="widget-title"><?php _e( 'Meta', 'twentyeleven' ); ?></h3>
    <ul>
    <?php wp_register(); ?>
    <li><?php wp_loginout(); ?></li>
    <?php wp_meta(); ?>
    </ul>
    </aside>


    <?php endif; // end sidebar widget area ?>
    </div><!-- #secondary .widget-area -->
    <?php endif; ?>


    FUNCTIONS.PHP


    register_sidebar( array(


    'name' => 'Sidebar (Page)',


    'id' => 'Sidebar-1',


    'description' => 'Sidebar, welche auf Seiten angezeigt wird',


    'before_widget' => '<div class="widget"><ul>',


    'after_widget' => '</ul></div>',


    'before_title' => '<h3>',


    'after_title' => '</h3>'


    ) );


    STYLE.CSS


    .Sidebar-1 {position: relative; float: right; width: 170px;
    color: blue; font-size: 90%; border-right: solid 1px blue; }


    beides probiert


    #Sidebar-1 {position: relative; float: right; width: 170px;
    color: blue; font-size: 90%; border-right: solid 1px blue; }

  • In deiner Beschreibung fehlt immer noch der Aufruf im Page Template. Die Sidebar *muss* (wie gesagt) zwingend im das Page Template eingebunden werden.

    WordPress ist eigentlich hervorragend dokumentiert. Schau dir Mal die Template-Hierarchie an:
    https://developer.wordpress.org/themes/basics/template-hierarchy/

    Die beantwortet eigentlich alle Fragen aus deinen letzten beiden Beiträgen.

    Insgesamt wirst du nicht drumherum kommen, dir die entsprechenden Grundlagen anzulesen, wenn du solche Änderungen selbst machen möchtest.

  • Meinst du mit dem Befehl


    <?php get_sidebar('Sidebar-1'); ?>

    Es fehlt also aktuell der Befehl, damit die Sidebar im Content-Bereich dargestellt wird?
    Sie wurde a) über die sidebar.php definiert b) über die functions.php registriert und d) über die style.css designed
    Jetzt fehlt c) die Darstellung im Content-Bereich?
    Über welche .php kann ich die Sidebar ins Template einbinden, die page.php oder die index.php?

    Das Problem ist, dass die offziellen Beschreibungen von Wordpress auf Englisch sind, Wenn man auf diesem Gebiet eher unsicher ist, dann wird das durch die Sprache noch ein wenig verstärkt.


  • Das Problem ist, dass die offziellen Beschreibungen von Wordpress auf Englisch sind, Wenn man auf diesem Gebiet eher unsicher ist, dann wird das durch die Sprache noch ein wenig verstärkt.

    Englisch ist in dem Bereich leider Standard. Aber gerade für Wordpress gibt es auch etliche deutsche Quellen zu solchen Themen. Einfach mal googlen.

    Alternativ einen Thread im Jobforum eröffnen. So eine Sidebar in ein Seitentemplate einzufügen sind für einen Profi eigentlich nur ein paar Handgriffe.

  • Für einen Amateur / Fortgeschrittenen wäre das eigentlich auch kein Problem, wenn die Beschreibungen einfacher wären und vor allem auch mal auf Deutsch.
    Punkt 1 Punkt 2.... = Irgendetwas fehlt immer. Am besten wäre eine Gebrauchsanleitung "for Dummies" wie bei anderen Fachgebieten Wirtschaft / Bilanzen.... auch. Mit Grafiken und Pfeilen, wer auf wen zugreift und mit farbiger ID, die sich durch alle .phps zieht. Aber das scheint Wunschdenken zu sein :)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!