Question

我正在构建一个wordpress主题，我希望它有2个侧边栏。我发现这样做的唯一方法是将这些侧边栏与内容对齐，将主要侧边栏放在索引页面上，并在标题末尾放置次要侧边栏，我不知道另一种方式这样做。

但现在问题在于我将php Sidebar代码放在索引中，不知何故css #footer代码它会捕获所有侧边栏和内容的页面。

主题 - ＆gt; http://experiencias.freeserver.me/

这是代码。我已经设置了颜色和边框颜色，以便更清楚地了解发生了什么。

索引代码 - 主要边栏代码位于此代码的底部：

<?php get_header(); ?>
    <div id="main">
        <div id="content" class="filter-posts">
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

            <div id="<?php the_ID(); ?>" data-id="post-<?php the_ID(); ?>" data-type="<?php $categories = get_the_category(); $count = count($categories); $i=1; foreach($categories as $category) {    echo str_replace('-', '', $category->slug); if ($i<$count) echo ' '; $i++;} ?>" class="post-<?php the_ID(); ?> <?php $categories = get_the_category(); foreach($categories as $category) {  echo str_replace('-', '', $category->slug).' '; } ?>post project">

                <?php 
                    $format = get_post_format();

                    if ($format == 'image') { ?>
                        <img class="post-icon" src="<?php echo get_template_directory_uri(); ?>/images/format-image.jpg" alt="image" />
                    <?php } else { ?>
                        <img class="post-icon" src="<?php echo get_template_directory_uri(); ?>/images/format-standard.jpg" alt="standard" />
                <?php } ?>  

                <div class="box">
                    <div class="frame">
                        <!-- uses the post format -->
                        <?php
                            if(!get_post_format()) {
                               get_template_part('format', 'standard');
                            } else {
                               get_template_part('format', get_post_format());
                            };
                        ?>
                    </div>

                    <div class="bar" <?php if(is_page()) { ?>style="display:none;"<?php } ?>>
                        <div class="bar-frame">
                            <div class="date bar-col">
                                <strong class="day"><?php the_time('d'); ?></strong>
                                <div class="holder">
                                    <span class="month"><?php the_time('M'); ?></span>
                                    <span class="year"><?php the_time('Y'); ?></span>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="post-scroll"></div>
                </div>
            </div><!-- post-->

            <?php endwhile; ?>

            <div style="clear:both;"> </div>

            <div class="post-nav">
                <div class="postnav-left"><?php previous_posts_link('&laquo; Previous Page') ?></div>
                <div class="postnav-right"><?php next_posts_link('Next Page &raquo;') ?></div>
                <div style="clear:both;"> </div>
            </div><!--end post navigation-->

            <?php endif; ?>

            <?php if(is_single ()) { ?>
                <div class="comments">
                    <?php comments_template(); ?>
                </div>
            <?php } ?>
        </div><!--content-->
    </div><!--main-->

    <div id="sidebar-primary">
    <?php get_sidebar('left'); ?>
    </div>

    <?php get_footer(); ?>

标题代码 - 代码底部的辅助补充工具栏

<html>
<head>
<title>My Theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>This is the header</h1>
</div>

<div id="sidebar-secondary">
<?php get_sidebar('right'); ?>
</div>

CSS代码

#wrapper {
display: block;
width:92%;
margin:0px auto;
font-family: verdana;
border: 1px #FFFF00 solid;
}

#main {
margin-top:20px;
margin-left:50px;
}

#header {
border: 1px #D9D9D9 solid;
text-align: center;
background: #FFFFFF;
}
#content {
margin-bottom:5px;
overflow: hidden;
    float: left;
    width: 620px;
margin-left: 275px;
border:#E60000;
}

#sidebar-primary {
overflow: hidden;
float: left;
    width: 220px;
    margin-left: -890px;
border: 12px #FF3300 solid;
padding:5px;
border-radius:3px;
}
#sidebar-secondary {
overflow: hidden;
float: right;
    width: 320px;
border: 1px #66FF33 solid;
padding:5px;
border-radius:3px;
}
#footer {
background-color:#CCFFCC;
width:100%;
padding:38px 0 0;
font-size:12px;
line-height:18px;
color:#888;
text-shadow: 1px 1px 1px #2a2a2a;
filter: dropshadow(color=#2a2a2a, offx=1, offy=1);
display:block;
}

Answer 1

这真的是一个浮动的问题。由于两个侧边栏是浮动的，因此需要在它们之后清除浮动，以便可以在它们之后的新行上添加新内容。要实现这一点，只需在浮动元素之后添加（在之后的情况下）：

<div style="clear:both;"></div>

双面酒吧主题设计

1 个答案: