Twentytenテーマを使用するときに複数のメニューを作成しますか？

Question

Twentytenテーマで複数のメニューを取得する方法は？

Answer 1

がある WordPressの新しいメニューシステムを使用して追加のメニューを作成するためのいくつかのステップ TwentytenテーマまたはWordPressテーマで （これらの手順のいくつかは、故障して実行できます）. 。さらに、直接修正する代わりに、Twentytenに基づいて子供のテーマを作成することを強くお勧めします。

1. 子供のテーマを作成します Twenty Tenテーマに基づいています。

2. テーマの場所を登録します あなたのテーマで functions.php ファイル。

3. 新しいメニューを作成します あなたのウェブサイトの管理コンソールを使用します。

4. 新しいメニューとテーマの場所を関連付けます 管理コンソールを使用します。

5. 電話 wp_nav_menu() テンプレートファイル メニューを表示したいテーマの。

6. メニューをスタイルします それがあなたのサイトと視覚的に統合されるように。

それで、それを続けましょう！

1.子供のテーマを作成します

作成 子供のテーマは非常に簡単です そして、あなたの変更を失うことを心配することなく、新しいバージョンが出てきた場合、Twentytenをアップグレードできるという利点を提供します。

はい、あなたの変更が新しいバージョンと互換性がない可能性はわずかです。20テンファイルのコピーを作成して子供のテーマのためにそれらを変更すると、それらの変更を再適用する必要がありますが、それはあなたの変更を失うよりもはるかに良いですテーマがアップグレードされます。

しかし、私が子供のテーマを提案した別の質問から私の答えを複製するのではなく、私はそこにあなたを指摘するだけです：

• WordPressテーマを変更せずにカスタマイズしますか？ （子のテーマを使用する）

この答えの残りの例については、子供のテーマと呼びます 「ヒマンシュ」.

2.テーマの場所を登録します

テーマの場所を登録します を使用して非常に簡単です register_nav_menus() 働き （はい、彼らがその機能を呼んでいたら本当に良かったでしょう register_nav_menu_locations(), 、しかし、私は脱線します...）

作成します 「フッター」 この例のメニュー。

私の例では、私が参照する方法に注目してください 'primary' コメントで;私はそれを行うので、デフォルトのNAVメニューの場所に名前が付けられているものと、自分で定義する必要がないことがわかります。また、私が以前に行ったことに注意してください __() 翻訳関数と翻訳ドメインとして子テーマの名前を指定しました。

あなたが子供のテーマを使用している場合、あなたは functions.php この機能を収容するためにテーマにファイルしますが、テーマを変更している場合は見つけただけです functions.php そして、最後に追加します：

register_nav_menus(array(
  //'primary' => __('Primary Menu Area','himanshu'), ==> Primary defined by default
  'footer'  => __('Footer Menu Area','himanshu'),
));

自分のテーマのコードを書いていて、それを他の人に配布したり、翻訳を心配する必要がない場合は、これを行うことができます。

register_nav_menus(array('footer'=>'Footer Menu Area'));

3.新しいメニューを作成します

次に、に移動して、フッターメニューを作成しましょう メニュー のオプション 外観 管理コンソールのメニュー。クリック "+" メニューを追加するには、メニューの名前を入力して、クリックします 「メニューの作成」:

_{（ソース： mikeschinkel.com)}

ノート メニューの名前と同じようにメニューに名前を付けることがよくありますが、それは必須ではありません。 WordPressはメニューを扱い、そのメニューの場所はそれらを別々のエンティティとして扱います.

必ず メニューにいくつかのオプションを追加します または、ほとんど役に立たないでしょう。管理コンソールを使用して必要なオプションを選択し、メニューに追加してから保存します （私のスクリーンショットでは、メニューオプションの「ページ」の選択のみを表示しますが、WordPressが提供するメニューオプションの種類をミックスして一致させることができます）:

_{（ソース： mikeschinkel.com)}

4.新しいメニューとテーマの場所を関連付けます

新しいメニューを目的のテーマの場所に関連付けるのは簡単です。WordPressの管理コンソールを使用するだけです。

_{（ソース： mikeschinkel.com)}

5.呼び出します wp_nav_menu() テンプレートファイル

次に、コードに戻る必要があります。のコピーを作りました footer.php Twentytenテーマから、それをコピーしました 「ヒマンシュ」 テーマディレクトリ。これが最初の18行がどのように見えるかです：

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the id=main div and all content
 * after.  Calls sidebar-footer.php for bottom widgets.
 *
 * @package WordPress
 * @subpackage Himanshu (based on Twenty Ten)
 * @since Twenty Ten 1.0
 */
?>
  </div><!-- #main -->

  <div id="footer" role="contentinfo">
    <div id="colophon">

通話を挿入しました wp_nav_menu() 直後にラッパーHTMLとともに <div id="colophon"> 18行目であるため、13行目から24行目が次のようになりました。

</div><!-- #main -->

<div id="footer" role="contentinfo">
  <div id="colophon">
    <div id="footernav" role="navigation">
      <?php
        wp_nav_menu(array(
          'container_class' => 'menu-footer',
          'theme_location' => 'footer'
        ));
      ?>
    </div>

ノート ラッパーに電話することにしました footernav そして内側の容器 menu-footer そして、私はTwentytenのリードとセットに従いました role="navigation". 。でも、 コードの最も重要な側面はです 'theme_location' => 'footer' ステップ＃2の名前付きテーマの場所に一致します。

これらのすべての手順では、次のように見えるフッターメニューが提供されます。

_{（ソース： mikeschinkel.com)}

6.メニューをスタイルします

最後に、テーマにCSSを追加する必要があります style.css ファイルと、そう見えるフッターメニューを取得できます。

_{（ソース： mikeschinkel.com)}

スタイリングは非常に基本的です だから私は私のように私のひどいデザインスキルを抱かないでください いいえ デザイナーでも、私が1人であると脅したことはありません！ CSSコードにコメントを含め、各セレクターとCSSプロパティを使用した理由を説明しました。

#colophon {
  padding-top:6px;        /* Move menu closer to thick black line (TwentyTen has 18px) */
}
#footernav {              /* Use same font-family as TwentyTen does for menus */
  font-family: 'Helvetica Neue', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
  font-size:1.1em;        /* Make a little bigger than default */
  padding-bottom:6px;     /* Put some breathing room under the menu */
}
#footernav .menu-footer {
  text-align:center;      /* Needed to center the menu */
}
#footernav ul {
  margin:0 auto;          /* Also needed to center the menu */
  width:auto;             /* Make menu only as wide as needs to be */
  display:inline;         /* Also needed to keep width to a minumum */
}
#footernav li {
  display:inline;         /* Make menu horizontal instead of veritcal */
}
#footernav a {
  text-decoration:none;   /* Remove underlines from links */
  background-color:#ddd;  /* Create a light grey background for each option */
  color:black;            /* Make the items easy to see with text in black */
  padding:0.25em 0.5em;   /* Add space around the items for the background to display*/
  margin:0 0.5em;         /* Add space between the items */
}
#footernav a:hover {
  background-color:black; /* Surround the menu item under the mouse pointer in black */
  color:white;            /* Make the text for the same menu item be white */
}

それについてです！これは、デザイナーが使用するためのツールであることに注意してください。 テーマ 視点;電話するだけです wp_nav_menu() メニューとメニューの場所を参照する関数で、あなたは行くのがいいです！