Cum să creezi un meniu dropdown precum cel din tema Twenty Eleven?

Iată un fragment rapid pe care îl folosesc pentru a începe proiectele mele:

Primul pas este să adăugați niște cod în fișierul functions.php. Acesta va activa Navigația Personalizată WordPress. Controalele vor fi în Aspect>Meniuri după ce terminați. Cod pentru functions.php:

<?php
add_action( 'init', 'register_my_menus' );
function register_my_menus() {
register_nav_menus(
array(
    'main' => __( 'main' ),
    'secondary-menu' => __( 'Secondary Menu' ),
    ));
}
?>

Codul de mai sus permite două meniuri. Vă voi arăta cum să adăugați unul, iar dacă doriți, puteți folosi aceeași metodă pentru a adăuga un al doilea oriunde doriți.

Următorul pas este să adăugați codul în fișierul header.php. Observați că primul meniu din matrice este etichetat ca main. Acesta este ceea ce vom folosi pentru a plasa meniul în header.php.

Iată codul pentru header.php:

<div id="menu" class="menu-center">
    <?php wp_nav_menu( array( 'theme_location' => 'main' ) ); ?>
</div>

Acesta ar trebui plasat în interiorul div-ului <div id="header"> (nu este obligatoriu, dar este locul cel mai comun pentru acest cod).

Ultimul pas este să adăugați niște CSS pentru a stiliza meniul și a-l face efectiv "drop-down", în loc de o grămadă de linkuri pe mai multe niveluri.

Codul CSS:

ul.menu,ul.menu ul,ul.menu li,ul.menu a {
display:block;
margin:0;
padding:0;
}

ul.menu ul {
display:none;
}
ul.menu li:hover {
z-index:999;
}
ul.menu li:hover > ul {
display:block;
position:absolute;
float:left;
}
ul.menu li {
float:left;
width:auto;
}
ul.menu ul li {
float:left;
width:190px;
}
ul.menu ul li ul {
float:left;
width:190px;
position:absolute;
left:100%;
top:0;
}
ul.menu-ver,ul.menu-ver ul {
width:14em;
}

div.menu-center ul.menu {
float:left;
position:relative;
left:50%;
}

div.menu-center ul.menu li {
position:relative;
left:-50%;
}

div.menu-center ul.menu li li {
left:auto;
}


ul.menu li a {
border-bottom:1px outset ghostwhite;
}

ul.menu li a {
padding:8px 12px 10px;
}

ul.menu li a:link,ul.menu li a:hover,ul.menu li a:visited,ul.menu li a:active {
text-decoration:none;
border-bottom:1px outset black;
}


ul.menu li {
background: #45484d;
background: -moz-linear-gradient(top, #45484d 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%);
background: -o-linear-gradient(top, #45484d 0%,#000000 100%);
background: -ms-linear-gradient(top, #45484d 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );
background: linear-gradient(top, #45484d 0%,#000000 100%);
}
.menu-center {
float:right;
margin-right:95px;
}

ul.menu li a{
color:ghostwhite;
}
ul.menu li a:hover {
background: #efefef;
background: -moz-linear-gradient(top, #efefef 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #efefef 0%,#ffffff 100%);
background: -o-linear-gradient(top, #efefef 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #efefef 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#ffffff',GradientType=0 );
background: linear-gradient(top, #efefef 0%,#ffffff 100%);
color:black;
}

Puteți experimenta cu CSS-ul pentru a-l ajusta după preferințe, dar acesta ar trebui să vă ofere un punct de plecare.

Editat pentru compatibilitate cu WordPress 3.3:

După actualizarea la cea mai recentă versiune de WordPress (v3.3), se pare că meniurile nu vor funcționa dacă tema dumneavoastră folosește hook-ul after_setup_theme și utilizați hook-ul 'init' pentru a înregistra meniurile.

Soluția:

Pentru acest exemplu, voi folosi numele yourtheme ca function_name.

Exemplu de fișier functions.php:

<?php
if ( ! isset( $content_width ) )
$content_width = 610;
add_action( 'after_setup_theme', 'yourtheme_setup' );
if ( ! function_exists( 'yourtheme_setup' ) ):
function yourtheme_setup() {
  // Adaugă stiluri pentru editorul vizual (editor-style.css)
  add_editor_style();
  add_theme_support( 'automatic-feed-links' );
  //Înregistrează Meniuri Personalizate
    register_nav_menus(
      array(
        'main' => 'main',
        'secondary' => 'secondary',
        )
      );  
  // Adaugă Post Thumbs și Dimensiuni Personalizate pentru Imagini
  add_theme_support( 'post-thumbnails', array( 'post' ) );
  // Adaugă suport pentru diverse formate de postare
  add_theme_support( 'post-formats', array( 'aside', 'link', 'gallery', 'status', 'quote', 'image' ));
  }
endif; // yourtheme_setup
/**
 * Începe restul codului din fișierul functions.php...
 * 
 */
?>

Uită-te la fișierul functions.php din tema TwentyTen pentru a vedea alte funcții care pot fi incluse în hook-ul after_theme_setup.