WordPressのヘッダーの実装方法について

Question

WordPress、PHP、JavaScriptの初心者です。

下記のサイトのグローバルメニューのような巨大なヘッダー？はどの様に実装しているのでしょうか？
https://www.waseda-h.ed.jp/

この様なものを作りたいのですが、何から着手すれば良いか分かりません。
何かヒントを頂けると幸いです。宜しくお願いします。

Answer 1

まずWordPressは一度置いておいて、
HTMLとCSSだけで希望通りのデザインのメニューを作ってみてください。

<header id="header">
	<h1 id="site_title">
		<a href="http://example.com/">サイトのタイトル</a>
	</h1>
	<nav id="global_menu">
		<ul>
			<li>メニュー1</li>
			<li>メニュー2</li>
			<li>メニュー3</li>
			<li>メニュー4</li>
		</ul>
	</nav>
</header>

それが完成したら、サイトタイトルやカスタムメニューなど動的に出力すべき部分をPHPのコードに変更していきます。

<header id="header">
	<h1 id="site_title">
		<a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>
	</h1>
	<nav id="global_menu">
		<?php wp_nav_menu(); ?>
	</nav>
</header>

参考サイトのメニューがどのような構造になっているのかは開発者ツールなどでソースコードを追った方が理解できるのではないでしょうか。

Comments

[ud_fibonacci]

返信が大変遅くなってしまい申し訳ありません。
ご回答とサンプルコード、ありがとうございます。
HTLMからPHP変換、とても分かりやすかったです。

まだ分からないことが多いですが、勉強していきます。
この度は本当にありがとうございました。