如何制作像这个截图这样的3个盒子呢？

时间：2014-04-21 作者：Genadinik

我正在尝试创建显示在导航和电子邮件注册表单正下方的3个框。有没有插件可以创建这样的东西？或者，实现这类事情的可能方式是什么？

enter image description here

下面是我试图发布元框的方法，但它没有出现。

enter image description here

还有一个日历小部件。但这也没有出现。你知道为什么吗？

2 个回复

最合适的回答,由SO网友:markratledge 整理而成

你的问题太宽泛了；您需要查看网站所基于的CSS和HTML源代码和主题，以了解布局是如何完成的。查看其他免费WP主题以找到类似的布局。

并学习如何使用Firebug 使用Firefox，或使用中的开发人员工具Chrome 或Safari 或IE 查看该站点和您尝试开发的站点的CSS和HTML。

SO网友:Pieter Goosen

看起来您可能正在寻找小部件。以下是我在主题中使用的内容。

首先要做的是注册您的小部件

function sidebars_register() {

        $mws = array (
            \'sidebar-3\' => array (   
                __( \'Header Widget One\', \'pietergoosen\' ) => __( \'Header widgets for homepage\', \'pietergoosen\' ),
            ),
            \'sidebar-4\' => array (   
                __( \'Header Widget Two\', \'pietergoosen\' ) => __( \'Header widgets for homepage\', \'pietergoosen\' ),
            ),
            \'sidebar-5\' => array (  
                __( \'Header Widget Three\', \'pietergoosen\' ) => __( \'Header widgets for homepage\', \'pietergoosen\' ),
            ),
            \'sidebar-6\' => array (  
                __( \'Header Widget Four\', \'pietergoosen\' ) => __( \'Header widgets for homepage\', \'pietergoosen\' ),
            ),
        );

        foreach ( $mws as $mi => $mw ) {
            foreach ($mw as $mwn => $mwd) {
                register_sidebar(
                    array (
                        \'name\'          =>  $mwn,
                        \'id\'            =>  $mi,
                        \'description\'   =>  $mwd,
                        \'before_widget\' => \'<aside id="%1$s" class="widget %2$s">\',
                        \'after_widget\'  => \'</aside>\',
                        \'before_title\'  => \'<h1 class="widget-title">\',
                        \'after_title\'   => \'</h1>\',
                    )
                );
            }
        }
    }

add_action( \'widgets_init\', \'sidebars_register\' );

我使用了四个标题小部件，您只能使用三个。

接下来，创建一个模板并调用它sidebar-header.php 在其中添加以下代码。这将设置您的css类

<?php
/**
 * The Header Sidebar. Shows only on homepage.
 *
 */
function pietergoosen_header_widget_class() {
    $count = 0;

    if ( is_active_sidebar( \'sidebar-3\' ) )
        $count++;

    if ( is_active_sidebar( \'sidebar-4\' ) )
        $count++;

    if ( is_active_sidebar( \'sidebar-5\' ) )
        $count++;

    if ( is_active_sidebar( \'sidebar-6\' ) )
        $count++;   

    $class = \'\';

    switch ( $count ) {
        case \'1\':
            $class = \'one\';
            break;
        case \'2\':
            $class = \'two\';
            break;
        case \'3\':
            $class = \'three\';
            break;
        case \'4\':
            $class = \'four\';
            break;  
    }

    if ( $class )
        echo \'class="\' . $class . \'"\';
}

if (   ! is_active_sidebar( \'sidebar-3\'  )
    && ! is_active_sidebar( \'sidebar-4\' )
    && ! is_active_sidebar( \'sidebar-5\'  )
    && ! is_active_sidebar( \'sidebar-6\'  )
)
    return;

?>
    <div id="headerwidget" <?php pietergoosen_header_widget_class(); ?>>

    <?php if ( is_active_sidebar( \'sidebar-3\' ) ) : ?>
    <div id="first" class="header-sidebar widget-area" role="complementary">
        <?php dynamic_sidebar( \'sidebar-3\' ); ?>
    </div><!-- #First .widget-area -->
    <?php endif; ?>

    <?php if ( is_active_sidebar( \'sidebar-4\' ) ) : ?>
    <div id="second" class="header-sidebar widget-area" role="complementary">
        <?php dynamic_sidebar( \'sidebar-4\' ); ?>
    </div><!-- #Second .widget-area -->
    <?php endif; ?>

    <?php if ( is_active_sidebar( \'sidebar-5\' ) ) : ?>
    <div id="third" class="header-sidebar widget-area" role="complementary">
        <?php dynamic_sidebar( \'sidebar-5\' ); ?>
    </div><!-- #Third .widget-area -->
    <?php endif; ?>

    <?php if ( is_active_sidebar( \'sidebar-6\' ) ) : ?>
    <div id="forth" class="header-sidebar widget-area" role="complementary">
        <?php dynamic_sidebar( \'sidebar-6\' ); ?>
    </div><!-- #Fourth .widget-area -->
    <?php endif; ?>

</div><!-- #Header widgets -->

现在，您可以在标题或类似这样的适当模板中调用它。我在用我的header.php 就在<body> 标签我的也是有条件的，它只加载在主页上。您可以修改它

<? if ( is_front_page() ) : ?>  
        <?php get_sidebar( \'header\' ) ?>
    <?php endif ; ?>

最后是你的css。这就是我让它完美展现的样子

#headerwidget { 
        overflow: hidden;
        max-width: 1420px;
        display: block;
        float: center;
        padding: 15px 30px 0;
    }

    /* One Widget Area */
    .one .widget-area {
        float: left;
        margin-right: 2.5%;
        width: 100%;
    }

    /* Two Widget Areas */
    .two .widget-area {
        float: left;
        margin-right: 2.5%;
        width: 48.5%;
    }
    .two .widget-area + .widget-area {
        margin-right: 0;
    }
    /* Three Widget Areas */
    .three .widget-area{
        float: left;
        margin-right: 2.5%;
        width: 31.3%;
    }
    .three .widget-area + .widget-area + .widget-area {
        margin-right: 0;
    }
    /* Four Widget Areas */
    .four .widget-area {
        float: left;
        margin-right: 2.5%;
        width: 23%;
    }
    .four .widget-area + .widget-area + .widget-area + .widget-area {
        margin-right: 0;
    }

您应该能够将其修改为可工作的三个小部件布局。我已经给了你从这里开始工作的基础。祝你好运

结束

小码农CODE

如何制作像这个截图这样的3个盒子呢？

相关推荐

How to find installed plugins