IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / Wordpress / WordPress:テーマをゼロから作ってみる(3)

WordPress:テーマをゼロから作ってみる(3)

2022/07/7 Wordpress

WordPress のテーマをゼロから作ってみます。3回目です。今回はメニューを作成します。1回目、2回目は下のリンクからご覧ください。

  • WordPress:テーマをゼロから作ってみる
  • メニューの登録
  • メニューの作成
  • メニュー項目を追加
  • メニューの表示

メニューの登録

すでに第1回目で functions.php にメニュー登録を済ませていますので管理画面を開けばメニューを作成することができますが、再度登録から整理してみます。

メニューを登録しませんと下の画像のように管理メニューの外観にメニュー項目が現れません。

functions.php に次のように追加します。

register_nav_menus( array(
    'primary-nav' => 'Primary Nav',
    'secondary-nav' => 'Secondary Nav') 
);

これでメニュー項目が現れ、2つのメニューが登録されました。「メニューの位置」に Primary Nav と Secondary Nav がみえています(スクショを忘れたようです。次の項目の画像を参照してください)。これからメニューを作成し、そのどちらかに登録することになります。

  • 関数リファレンス/register nav menus

メニューの作成

外観 -> メニュー と進みます。メニューの作成は項目をみれば直感的にわかると思います。

まず、「メニュー名」を入れ、「メニューの位置」を選択し、「メニューを保存」をクリックしますと下の画像のように「メニュー項目を追加」が選択可能になります。

新しいメニュー、この場合は Secondary Nav に登録するメニューを作成する場合は、一番上の「新しいメニューを作成しましょう」をクリックし上の作業と同じことをします。メニューの位置は Secondary Nav を選びます。

メニュー項目を追加

左の項目、固定ページ、投稿、カスタムリンク、カテゴリーからメニューにするものを選択し、「メニューに追加」をクリックするだけです。

メインメニューに各カテゴリーを追加しています。現在サンプルデータとして使っているのは映画のレビューサイトのデータですので記事が五十音順のカテゴリーに登録してあります。サンプルですので記事は30件ほどしか登録してありませんので五十音すべては揃っていない状態です。

各項目の位置はドラッグすれば変えられます。

というように各メニューを追加していけばいいのですが、今回は各カテゴリーに親アイテムを追加し各カテゴリーはその下の副項目とします。メニューとしては「カテゴリー」を表示し、マウスオーバー、またはクリックで各メニューを表示するようにします。

Secondary Nav には「ページトップへ戻る」と「ホーム」を追加します。

カスタムリンクを使い、「ページトップ」は URL にとりあえず 「#pagetop」としておき、後に body タグなどに id=”pagetop” を指定します。「ホーム」の URL は「/」としておきます。

メニューの表示

メニューはできましたが、これだけでは表示はされません。メニューを表示するには、wp_nav_menu() 関数を使い、

<?php wp_nav_menu( $args ); ?> 

などと好きな場所に挿入します。

今回は、Main Menu の primary Nav は index.php の header と main 要素の間に挿入します。

略

<header>
	<?php echo (is_home()) ? '<h1>' : '<p>'; ?>
        <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>
	<?php echo (is_home()) ? '</h1>' : '</p>'; ?>
    <p><?php bloginfo('description'); ?></p>
</header>
<nav>
	<?php wp_nav_menu( array( 'theme_location' => 'primary-nav' ) ); ?>
</nav>
<main>
	<nav>パンくずリスト</nav>

略

デフォルトで id や class がたくさん追加されます。パラメーターがたくさんありますので細かく設定することも可能です。

  • テンプレートタグ/wp nav menu

こうなります。後は CSS で整形するだけです。

Sub Menu はフッターの下に入れておきます。

略

</main>
<aside>サイドバー</aside>
<footer>フッター</footer>
<nav>
	<?php wp_nav_menu( array( 'theme_location' => 'secondary-nav' ) ); ?>
</nav>
</body>
</html>

こうなります。こちらも後は CSS の領域です。

これでメニューが出来ました。次はサイドバーです。

[Genki Techno] [2022 24℃凍結 クールバンド ネッククーラー アイスネックリング 大人 子供 首ひんやり 冷...

[Genki Techno] [2022 24℃凍結 クールバンド ネッククーラー アイスネックリング 大人 子供 首ひんやり 冷…

1,999円(03/22 05:05時点)
Amazon
WordPress:Aレコード変更でウェブだけ他サーバへ移転
WordPressのデータベースを入れ替える
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/03/21

WordPress:メール送信にGmailのSMTPを使う(プラグインなし)

2023/03/10

WordPress:サムネイル付き次の記事/前の記事

2023/02/28

Twitterシェアリンクはintent/tweetを使おう

2023/02/21

GoogleタグマネージャーとアナリティクスGA4

2023/02/8

WordPress:人気記事を直近の期間指定で表示する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips109
  • javascript98
  • Joomla!88
  • Windows68
  • Wordpress65
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • ConoHa WING6
  • Git入門6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Blankslate3
  • Docker3
  • Twitter2
  • GitHub2
  • Mactype2
  • はてなブクマ1
  • 映画1
  • youtube1
  • rails入門1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com