侧边栏出现在wordpress的内容下

时间:2012-10-18 07:09:04

标签: wordpress wordpress-theming

每次我通过wordpress和/或新的woocommerce页面添加新页面时,我都会安装woocommerce插件,所有这些都是在内容下将侧边栏推到页面底部。

我不知道为什么会这样。请查看随附的照片

enter image description here

这是我在CSS

中的主题侧边栏中的代码
/* Sidebar
---------------------------------------- */
#sidebar {
    float: Left;
}

    .widget {
        background: url(images/box-tail.gif) repeat-x 50% 0%;
        position: relative;
        margin: 0 0 30px 0;
        border: 1px solid #f0f0f0;
        border-top: none;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
    }

        ul.children {
            margin: 0 0 0 20px;
        }

    .widget-indent {
        padding: 0 20px 19px 20px;
    }

.primary_content_wrap .widget {
    padding: 0 19px 19px 19px;
}

.primary_content_wrap h3 {
    padding: 0 0 21px 0;
}

.primary_content_wrap .widget #searchform {
    width: 100%;
}

    .primary_content_wrap .widget #searchform input[type="text"] {
        width: 123px;
    }

这是我的sidebar.php

<aside id="sidebar" class="grid_6 omega">
    <?php if ( ! dynamic_sidebar( 'Sidebar' )) : ?>

        <div id="sidebar-search" class="widget">
            <h3>Search</h3>
            <?php get_search_form(); ?> <!-- outputs the default Wordpress search form-->
        </div>

        <div id="sidebar-nav" class="widget menu">
            <h3>Navigation</h3>
            <?php wp_nav_menu( array('menu' => 'Sidebar Menu' )); ?> <!-- editable within the Wordpress backend -->
        </div>

        <div id="sidebar-archives" class="widget">
            <h3>Archives</h3>
            <ul>
                <?php wp_get_archives( 'type=monthly' ); ?>
            </ul>
        </div>

        <div id="sidebar-meta" class="widget">
            <h3>Meta</h3>
            <ul>
                <?php wp_register(); ?>
                <li><?php wp_loginout(); ?></li>
                <?php wp_meta(); ?>
            </ul>
        </div>

    <?php endif; ?>
</aside><!--sidebar-->

然后这就是我在每个页面中调用侧边栏的方式

<?php get_sidebar(); ?>

任何帮助将不胜感激。

UPDATE 外观和GT;小窗口

enter image description here

6 个答案:

答案 0 :(得分:1)

您是否检查了该页面当前使用的模板?

列在“所有页面”列表中,

点击快速编辑,然后从模板下拉菜单中为您的页面选择不同的模板?

答案 1 :(得分:0)

确保添加到侧边栏宽度的主要内容宽度小于页面正文的宽度。这可以解释为什么,即使使用“float:left”属性,您的侧边栏也会出现在页面底部。

另外,为什么不在php条件中包含整个侧边栏代码:

<?php if ( ! dynamic_sidebar( 'Sidebar' )) : ?>
<aside id="sidebar" class="grid_6 omega">
        <div id="sidebar-search" class="widget">
            <h3>Search</h3>
            <?php get_search_form(); ?> <!-- outputs the default Wordpress search form-->
        </div>

        <div id="sidebar-nav" class="widget menu">
            <h3>Navigation</h3>
            <?php wp_nav_menu( array('menu' => 'Sidebar Menu' )); ?> <!-- editable within the Wordpress backend -->
        </div>

        <div id="sidebar-archives" class="widget">
            <h3>Archives</h3>
            <ul>
                <?php wp_get_archives( 'type=monthly' ); ?>
            </ul>
        </div>

        <div id="sidebar-meta" class="widget">
            <h3>Meta</h3>
            <ul>
                <?php wp_register(); ?>
                <li><?php wp_loginout(); ?></li>
                <?php wp_meta(); ?>
            </ul>
        </div>
</aside><!--sidebar-->
<?php endif; ?>

答案 2 :(得分:0)

您可以提供安装链接吗?问题可能在您提供的代码之外,并且通过查看实时网站可能更容易解决。

答案 3 :(得分:0)

您是否尝试在侧边栏和左侧内容中定义宽度值?让你的左内容浮动(如果没有)。例如

#sidebar{
    float:right; //much better to use float right if the sidebar will be placed at the right side of the page
    width:100px; //define a smaller temporary value of the width for testing purposes
}

#left_content{
    float:left;
    width:300px;      
}

您可以尝试调整css并在浏览器中使用firebug检查html元素。 检查此http://getfirebug.com/

答案 4 :(得分:0)

我认为这很可能非常简单。您使用网格可以很容易地制作列。您的页面模板如下:

<?php get_header(); ?>

 <div class="container_12">

 <div class="grid_6">
 <--- main content here --->
 </div>

 <?php get_sidebar(); ?>

 </div>


<?php get_footer(); ?>

答案 5 :(得分:0)

如果主要内容和侧边栏的大小分配给彼此不相邻或者边距过大或填充不足,则侧边栏会自动移动到屏幕底部。这可能会导致问题