ブランクなWordPressテーマの作成

以前WordPressテーマの構成について簡単に説明しました。

今回はindex.php(と形だけ整えたstyle.css、function.php)を作成して、骨組みだけでほぼ空ですが一応認識動作するところまで持っていこうと思います。

 

index.php

実はテーマは最低限index.phpとstyle.cssとfunction.phpがあればテーマとして認識されます。そこでindex.phpを作成していきましょう。百聞は一見に如かず、ということでまずはとりあえず大枠を作ったソースを示します。

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>

<body id="body" <?php body_class(); ?>>
  <header id="header">
    <p>ヘッダーです。</p>
  </header>
  <main id="main">
    <article class="article">
      <p>記事です。</p>
    </article>
  </main>
  <aside id="sidebar">
    <p>サイドバーです。</p>
  </aside>
  <footer id="footer">
    <p>フッターです。</p>
  </footer>
<?php wp_footer(); ?>
</body>
</html>

 

htmlに慣れ親しんだ方はお決まりの構造を示していることが読み取れると思います。

<?php>に囲まれたところで関数を呼び出しているのにお気づきでしょうか。実はこれはWordPressのテンプレートタグと呼ばれるWordPressの機能を呼び出す関数です。この関数がWordPressにはたくさん用意されていて、テーマ作成するときはこのテンプレートタグと格闘し続けることになります。下のサイトはよくお世話になることでしょう。。

 

それでは上で示したソースに出てきたテンプレートタグについてそれぞれ説明を加えます。

<?php bloginfo( 'charset' ); ?>

WordPressのダッシュボードの設定→サイト言語と対応しています。日本語に設定していればjaが出力される筈です。

 

<?php wp_head(); ?>

ここはブラウザでソースを表示させてみるとわかるのですが書いた覚えのないコードがごちゃごちゃ吐き出されてるのが分かります。この関数でその部分が吐き出されているわけです。

cssファイル読み出しのコードはこれで吐き出すので呼び出しは必要なのですが、実は不要な記述が多いです。これは以下のサイトで整理する術が書かれているので試して見てください。

 

<?php body_class(); ?>

bodyに今表示しているページの種類をクラス名に付加してくれます。なぜこんなタグがあるかというと「home」「category」などページ毎に作ってくれるのでcssでデザインするときに「#body.home」「#body.category」などでセレクタで場合分けできて便利だからです。

 

<?php wp_footer(); ?>

wp_head()と同じようにfooterに必要な情報を吐き出します。

javascriptはbodyの閉じタグの前で呼び出すことが通例になっているのでこの関数で登録されたjavascriptを呼び出すという使い方をします。

 

表示の確認

作成したindex.phpに加え、ヘッダだけ書いたstyle.css(過去記事参照)と空のfunction.phpをフォルダに格納してthemesフォルダ下に置いてみましょう。

Local by Flywheelでテスト環境を構築していれば、フォルダを開いて以下のところにあります。

ここに置くとLocal by FlywheelのWordPressがテーマを認識します。Local by FlywheelのADMINボタンで開くWordPressログイン画面からログインして、すかさず有効化しましょう。

そしてサイトを開くと次のような表示になります。

 

記事を引き出してきて表示するわけでもないので寂しいですが、初めの一歩です。これからこのファイルを分割したり肉付けをしていきます。

今作ったものはブランクテーマ というのも恥ずかしいところまでしか作っていないのですが、世の中にはしっかりと最低限の機能を備えてデザインだけが簡素、またはデザインはユーザに委ねる形になっているブランクテーマ が色々あります。「_S」などが有名です。

私もこれを参考にテーマを作成したところがあります。必要最小限の機能とはいえ、デザイン以外の部分はちゃんと実装されているのでこのテーマから開発を行う人も多いと思います。ただ自分の実力不足なのか正直意図が分からないコードなどがあったりするので、自分が内実を完全に把握している自分なりのブランクテーマ を作るのも一つの道かなと思います。

 

まとめ

今回はテーマを認識できるように形だけ整えました。次の記事では今回作ったものから少しだけ肉付けして共通部分を分離する作業を行っていこうと思います。

return-top