Crear un menú con formato de tabla

Navega tus respuestas
4

Acabo de poner el sitio hace un par de semanas y le agregué algunas cosas más a mi amigo. para ser una forma más fácil de poner contenido a través de wordpress. Lo he pasado mal incluso, y estoy codificando la mitad (o al menos agregando estilos, mirando el CSS, ect)

Estoy analizando específicamente los servicios (casi la única cosa en esta página de prueba) y cómo distribuirlos. Están en tablas feas de las cuales creo que incluso olvidé cómo usarlas, pero ¿de qué otra manera se supone que voy a mostrar contenido como este? ¿Hay algún complemento que me facilite la vida (Premium? - He oído hablar de Types o Views, ¿es un buen complemento?).

Sin embargo, como he hecho el trabajo en esto hasta ahora, ¿cuál es la mejor manera de rellenar esas celdas? He intentado casi todo pero no funciona o afecta TODAS las tablas en la página (la página original donde estará que está aquí ).

He agregado el código de la tabla garble aquí es que quieres verlo ... 

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

1 respuesta

4

Creo que su pregunta es un ejemplo perfecto para el XY Problem . En WordPress no creas dicho menú en un editor de publicaciones. Utiliza un menú.

Una vez que empieces a pensar en tu problema desde este punto, todo es fácil. :)

Primero registre un menú de navegación personalizado para esta lista en functions.php de su 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' )
    );
}

Ahora obtienes una interfaz para el menú en wp-admin/nav-menus.php .

Entonces necesitas un caminante personalizado para mostrar más que solo el texto del enlace. Tienes suerte, este problema ha sido resuelto tambien . Necesita un marcado muy simple, así que ... 

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

Ahora tienes que agregar las páginas a ese menú. No se olvide de editar la descripción, o Forzar ese campo para ser visible :

Yahorajuntarlo.AbraelarchivoPHPdelaplantilladepáginadondedeseautilizarelmenúyagregue:

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

Perfecto.

En tu hoja de estilo puedes diseñar esta lista ahora sin afectar a ninguna otra tabla.

Código de muestra: 

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

Escribir esta respuesta tomó más tiempo que escribir el código. :)

    
respondido por el fuxia 03.01.2013 - 04:09

Lea otras preguntas en las etiquetas

Orden de categorías de productos de Woocommerce [cerrado] ¿Cuándo puede obtener la ID de la página actual e inicializar los ganchos justo después?