Crie um menu formatado como uma tabela

4

Acabei de colocar o site algumas semanas atrás e adicionei mais algumas coisas a ele para o meu amigo. ser uma maneira mais fácil de criar conteúdo sobre o wordpress. Eu estou tendo dificuldades com isso e estou codificando a metade (ou pelo menos adicionando estilos, olhando para o CSS, etc.)

Estou olhando especificamente para os serviços (praticamente a única coisa nesta página de teste) e como organizá-los. Eles estão em mesas feias das quais eu acho que até esqueci como usar, mas de que outra forma eu deveria colocar conteúdo como esse? Existe um plugin que facilita a minha vida (Premium? - Eu já ouvi falar de Types ou Views, isso é um bom plugin?).

No entanto, como eu fiz o trabalho sobre isso até agora, qual é a melhor maneira de obter preenchimento dentro dessas células? Eu tentei quase tudo, mas ele não funciona ou afeta TODAS as tabelas na página (a página original em que será que está aqui que está aqui a>).

Eu adicionei o código da tabela garble aqui, se você quiser ver ...

<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>
    
por kia4567 02.01.2013 / 19:58

1 resposta

4

Acho que sua pergunta é um exemplo perfeito para o problema XY . No WordPress, você não cria esse menu em um editor de postagem. Você usa um menu.

Uma vez que você comece a pensar sobre o seu problema a partir deste ponto, tudo é fácil. :)

Primeiro, registre um menu de navegação personalizado para essa lista no functions.php :

do seu tema
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' )
    );
}

Agora você tem uma interface para o menu em wp-admin/nav-menus.php .

Então você precisa de um walker personalizado para mostrar mais do que apenas o texto do link. Você tem sorte, este problema foi resolvido também . Você precisa de marcação muito simples, então ...

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

Agora você precisa adicionar as páginas a esse menu. Não se esqueça de editar a descrição, ou :

Eagoracoloquemjuntos.AbraoarquivoPHPdomodelodepáginanoqualvocêdesejausaromenueadicione:

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

Perfeito.

Na sua folha de estilo, você pode estilizar essa lista agora sem afetar nenhuma outra tabela.

Exemplo de código:

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

Resultado:

Escrever esta resposta levou mais tempo do que escrever o código. :)

    
por fuxia 03.01.2013 / 04:09