web-dev-qa-db-fra.com

Créer un menu sous forme de tableau

Je viens de mettre le site en ligne il y a quelques semaines et y ajouter quelques éléments supplémentaires pour mon ami, mais il doit exister un moyen plus simple de présenter du contenu sur wordpress. J'ai même eu du mal avec ça et j'en ai codé la moitié (ou du moins en ajoutant des styles, en regardant le CSS, etc.)

Je regarde spécifiquement les services (à peu près la seule chose sur cette page de test) et la façon de les présenter. Ils sont dans des tables laides dont je pense même avoir oublié comment utiliser, mais comment suis-je censé présenter un contenu comme celui-ci? Existe-t-il un plugin qui me facilite la vie (Premium? - J'ai entendu parler de Types ou Views, est-ce un bon plugin?).

Cependant, étant donné que j'ai déjà travaillé sur cette question, quel est le meilleur moyen d'obtenir un rembourrage dans ces cellules? J'ai presque tout essayé, mais cela ne fonctionne pas ou cela affecte TOUTES les tables de la page (la page d'origine où ce sera qui est ici ).

J'ai ajouté le code de la table garble, c'est que vous voulez le regarder ..

<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>
menusformattingtable
4
kia4567

Je pense que votre question est un exemple parfait pour le Problème XY . Dans WordPress, vous ne créez pas un tel menu dans un éditeur de publication. Vous utilisez un menu.

Une fois que vous commencez à penser à votre problème à partir de ce point, tout est facile. :)

Enregistrez d’abord un menu de navigation personnalisé pour cette liste dans le functions.php de votre thème:

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

Maintenant, vous obtenez une interface pour le menu dans wp-admin/nav-menus.php.

Ensuite, vous avez besoin d’un programme personnalisé pour afficher plus que le texte du lien. Vous avez de la chance, ce problème a été résolu aussi . Vous avez besoin d'un balisage très simple, alors…

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

Maintenant, vous devez ajouter les pages à ce menu. N'oubliez pas de modifier la description, ou forcez ce champ à être visible :

enter image description here

Et maintenant, restez ensemble. Ouvrez le fichier modèle de page PHP où vous souhaitez utiliser le menu et ajoutez:

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

Parfait.

Dans votre feuille de style, vous pouvez maintenant styler cette liste sans affecter aucun autre tableau.

Exemple de 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;
}

Résultat:

enter image description here

L'écriture de cette réponse a pris plus de temps que l'écriture du code. :)

4
fuxia