WordPress Customize NOTE > WordPress オリジナルテーマの作り方 目次 > ヘッダー部分の作成 その1

WordPress オリジナルテーマを作る ヘッダー部分の作成 その1

スポンサード リンク

01

確認してみる

現在、ブログのアドレスにアクセスすると、真っ白で何もない状態です(画像)。
ダッシュボードの「外観 > テーマ編集」でテーマの編集をします。右メニューにある「メインインデックスのテンプレート(index.php)」をクリックしてください。ここで「index.php」の編集ができます。こちらも現在、何も書かれていない状態です。

ブログのトップページ。白紙

「メインインデックスのテンプレート(index.php)」をクリック

02

「header.php」「footer.php」を作成、アップロード

「header.php」というファイルを作成します。前回作ったテーマの「sample」フォルダに、「header.php」を作成してください。作成したら、「index.php」「style.css」同様にディレクトリにアップロードし、パーミッションを「755」または「777」にします。アップロード先は「wp親フォルダ > wp-contet > themes > sample」です。

アップロードした後、ダッシュボードの「外観 > テーマ編集」の右メニューをみてみると、画像のように「ヘッダー()」というファイルが表示されると思います。そのリンクをクリックしてください。クリックして表示されたページで「header.php」の編集ができます。こちらも現在、何も書かれていない状態です。

「ヘッダー()」をクリックで編集できる

同じように、「footer.php」というファイルも作成し、アップロードしてパーミッションを設定します。ダッシュボードの「外観 > テーマ編集」の右メニューに「フッター(footer.php)」というリンクが追加され、そこから編集できるようになります。

03

「header.php」「footer.php」にHTMLのベースを書く

ここから「header.php」を編集していきます。まずはHTMLの基本構造を作ります。以下は例です。(HTML, CSS の説明は省かせていただきます)

編集: 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> </title>
</head>
<body>

とりあえず、「header.php」に各々のHTMLのベースを書いて、「ファイルを更新」を押します。これで内容が保存されます。

次は「footer.php」を編集していきます。以下のように書き、「ファイルを更新」してください。

編集: footer.php
</body>
</html>

04

ブログのタイトルを表示

ここでついにWordPressテンプレートタグの登場です。テンプレートタグとは、WordPressのテーマ作成において必要不可欠なタグで、ひとつひとつにブログを作り上げる役割があります。それらを組み合わせて使うことで、より柔軟なテーマを作ることができます。

Pick up
<?php bloginfo('name'); ?>

上記のテンプレートタグは、ブログのタイトルを表示します。「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 bloginfo('name'); ?></title>
</head>
<body>

次に「index.php」を編集します。以下のように書き、「ファイルを更新」してください。

編集: index.php
<?php get_header(); ?>

<?php get_footer(); ?>
これでタイトルバーにブログの名前が表示されるようになります(画像)。

ブラウザのタイトルバーにブログ名表示!

05

文字化け防止のMETAタグ

「header.php」にさらに以下を追加します。

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

これは文字化けを防ぐためのMETA情報(文字コード)です(基本的にWordPressはUTF-8で統一されています)。<title>~</title>よりも先に記述するといいです。以下のように挿入して、「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>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo('charset'); ?>">
<title><?php bloginfo('name'); ?></title>
</head>
<body>

06

スタイルシートの反映準備

さらにスタイルシート(CSS)を反映できるようにします。「style.css」にはまだ具体的なことは何も書かれていませんが、これでこのあと更新したときにきちんと適用されます。

Pick up
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url') ?>">

ついでにスタイルシート言語の指定もしておきます。「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>
<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') ?>">

</head>
<body>

07

RSSフィードを自動検出

RSSフィードが自動検出されるようにします。ブログの定番機能なのであると便利ですね。

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

よくわからない方も、下のようにだけ「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>
<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'); ?>">
</head>
<body>

お好みで、Atomフィードもあるので利用される方は以下も挿入できます。よくわからない方は挿入しなくても問題ありません。

Pick up
<link rel="alternate" type="application/rss+xml" title="RSS フィード" href="<?php bloginfo('atom_url'); ?>">
編集: header.php
<!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'); ?>">
</head>
<body>

「ファイルを更新」を押せば保存されます。

08

仕上げ

最後に、以下も挿入して保存します。

Pick up
<?php wp_head(); ?>

このテンプレートタグを「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>
<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>

[PR] 《スマホ広告ならAMoAd》圧倒的な広告数、枠、サイズで高収益!

スポンサード リンク

Wordpress 関連書

Amazonより激選したWPオススメ関連書。

[PR] 冷え性・便秘にお悩みの方向け「ほっと熟成発酵しょうが」

WordPress オリジナルテーマの基礎作り TOP[WordPress Customize NOTE] ヘッダー部分の作成 その2
Wordpress無料テーマ配布中!

WordPress Customize NOTE > WordPress オリジナルテーマの作り方 目次 > ヘッダー部分の作成 その1



スポンサード リンク

ライセンスフリー 無料素材「ばじねこ茶店」