Nobutake Dogen.com

第5話「メニューを作る」

メニューを作ります。
メニューを作るということは、ページを作ります。
とりあえず「About」というページを作りましょう。
「我輩は○○である。」とか入れるようなページですね。それがあるだけで、ホームページっぽくなりますよね。

WordPressでは「固定ページ」というもので作るのが一般的です。

WordPressでページの作成

まず、記事の時と同じように、WordPressのダッシュボード内でページ作っておきましょう。
WordPressのダッシュボードで「固定ページ>新規追加」からサンプルで「About」というページを作っておきましょう。中身はなんでもいいです。

そのあと、「外観>カスタマイズ>メニュー」からメニューも作ってください。
ただ、今そのメニューをどこに設置するかという文章を書いてないので、反映はされていません。
サイトの確認しても何も変わってないですよ。

header.php

キャッチコピーの下にメニューを設置しようかと思います。

「header.php」を開き

<?php wp_nav_menu(); ?>

を、一番下に追加してください。
下記のようになります。念のため。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<meta name="description" content="ディスクリプション">
	<meta name="keywords" content="キーワード">
	<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen">
	<title>タイトル</title>
</head>

<body>
	<div id="header">
		<h1>
			<?php bloginfo('name'); ?>
			<!-- サイトのタイトル -->
		</h1>
		<p class="catch_copy">
			<?php bloginfo('description'); ?>
			<!-- キャッチフレーズ -->
		</p>
	</div>
	<?php wp_nav_menu(); ?>

するとこれだけで、

となりますよ。

これをcssで整えてみましょう。

style.css

ソースを見てみるとメニューのulリストに「menu」というクラスが勝手についてましたので、それを使ってみましょう。
「style.css」に

ul.menu {
	background: #111;
	list-style: none;
	max-width: 960px;
	margin: 16px auto;
	display: flex;
	flex-flow: row;
	justify-content: flex-start;
}
ul.menu li a {
	padding: 8px 24px;
	display: block;
	color: #fff;
}

ul.menu li a:hover {
	background: #0084d0;
}

と追加してみたところ、

と、なりました!
せっかくメニュー作っておいてボタン2つって!という感じですが、とりあえず目標達成ですよね。ね。

次はどうしようかしらん。

目次

スポンサーリンク

Web Design | 2017年1月24日