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

Question

这是一个奇怪的问题！

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

任何其他页面都不需要地图小部件，因此创建了几乎相同的自定义菜单但带有额外的地图小部件。

在第一张图片上，您可以看到右侧的默认侧边栏有一些额外的类（.widget），还有 所有的小部件都包含在 div 中，每个 div 都有 id

所以填充是正确的

在第二张图片上，所有缺少的小部件都没有 div，因此没有地方可以在 custom.css 上添加自定义类

缺少必需的填充！

如果课程在那里，这不会是一个问题！

我认为我做了以下事情：

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

我做错了吗？

wordpress 核心肯定应该添加所有类和 div 及其各自的 id

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

第一次编辑

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

jummah 自定义侧边栏的所有元素都是小部件

这是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 侧边栏

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

<div class="custom_sidebar_widget">

小工具之后

</div>

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

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

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

主题没有添加必要的 div 和类 widget widget_search、widget widget_tag、widget widget_calendar 等。所以这破坏了设计！！

我想我已经涵盖了所有内容

Answer 1

不编码就很难查看图像。反正！我希望问题出在你的编码上。当我查看您的网站时，我看到了您的第二张图片和默认代码（实时网站）之间的问题。事情是这样的。

你没有使用 div 为你的内容使用 calss .widget

看我的例子。

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

这是来自 alex 主题注册侧边栏的代码？如果我是对的。只需按照步骤操作即可。

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。

03.然后使用sidebar-2.php 的副本创建一个页面。将其命名为sidebar-3.php。

1. 然后调用您的新侧边栏进行操作。就是这样。

如果你没有给任何机会来完成它。找到我，我是所有网络中的 yeshansachithak。

谢谢