WordPressのテーマ(テンプレート)をカスタマイズする - WordPress Customize NOTE
スポンサード リンク
01
現在、ブログのアドレスにアクセスすると、真っ白で何もない状態です(画像)。
ダッシュボードの「外観 > テーマ編集」でテーマの編集をします。右メニューにある「メインインデックスのテンプレート(index.php)」をクリックしてください。ここで「index.php」の編集ができます。こちらも現在、何も書かれていない状態です。
02
「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」を編集していきます。まずはHTMLの基本構造を作ります。以下は例です。(HTML, CSS の説明は省かせていただきます)
<!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」を編集していきます。以下のように書き、「ファイルを更新」してください。
</body>
</html>
04
ここでついにWordPressテンプレートタグの登場です。テンプレートタグとは、WordPressのテーマ作成において必要不可欠なタグで、ひとつひとつにブログを作り上げる役割があります。それらを組み合わせて使うことで、より柔軟なテーマを作ることができます。
<?php bloginfo('name'); ?>
上記のテンプレートタグは、ブログのタイトルを表示します。「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」を編集します。以下のように書き、「ファイルを更新」してください。
<?php get_header(); ?>
<?php get_footer(); ?>
05
「header.php」にさらに以下を追加します。
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo('charset'); ?>">
これは文字化けを防ぐためのMETA情報(文字コード)です(基本的にWordPressはUTF-8で統一されています)。<title>~</title>よりも先に記述するといいです。以下のように挿入して、「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」にはまだ具体的なことは何も書かれていませんが、これでこのあと更新したときにきちんと適用されます。
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_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') ?>">
</head>
<body>
07
RSSフィードが自動検出されるようにします。ブログの定番機能なのであると便利ですね。
<link rel="alternate" type="application/rss+xml" title="RSS フィード" href="<?php bloginfo('rss2_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'); ?>">
</head>
<body>
お好みで、Atomフィードもあるので利用される方は以下も挿入できます。よくわからない方は挿入しなくても問題ありません。
<link rel="alternate" type="application/rss+xml" title="RSS フィード" href="<?php bloginfo('atom_url'); ?>">
<!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
最後に、以下も挿入して保存します。
<?php wp_head(); ?>
このテンプレートタグを「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》圧倒的な広告数、枠、サイズで高収益!
スポンサード リンク |
Amazonより激選したWPオススメ関連書。 |
![]() |
![]() |
![]() |