WordPressのテーマ（テンプレート）をカスタマイズする - WordPress Customize NOTE
WordPressのテーマを自作・カスタマイズする方のための解説サイト。
初心者でもWordPressオリジナル・テンプレートが作れる！
WordPress Customize NOTE > WordPress オリジナルテーマの作り方 目次 > ヘッダー部分の作成 その1
WordPress オリジナルテーマを作る ヘッダー部分の作成 その1
スポンサード リンク
01
確認してみる
現在、ブログのアドレスにアクセスすると、真っ白で何もない状態です（画像）。
ダッシュボードの「外観 > テーマ編集」でテーマの編集をします。右メニューにある「メインインデックスのテンプレート(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》圧倒的な広告数、枠、サイズで高収益！
|
スポンサード リンク |
|
 |
![TOP[WordPress Customize NOTE]](https://wordpress.mofuh.com/img/c_top.gif "TOP[WordPress Customize NOTE]"){kind=small} |
 |
