WordPressのテーマをカスタマイズする方法

本記事は、WordPressのテーマのカスタマイズの方法について説明するものです。

WordPressのテーマやプラグインだけだとCSS・PHPの操作に限界があります。
自分で機能を追加したいと思うこともあると思います。

オリジナルの機能を実装すればより独自性の高いブログにすることもできるので必要に応じてカスタマイズを考えても良いでしょう。

テーマをカスタマイズする前に考えるべきこと

考える
テーマをカスタマイズする前に目的を満たせるテーマやプラグインがないか探すことも大切です。
自分で作るよりも既にあるものを使った方がいい場合もあります。

テーマの改修に時間をかけて記事の更新が止まるのは本末転倒なので、既存のツールも有効に活用しましょう。

カスタマイズ用の子テーマを作成する方法

遺伝
テーマを直接編集してしまうと、テーマの更新があった時に修正が消えてしまいます。

更新のたびに修正を加えるのは手間なので、テーマ編集用の子テーマを作成しましょう。

テーマによっては最初から子テーマが展開されている場合もあります。

子テーマを作成する手順

子テーマを作成する手順について説明します。

「style.css」と「functions.php」を格納

「style.css」と「functions.php」の2つを格納します。

style.cssには、追加のCSSを記述できます。
元々のテーマ(以下、「親テーマ」と呼ぶ)のCSSを引き継ぐ為には以下の記述をします。

「Theme Name」には子テーマの名前を指定します(何でも良い)
「Template」には親テーマの名前を記述します。

functions.phpは、追加したいPHP処理を記述します。
特に処理がない場合は「」の中は空でもOKです。

画面をカスタマイズする

親テーマから編集したいファイルをコピーして子テーマに格納します。(親テーマのファイルを移動や削除をしないように注意しましょう)
子テーマにないファイルについては親テーマのファイルが動作するので修正しないファイルは移動不要です。

子テーマをアップロードする

作成した子テーマをテーマディレクトリ(インストールフォルダ/wp-content/themes/)にアップロードします。
子テーマフォルダをZIPファイルに圧縮することでWordPressのテーマ画面からアップロードできます。

WordPressメニューの「外観」→「テーマ」の順に開き、「新規追加」をクリックします
新規追加をクリック

テーマのアップロードをクリックします
テーマのアップロードをクリックします

ファイルを選択してアップロードします
ファイルを選択してアップロード

子テーマを設定する

他のテーマと設定手順は同じです。
WordPressメニューの「外観」→「テーマ」の順に開き、追加した子テーマを選択して有効化します。
子テーマを有効化する

PHPの編集エディタを使おう

WordPress上でもテーマの編集はできますが、あまり編集には向いていません。
ソースコードをダウンロードしてPHPの編集エディタを使うようにしましょう。

◆PhpStorm
PHP編集に特化した高機能エディタです。JavascriptなどPHP以外の一部言語にも対応しています。
テキスト補完や自動構文チェックなども備えており、初心者でも扱いやすいエディタです。

有料ライセンスですが、トライアル版を30日間無料で使うことができます。

PhpStormをインストールする

GitでWordPressテーマのバージョン管理する方法

バージョン管理とはソースコードと共に編集履歴や差分を記録する管理方法です。
編集段階(バージョン)ごとにソースコードの修正内容を記録することで、いつでも特定のバージョンに戻すことができます。

誤った修正を行ってしまった場合でもバージョン管理しておけば、即座に誤った修正を行う前のソースコードに戻すことができます。

Gitは代表的なバージョン管理コマンドです。

Gitを使える代表的なサービスはGitHubがあります。

以前は非公開のレポジトリ作成は有料プランのみでしたが、無料プランでも無制限に作成できるようになりました。

GitHubの登録はコチラ

まとめ

テーマをカスタマイズことでテーマやプラグインにない機能を実装できるのでより独自性の高いサイトを作ることができます。

しかし、自作をしなくても既存のテーマやプラグインで目的を達成できる場合もあるので、自分でカスタマイズする以外の方法も検討するようにしましょう。

テーマの編集にはPHPに特化したPhpstormやGit管理のできるGitHubなどのサービスがあります。
ツールを活用して手間や作業時間の削減も考えるようにしましょう。

PhpStormをインストールする
GitHubの登録はコチラ

コメント

タイトルとURLをコピーしました