Где определяется расположение темы для главного меню в шаблоне WordPress?

Question

Где определяется расположение темы для главного меню в шаблоне WordPress?

18 янв. 2014 г., 11:14:15

Просмотры: 26.9K

Голосов: 1

Я новичок в WordPress (пришел из Joomla) и у меня есть следующий вопрос касательно расположения темы для главного меню.

Например, используя предустановленную тему Twenty Twelve, если в админке я перехожу в: Внешний вид ---> Меню ---> Управление расположением, я могу назначить мое main-menu только определенному расположению темы под названием Primary Menu.

Я думаю, что эта область находится в файле header.php темы Twenty Twelve (поскольку мое главное меню отображается в шапке страницы), но я не могу найти его, вот содержимое header.php:

<?php
/**
 * Шаблон заголовка для нашей темы
 *
 * Отображает весь раздел <head> и все до <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Загружает JavaScript-файл HTML5 для поддержки элементов HTML5 в старых версиях IE ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
    <header id="masthead" class="site-header" role="banner">
        <hgroup>
            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
        </hgroup>

        <nav id="site-navigation" class="main-navigation" role="navigation">
            <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
            <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
        </nav><!-- #site-navigation -->

        <?php if ( get_header_image() ) : ?>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
        <?php endif; ?>
    </header><!-- #masthead -->

    <div id="main" class="wrapper">

Где находится это Primary Menu или как оно определяется в теме?

Спасибо

Андреа

AndreaNobili

878

разработка тем меню темы css html

Комментарии

Пример добавления нового пользовательского расположения меню в вашей теме: http://goo.gl/TbxqDy

Suresh Kamrushi

30 сент. 2015 г. 08:25:22

Все ответы на вопрос

Комментарии

Идеальное объяснение !!!

AndreaNobili

18 янв. 2014 г. 13:01:37

Вы также можете добавить дополнительное меню через файл functions.php дочерней темы, не изменяя файлы родительской темы.

add_action( 'wp_head', 'add_extra_nav' ); 

function add_extra_nav() {

wp_nav_menu( array( 

'theme_location' => 'extra-menu', 

'container_class' => 'nav-menu' ) );

}

Просто измените класс контейнера на тот, который использует ваша тема, и оберните функцию в существующий класс, который ваша тема использует для основного или дополнительного меню, чтобы вам не пришлось добавлять CSS. Обычно это можно найти в файле header.php.

Замените хук wp_head на любой другой хук WordPress или специфичный для темы.

Brad Dalton

6.97K

21 янв. 2014 г. 17:39:39

Steve 1.75K · Accepted Answer · 2014-01-18T12:36:16Z

Локации меню определяются в файле functions.php

Вы можете прочитать кодекс для получения дополнительной информации о том, как определить локации меню в functions.php

Регистрация меню

Сначала в functions.php вашей темы необходимо написать функцию для регистрации названий ваших меню. (Так они будут отображаться в админке Внешний вид -> Меню). Например, это меню будет отображаться в блоке "Локации темы" как "Header Menu".

function register_my_menu() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' );

А этот код создаст два варианта меню - header menu и extra menu:

function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' );

Отображение меню в теме

После этого ваша тема будет почти готова. Последний шаг подготовки - указать теме, где должны отображаться меню. Это делается в соответствующем файле темы. Например, мы можем разместить header menu в header.php. Откройте этот файл в редакторе темы и определите, куда вы хотите поместить меню. Для каждого места расположения меню используется код wp_nav_menu. Добавьте этот код:

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

Главное - убедиться, что theme_location указывает на имя, которое вы дали своему меню в коде functions.php выше. (Обратите внимание, что здесь используется header-menu, а не Header Menu без дефиса. header-menu - это имя, которое понимает код, а Header Menu - удобочитаемая версия, которую вы видите в админке.)

Чтобы завершить код, вы можете разместить extra menu в другом месте. Возможно, вам нужно меню на одной из страниц, и вы даже можете оформить его с помощью DIV определенного класса:

wp_nav_menu( array( 'theme_location' => 'extra-menu', 'container_class' => 'my_extra_menu_class' ) );

Разместив этот код в шаблоне страницы, вы не только увидите меню в указанном месте, но и сможете стилизовать его через класс my_extra_menu_class в CSS.