Sidebar links und rechts vom Content (Split)

wpdels

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

<?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');
}
?>

Alles anzeigen

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

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(); ?>

Alles anzeigen

Die Sidebars sehen so aus:
Links:

PHP

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

Rechts:

PHP

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

Tja, die style.css (Ausschnitt) sieht so aus:

Code

body {
    background: #000000; /*schwarz*/
    font-family: Helvetica, Arial, Tahoma, sans-serif;
    font-size: 0.9em;
    color: #333333;
}


#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;
}

Alles anzeigen

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

PHP

<!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">`

Alles anzeigen

Footer:

PHP

<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>

Alles anzeigen

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

Werbepost

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

SirEctor

Also ich sehe die Sidebars wo sie hingehören. Konntest du das Problem lösen? Allerdings sehe ich auch das Theme Admiral und kein eigenes.

wpdels

Zitat von SirEctor

Also ich sehe die Sidebars wo sie hingehören. Konntest du das Problem lösen? Allerdings sehe ich auch das Theme Admiral und kein eigenes.

Ich bin am herumprobieren und versuche über andere Themes herauszufinden, wie das gehen könnte ...
Ich hab's auch bei meinem irgendwie geschafft (getsidebar in der header.php ... Anpassung von content width ud sidebar width mit %) , das hinzubekommen, aber sobald sich das display verändert, ist das design im Eimer.

SirEctor

Man könnte dir helfen, wenn man es mal sehen könnte. So wird es nur Raterei.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Sidebar links und rechts vom Content (Split)

Jetzt mitmachen!

Benutzer online in diesem Thema