Wordpress在自定义侧边栏上丢失填充

Question

这是个奇怪的问题！

我使用的是一个自定义侧栏，它复制了正常的默认侧栏，只不过它为显示特定事件位置的页面添加了一个相关的google地图小部件。

地图小部件在任何其他页面上都不需要，所以这就是为什么创建了一个几乎相同的自定义菜单，但是创建了额外的map小部件。

在第一个映像中，您可以看到右边的默认侧栏有一些额外的类(.widget)，而且所有的小部件都包含在div中，每个div的ids都有。

所以填充物是正确的

​

​

在第二个映像中，缺少的所有are小部件都没有div，因此没有地方在custom.css上添加自定义类。

需要的填充物不见了！

​

​

如果有课的话，那就没问题了！

我想我做了以下几件事：

1. 创建自定义侧栏
2. 添加小部件
3. 创建页面，并在创建时替换默认的rhs侧栏。

我做错了吗？

可以肯定的是，wordpress核心应该添加所有类和div以及它们各自的id。

=====================================================================

第一次编辑

我使用了自定义侧栏并配置了小部件。

跳转自定义侧栏的所有元素都是小部件。

​

​

这是html..。

<div class="sidebar s2">
<a class="sidebar-toggle" title="Expand Sidebar">
<div class="sidebar-content">
<div class="sidebar-top group">
Jummah, Darutawheed Oxford
<p>
<p>
<p>Barak Allaahu feekum</p>
<form class="searchform themeform" action="http://darutawheed.co.uk/" method="get">
Tags
<div class="tagcloud">
<div id="calendar_wrap">
Archives
<ul>
</div>

以及在Jummah侧栏中生成的css。

.col-3cm .s2 {
float: right;
margin-right: -260px;
position: relative;
right: -100%;
}
.s2 {
width: 260px;
z-index: 1;
}
.sidebar {
padding-bottom: 20px;
position: relative;
z-index: 2;
}

==================================

它应该是这样的样子

html

<div class="sidebar s2">
<a class="sidebar-toggle" title="Expand Sidebar">
<div class="sidebar-content">
<div class="sidebar-top group">
<div id="search-2" class="widget widget_search">
<div id="tag_cloud-3" class="widget widget_tag_cloud">
<div id="calendar-2" class="widget widget_calendar">
<div id="archives-2" class="widget widget_archive">
</div>

css

.sidebar .widget {
    padding: 30px 30px 20px;
}
.widget {
    color: #777777;
    font-size: 15px;
    overflow: hidden;
}

================================

我做了个小实验

此图显示使用默认侧栏的页面。

​

​

这是JUMMAH侧边栏，它完全破坏了设计。

​

​

我尝试在小部件之前使用编辑侧栏添加一个自定义侧栏小部件类。

<div class="custom_sidebar_widget">

和小部件之后

</div>

在custom.css中复制了这样的填充样式

.custom_sidebar_widget {
padding: 30px 30px 20px;
}

但这只是正确地填充了小部件，但是样式(字体、颜色和日历样式都搞砸了)。

主题不是添加必要的div和类小部件widget_search、小部件widget_tag、小部件widget_calendar等，所以这破坏了设计！！

我想我已经涵盖了一切

Answer 1

没有编码就很难看到图像。不管怎么说！我希望问题是你的编码。当我查看您的站点时，我看到了您的第二张图片和默认代码(实时站点)之间的问题。问题是。

您没有在calss .widget的内容中使用div

看看我的例子。

<div class="sidebar s2">
<a class="sidebar-toggle" title="Expand Sidebar"><!-- Something here I saw in live site --></a>
<div class="sidebar-content">
    <div class="sidebar-top group"><!-- Something here I saw in live site --></div>
    <!-- I don't know about codes. After this one use a div with .widget class  -->
    <div id="myTest" class="widget">
        Jummah, Darutawheed Oxford
        <p>Contents Here</p>
        <p>Another P Tag contents</p>
        <p>Then use form</p>
        <form action="http://darutawheed.co.uk/" class="searchform themeform" method="get" data-dpmaxz-eid="1">
            <div id="mysform">
                <input type="text" value="To search type and hit enter" onfocus="if(this.value=='To search type and hit enter')this.value='';" onblur="if(this.value=='')this.value='To search type and hit enter';" name="s" class="search" data-dpmaxz-eid="2">
            </div>
        </form>
    </div><!--end div#myTest-->
</div>

​

我只是用静态的方式。你只需要用div添加这个类。见div #myTest

谢谢

见主题代码第一版。

/*  Register sidebars
/* ------------------------------------ */  
if ( ! function_exists( 'alx_sidebars' ) ) {

    function alx_sidebars() {
        register_sidebar(array( 'name' => 'Primary','id' => 'primary','description' => "Normal full width sidebar", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>'));
        register_sidebar(array( 'name' => 'Secondary','id' => 'secondary','description' => "Normal full width sidebar", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>'));
        if ( ot_get_option('footer-widgets') >= '1' ) { register_sidebar(array( 'name' => 'Footer 1','id' => 'footer-1', 'description' => "Widetized footer", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>')); }
        if ( ot_get_option('footer-widgets') >= '2' ) { register_sidebar(array( 'name' => 'Footer 2','id' => 'footer-2', 'description' => "Widetized footer", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>')); }
        if ( ot_get_option('footer-widgets') >= '3' ) { register_sidebar(array( 'name' => 'Footer 3','id' => 'footer-3', 'description' => "Widetized footer", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>')); }
        if ( ot_get_option('footer-widgets') >= '4' ) { register_sidebar(array( 'name' => 'Footer 4','id' => 'footer-4', 'description' => "Widetized footer", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>')); }
    }

}
add_action( 'widgets_init', 'alx_sidebars' );

这是亚历克斯主题注册侧边栏的代码吗？如果我是对的。按步骤做就行。

01.只需从原始代码复制此代码即可。然后把它贴在后面。

register_sidebar(array( 'name' => 'Primary','id' => 'primary','description' => "Normal full width sidebar", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>'));

02.只重命名name、id和description。不要删除class和其他东西。如果您想将新类添加到您自己的小部件中。只需像这样添加myClass widget %2$s即可。

然后创建一个使用sidebar-2.php副本的页面。叫它sidebar-3.php。

1. 然后打电话到你的新侧边栏演戏。就这样。

如果你不给任何机会完成这件事。找到我，我是所有网络中的人。

谢谢