WordPressのテーマを自作する手順と必要なツール

どのようなウェブサイトにするかを決定する重要な要素のひとつは、WordPressの「テーマ選び」になります。

WordPressのテーマは、ブログのデザインや機能がセットになったテンプレートファイルの集合体で、自作することもできます。

WordPressのテーマを自作できれば、自分の好きなデザインや機能をテーマに盛り込めます。

今回は、WordPressのテーマ自作に必要な知識やツールについて解説します。

まずはWordPressのテーマを自作する、メリットとデメリットについて解説しましょう。

WordPressのテーマを自作するメリットは、自由にデザインできることです。

既存のテーマを利用する場合、レイアウトやカラム数は固定されている場合がほとんどですが、自作テーマならレイアウトもカラム数も自由に決められます。

また、自作テーマは構造や仕組みを把握できているため、後からカスタマイズしやすい点もメリットに挙げられるでしょう。

WordPressのテーマの自作にはCSS、HTML、PHP、JavaScriptの知識が必要になりますが、自作テーマの制作を通じてさまざまなスキルが身に付きます。

例えば、PHPを一度身に付けると、ほかのプログラム言語でも応用が利きます。

プログラム言語には共通した文法や概念があり、PHPを通じてそれらの文法や概念が身に付くからです。

また、CSSやHTMLの知識も、一度身に付ければいろいろと応用が利くようになるのでおすすめです。

自作テーマを作るには多くの時間と労力がかかります。

WordPressのテーマはインストールするだけで利用できますが、自作テーマはすべてのテンプレートファイルを一から作らなければなりません。

また、ウィジェットエリア、デザイン、テーマに搭載する機能を検討する必要があるため、一般的なテーマのカスタマイズ以上に時間と労力がかかります。

自作テーマの制作には多くの知識が必要で、HTMLやCSS、PHP、MySQL、JavaScript、WordPress関数などについて学ばなければなりません。

学習が苦手な人には、WordPressのテーマの自作は向いていないでしょう。

もし、これらの知識をまったく持たずにテーマの自作にチャレンジするなら、多くの時間がかかることを覚悟しましょう。

テーマを自作する前に、ある程度習熟しておく必要があるので、しっかりと計画を立て、学習するようにしましょう。

次に、WordPressのテーマの自作に必要な知識について解説します。

HTML（エイチティーエムエル）とは「Hyper Text Markup Language」の略語です。

コンピュータが理解できるようにマークアップする言語がHTMLで、主にウェブページを作るために用いられます。

マークアップとは、文章構造や視覚表現などをコンピュータが正しく認識できるよう、タイトルや見出しといったタグを使い、意味付けを行っていくことです。

「ここは文章のタイトルです」「見出し内容です」「コンテンツ内容です」とタグ付けするのがマークアップになります。

HTMLはウェブページの骨組みだと考えればわかりやすいでしょう。HTMLは誰でも簡単に習得できる、比較的簡単な言語です。

CSS（シーエスエス）は「Cascading Style Sheets」の略語で、ウェブページのスタイルを指定する言語です。

HTMLがウェブページの骨組みだとしたらCSSはデザインを担当、CSSはHTMLと組み合わせることで有効に働きます。

HTMLがウェブページ内の要素の構造を指定するのに対し、CSSはそれらの装飾方法を指定します。

例えば、ウェブページが表示される際の色やレイアウト、表示スタイルなどで、HTML単独でも、ウェブページのデザインをある程度は作れます。

しかし、HTMLはマークアップ言語であり、装飾とは本来無関係であるべきという考え方から、CSSによって装飾をコントロールします。

PHP（ピーエイチピー）は「Hypertext Preprocessor」の略語で、動的にウェブページを生成する言語です。

サーバー側で動作するスクリプト言語であることから、サーバーサイドスクリプトと呼ばれ、PHPはプログラミング言語の中でも、Javaなどに並んで人気のある言語の一つです。

MySQLなどデータベースとの連携が容易で、文法が簡単なため比較的習得しやすい言語でもあります。

ちなみに、ウェブサイトの実に43%を占めるほどの圧倒的なシェアを誇るWordPressも、PHPで作られています。

PHPに習熟すると、問い合わせフォームや掲示板、ショッピングカートなどさまざまなウェブアプリケーションが作れます。

MySQL（マイエスキューエル）は世界トップシェアのデータベース管理システムで、大容量のデータでも高速に動作し、便利な機能が多く搭載されています。

MySQLはRDBMSの一種で、データを複数の列と行で構成された表として取り扱いますが、この仕組みによってMySQLは大量のデータをより安全に、高速で取り扱えるようになりました。

MySQLの特徴としては「オープンソースで無料」「WordPressに使われている」「Windows、Linux、Macなど複数のOSで利用可能」などが挙げられます。

WordPressはMySQLを利用することで多くの記事を保存し、ユーザーのアクセスに合わせて瞬時に表示できるのです。

WordPressのテーマを自作するためには、いくつかのツールが必要となるので、ここではそのツールについて解説します。

WordPressの自作テーマを作成するなら、開発環境の準備は必須です。

開発環境とは、ローカル環境やテスト環境とも呼ばれ、WordPressをインストールし、自由かつ安全にカスタマイズできる作業空間のことを指します。

開発環境にはいくつもの候補があります。

開発環境は、本番環境に近いものが望ましいため、もっとも有力な候補となるのはXAMPPやMAMPPでしょう。

XAMPPとはWindows+Apache+MariaDB+PHP+Perlの略語で、ApacheやMariaDB、PHPを一気にインストールできるパッケージです。

httpd.confやphp.iniの設定によって、本番環境に限りなく近づけることができますので、自作テーマを開発するなら、WordPressをインストールできる開発環境をまずは用意しましょう。

