Support » Allgemeine Fragen » Sidebar Links und Rechts (Split) ohne Plugin

  • Gelöst worels

    (@worels)


    Vorab: Bitte bei der verlinkten Seite nicht erschrecken, da diese eine Testseite ist und die Farben, Inhalte etc. hauptsächlich der Unterscheidung der Bereiche dienen.
    Mein Problem:
    Ich möchte OHNE Plugin je eine Sidebar Links und Rechts vom Content erstellen. Oben einen Header und unten einen Footer. (20%linkeSB – 60%Content – 20%rechteSB)
    Ich hab’s seit Tagen probiert und gegoogelt … Ich bekomm’s nicht hin …

    Ich habe in der functions.php die sidebar-li und sidebar-re registriert:

    <?php
    function callback_comment( $comment, $args, $depth ) {
       $GLOBALS['comment'] = $comment; ?>
       <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
    
            <?php echo get_avatar( $comment, $size='64' ); ?>
            <p class="comment-author"><?php echo get_comment_author_link(); ?></p>
            <p class="comment-meta"><?php echo get_comment_date("d.m.Y"); ?>, <?php echo get_comment_time(); ?> Uhr</p>
            <?php comment_text(); ?>
            <div class="clear"></div>
    <?php
            }
    ?>
    <?php
    
    if ( function_exists('register_sidebar') ) {
    
    register_sidebar(array('name' => 'Menu',
                           'id' => 'menu',
                           'description' => '',
                           'before_widget' => '<div class="widget">',
                           'after_widget' => '</div>',
                           'after_title' => '</h6>'));
    
    register_sidebar(array('name' => 'Sidebar',
                           'id' => 'sidebar',
                           'description' => '',
                           'before_widget' => '<div class="widget">',
                           'after_widget' => '</div>',
                           'before_title' => '<h6>',
                           'after_title' => '</h6>'));
    
    register_sidebar(array('name' => 'Footer',
                           'id' => 'footer',
                           'description' => '',
                           'before_widget' => '<div class="widget">',
                           'after_widget' => '</div>',
                           'before_title' => '<h6>',
                           'after_title' => '</h6>'));
    
    register_sidebar(array('name' => 'Sidebar-Links',
                           'id' => 'sidebar-li',
                           'description' => '',
                           'before_widget' => '<div class="widget">',
                           'after_widget' => '</div>',
                           'before_title' => '<h6>',
                           'after_title' => '</h6>'));
    
    register_sidebar(array('name' => 'Sidebar-Rechts',
                           'id' => 'sidebar-re',
                           'description' => '',
                           'before_widget' => '<div class="widget">',
                           'after_widget' => '</div>',
                           'before_title' => '<h6>',
                           'after_title' => '</h6>'));
    
    }
    
    ?>
    <?php
    if (function_exists('add_theme_support')) {
    add_theme_support('post-thumbnails');
    }
    ?>

    Wo ich sie in der Page platzieren soll, ist mir unklar, aber ich hab’s mal so „gelöst“ (in der page.php)

    <?php get_header(); ?>
    <?php get_sidebar('li'); ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    
    <div class="entry">
        <h1><?php the_title(); ?></h1>
        <?php if ( function_exists('has_post_thumbnail') && has_post_thumbnail ()) {
            the_post_thumbnail();
        }
        ?>
        <?php the_content('Weiterlesen...'); ?>
        
    </div>
    
       <?php $args = array(
          'before'           => '<p>' . __('Seiten:'),
          'after'            => '</p>',
          'link_before'      => '',
          'link_after'       => '',
          'next_or_number'   => 'number',
          'nextpagelink'     => 'Nächste Seite',
          'previouspagelink' => 'Vorige Seite',
          'pagelink'         => '%',
          'more_file'        => '',
          'echo'             => 1 ); ?>
       <?php wp_link_pages( $args ); ?>
    
    <?php endwhile; endif; ?>
    <?php get_sidebar('re'); ?>
    <?php get_footer(); ?>

    Die Sidebars sehen so aus:
    Links:

    </div>
            <div id="sidebar-li">
    <?php
    if ( !function_exists('dynamic_sidebar') || dynamic_sidebar('Sidebar-Links') ) :
                endif;
    ?>
            </div>

    Rechts:

    </div>
            <div id="sidebar-re">
    <?php
    if ( !function_exists('dynamic_sidebar') || dynamic_sidebar('Sidebar-Rechts') ) :
                endif;
    ?>
            </div>

    Tja, die style.css sieht so aus:

    
    /**
     * Theme Name:     Lustvoll Leben Theme
     * Theme URI:      http://www.michael-elstner.at
     * Description:    First Generation Theme of Lustvollleben
     * Author:         Michael Elstner
     * Author URI:     http://www.michael-elstner.at
     * Version:        1.0
     */
    
    body {
        background: #000000; /*schwarz*/
        font-family: Helvetica, Arial, Tahoma, sans-serif;
        font-size: 0.9em;
        color: #333333;
    }
    
    strong, b {
        font-weight: bold;
    }
    
    em, i {
        font-style: italic;
    }
    
    .clear {
        clear: both;
    }
    
    a:link, a:visited, a:active {
        color: #CC0066;
        text-decoration: none;
    }
    
    a:hover {
        color: #333333;
        text-decoration: none;
    }
    
    #header-bar {
        background: #2E2E2E;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 8em;
    }
    
    #page {
        background: ##3ADF00; /* grün */
        position: relative;
        width: 95%;
        margin: 0 auto;
    }
    
    #header {
        background: #333333;
        color: #FFFFFF;
        width: 100%;
        height: 8em;
    }
    
    #header img {
        margin: 1em 1.5em 0 1.5em;
        float: left;
    }
    
    #header span {
        float: left;
        line-height: 8em;
        font-size: 2em;
        text-transform: uppercase;
        letter-spacing: 0.16em;
    }
    
    #header span a:link, #header span a:visited, #header span a:active, #header span a:hover {
        color: #FFFFFF;
        text-decoration: none;
    }
    
    #header .widget {
        float: right;
        line-height: 8em;
        margin: 0 1.5em 0 0;
    }
    
    #header li {
        display: inline;
        color: #999999;
        letter-spacing: 0.08em;
        margin: 0 0 0 2em;
    }
    
    #header a:link, #header a:visited, #header a:active {
        color: #999999;
        text-decoration: none;
    }
    
    #header a:hover {
        color: #CC0066;
        text-decoration: none;
    }
    
    #main {
        background: #FFFF00; /*gelb*/
        width: 100%;
    }
    
    #banner {
        margin: 0 0 4em 0;
    }
    
    #banner img {
        margin: 1.5em 0 0 1.5em;
    }
    
    #content {
        background: #FF0000; /*rot*/
        width: 60%;
        float: left;
        margin: 0 6.5em 0 1.5em;
    }
    
    .entry {
        display: inline-block;
        margin: 0 0 1.5em 0;
    }
    
    h1.archive, #respond h6, #content-comments h6 {
        font-size: 1.7em;
        line-height: 3em;
        color: #666666;
        letter-spacing: 0.08em;
        margin: 0 0 0.7em 0;
        text-decoration: none;
    }
    
    .entry h1, .entry h2, .entry h2 a:link, .entry h2 a:visited, .entry h2 a:active {
        font-size: 1.7em;
        line-height: 3em;
        color: #CC0066;
        letter-spacing: 0.08em;
        margin: 0 0 0.7em 0;
        text-decoration: none;
    }
    
    .entry h2 a:hover {
        color: #999999;
        text-decoration: none;
    }
    
    p {
        font-size: 1em;
        line-height: 1.5em;
        margin: 0 0 1.5em 0;
        text-align: justify;
    }
    
    p.blogmeta {
        font-size: 0.88em;
        color: #999999;
        margin: 0 0 1.5em 0;
        letter-spacing: 0.08em;
        text-align: left;
    }
    
    p.blogmeta a {
        margin: 0 2.5em 0 0;
    }
    
    p.blogmeta a:link, p.blogmeta a:visited, p.blogmeta a:active {
        color: #999999;
    }
    
    p.blogmeta a:hover {
        color: #CC0066;
    }
    
    p.tags {
        font-size: 0.88em;
        color: #999999;
        margin: 0 0 1.5em 0;
        letter-spacing: 0.88em;
        text-align: left;
    }
    
    .entry img {
        float: left;
        margin: 0 1.5em 0.8em 0;
    }
    
    #respond {
        margin: 2em 0 5.2em 0;
    }
    
    #respond label {
        display: block;
        color: #666666;
    }
    
    #respond input {
        margin: 0;
        padding: 0 0.8em;
        width: 20em;
        background: #E8E8E8;
        line-height: 2.08em;
        border: 0;
        outline: 0;
        font-family: Helvetica, Arial, Tahoma, sans-serif;
        font-size: 0.9em;
        color: #333333;
    }
    
    #respond textarea {
        margin: 0;
        padding: 0.8em;
        width: 32em;
        height: 12em;
        background: #E8E8E8;
        line-height: 1.6em;
        border: 0;
        outline: 0;
        font-family: Helvetica, Arial, Tahoma, sans-serif;
        font-size: 0.9em;
        color: #333333;
    }
    
    #respond #submit {
        width: auto;
        color: #FFFFFF;
        background: #CC0066;
        border: 0;
        padding: 0 0.8em;
        font-size: 0.9em;
        line-height: 2.08em;
        height: 2.08em;
        margin: 0;
        cursor: pointer;
    }
    
    #respond #submit:hover {
        background: #666666;
    
    }
    
    li.comment {
        border-bottom: 0.08em dashed #999999;
        margin: 0 0 2.4em 0;
    }
    
    li.comment:last-child {
        border: 0;
    }
    
    li.comment img {
        float: left;
        margin: 0 0.8em 0 0;
    }
    
    li.comment p {
        clear: both;
    }
    
    li.comment p.comment-author {
        clear: none;
        font-size: 1.44em;
        line-height: 1.76em;
    }
    
    li.comment p.comment-meta {
        clear: none;
        color: #999999;
        font-size: 0.88em;
        line-height: 1.44em;
    }
    
    ul.archiv li {
        list-style-type: square;
        margin: 0 0 0 3.2em;
        line-height: 2.4em;
        font-size: 1em;
    }
    
    #searchform {
        margin: 1.6em 0 0 1em;
    }
    
    #search-field {
        width: 60%;
        background: #E8E8E8;
        border: 0;
        font-size: 0.9em;
        line-height: 2.08em;
        height: 2.08em;
        padding: 0 0.4em;
        outline: 0;
    }
    
    #search-button {
        width: auto;
        color: #FFFFFF;
        background: #CC0066;
        border: 0;
        padding: 0 0.8em;
        font-size: 0.9em;
        line-height: 2.08em;
        height: 2.08em;
        margin: 0 0 0 0.4em;
        cursor: pointer;
    }
    
    #search-button:hover {
        background: #666666;
    }
    
    #sidebar {
        background: #ffffff;
        width: 20%;
        float: left;
    }
    
    .widget {
        display: inline-block;
        margin: 0 0 4em 0;
    }
    
    #sidebar h6 {
        background: #F3BFD6;
        width: 100%;
        height: 2.8em;
        color: #FFFFFF;
        font-size: 1.44em;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        line-height: 2.8em;
        padding: 0 0 0 1.6em;
    }
    
    #sidebar ul {
        margin: 1em 0 0 0;
        width: 80%;
    }
    
    #sidebar li {
        color: #999999;
        line-height: 1.92em;
        letter-spacing: 0.08em;
        padding: 1em 0 1em 1em;
        border-bottom: 0.08 dashed #999999;
    }
    
    #sidebar li a:link, #sidebar li a:visited, #sidebar li a:active {
        color: #999999;
    }
    
    #sidebar li a:hover {
        color: #CC0066;
    }
    
    #sidebar li.cat-item, #sidebar #submenu li {
        color: #999999;
        line-height: 2.4em;
        letter-spacing: 0.08em;
        padding: 0;
        border: 0;
        margin: 0 0 0 1.6em;
    }
    
    #sidebar li.cat-item a:link, #sidebar li.cat-item a:visited, #sidebar li.cat-item a:active, #sidebar #submenu li a:link, #sidebar #submenu li a:visited, #sidebar #submenu li a:active {
        color: #999999;
    }
    
    #sidebar li.cat-item a:hover, #sidebar #submenu li a:hover {
        color: #CC0066;
    }
    
    #sidebar p {
        color: #999999;
        font-size: 0.88em;
        line-height: 1.6em;
        letter-spacing: 0.08em;
        margin: 1em 1.6em 0 1.6em;
    }
    
    #sidebar-li {
    background-image: url(http://lustvollleben.at/wp-content/uploads/2018/01/Webbackblack.jpg);
        width: 20%;
        float: left;
        line-height: 1.92em;
        letter-spacing: 0.08em;
        padding: 1em 0 1em 1.6em;
        border-bottom: 0.08em dashed #999999;
    }
    
    #sidebar-re {
    background-image: url(http://lustvollleben.at/wp-content/uploads/2018/01/Webbackblack.jpg);
        width: 20%;
        float: right;
        line-height: 1.92em;
        letter-spacing: 0.08em;
        padding: 1em 0 1em 1.6em;
        border-bottom: 0.08em dashed #999999;
        }
    
    #footer-bar {
        background: #00FFFF;
        width: 100%;
    }
    
    #footer {
        background: #0000FF;
        position: relative;
        margin: 0 auto;
        width: 100%;
    }
    
    #footer .widget {
        float: left;
    }
    
    .tagcloud {
        float: left;
        width: 80%;
        margin: 0 6.4em 0 1.6em;
        line-height: 2.4em;
    }
    
    .tagcloud a:link, .tagcloud a:visited, .tagcloud a:active {
        color: #999999;
    }
    
    .tagcloud a:hover {
        color: #CC0066;
    }
    
    #footer .widget h6 {
        height: 2.8em;
        color: #CC0066;
        font-size: 1.44em;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        line-height: 2.8em;
        margin: 1.6em 0 1em 1.6em;
        padding: 0;
    }
    
    #last-comments {
        float: left;
        width: 20.8em;
    }
    
    #last-comments h6 {
        background: #4D4D4D;
        width: 19.2em;
        height: 2.8em;
        color: #999999;
        font-size: 1.44em;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        line-height: 2.8em;
        margin: 1.6em 0 0 0;
        padding: 0 0 0 1.6em;
    }
    
    ul#recentcomments {
        margin: 0 0 1.6em 0;
        width: 20.8em;
    }
    
    li.recentcomments {
        color: #666666;
        font-size: 0.88em;
        text-transform: none;
        line-height: 1.92em;
        letter-spacing: 0.08em;
        padding: 1em 0 1em 1.6em;
        border-bottom: 0.08em dashed #999999;
    }
    
    li.recentcommentslast-child {
        border-bottom: 0;
    }
    
    li.recentcomments a:link, li.recentcomments a:visited, li.recentcomments a:active {
        color: #999999;
    }
    
    li.recentcomments a:hover {
        color: #CC0066;
    }
    
       
    

    Zu guter Letzt und ergänzend noch die header und footer.php
    Header:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title><?php wp_title('|', 1, 'right'); ?> <?php bloginfo('name'); ?></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="Stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/reset.css" />
    <link rel="Stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" />
    <link rel="pingback" href="<?php bloginfo('wpurl'); ?>/xmlrpc.php" />
    <link rel="alternate" type="application/rss+xml" title="RSS-Feed" href="<?php bloginfo('wpurl'); ?>/feed/" />
    <?php wp_head(); ?>
    </head>
    <body>
    <div id="header-bar"></div>
    <div id="page">
        <div id="header">
            <!-- <a href="<?php bloginfo('url'); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.gif" width="61" height="73" alt="Fictitious Company"></a>-->
            <a href="<?php bloginfo('url'); ?>"><img src="http://lustvollleben.at/wp-content/uploads/2018/01/0psylogothmb.png" width="73" height="61" alt="Lustvollleben">
            <span><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></span>
            <?php if ( !function_exists('dynamic_sidebar') || dynamic_sidebar('Menu') ) : ?>
            <?php endif; ?>
        </div>
        <div id="main">
            <div id="banner">
                <!-- <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/banner.gif" width="940" height="320" alt="Wir lassen Sie nicht im Regen stehen..." />-->
                <!--<img src="http://lustvollleben.at/wp-content/uploads/2018/01/0psylogothmb.png" width="425" height="319"/ alt="Lustvollleben">-->
            </div>
            <div id="content">

    Footer:

            <div class="clear"></div>
        </div>
    </div>
    <div id="footer-bar">
        <div id="footer">
            <?php if ( !function_exists('dynamic_sidebar') || dynamic_sidebar('Footer') ) : ?>
            <?php endif; ?>
            <div class="clear"></div>
        </div>
    </div>
    <?php wp_footer(); ?>
    </body>
    </html>
    

    Ja – was ich auch immer mache, die Sidebars befinden sich oberhalb und unterhalb des Contents oder sonstwo, nur nicht links und rechts …

    Besten Dank im Voraus
    Worels

    • Dieses Thema wurde geändert vor 2 Jahre, 8 Monaten von worels.
    • Dieses Thema wurde geändert vor 2 Jahre, 8 Monaten von worels.

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 1 Antwort (von insgesamt 1)
  • Ein halbes Dutzen Templates, kein Syntaxhervorhebung, keine Kommentare im Code, keine Reduzierung auf die relevanten Teile … Das lädt nicht unbedingt zur Hilfe ein. Ein Link zu einem Github-Repository würde die Sache sicher vereinfachen.

    Ich würde Sidebars heute nicht mehr mit floats realisieren, sondern CSS Grid verwenden, aber das ist vielleicht auch ein wenig Geschmacksfrage.

    Wie Sidebars angelegt werden, kannst du hier gut nachlesen:

    Home


    In dem Beispiel wird eine „Primary Sidebar“ mit einer ID primary in der functions.php registriert. (primary finde ich aussagekräftiger als li, da solltest du dir eine andere Bezeichnung ausdenken, z.B. left, links, …)
    Dann wird ein Template sidebar-primary.php hinzugefügt, in dem mit <?php dynamic_sidebar( 'primary' ); ?> die vorher registrierte Sidebar geladen wird. Dieses Template wird mit <?php get_sidebar( 'primary' ); ?> eingebunden.

    Wenn du <?php get_sidebar('li'); ?> aufrufst (die Bezeichnung ist wie gesagt nicht optimal), brauchst du ein Template sidebar-li.php, in dem dynamic_sidebar( 'sidebar-li' ); die in der fuctions.php registrierte Sidebar mit der identischen ID (nicht name) sidebar-li lädt.

    Stell es dir so vor:
    Du registrierst erst einmal eine Sidebar mit einem Namen „Meine Sidebar“ und der ID meins, damit du sie im Backend unter Design > Widgets findest und mit Widgets bestücken kannst.
    Damit sie auch im Frontend gezeigt wird, musst du ein Template erstellen (sidebar-meins.php) und in den anderen Templates für Seiten-Beitrags- und Archivansicht einbinden (get-sidebar( 'meins' );).
    In diesem Template sidebar-meins.php brauchst du noch eine Funktion, mit der die Widgets genau dieser Sidebar geladen werden, dynamic_sidebar( 'meins' );.
    Das „dynamic“ bezieht sich darauf, dass die Sidebar ja auch leer sein kann, wenn du im Backend noch keine Widgets darin platziert hast.

    Wir könnten uns nun noch ausgiebig darüber unterhalten, ob es noch zeitgemäß ist, für normale Projekte eigene Themes zu erstellen. Der Aufwand ist, wenn du es richtig machen möchstest (responsive, für alle gängige Browsern, Einstellungen per Customizer, Unterstützung aller WordPress-Features, barrierefrei, …) im Vergleich zur Nutzung eines Child Themes recht hoch.

Ansicht von 1 Antwort (von insgesamt 1)
  • Das Thema „Sidebar Links und Rechts (Split) ohne Plugin“ ist für neue Antworten geschlossen.