创建格式化的类似表格的菜单

时间:2013-01-02 作者:kia4567

I\'ve just put the site up 几周前,我为我的朋友添加了更多的内容,但必须有一种更简单的方式通过wordpress发布内容。我甚至很难理解它,我正在编写其中的一半(或者至少添加样式,查看CSS等)

我特别关注服务(几乎是这个测试页面上的唯一内容)以及如何布局它们。它们在丑陋的表格中,我想我甚至忘记了如何使用它们,但我还应该如何像这样布置内容呢?有没有让我的生活更轻松的插件(高级?-我听说过类型或视图,这是一个好插件吗?)。

然而,到目前为止,我已经完成了这方面的工作,在这些单元格中获得填充物的最佳方法是什么?我尝试了几乎所有的方法,但要么不起作用,要么影响页面上的所有表(它将位于的原始页面which is here).

我在这里添加了garble表代码,您想看看它。。

<table style="width: 1000px; height: 200px; border-color: #e9e9e9; border-width: 3px; border-style: solid; background-color: #aaa685;" border="3" cellspacing="10" cellpadding="10" align="left">
<tbody>
<tr align="left" valign="top">
<td style="border: 5px solid #e9e9e9;">
<h2><span style="color: #ffffff;"> CLIMATE</span></h2>
<p><span style="font-size: x-small; color: #ffffff;">Our smart technology will help you keep you climate suited to your needs.</span></p> <h2><span style="font-size: small; color: #ffffff;">READ MORE</span>
</h2>
</td>
<td style="border: 5px solid #e9e9e9;">
<h2><span style="color:#ffffff;">SECURITY</span></h2>
<p><span style="font-size: x-small; color: #ffffff;">With our 100% quality Home Automation techniques your home is secure 24/7.</span></p>
<h2><span style="font-size: small; color: #ffffff;">READ MORE</span></h2> </td> <td style="border: 5px solid #e9e9e9;"> <h2><span style="color: #ffffff;"> AUDIO</span></h2> <p><span style="font-size: x-small; color: #ffffff;">Along with your smart lights you can have our flexible music system that works.</span></p>
<h2><span style="font-size: small; color:#ffffff;">READ MORE</span></h2>
</td>
<td style="border: 5px solid #e9e9e9;">
<h2><span style="color: #ffffff;"> LIGHTING</span></h2>
<p><span style="color: #ffffff; font-size: x-small;">Now you can have smart lights. Enjoy our advanced lighting system in your home.</span><span style="color: #ffffff;">
<br /> </span></p> <h2><span style="font-size: small; color: #ffffff;">READ MORE</span>
</h2>
</td>
</tr>
</tbody>
</table>

1 个回复
最合适的回答,由SO网友:fuxia 整理而成

我认为你的问题是XY Problem. 在WordPress中,您不能在post编辑器中创建这样的菜单。您使用菜单。

一旦你从这一点开始思考你的问题,一切都很简单。:)

首先在主题的functions.php:

add_action( \'wp_loaded\', \'wpse_78027_register_menu\' );
function wpse_78027_register_menu()
{
    register_nav_menu(
        \'services\',
        __( \'A list of your services. Edit the description!\', \'theme_textdomain\' )
    );
}
现在,您可以在中获得菜单界面wp-admin/nav-menus.php.

然后,您需要一个自定义助行器来显示不仅仅是链接文本。你很幸运,这个问题has been solved too. 您需要非常简单的标记,所以…

/**
 * Custom walker to render the services menu.
 */
class WPSE_78027_Services_Menu extends Walker_Nav_Menu
{
    public function start_el( &$output, $item, $depth = 0, $args = NULL, $id = 0 )
    {
        $output     .= \'<li>\';

        $attributes  = \'\';
        if ( ! empty ( $item->url ) )
            $attributes .= \' href="\' . esc_url( $item->url ) .\'"\';

        $description = empty ( $item->description )
            ? \'<p>Please add a description!</p>\'
            : wpautop( $item->description );

        $title       = apply_filters( \'the_title\', $item->title, $item->ID );
        $item_output = "<a $attributes><h3>$title</h3>
        <div class=\'service-description\'>$description</div></a>";

        // Since $output is called by reference we don\'t need to return anything.
        $output .= apply_filters(
            \'walker_nav_menu_start_el\'
            ,   $item_output
            ,   $item
            ,   $depth
            ,   $args
        );
    }
}
现在您必须将页面添加到该菜单中。不要忘记编辑描述,或force that field to be visible:

enter image description here

现在把它粘在一起。打开要使用菜单的页面模板PHP文件并添加:

wp_nav_menu(
    array (
        \'container\'      => FALSE,
        \'depth\'          => 1,
        \'items_wrap\'     => \'<ul id="service-menu">%3$s</ul>\',
        \'theme_location\' => \'services\',
        \'walker\'         => new WPSE_78027_Services_Menu
    )
);
完美的

在样式表中,现在可以设置此列表的样式,而不会影响任何其他表。

示例代码:

#service-menu {
    background: #aaa685;
    border-collapse: separate;
    border-spacing: 10px;
    display: table;
    width: 100%;
}
#service-menu,
#service-menu li {
    border: 3px solid #e9e9e9;
}
#service-menu li {
    display: table-cell;
    list-style: none;
    padding: 10px;
    width: 25%;
}
#service-menu,
#service-menu a {
    color: #fff;
}
#service-menu h3 {
    font: bold 1.5em/1 serif;
    margin: 0 0 .5em;
    text-transform: uppercase;
}
.service-description {
    font: .9em/1.4 sans-serif;
}
结果:

enter image description here

写这个答案比写代码要花更多的时间。:)

结束

相关推荐

How to add taxonomy in menus?

书籍(自定义帖子类型)小说(税)科学(税)历史(税)--书籍体裁(税务)小说(术语)科学(学期)历史(学期)以下哪一项是做这件事的“好方法”?对于前一个(这是我目前在管理菜单中的功能,我为每个功能都提供了“register\\u taxonomy”功能),我无法选择要在菜单中显示的“Tax”。而对于后者,我可以将它们添加到菜单中,只需要一个“register\\u taxonomy”函数。