PHPやHTML、CSSを書いていくためにはテキストエディタが必要ですが、テキストエディタには無料・有料を含めいろいろなものがリリースされています。

「日本語対応している」「自分の使っているOSに対応」「使いたい機能がある」といったポイントを重視して選ぶとよいでしょう。

無料かつ代表的なテキストエディタには以下のようなものがあります。

それぞれ使ってみて、使い心地やデザインがしっくりくるものを選びましょう。

WordPressの自作テーマに必要なファイルを作っていきましょう。ここでは個別の作り方ではなく、ファイルの動作や役割について解説します。

functions.phpはWordPressに必須のファイルの1つで、PHPの関数を書くことを目的としています。

functions.phpに書かれるコードは、そのテーマで汎用的に使われるコードで、functions.phpには以下の役割があります。

functions.phpに記述ミスがあると、ウェブサイト全体が停止することもあり得ますので、十分に注意して設定しましょう。

style.cssは、WordPressを動作させるための必須ファイルの1つで、以下のような役割があります。

style.cssはテーマのデザイン全体を司るファイルで、テーマのデザインをカスタマイズするときはstyle.cssを編集します。

index.phpはどんなテーマにも用意されているテンプレートファイルで、フロントページをはじめとしてサイト全体のデザインのベースとなる部分です。

index.phpは「ファイル情報の記述」「ヘッダーの読み込みエリア」「コンテンツ内容」「フッターの読み込みエリア」に分かれます。

例えば、ヘッダーやフッターの読み込みは以下のように行います。

すべてのウェブページで表示するヘッダー部分を記載するのがheader.phpです。

ウェブサイトのロゴやサイトタイトル、JavaScriptの読み込み、グローバルメニュー、アクセス解析用のタグなどを記載しましょう。

尚、header.phpは、テンプレートファイルのget_header ()関数で呼び出されます。

ウェブページのフッター部分を記載するのがfooter.phpです。

footer.phpにはコピーライト表記や問い合わせ先、フッターメニュー、免責事項、プライバシーポリシーなど全ページで表示させたいことを記載しましょう。

テーマによってはクレジットなどの記載があるのもフッターで、footer.phpは、get_footer ()関数で各テンプレートファイルに呼び出されます。

sidebar.phpはウェブサイトの右端、左端などに表示するサイドバーを記載するテンプレートファイルです。

サイドバーには新着記事やコメント、管理者プロフィール、カレンダー、SNSフォローボタンなどが配置されます。

ウェブサイトのレイアウトによってはサイドバーがないケースもあり、ワンカラムのサイトデザインなどが代表例です。

comments.phpは、ユーザーから投稿されるコメントを表示するテンプレートファイルで、comments.phpには、書き込まれたコメントを表示する機能と、コメントを投稿する機能が含まれています。

comments.phpのカスタマイズはstyle.cssで行いますが、それ以外にコメントプラグインを使う方法もあり、「Disqus」や「wpDiscuz」「JetPack」などのプラグインが有名です。

single.phpは、投稿した記事を表示するテンプレートファイルです。

ブログではユーザーがもっともよく目にするページの1つですので、必要な機能をしっかりと盛り込み、見やすく記事の読みやすいデザインにしましょう。

また、関連記事を表示するなど、サイト回遊率を高めることも重要です。

page.phpはWordPressの固定ページを表示するためのテンプレートファイルです。single.phpとpage.phpの違いは以下の通りです。

search.phpは、検索結果を表示するためのテンプレートファイルで、ユーザーが検索窓でウェブサイト内を検索し、その結果がsearch.phpに表示されます。

なお、WordPressのサイト内検索はかなり単純なので、しっかりとしたサイト内検索が欲しい場合は「Search Everything」「Scifi Facets」などのプラグインを検討してみましょう。

screenshot.pngはテンプレートファイルではなく、テーマの概要を表す画像ファイルです。

管理画面から「外観」の「テーマ」を開いたときに表示されるアイキャッチ画像がscreenshot.pngとなります。

screenshot.pngがあることで、ユーザーはどんなテーマなのか把握しやすくなります。

存在しないページをユーザーが開いたときに、404エラーを返すのが404.phpです。

トップページに戻るように促したり、別ページへのリンクを設置したりしてサイト回遊率を向上させましょう。

今回は、WordPressのテーマの自作に必要なツールと、テーマの構成ファイルについて解説しました。

WordPressのテーマとは、複数のテンプレートファイルの集合体で、テンプレートファイルが集合し、デザインや機能の内容がセットになったものがテーマとなります。

WordPressのテーマは自作でき、自作するメリットは「自由にデザインできる」「自作することでスキルアップできる」の2点ですが、WordPressを自作するためにはHTMLやCSS、PHP、MySQLの知識が必要です。

HTMLやCSS、PHPはさほど難しくはありませんので、理想の機能やデザインを実現するために、WordPressで自作テーマにチャレンジしてみましょう。

誰でも10分！WordPressブログの始め方
ブログを始めるには、ライブドアブログやはてなブログといった無料ブログを使う方法、あるいはWordPressなどを使用する方法があります。

まだWordPressを持っていない人でも、簡単に準備できる方法を以下の記事で解説してます。
初心者でもわずか10分で始められるので、参考にしてみてください。

独自ドメインを取得するなら「お名前.com」
「お名前.com」は、国内No.1のドメイン登録サービス。独自ドメインと合わせて、WordPressの自動インストールに対応したレンタルサーバーも利用できます。
WordPressや独自ドメインを一度も使ったことのない人でも、スムーズに始められるはず。

独自ドメインを取得しようと考えている方は、以下のリンクから、ぜひご利用ください。