WordPressオリジナルテーマindex.phpの最低限

前回は最低限のファイルについて説明しました。

最低限というのはあれだけあればテーマとしては受け付けてもらえるということなのですが、実際にオリジナルテーマとして稼働させるには、あの内容ではもちろんどうにもなりません。

なので今回はもっとテーマについて細かくお話をしていきたいと思います。

基本的にhtml・cssについては理解している方を対象としているので、書いてあることがわからない場合はhtml・cssといったサイトコーディングの基礎を学ぶ必要があると考えていただければと思います。

前回は

  • index.php (ベースのテンプレート)
  • style.css ( テーマの情報とスタイルシート)

この二つのファイルのうちstyle.cssの最低限について記載をしました。

今回はindex.phpの方の最低限について説明していきたいと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイトル</title>
</head>
<body>
<h1>サイトのタイトル</h1>
<p>サイトの本文</p>
</body>
</html>

コーディングがわかる方には難しくはないと思いますがhtmlの基礎って感じの内容ですね。

これをまず.phpに変更して、必要な記述を追加します。

<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイトル</title>

<?php wp_head(); ?>
</head>
<body>
<h1>サイトのタイトル</h1>
<p>サイトの本文</p>

<?php wp_footer(); ?>
</body>
</html>

</head>の直前に<?php wp_head(); ?>が追加されて、</body>の直前に<?php wp_footer(); ?>が追加されました。

これが基本になります。

もし、すでにindex.htmlを作っている場合は一枚で構成されているページでしたら単純に拡張子を.htmlから.phpに変更いただいて、上記内容を付け加えたらそのままWordPressで使用可能な状態になります。

そんなに難しくはないですね!

<?php wp_head(); ?>と<?php wp_footer(); ?>を入れ忘れると、プラグインが動かない!!とかいろんなエラーが起きたり表示がおかしくなったりしますので絶対に忘れないで!

あと、必須ではないですが、便利になる機能として

<body <?php body_class(); ?>>

っていうのがあります。これを入れておくと出来上がったテーマの各テンプレートごとにそのページに関連するクラスを割り当ててくれるので、個別にスタイル調整したりするのに役立ちます。

ぜひ<body>に追加してみてください。

ここまではテーマ作りの最低限についての説明でしたが、実用的に使うためには他にも説明しておいた方がいいだろうなーって事が色々あるので、必要そうなところからまとめてお話ししていけたらなぁって思います。