今日からwordpressのテーマを作ってみようと思う(3)header.php編

wordpress_テーマ作成

今回は「header.php」を作成

システムエンジニア(SE)かっきーです。

前回はindex.phpについて書いたのですが、header.phpを呼び出していない場合エラーになることがあるためheader.phpから作成をしてください。

そこで今回は「header.php」を作成していきます。

「header.php」の作成

まずheader.phpのファイルを作成します。

作成しAPサーバにアップロードすることにより、Wordpressの管理画面から編集が可能になります。
「外観」→「テーマの編集」で先ほど、作成した「header.php」が右のリストから選ぶことが出来るようになっているかと思います。

実際に書いていこう

ページを表示させるときに一番最初に読み込まれるのがこのheader.phpです。
そのため様々な読み込むタグやメタタグ等も記載していきます。
まず一番簡単なフォーマットが下記の記述になります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title><?php wp_title(''); ?></title>
</head>
<body>


</body>
</html>

まずはheadとtitleの間に下記の文字化けを防ぐためのMETA情報を記載します。

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo('charset'); ?>">

次にcssを読み込ませるために、下記コードを記載します。

<meta http-equiv="content-style-type" content="style/css">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url') ?>">

これでstyle.cssで書いた内容が反映されます。

また最近はRSS情報を自動検出した方がいいため下記のコードも記載しておきましょ

<link rel="alternate" type="application/rss+xml" title="RSS フィード" href="<?php bloginfo('rss2_url'); ?>">

そしてheadタグの一番最後に下記のコードを追加しましょ。
これが抜けているとプラグイン、悪ければテーマも動きません。
かなり重要です。

<?php wp_head(); ?>

こんな感じなればOKです

後はお好きなcssファイルを読み込ませたい、自分好みにメタタグを追加していってください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo('charset'); ?>">
<title><?php bloginfo('name'); ?></title>
<meta http-equiv="content-style-type" content="style/css">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url') ?>">
<link rel="alternate" type="application/rss+xml" title="RSS フィード" href="<?php bloginfo('rss2_url'); ?>">
<link rel="alternate" type="application/rss+xml" title="RSS フィード" href="<?php bloginfo('atom_url'); ?>">
<?php wp_head(); ?>
</head>
<body>

しかしここまでやってもタイトルが変わったぐらいで何も表示されません。
そのため次にクローバルメニューを表示させます。

グローバルメニューの表示

まず、Wordpress管理画面の「外観」→「メニュー」の機能を有効にさせます。
そのためfunctions.phpを編集します。
「functions.php」がまだ作成してない方はこのタイミングで作成しAPサーバにアップロードしておきましう。

下記コードを挿入することで、カスタムメニューの機能を有効化します。

 register_nav_menu('global', 'メインメニュー');

この関数でカスタムメニューが有効化します。
また引数として、下記2点を指定することが出来ます。

ロケーション名:例)global
ロケーションの説明:例)グローバルメニュー

有効化したらカスタムメニュー機能からメニューを設定しといてください。

これでメニューの設定が完了です。
しかし、まだヘッダーには表示されません。

次に表示させるために、「header.php」内にグローバルメニューを表示させるコードを記載してきます。

header.php内への記載

ここで「theme_location」の値は先ほど「functions.php」で指定したロケーション名を記載してください。

<nav>
    <?php wp_nav_menu( array(
            'theme_location'=>'global', 
            'container'     =>'', 
            'menu_class'    =>'',
    ?>
</nav>

「wp_nav_menu」関数は様々な項目が用意されているため
詳しくは公式ページをご覧ください。

cssでデザインを

無事表示させることが出来たら後はcssでデザインを整えるだけです。
style.cssに下記コードを試しに記載してみてください。

ul#main-nav {
	clear: both;
	margin: 0;
	padding: 0;
	height: 35px;
	background-color: #777;
	border-radius: 3px;
	overflow: hidden;
}
ul#main-nav li {
	list-style-type: none;
	float: left;
}
ul#main-nav li a {
	font-size: 1.1em;
	display: block;
	width: 150px;
	line-height: 35px;
	color: #fff;
	text-align: center;
	margin: 0;
	border-right: groove 1px #aaa;
	
}
ul#main-nav li a:hover {
	background-color: #555;
	color: #fff;
}

こんな感じで完成です。

記事の文章作成や、Wordpressサイトのカスタマイズで
お困りではありませんか?
ライティングレシピでは、文章コンサルとWordpressサイトのカスタマイズを承っております!

文章コンサル
●文章力をあげてスキルアップしたい
●SEOを意識した文章を書きたい
●ライター目線で文章が書けるようになりたい

Wordpressサイトのカスタマイズ
●憧れのサイトのようにしてみたい
●不具合を修正したい
●デザインを理想通りに変更したい

少しでも当てはまる項目があるなら、いつでもお気軽にご相談くださいませ。 ココナラ満足度100%で、提案力には自信があります!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です