【第一回】WordPressのテーマを自作する方法


明けましておめでとうございます!

本年最初の記事は、制作会社で約10年間WordPressテーマを作り続けた私が、自作テーマのコツと注意点、基礎知識などをご紹介いたします。

長くなりそうなので、少し記事を分けながら更新していきたいと思います。

前提として

WordPressはデータベースとPHPファイルで構成されていますので、多少で構いませんので、phpの知識が必要となります。

多少とはどの程度かというと、以下のphp関数を理解して使えれば大丈夫かと思います。

  • var_dump()
  • foreach()
  • while()
  • if()

これらの関数はWordPressテーマを自作する際、絶対に必要となりますので、不安な方は少し勉強してから望むと良いでしょう。

逆に言えば、これらの関数だけでもWordPressテーマは作れてしまいます。

自作テーマは、プラグインの使用を最小限にする事ができ、正しく設計すればセキュリティリスクを抑える事が出来ます

また、必要最低限な機能のみを実装することにより、表示速度も一般的にダウンロードできるテーマより高速なことが特徴です。

プラグインの脆弱性についてはこちらをご参考ください

では次に、WordPressテーマを自作する流れをご紹介します。

全体の流れ

  1. ワイヤーフレーム作成
  2. デザイン
  3. コーディング
  4. WordPressテンプレート化
  5. 機能追加

基本的なサイト制作はこのような流れで進んでいきますが、ワイヤーフレームから作成出来る方は、もう既にプロとして働いていると思います。

今回は、例として既にコーディング済のHTMLテンプレートをダウンロードし、それをWordPress化していきたいと思います。

フリーのHTMLテンプレートを配布しているサイトは様々ありますが、例として下記のサイトから1つダウンロードします。

無料のテンプレートがダウンロードできるサイト「Free CSS」

今回はブログサイトを作る方に向けて、下記のテンプレートをダウンロードしました。

無料でダウンロードできました

まずは、ダウンロードしたファイルを解凍します。

「cloapedia」というフォルダがでてきました

まずはこのフォルダごと、FTPなどでWordPressのテーマフォルダへアップロードします。

しかし、この状態ではまだテーマとして認識されませんので、WordPreesがテーマとして認識できるようにしていきます。

拡張子の変更

先ほどFTPでアップロードしたフォルダの中にある「index.html」を「index.php」へと変更しましょう。

これでWordPressのテーマとして認識されますので、管理画面の「外観」からテーマを有効化しましょう。

この状態でフロント画面を確認してみましょう。

スタイルシートが当たっていない状態

何も表示されていません。

でもこれで正常です。

参照パスの修正

次に、index.phpをエディターで開きましょう。

index.phpをエディターで開いた状態

スタイルシートが当たってない原因は、パスの書き方です。

<link href="style.css" rel="stylesheet">

上記の書き方の場合、DocumentRoot直下のstyle.cssを読み込もうとしますが、ファイルが存在しないためスタイルシートが当たっていない状態です。

これを正しい記述に修正していきましょう。

<link href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" rel="stylesheet">

上記の箇所だけではなく、css、js、imgと全てのファイル参照を修正する必要があります。

全てのファイル参照の記述を修正すると、無事表示されました。

共通部分の切り出し

次のステップは、共通している要素を探しテンプレート化する事です。

WordPressでは、共通している要素をパーツ分けしテンプレート化する事で、統一性のあるソースコードを実現し、保守性を高めています。

header.phpの切り出し

ヘッダーとフッターは全ページで共通していますので、index.phpからヘッダー部分とフッター部分を分離させます。

end headerのコメントアウトが目印

このHTMLテンプレートの場合、530行目までがヘッダー要素となっているようです。

index.phpから530行目までを切り取り、ファイルの先頭に下記を記述します。

<?php get_header(); ?>

このWordPress関数は、自動的にheader.phpというファイルを読み込んでくれる関数ですが、まだ無いので作りましょう。

header.phpという名前で新規ファイルを作成し、先ほど切り取った1〜530行目までのコードをペーストし保存します。

この状態で、再度表示に問題がないか確認しましょう。

問題なさそうですね。

footer.phpの切り出し

次は、同様にフッター部分を切り出します。

このHTMLテンプレートの場合は、1023行目からがフッターのソースコードですね。

同様にindex.phpからソースを切り取り、代わりに下記を記述します。

<?php get_footer(); ?>

footer.phpというファイルを新規作成し、ペーストして保存。

先程と同様に表示を確認します。

ちゃんと表示されていますね。

これで、とりあえずはWordPressテンプレートの第一歩を踏み出しました。

とりあえず、今回の記事はここまでにします。

次回は、WordPressにおけるテンプレートの基礎知識と詳細な設定に入っていきます。