Создайте отформатированное табличное меню

Question

Создайте отформатированное табличное меню

Я только что запустил сайт пару недель назад и добавил к нему еще кое-что для своего друга, однако должен быть более простой способ размещения контента на 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>

4

formatting table menus

Author: fuxia, 2013-01-02

Source

1 answers

score 4 · Accepted Answer

Я думаю, что ваш вопрос является идеальным примером для проблемы 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
        );
    }
}

Теперь вам нужно добавить страницы в это меню. Не забудьте отредактировать описание или сделать это поле видимым:

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

Написание этого ответа заняло больше времени, чем написание кода. :)