创建格式化的表格状菜单

Question

创建格式化的表格状菜单

4

6321 2013-01-02

几周前我刚刚建立了该网站,并为此添加了一些其他功能我的朋友,但是必须有一种更简单的方法来将内容布置在wordpress上.我什至都很难过,我正在解决其中的一半(或者至少添加样式,查看CSS等)

我正在专门研究服务(此测试页面上的唯一内容)以及如何布置它们.它们在丑陋的表中,我想我什至忘了如何使用,但是我还应该如何布置这样的内容?是否有一个使我的生活更轻松的插件(高级?-我听说过"类型"或"视图",这是一个很好的插件吗?).

但是到目前为止,我已经完成了这些工作,什么是在这些单元格内填充的最佳方法是什么?我已经尝试了几乎所有内容,但是它要么不起作用,要么会影响页面上的所有表(原始页面将在该页面的 ).

我在这里添加了乱码表代码,以供您查看.

 <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>

I've just put the site up a couple weeks ago and adding some more things to it for my friend however there's got to be an easier way to lay content out over wordpress. I've having a hard time with it even and I'm codding half of it (or at least adding styles, looking at the CSS, ect)

I'm specifically looking at the services (pretty much the only thing on this test page) and how to lay them out. They are in ugly tables of which I think I even forgot how to use but how else am I supposed to lay out content like this? Is there a plugin that makes my life easier (Premium? - I've heard of Types or Views, is that a good plugin?).

However as I've done the work on this so far, what is the best way to get padding inside those cells? I've tried almost everything but it either doesn't work or it affects ALL tables on the page (the original page where it will be which is here).

I've added the garble table code here is you want to look at it..

<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>

- 您大约在两周前用另一个用户名发布了此问题.它被称为"在wordpress所见即所得编辑器中设置可编辑的布局".您删除了它,但仍可以在Google的缓存中找到它.这是该副本的近似副本/粘贴.请不要那样做.
  
  You posted this question under a different username about two weeks ago. It was called "Setting up an editable layout in the wordpress WYSIWYG editor". You removed it but it can still be found in Google's cache. This is a near copy/paste of that one. Please don't do that.
  - 0
  - 2013-01-02
  - s_ha_dum
- 我不得不重新发布它,因为我不小心删除了它,它不允许我再做一次.我不是要重新发布,但是如果实际上找不到它,我需要将其备份一些方法.
  
  I had to re-post it because I accidentally deleted it and it wouldn't let me do it again. I don't mean to re-post but if it can't actually be found I needed to get it back up some how.
  - 0
  - 2013-01-02
  - kia4567
- 这是一个HTML/CSS问题,而不是WordPress问题.
  
  This is an HTML/CSS question, not a WordPress one.
  - 0
  - 2013-01-02
  - s_ha_dum
- 我正在寻找一个可以组织所见即所得编辑器的插件.标准填充:10px在这种情况下不起作用,因此我相信它将与wordpress有关.
  
  I am looking for a plugin that organizes the WYSIWYG editor though. The standard padding: 10px isn't working in this case, so I believe it will have to do with wordpress.
  - 0
  - 2013-01-02
  - kia4567
- 插件建议不在主题之列.参见[常见问题].
  
  Plugin recommendations are off topic. See the [faq].
  - 0
  - 2013-01-02
  - s_ha_dum

1 个回答

投票数

fuxia · Accepted Answer · 2013-01-03

4

2013-01-03

我认为您的问题是 XY问题的完美示例.在WordPress中,您不会在帖子编辑器中创建此类菜单.您使用菜单.

一旦您从这一点开始考虑问题,一切都会变得很容易. :)

首先在主题的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中获得菜单界面.

然后,您需要一个自定义的助行器以显示不仅仅是链接文本的内容.您很幸运,此问题也解决了.您需要非常简单的标记,所以...

 /**
 * 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
        );
    }
}

现在,您必须将页面添加到该菜单.不要忘记编辑描述,或者:

现在将其粘在一起.打开要使用菜单的页面模板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;
}

结果:

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

I think your question is a perfect example for the XY Problem. In WordPress you do not create such a menu in a post editor. You use a menu.

Once you start thinking about your problem from this point, everything is easy. :)

First register a custom navigation menu for this list in your theme’s 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' )
    );
}

Now you get an interface for the menu in wp-admin/nav-menus.php.

Then you need a custom walker to show more than just the link text. You are lucky, this problem has been solved too. You need very simple markup, so …

/**
 * 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
        );
    }
}

Now you have to add the pages to that menu. Do not forget to edit the description, or force that field to be visible:

enter image description here

And now stick it together. Open the page template PHP file where you want to use the menu and add:

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

Perfect.

In your stylesheet you can style this list now without affecting any other table.

Sample code:

#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;
}

Result:

enter image description here

Writing this answer took more time than writing the code. :)

原文
fuxia

我删除了_Read More_,因为四个名称相同的链接对于屏幕阅读器用户而言非常烦人,而整个框都是一个链接.

I dropped the _Read More_, because four links with the same name are super annoying for screen reader users, and the whole box is a link.
- 0
- 2013-01-03
- fuxia
你真棒！今晚我将继续工作,如果可以给我点意见(不是您需要它们,哈哈),但这将向您显示我很感谢您抽出宝贵时间写这个长答案为了我.我将调查该XY问题,因此下次一定要提出正确的问题.谢谢！

Your amazing toscho! I'll be working on this tonight, if I could give you points I would (not that you need them. Haha) but it would be to show you how much I appreciate you taking the time out of your day to write this long answer for me. I'll look into that XY problem so I be sure to ask the correct question for next time. THANKYOU!
- 1
- 2013-01-03
- kia4567