web-dev-qa-db-ja.com

WordPressテンプレートのメインメニューのテーマの場所はどこで定義されていますか？

私はWordPress（私はJoomlaから来ました）でかなり新しいです、そして私はメインメニューのTheme Locationに関連して次の疑問を持っています。

例えば、プリインストールされているTwenty Twelveテーマを使用して、バックエンドの場合は、次のように進みます。外観--->メニュー--->場所の管理自分のメインメニューのみ割り当て可能プライマリメニューという名前の特定のテーマ位置に。

この領域はTwenty Twelveテーマのheader.phpファイルに入っていると思います（私のメインメニューはページのヘッダーに表示されているので）、これはです。 header.php content：

<?php
/**
 * The Header template for our theme
 *
 * Displays all of the <head> section and everything up till <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 // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[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はどこにありますか、それともテーマの中でどのように定義されていますか？

TNX

アンドレア

theme-developmentmenusthemescsshtml
1
AndreaNobili

メニューの場所はfunctions.phpで定義されています

Functions.phpでメニュー位置を定義する方法についての詳細は コーデックス を読むことができます。

メニューの登録

まず、あなたのテーマのfunctions.phpに、あなたはあなたのメニューの名前を登録するための関数を書く必要があります。例として、このメニューは「テーマの場所」ボックスに「ヘッダーメニュー」として表示されます。

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

そしてこれは2つのメニューオプション、ヘッダーメニューと追加メニューを表示させるでしょう - 

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

テーマの表示メニュー

それが終わったら、あなたのテーマはほぼ準備ができているでしょう。最後の準備ステップは、メニューを表示する場所をテーマに伝えることです。これは関連するテーマファイルで行います。したがって、たとえば、ヘッダーメニューをheader.phpに含めることができます。そのため、テーマエディタでそのファイルを開き、メニューを配置する場所を決めます。ここで使用するコードはwp_nav_menuです。これは各メニュー位置に1回必要です。だから、このコードを追加します - 

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

確認する必要があるのは、theme_locationが上記のfunctions.phpコードでメニューに指定した名前を指すことだけです。 （ハイフンなしのHeader Menuではなく、ここで使用されているheader-menuであることに注意してください。header-menuはコードが理解できる名前で、Header Menuは管理者ページに表示される人間が判読できるバージョンです。）

コードを完成させるために、追加メニューを他の場所に置くことができます。たぶんあなたは、例えばあなたのページの1つにメニューが欲しいと思うかもしれません、そしてあなたはそれが特定のクラスのDIVを含むことで少しちょっとジャズアップされることさえ望むかもしれません - 

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

それであなたはあなたのページテンプレートに上記を入れるでしょう、そしてあなたがそれを置くところでメニューが現れるだけではなく、それはあなたがCSSでそれを扱うことができるようにmy_extra_menu_classとしてスタイルを作られるでしょう。

7
Steve

親テーマファイルを変更せずに、子の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またはテーマ固有のフックに変更します。

0
Brad Dalton