先日、WordPressテーマを作成しました。
WEBデザインやコーディングが専門外の僕でも、何とか完成させることができました。
テーマ作成までにやったこと、具体的な手順をまとめました。
目次
テーマ作成に関する記事を読む
まずは「WordPress テーマ作成」といったキーワードで検索し、テーマ作成に関する記事をいくつか読みます。
このとき、一つ一つ理解する必要はなく、ざっと読めばOKです。
「テーマ作成ってこんなことするんだな」と全体像が掴めれば大丈夫です。
エディタをインストールする
テーマの作成ではコードをゴリゴリ書いていくことになりますが、このコードを書いていくパソコン上のノートのようなものがエディタです。
エディタは色々あるのですが、個人的にVisual Studio Codeがおすすめです。
高機能でコーディング初心者でも使いやすいです。無料で、Windows、Macどちらでも使えます。
具体的な使い方はドットインストールのこちらの動画を最初にざっと見ておき、わからないことがあればその都度ネットで調べるのが良いと思います。
Visual Studio Code入門 (全13回) – プログラミングならドットインストール
ローカル環境の構築
WordPressテーマの開発はローカル環境での作業がメインになります。
実際のネット上と同じような環境を自分のパソコンのローカル上に作り、そこで作業をします。
ローカル環境は一度作ってしまうとテーマ作成後のカスタマイズのときにも非常に便利ですので、ここで使い方に慣れてしまいましょう。
僕が実際に使ったのはLocalというツールです。
概要や使い方はこちらの記事が詳しいです。
超簡単にローカル環境が構築できるLocalbyFlywheelの使い方
ちなみに、ローカル環境の構築はこちらで紹介されているDockerを使っても良いかもしれません。
【試験運用中】Dockerを導入しよう [macOS版] (全2回) – プログラミングならドットインストール
実際にテーマ作成に取り掛かる
ローカル環境を構築できたら、いよいよテーマ作成です。
実際の作業に入る前に、どのようなデザインにしたいか、また、実装したい機能などを簡単に紙などに書き出しておくと良いと思います。
作っている間にデザインのイメージやほしい機能は変わってきたりしますので、この段階ではだいたいでOKです。
実際のテーマ作成ですが、僕は基本的にこのサイトに沿って作っていきました。
多少WordPressのカスタマイズをしたことがあるレベルの方ならちょうど良く、かなりわかりやすくテーマ作成の具体的な方法が説明されています。
0番の記事から順番に読み進めていけば、問題なくテーマ作成ができると思います。
ちなみにこのブログは各記事で作成したところまでのファイルをダウンロードできるようになっているのですが、完成版をダウンロードしてしまうと既存テーマをカスタマイズすることと何ら変わりがなくなってしまいます。（僕も一度それをやろうとして失敗しました…）
多少面倒でも、記事を読みながらコードを項目ごとにエディタにコピペしていき、その都度デザインをカスタマイズしたり、必要な機能を付けていくのが良いでしょう。
デザインは、この段階ではレイアウト（要素の配置）を中心に行い、色やフォントなどは最後に整える方が効率が良いと思います。（細部にこだわりすぎるとテーマ作成が進まなくなってしまうので…）
このとき、各要素の背景（background-color:）に目立つ色をつけておくとレイアウトがしやすいです。
勉強しながら自分好みにカスタマイズしていく
上記のサイトだけではわからないことが出てきますので、その都度ググって調べる必要があります。
その都度調べるだけでもテーマ作成はできますが、断片的な知識だけだと途中で壁にぶち当たる可能性もあります。
僕もググるだけでは途中で限界を感じたので、そういう場合は一度体系的な知識を入れてみるとテーマ作成の効率がアップします。
まず、htmlとcssの基礎ですが、ドットインストールの動画がわかりやすいです。
はじめてのHTML (全14回) – プログラミングならドットインストール
はじめてのCSS (全15回) – プログラミングならドットインストール
また、見たことがある方も多いと思いますが、こちらのサイトもわかりやすいです。
とりあえずブックマークしておき、わからないことが出てきたらまずこのサイトを見てみるという使い方も良いと思います。
ただ、こちらのサイトは若干古く、現在主流のフレックスボックスという手法についての記述がほとんどありません。
フレックスボックスについても詳しく、WEBサイト制作について体系的に学ぶならこちらの本がおすすめです。
一気に全部読むのは大変なので、テーマ作成をしながら毎日少しづつ読み進めるといった形でも良いと思います。
この本は非常にわかりやすいのですが、phpについては載っていません。
WordPressをさらに本格的にカスタマイズしようとするとphpの知識も必要になります。
phpについても言及があり、WordPressに特化したサイト制作に関する本はこちらがおすすめです。
僕もまだ全部は読んでいませんが、知りたい部分だけピンポイントで読むという使い方でも良いかと思います。
すでにあるブログの記事をローカル環境にインポートする
全く新しいWEBサイト・ブログを作る場合にはこの工程は不要です。
すでにブログをある程度書いていて、いまのテーマから作成中のオリジナルのテーマに変更を予定している場合は、実際の記事をローカル環境にコピーして見た目を確認しながらコーディングを行った方が効率的です。
記事をローカル環境にコピーするには、プラグインを使います。
やり方はこちらの記事に詳しく書かれています。
サーバー上のWordPressサイトの画像や投稿データを超簡単にローカルにコピーする方法 – よしあかつき
ちなみに、このプラグインは使った後に本番環境にファイルが残ってしまい、後片付けをしないとサーバーの容量を圧迫します。
データのコピーが終わったら、FTPソフトを使って不要なファイルを削除します。
FTPソフトは今後もずっと使いますので、ここで使い方に慣れておきましょう。
僕が使っているFTPソフトはFileZillaです。
インストール方法や使い方はこちらの記事がわかりやすいです。
【FileZillaの使い方】WordPressでFTPソフトを使おう
FTPソフトを使って画像をローカル環境にインポートする
さきほどのプラグイン「All-in-One WP Migration」で画像も上手くコピーできた方はそれで良いのですが、記事数が多いために画像はエクスポートできなかった方も多いと思います。
その場合は、FTPソフトを使って画像だけローカル環境にインポートします。
これで、記事も画像ももとのブログと同じものが使え、テーマの見た目を確認しながら作成することができます。
作成したテーマをFTPでアップロードする
フォントや色などの細部を整えたら、遂にテーマが完成です。
完成したテーマはFTPソフトを使って本番環境にアップロードします。
アップロードする場所は、以下のディレクトリです。
/public_html/（ブログのドメイン名）/wp-content/themes
アップロードしたら、本番環境のWordPressにログインし、管理画面の「外観」→「テーマ」に自分で作成したテーマがあればOKです。
テーマを変更
アップロードが完了したら、テーマ変更の前に現在のブログ・WEBサイトのバックアップをとっておくことをおすすめします。
バックアップのとり方はこちらにわかりやすく解説されています。
WordPressでバックアップを取る4つの方法（初心者向け）
バックアップが完了したら、WordPressが最新版になっているか確認します。最新版になっていなければ、この時に最新版に更新しておきましょう。
いったん全てのプラグインも停止し、管理画面の「外観」→「テーマ」から作成したテーマを選んで有効化します。
必要なプラグインも有効化し、見た目がおかしなところがなければ完了です。
まとめ
僕が実際にテーマを作ったときにやったことを思い出しながらまとめてみました。
僕は試行錯誤しつつ、2ヶ月半くらいかけています。
もちろん、簡単なテーマなら丸1日もあれば作れると思います。
ただ、わざわざテーマを作ってみたいと考える方は、デザインや付けたい機能にこだわりがある方だと思います。
初めて本格的なテーマを作る場合、時間はかかりますし、「もうダメだ」と思うときもあるかもしれません。
でも、実際に最後までやり遂げたときの達成感は言葉で言い表せないものがありますし、テーマ作成の過程で色んなことが学べます。
何より、カスタマイズが好きな方なら、テーマ作成は楽しめます。（実際、僕は毎日夜中の2時とか、休日も1日中やったりしてました…笑）
これからテーマを作ってみたいという方の少しでもお役に立てれば幸いです。
サービスメニュー
Postscript執筆後記
昨日は感染対策をしつつ、仲間と演奏。その後、友人宅で語らいました。
Something New一日一新
友人宅デミグラスソースのスパゲッティ
＼本を出版しました／
＼セルフマガジン無料送付／
