【ワードプレス】テーマの作り方⓪:テーマ作りの準備を行う

ワードプレスでのテーマ開発0アイキャッチ

このページでは、ワードプレスのテーマを作成する前にまず行うべき準備について解説します。

ワードプレスのインストール

まずはワードプレスをインストールし、テーマを変更した時のページの表示確認を手軽に行える環境を準備しましょう。

このワードプレスのインストールは MAMP などを用いて自分の PC に行うことをオススメします。

例えば実際にウェブページを公開しているウェブサーバー上でテーマの開発を行なってしまうと、開発時に自分が公開しているウェブページが表示されなくなるなどの不具合が発生する可能性があります。

安心して気軽にテーマ開発を行うために、自分の PC にワードプレスをインストールし、そこでテーマ開発・表示の確認を行える環境を用意した方が良いです。

サーバーでのテーマ開発とローカルPCでのテーマ開発の違い

そして PC 上でテーマの開発が一通り完了した時に、ウェブサーバーにアップしてテーマを公開するのが安全で楽なテーマ開発方法だと思います。

MAMP と MAMPを用いたワードプレスのインストール方法は下のページで解説していますので参考にしてください。私もこの手順でワードプレスをインストールし、そこでテーマ開発を行なっています。

MAMPがあれば「ネット環境なし」でもワードプレスが使える!

開発環境の準備

続いて用意するのが開発環境です。ワードプレスのテーマの実体は PHPです。テーマを作っていくためには PHP の編集を行う必要があります。PHP を編集しやすい環境を用意しておきましょう。

PHPのロゴ

「まずはお試しでテーマをちょっといじってみたい」という方であればテキストエディタなどがあれば十分だと思います。

ただし、テーマ開発に本格的に取り組みたいのであれば、 Eclipse や VSCode などの統合開発環境を用意しておく方が良いと思います。

デバッガーを使用することで、プログラムを停止させながら自分のテーマの動きを確認可能になりますので、自分のテーマやワードプレス自体がどのように動作しているかを確認するのに便利ですし、上手く動作しない時の原因を調査するのにも大変便利です。

実際私も Eclipse や VSCode をインストールしてデバッガーを動かしながらワードプレスの動きを確認していますが、プログラムの動きが分かって楽しいです。

またデバッガーを使うことで上手くページが表示されない時も、原因を調べるのが簡単になります。

Eclipse をインストールした時の手順・デバッガーを動作させるための手順はそれぞれ下のページで紹介していますので、Eclipse やデバッガーを使ってみたい方は是非参考にしてみてください。

eclipseインストールのアイキャッチワードプレスのテーマ開発環境にEclipseを導入 eclipseのデバッガー設定のアイキャッチEclipse にデバッガー(Xdebug)を導入

また VSCode に関しても下記ページで紹介していますので、VSCode がお好みの方はこちらを参考にしてください。

VSCodeでワードプレス開発環境構築方法の解説ページアイキャッチVisual Studio Code でワードプレス開発環境を構築する(MacOSX) VSCodeでワードプレスデバッグ環境を構築する方法の解説ページアイキャッチVSCode でワードプレスデバッグ環境を構築する

処理が軽い・今時の流行という観点から、個人的に VSCode がオススメです。

スポンサーリンク

ワードプレスの基礎知識の習得

ワードプレスのテーマを作成するのですから、やはりワードプレスの基礎知識はつけておいた方が良いです。

ワードプレスのロゴ

ワードプレスの仕組み

ワードプレスでページ表示を行うときの PHP の動作やファイル構成は知っておいた方が良いと思います。この辺りのワードプレスの仕組みについては下のページで解説していますので、是非読んでみてください。

ワードプレスの仕組みを「構成」と「PHPの動き」から解説

ワードプレスの関数

テーマを構成する PHP プログラムでは、ワードプレス専用に用意された関数が使用可能です。この関数を駆使してテーマを作っていくことになります。どんな関数があるかは下のページで確認することができますので、このページはすぐに参照できるようにしておくと便利です。

参考 関数リファレンスWordPressCodex日本語版

PHPの簡単な基礎知識の習得

最低限で良いので PHP のことも知っておくと良いです。深い知識はテーマを作成していくと自然に身につくと思いますし、出来るだけこのウェブサイトでも解説しようと思っていますが、最低限、下記のことは頭に入れておくと良いと思います。

PHPの記述の仕方

PHPでは「PHPの開始タグ」と「PHPの終了タグ」を用意し、その間にプログラムを記述します。PHPの開始タグは「<?php」であり、PHPの終了タグは「?>」です。ですので、PHPを記述するときは下記のようにプログラムを書きます。

<?php 
PHPの処理;
>?>

また、PHPの処理は「;」で区切ります。例えばPHPの処理を3つ書くのであれば下記のように記述します。

<?php 
PHPの処理1;
PHPの処理2;
PHPの処理3;
>?>

HTML と PHP の関係

HTML と PHP の関係についても知っておくと良いと思います。

HTML とはウェブページを表示するためのマークアップ言語です。ウェブブラウザは、この HTML に記述内容に従ってウェブページを表示しています。

PHP は HTML の生成に適したプログラミング言語の一つです。ワードプレスの中にはたくさんの PHP ファイルが存在し、この PHP が動作して HTML が生成され、ウェブページ表示が行われています。

PHP の特徴は、HTML の中に組み込むことができることです。この特徴があるので、PHP は HTML 生成に向いています。下の図のように PHPファイルの骨組みは HTML として記述し、PHPやワードプレスの関数を実行したい部分だけ PHP で記述することができます。

HTMLの中にPHPを記述した様子

PHP でページごとに表示するコンテンツを切り替えることができるため、PHP ファイル1つでたくさんのページ表示を行うことができるようになります。例えば、ワードプレスの投稿記事のページは single.php というPHPファイルが全ての投稿記事を表示する役割を果たしています(複数の PHP が連動して表示している場合もあります)。

PHP で使用できる関数

ワードプレスのテーマの実体は PHP プログラムです。ですので、テーマ開発時には PHP の関数も使用可能です。PHP の関数にどんなものがあるかは下記ページで確認することができますので、このページもすぐに参照できるようにしておくと便利です。

参考 言語リファレンスPHP マニュアル

記事の投稿

ワードプレスのテーマ開発においては、実際にページを表示させながら動作確認を行います。ですので、あらかじめページを表示するための記事の投稿をしておくと動作確認がやりやすいです。

ワードプレスのダッシュボードからいくつかてきとうな投稿と固定ページを新規追加しておいてください。

スポンサーリンク

まとめ

このページではワードプレスのテーマ作成を行うための前準備について解説しました。特にローカルPCにワードプレス環境を用意しておくと気軽にテーマ作成ができるようになりますので是非準備しておきましょう。開発環境は色々ありますが、まずはお試しでテーマ作成を始めてみたいという方はテキストエディタでも良いと思います。

下のページの「テーマの作り方①:まずは簡単なテーマを作りページを表示する」からは、いよいよテーマ作成を行なっていきます!

ワードプレステーマの作り方①のアイキャッチ【ワードプレス】テーマの作り方①:まずは簡単なテーマを作ってページを表示する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ワードプレスの処理時間は約 0.177 秒です