1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Seitentemplate mit Seitenbar erstellen

Dieses Thema im Forum "Design" wurde erstellt von Drag and Drop, 9. Februar 2018.

  1. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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
     
  2. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.634
    Zustimmungen:
    1.778
    Schau Dir den Code von Twenty Twelve an, das hat ein Standard Template mit Sidebar und eines ohne Sidebar. Daraus kannst Du alles ableiten.
     
    #2 b3317133, 9. Februar 2018
    Zuletzt bearbeitet: 9. Februar 2018
  3. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    Kann man Sidebars aus verschiedenen Themens mit Anderen einfach so kombinieren?
     
  4. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    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).
     
  5. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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; ?>
     
  6. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    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.
     
  7. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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%;
    }
     
  8. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Was ist denn "moz theme style.css"?

    Standardtemplate heißt 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.


    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?

    Gibt es einen Link zur Seite?
     
  9. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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?
     
  10. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Dann im Zweifelsfall einfach aus einem Backup wiederherstellen (falls vorhanden).

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

    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/WordPress/blob/master/wp-content/themes/twentytwelve/page.php
     
  11. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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
     
  12. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Schau mal hier:
    http://devotepress.com/tutorials-hacks/wordpress-coding/how-to-register-sidebars-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.
     
  13. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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 if ( is_page('3') ) { get_sidebar(); } ?
    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?
     
  14. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    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).

    Genau

    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.


    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.
     
  15. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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?
     
  16. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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; }
     
  17. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    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.
     
  18. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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.
     
  19. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    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.
     
  20. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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 :)
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden