web-dev-qa-db-fra.com

Création d'une zone de menu/widget personnalisé

Je cherche à créer une zone/menu/widget similaire au site suivant:

http://www.Microsoft.com/en-gb/default.aspx

veuillez consulter les sections sous téléchargements, sécurité, support, à propos de

est-ce aussi considéré comme un menu de pied de page? Le menu de bas de page de mon thème est juste un menu standard dans le coin inférieur droit du thème, comme le site exemple, mais je souhaite créer un espace similaire juste au-dessus.

merci

custom-fieldmenuswidgets
1
f11

Je suppose que vous utilisez le thème Twenty Eleven ou un autre thème prenant en charge les thèmes enfants. Si vous utilisez un thème personnalisé, vous pouvez simplement modifier le fichier Functions.php existant et y ajouter les fonctionnalités supplémentaires, puis modifier le fichier Style.css existant. Toutefois, si votre situation est différente, merci de poster à nouveau, et je mettrai à jour pour travailler avec n'importe quel thème que vous utilisez.

Depuis décembre 2012, le pied de page de ce site est un exemple: http://dev.artbeforehygiene.com/

  1. Créez un thème enfant dans le répertoire de votre/wp-content/themes/appelétwenteleven-child(ou ce que vous souhaitez appeler, je vais utiliser ce nom pour les besoins de cette procédure)
  2. Créez deux fichiers: functions.php et un Style.css dans ce répertoire.

  3. Dans Style.css, ajoutez le code suivant:

    /*
Theme Name: Twentyeleven Child: Triple Footer Addition
Description: Child theme for the twentyeleven theme with footers 
that look like http://www.Microsoft.com/en-gb/default.aspx
Author: [Your Name Here], Will Lanni
Template: twentyeleven
*/

@import url("../twentyeleven/style.css");
/* Style Twentyeleven Footer to resemble Microsoft site */
#colophon {
    background: #eee;
}
#site-generator,
#supplementary {
    background: transparent;
}
#supplementary h3 {
    font-family: "wf_SegoeUI","Tahoma","Verdana","Arial","sans-serif";
    font-size: 1.2em;
    font-weight: normal;
    line-height: 1.25em;
    margin-bottom: 0.65em;
    color: #1a1a1a;
    text-transform: none;
}
#supplementary ul.menu {
    list-style-type: none;
    margin: 0 0 1.5em;
    padding: 0.25em 0 0.5em;
}
#supplementary ul.menu li {
    padding-bottom: .7em;
    font-size: .9em;
}

#supplementary ul.menu li a {
    font-weight: normal;
    color: #1570A6;
    transition: color 0.1s linear 0s;
}
#supplementary ul.menu li a:hover {
    color: #083947;
}

  4. Dans functions.php, ajoutez le code suivant (cela créera un ensemble de menus de navigation supplémentaires que vous pourrez contrôler dans les menus WP Tableau de bord> Apparence>). Twentyeleven est déjà livré avec trois zones de widget de pied de page. Toutefois, si votre thème en contient un, vous pouvez ajouter des zones de pied de page supplémentaires en supprimant la mise en commentaire du code de bas de page ajouté ci-dessous.

    <?php

// register additional custom menu slots
function childtheme_register_menus() {
    if ( function_exists( 'register_nav_menu' )) {
        register_nav_menu( 'footer-1st-menu', '1st Additional Footer Menu' );
        register_nav_menu( 'footer-2nd-menu', '2nd Additional Footer Menu' );
        register_nav_menu( 'footer-3rd-menu', '3rd Additional Footer Menu' );
        register_nav_menu( 'footer-4th-menu', '4th Additional Footer Menu' );
        register_nav_menu( 'footer-5th-menu', '5th Additional Footer Menu' );
    }
}
add_action('init', 'childtheme_register_menus');

/*
Create additional footer areas ONLY IF THEY DON'T EXIST!!!
Just uncomment out the add_action... but...
If you're using twentyeleven, these are already there, just leave this alone!
*/
//add_action( 'widgets_init', 'childtheme_widgets_init' );
function childtheme_widgets_init() {
    register_sidebar( array(
        'name' => __( 'Footer Area One', 'twentyeleven' ),
        'id' => 'sidebar-3',
        'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => "</aside>",
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );

    register_sidebar( array(
        'name' => __( 'Footer Area Two', 'twentyeleven' ),
        'id' => 'sidebar-4',
        'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => "</aside>",
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );

    register_sidebar( array(
        'name' => __( 'Footer Area Three', 'twentyeleven' ),
        'id' => 'sidebar-5',
        'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => "</aside>",
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );
}

?>

  5. Créez vos menus de pied de page dans Apparence> Menus. Vous créerez un seul menu pour chacun de ces sous-menus dans le pied de page souhaité. Assurez-vous d'économiser!

  6. Ajoutez un seul de ces menus à l’un des emplacements déroulants à gauche. Sauvegarder!
  7. Allez à Apparence> Widgets.
  8. Faites glisser un widget Menu personnalisé dans l'un des emplacements de pied de page, attribuez-lui un nom et sélectionnez le menu de navigation que vous souhaitez voir apparaître.
  9. Répétez l'opération pour les autres menus que vous souhaitez ajouter.
  10. Enregistrez et consultez votre site!
2
Will Lanni

Pour votre information, ce que vous devriez rechercher/googler est généralement appelé "menu méga".

Il y a plusieurs plugins sur CodeCanyon pour aider avec cela, je n'en connais pas un sur wordpress.org pour cela.

N'approuvant aucune solution, mais à titre d'exemple: http://codecanyon.net/item/mega-menu-reloaded/1593152

Vous pouvez également consulter ce message sur WPMU http://wpmu.org/create-highly-customized-and-beautiful-mega-menus-for-wordpress/

0
jb510