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

Facebookシェア LINEシェア はてなブックマークシェア

どのようなウェブサイトにするかを決定する重要な要素のひとつは、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のテーマ自作に必要な知識

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

HTML

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

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

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

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

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

CSS

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

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

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

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

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

PHP

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

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

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

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

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

MySQL

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

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

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

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

WordPressのテーマを自作するのに必要なツール

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

開発環境

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

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

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

  • XAMPP・MAMPP
  • Local(Local by Flywheel)
  • Docker
  • レンタルサーバー

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

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

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

テキストエディタ

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

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

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

  • TeraPad
  • Atom
  • Vim
  • Emacs
  • Sublime Text 3
  • サクラエディタ

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

WordPressの自作テーマに必要なファイルを作ろう

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

functions.php

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

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

  • テーマで使う関数の定義
  • デフォルトの処理の記述
  • ショートコードの定義
  • 管理画面の設定
  • テーマの機能を追加

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

style.css

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

  • コメントヘッダーでテーマに関する情報を設定
  • テーマのデザインに必要なCSSを記入できる

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

index.php

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

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

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

<?php

get_header();

?>

//コンテンツ内容

<?php

get_footer();

?>

header.php

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

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

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

footer.php

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

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

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

sidebar.php

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

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

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

comments.php

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

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

single.php

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

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

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

page.php

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

  • 「次の記事へ」「前の記事へ」といったページ送り機能がない
  • 関連記事が表示されない
  • カテゴリやタグが表示されない

search.php

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

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

screenshot.png

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

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

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

404.php

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

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

まとめ

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

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

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

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

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

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

合わせて読みたい

【完全ガイド】誰でも10分!WordPressブログの始め方

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

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

お名前.comで
独自ドメインを取得

Facebookシェア LINEシェア はてなブックマークシェア
逢坂秀範の似顔絵イラスト

このサイトのライター
逢坂 秀範

ウェブメディアやメールマガジンのコンテンツ制作のプロ。
豊富な経験と知識でwebの作成や運用、用語などを分かりやすく解説します!

 
一覧を見る

お気に入り機能を
活用してより便利に!

お名前ID(会員ID)・パスワードでログインするとお気に入り機能をご利用できます。
お名前ID(会員ID)
パスワード

アカウント登録がまだの方

アカウント登録 (無料)