目次
WordPressのテーマを自作するメリットとデメリット
WordPressのテーマを自作することには、メリットもデメリットもあります。
テーマを自作することで自分のデザインや機能を好きなだけ構築できる分、デメリットも発生します。
WordPressのテーマを自作することによって感じるメリットとデメリットを詳しくみていきます。
メリット
カラムやデザイン、機能を自由自在に組み合わせることができます。
自分の理想的なオリジナル性や機能性を重視したい人におすすめです。他人のテーマを使わない分、細かい調整がしやすくなります。
テーマを作る過程で、プログラミング言語を使いこなさなければなりません。
その分、制作によって様々な知識をつけることができます。
デメリット
テーマを自作すると制作にかなりの時間が必要になります。
既存のテーマにはホームページの土台が仕上がっていますが、自作するとありません。
また、プログラミング言語の習得には時間がかかります。
たしかに自由にデザインやレイアウトを決められる点は、テーマを自作する上で魅力的な点です。
ところが、ホームページを一から作り上げたい知識がない人には難しくなります。
そのため、制作に対して大幅に時間がかかる可能性があります。
WordPressのテーマを自作するために必要な4つの知識
WordPressのテーマを自作するために必要な4つの知識は、以下の通りです。
- HTML
- CSS
- MySQL
- PHP
それぞれのプログラミング言語の知識を使い分けることで、静的もしくは動的なホームページ作成やデータ管理などの役割を分担します。
4つのプログラミング言語がその役割を担うのかを詳しくみていきます。
1.HTML
HTMLはコンピューターが理解できるようにマークアップする言語です。
主に、ホームページを作るために静的ファイルとして用いられます。
例えば、タイトルや見出し、コンテンツなどにタグを付けて意味づけることがマークアップです。
そこからHTMLはマークアップ言語とも呼ばれ、ホームページを作る上で基盤の骨組みとなります。
2.CSS
CSSはホームページのスタイルを指示する言語です。
骨組みであるHTMLに対し、CSSはデザインや装飾にあたります。
両方の言語を組み合わせることでホームページ全体のレイアウトやデザインに仕上がります。
ただ、動的なデザインを手がけることはできません。
その分、文字や背景の色や大きさ、表示スタイルなどの装飾を手掛けられます。
3.MySQL
MySQLは世界トップシェアを誇るデータベース管理システムです。
MacやWindowsなど複数のOSで利用することができます。
MySQLはWordPressに多く使われているオープンソースであり、無料です。
MySQLを利用することで多くの記事を保存でき、ユーザーのアクセス数に合わせて瞬時に表示できます。
4.PHP
PHPとは、動的にホームページのデザインを仕上げるための言語です。
また、サーバーサイドスクリプトとも呼ばれています。
プログラミング言語の中でJava同様に人気があります。
その理由として、データベースの連携とプログラミングの文法が簡単だからです。問い合わせフォームや買い物かご、掲示板といったウェブアプリケーションが作れます。
WordPressのテーマを自作するための準備は3ステップ
WordPressのテーマを自作するための準備は、3ステップです。
- ローカル環境を整える
- ローカル環境にWordPressをインストールする
- サンプル用の静的ファイルを用意する
どれも比較的すぐに準備できるので安心して始められます。
テーマを自作する準備の3ステップを以下にみていきます。
ステップ1.ローカル環境を整える
ローカル環境とは自分のパソコン内部のみで完結できる開発環境のことです。
環境作業がローカル環境であれば、エラーが発生しても他への影響が最小限に抑えられます。
テストを行いながら、安全かつ自由にカスタマイズするための必要な環境です。
いくつもの候補があり、その一部の例として挙げられるのが以下のツールです。
- XAMPP・MAMPP
- Local
- レンタルサーバー
使用されるローカル環境は、無料のものからサービス料のかかるものまであります。
ローカル環境を整えるにはダウンロードして手順に沿ってインストールが必要です。
ステップ2.ローカル環境にWordPressをインストールする
ローカル環境が整え終えたら、WordPress公式サイトからWordPressの本体をダウンロードします。
ダウンロード後、自身のパソコンにインストールします。
指定の方法に従い、ローカル環境にWordPressをインストールしましょう。
ステップ3.サンプル用の静的ファイルを用意する
ここで、サンプル用の静的ファイル(記事や画像)を用意することが重要です。
WordPressが問題なくローカル環境に順応しているかを確認してから作業を行いましょう。
サイトの中身が何もない状態でも、テーマを自作することはできます。
しかし、思いどおりに動作しているか確認しづらくなります。
確認テストをして問題なく表示された後に、テーマの自作を始めましょう。
WordPressのテーマを自作する際のおおまかな流れ
WordPressのテーマを自作する際のおおまかな流れは、5つのステップに分かれます。
- HTMLとCSSで静的なサイトのデザインを作成する
- 作成したHTMLのファイルを複数のPHPファイル（index.php）に書き換える
- 作成したPHPファイルをヘッダーやサイドバー、フッターなどの内容ごとにコードを追記する
- テストして動作が問題なく動くか確認する
- 問題なければ本番環境に移行する
全ての作り終えてからではなく、こまめにテストを繰り返しましょう。
途中で問題を見つけた際はその都度修正していきます。
この工程を行うことで、テーマを自作する場合も完成後のエラーが減少します。
WordPressのテーマを自作に必要なファイルは12種類
WordPressのテーマを自作するのに必要なファイルは12種類あります。
- functions.php
- style.css
- header.php
- index.php
- footer.php
- sidebar.php
- single.php
- page.php
- comments.php
- search.php
- screenshot.png
- 404.php
それぞれのファイルの役割や動作について一つひとつみていきます。
1.functions.php
functions.phpはWordPressで重要なファイルで、PHP関数を書く役割があります。
内容は以下の通りです。
- テーマで使う関数の定義
- デフォルト処理の設定
- ショートコードの記述
- 管理画面の設定
- テーマの機能を追加
記述ミスがあると、サイト全体を停止させるなどの影響が出ることもあります。
2.style.css
style.cssは、WordPressを作動させるための重要なファイルです。
サイト全体の装飾をするためのCSSを記述する役割も担っています。
フォントや文字間の空白のサイズ、線の太さなどを自由に変更することが可能です。
作成時はコメントヘッダーに、どのテーマに使うCSSなのかを記述します。
この時点で、ある程度テーマの内容を決めておくといいでしょう。
記述ミスがあるとデザインにズレが生じるため、こまめの確認がポイントです。
3.header.php
header.phpはホームページのサイト上部に見かけるヘッダーの部分を構築するファイルです。
index.phpやsingle.phpに「head」や「body」を直接入力する方法もありますが、手間と時間がかかります。
また、ホームページのタイトルやロゴ、アクセス解析用のタグをheader.phpに記述することでヘッダーを完成させることができます。
4.index.php
index.phpは他のサイトにも使われているテンプレートファイルです。
フロントページをはじめサイト全体のデザインのベースとなります。
ページごとのテンプレートファイルを準備しない場合は、ページごとにindex.phpが読み込まれ、表示されます。
「情報の記述」「ヘッダーの読み込みエリア（header.php）」「コンテンツ内容」「フッターの読み込みエリア(footer.php)」の4つから成り立ちます。
footer.phpはホームページの最下部にあるフッターの部分を構築するファイルです。
フッターメニューには問い合わせ先、会社情報、プライバシーポリシーなどが記載されます。
全ページで記載したい内容をここで記述しましょう。
sidebar.phpはホームページの右端や左端などにサイドバーを表示するためのテンプレートファイルです。
サイトバーには管理者プロフィールや広告アフィリエイト、SNSロゴやコメントなどを配置します。
例えば、ECサイトであればセール情報や一押しの商品情報などを掲載して商品の売り上げにつなげます。
ホームページによってはサイドバーがないものもあり、その場合はワンカラムのホームページデザインが代表的です。
7.single.php
single.phpは投稿機能で追加したページや記事の表示に使うファイルです。
必要な要素をしっかり詰め込んで、ユーザーにとって見やすいページにデザインする必要があります。
ブログやコラムはユーザーが目にする機会がもっとも多いページです。
関連記事や新着記事を同じページにし、ジャンルごとに分けるのもいいでしょう。
8.page.php
page.phpはWordPressの固定ページ機能で追加したページを表示するためのテンプレートファイルです。
「次の記事へ」や「前の記事へ」がなく、他のページへ移動するページ送り機能がありません。
関連記事やタグ、カテゴリーなどの表示もないため、そのページのみに見せたい内容を詰め込みます。
例えば、プロフィールや会社概要などが固定ページとして当てはまります。
9.comments.php
comments.phpは記事ごとのユーザーから投稿されたコメントの記入欄とコメントの表示をカスタマイズするファイルです。
コメントを記入する機能と投稿されたコメントを表示する機能が備わっています。
シンプルであればいいというわけではなく、ページに応じて対応することがオススメです。
10.search.php
search.phpはユーザーがホームページ内で検索した際に検索結果を表示させるためのテンプレートファイルです。
ユーザーが検索したワードに該当したページや記事がsearch.phpに表示され、検索結果として該当するものが一覧できます。
search.phpは検索結果機能の働きのみなので、検索するためのフォームやボタンが必要です。
検索機能をつける場合はsearch.phpだけでなく、フォームを表示するためのPHPを組み込みましょう。
11.screenshot.png
screenshot.pngは機能を設置するテンプレートファイルではなく、テーマの概要を表すための画像ファイルです。
WordPressの管理画面から「外観」の「テーマ」にアクセスしたときに、テーマの一覧画面にscreenshot.pngが表示されます。
外部からテーマを見られることはないため、自分でどのテーマかを把握できるように使います。
12.404.php
404.phpはユーザーが存在しないページにアクセスした際に表示する内容を記載するテンプレートファイルです。
404.phpをシンプルに表示することもできますが、フロントページに戻るように促したり、メニューから別のページに移れるように案内したりすると親切かつページ回避率を防げます。
また、ホームページによってはユニークなエラーページを設置していることもあり、エラーページに訪れてもサイト回遊率を向上させるためには、色々な工夫が必要です。
まとめ
WordPressでテーマを自作するにあたって必要な基礎知識や必要なファイルについて説明しました。
テーマのテンプレートを使うメリットもありますが、自作テーマだからこそ自分の理想のホームページに仕上げる機能を自在に搭載できます。
初めてホームページを作る人は大変なことも多いものの、オリジナルを含んだホームページに仕上げたい人はテーマを自作してみましょう。
