初めてでも迷わない！ワードプレスのカスタマイズ方法4つのステップ（テーマカスタマイザー/CSS/PHP/テーマの自作）
ワードプレスは、カスタマイズの自由度が高く、自分オリジナルのサイトが作成できることが魅力です。
しかし
自由にできる＝それなりのスキルが必要
ということでもあるので、すぐに誰でもできるようになる、というわけではありません。
でも次の４つのステップを理解して進めていけば、迷わず着実に進めていけるでしょう。
- レベル１：コーディング（専門言語）なしでカスタマイズ
- レベル２：カスタムCSSでカスタマイズ
- レベル３：テンプレートファイルやfunctions.phpを編集してカスタマイズ
- レベル４：テーマを自作してカスタマイズ
この記事では、これから本格的にワードプレスのカスタマイズをしていきたい、と考えているあなたに、
カスタマイズス習得の4つのステップについて解説いたします。個人でブログサイトのカスタマイズを楽しむのに十分なレベル～仕事を請け負うのに必要なレベルまで把握できるようになります。
レベル１：コーディング（専門言語）なし
テーマカズタマイザーを使いこなす
専門言語を使わずに、テーマカスタマイザーを使ってデザインをする段階です。必要な機能はプラグインで増強します。
テーマで準備された範囲でのデザイン変更となりますので、テーマ依存性が最も高くなります。
したがって、どのテーマを選択するのか？が一番重要な要素となりますよね。
https://web-children.com/2020/11/25/theme-customizer/選択したテーマにもよっては、個人ブログであれば、このレベル１でも十分運用もできますし、記事の質と量に応じて集客やアフィリエイトなどのビジネスにも十分通用します。
本来のワードプレスの理想的な形は、このレベル１です。そのためにさまざまなテーマとプラグインが提案されているわけです。
レベル２：カスタムCSSを使う
HTMLとCSS
とはいえ、どんなに高機能なテーマであっても、同じテーマを使用している限り、どこか似通ったサイトができてしまいます。
また、使っているうちに、自分が欲しいデザインの内容も変わっていくこともありますよね。最初はテーマが準備してくれた見出しデザインで満足していたけれどもう少し違った見出しにしてみたくなった、とか、ヘッダー画像をページによって変えてみたくなった、とか。
そんなちょっとしたデザイン変更をするのであれば、CSSという言語を編集・追加してカスタマイズする、カスタムCSSを使うのが便利です。
カスタムCSSについては、次の記事でかなり詳しく使い方とポイントを解説しています。
カスタムCSSは、HTMLとCSSの基本知識があれば、あとはググって調べることでかなりのデザイン変更ができるようになります。
次のレベル３に比べると習得のハードルはぐっと低いので、まずはここまでできるようになりたいですね。
簡単なアニメーションなんかも、Javaascriptを使わずともCSSでできますし、年々CSSでできることは増えていくでしょう。
レベル３：PHPでテーマの各ファイルを編集する
PHP
テンプレートタグ
必要に応じてJavascript・JQuery
カスタムCSSではデザインの変更はできますが、機能の変更・追加はできません。
例えば、次のような機能を追加するにはこのレベル３が必要です。
- ブログ記事一覧表での記事の並び順を古いものを上にする
- あるカテゴリーの記事一覧をトップページに表示する
- javascriptやjQueryで表示機能を追加する
ワードプレスはPHPというサーバー側で動くプログラミング言語で記述されていますので、機能の編集・追加をするためには、PHPを使うスキルが必要不可欠というわけですね。
また、ワードプレスにはPHPの中で使える専用の関数が準備されています。これをテンプレートタグといいます。
http://wpdocs.osdn.jp/テンプレートタグ例えばthe_title()というテンプレートタグで記事のタイトルを表示し、the_content()というテンプレートタグで記事の中身を表示する、という感じです（いずれもPHPの中で記述し、ワードプレスループというループの中で使います）。
PHPとテンプレートタグを使って、テーマのファイルを編集して機能を追加する、というのがこのレベル３です。
そのためには、PHPとテンプレートタグを知るだけでなく、ワードプレスのしくみをある程度知っておく必要がありますので、以下、ざっと解説していきましょう。
テーマの中のファイル構成と編集するファイル
PHPやテンプレートタグで編集するファイルが入っているテーマフォルダの中身をを見てみましょう。
テーマフォルダは、サーバー内のワードプレスをインストールしたディレクトリ内の、wp-content/themes/の中にあります。
例えばFileZillaなどで、公式テーマTwenty Seventeenを見てみると、次のようなファイル構成となっています。
多くのファイルが表示されていますが、実は画面内に入りきらず表示されていないファイルもあります。
この中で、PHPやテンプレートタグを使って実際に編集していくファイルは、functions.phpとテンプレートファイルというファイルになります。
functions.phpというのは、テーマの機能を追加するのに使用するファイルで、いわばテーマ専用のプラグインと考えればよいでしょう。
テンプレートファイルというのは、コンテンツを記述するための器（うつわ）の役割をするファイルで、上の図でいえば、functions.php以外の〇〇.phpファイルはみんなテンプレートファイルです。
テンプレートファイルは、テーマによって準備されているファイル数と種類が異なります。
〇〇.phpは、中身がPHPで記述されているファイルです。ワードプレスはPHPで記述されたシステムですので、主な構成ファイルは〇〇.phpとなるわけですね。
ところで、PHPの基本的な記述形式は次のようになっています。
PHPは<?phpで始まり、?>で終わる形式ですが、特徴として上のようにHTML文の中に自由に挿入して実行できる、という特徴を持っています。HTML文との相性がよいプログラミング言語だということですね。
こういった理由で、PHPはワードプレスだけでなくさまざまなWebアプリケーションに応用されています。
テンプレートファイルの役割
テンプレートファイルという器の中に必要なコンテンツデータをデータベースから取得してはめ込むことでページを作成（HTML文として作成）する、これがワードプレスでWebページを表示させるしくみです。
このとき、どの器（テンプレートファイル）を使うかで、ページで表示するコンテンツとその基本レイアウトが決まります。
例えば、テーマTwenty Seventeenでは、固定ページと投稿ページとでは次のように大きくレイアウトが異なります。
固定ページは1カラム、投稿ページはサイドバーある２カラムのレイアウトとなっています。
これは、固定ページと投稿ページで使用されるテンプレートファイルが異なることから起因しています。では、このテンプレートファイルはどのように選ばれているのでしょうか？
テンプレート階層を理解してうまく利用する
ワードプレスではテンプレート階層というルールで、ページの種類によって自動的にテンプレートファイルを選択します。
次の図は、よく使われるテンプレートファイルのテンプレート階層を表したものです。
一番左にページの種類、そしてその右側にそれぞれに適用されるテンプレートファイルが記載されています。
テンプレートファイルが複数存在する場合は、左側に記載されているものが優先されます。
一番シンプルなテーマの場合、index.phpさえテンプレートファイルとして存在すればテーマとして成り立ち、すべてのページはindex.phpで表示することとなります。どのページでも表の一番右にあるのがindex.phpだからです。
テーマTwenty Seventeenの場合は、赤字で記載されているテンプレートファイルが準備されています。それを見ると、固定ページにはpage.php、投稿ページにはsingle.phpが使用される、ということになりますね。
先ほど、Twenty Seventeenの固定ページと投稿ページのレイアウトの違いは、page.phpが１カラム、single.phpが2カラムのテンプレートであるということなのです。
実際に、Twenty Seventeenのpage.phpとsingle.phpの中身を見てみると次のようになっています。
page.php
single.php
PHPに慣れていないとわかりにくいかと思いますが、レイアウトの違いのポイントは１つだけです。
single.phpの中には、コンテンツを表示する記述の下に<?php get_sidebar(); ?>という記述がありますが、page.phpにはない、ということです。
get_sidebar()は、sidebar.phpというサイドバーを表示するためのテンプレートファイルを呼び出す関数（テンプレートタグ）です。single.phpではサイドバーを呼び出していますが、page.phpでは呼び出していない、これがページの表示の違いとなって表れているわけです。
このようにワードプレスは、テンプレート階層をうまく使ってページ表示を分けています。
より詳しいテンプレート階層はCodexを見よう
上のテンプレート階層の表はわかりやすいように代表的なものだけを記述しましたが、このほかにも優先されるテンプレートファイルは存在します。詳しくはワードプレスCodexテンプレート階層ページの”概観図”をご覧ください。
http://wpdocs.osdn.jp/テンプレート階層例えば、このCodex内テンプレート階層ページの”概観図”の中の固定ページのテンプレートファイルを見ると、page.phpより左側にpage-$id.phpというより優先度の高いテンプレートファイルが記載されています。
固定ページのidをうまく利用すれば、通常の固定ページと違う特別なページを作ることができる、ということです。
例えばidが123の固定ページの場合は、page-123.phpというテンプレートファイルを作成しておきます。そうすれば、id=123の固定ページのみpage-123.phpを使用し、その他の固定ページはpage.phpを使用することになるわけです。
このようにテンプレｰト階層をうまく利用すれば、ページ毎に表示させるコンテンツ/レイアウトを変化させる、というカスタマイズができるわけですね。
ここまででレベル３をまとめておくと次のようになります。
レベル３ともなると、十分仕事でサイト制作が請負できるようになります。
レベル４：テーマを自作する
レベル4はテーマを自作できる、というレベルです。
これはもはや説明の必要もないでしょう。レベル１～３までを全て網羅できるスキルが身に付けば、実際にオリジナルのテーマを制作できるようになります。
ただ、理解する、というのと身につく、というのは少し違います。例えば、レベル２や３の場合、ある程度しくみを理解できれば、あとはググったり書籍で調べたりしながら既存のテーマを改造する、という作業を進めることができます。
しかし、全くのゼロからテーマを構築する、ということとなると・・・理解だけでなく、スキルが身についているからこそできる企画・設計も必要です。当然その分ハードルは高くなります。
とはいえ、売り物にならない程度のテーマならば、レベル３を少しかじればできるようになるでしょう。
実際私は、HTMLとCSSでゼロからコーディングしてサイト制作をすることはできますし、それをベースにしてワードプレス化し（すなわちテーマの自作の入口くらいでしょうか）、サイト運営もしていました。
しかし売り物レベルのテーマを作成する、ということとなると、レベル３までを極めていることはもちろんのこと、テーマカスタマイザーなどの使いやすいUIやその他の機能をどこまで盛り込むのかも含めて企画・設計できなければなりません。
さらに保守としても最新のワードプレスのバージョンアップやPHPのバージョンアップにも対応し続ける、など、やらねばならないことが結構でてくるのですね。
それでもテーマが売れなければビジネスになりませんので、なかなか難しいものですね。
しかしテーマを一度自作してみること自体は、ワードプレスの理解という意味で勉強になります。
私が開催しているセミナーではテーマの自作といったレベルまではレクチャーしていませんので、スクールに通うか、スクールに通うのが金額的に厳しければ、次のようなサービスを利用してみるのもよいでしょう。
初心者だけどワードプレスだけでなくHTML・CSSやブートストラップ（CSSフレームワークの一種）を学んでテーマを作成できるようになりたい、という方にはおすすめです。
そこまで時間は取れない、という方は、レベル３までを極め、既存のテーマを深く理解してカスタマイズの引き出しを増やしておくことでも仕事につながります。
いくつか気に入ったテーマを１つ２つ見つけて、それを徹底的にカスタマイズしていろいろなサイトを制作できるようにしておくとよいでしょう。
レベル３までを網羅的に習得
テーマ制作の企画・設計力
保守・管理能力
テーマをカスタマイズをするときの注意事項
カスタムCSSの記事でも記述したことですが、レベル２、３においては、既存テーマのファイルを書き換える、という作業ですので、次のことに気をつけましょう。
サイトのバックアップは必ず取っておく
私はプラグインAll in One WP Migrationでサイトをまるごとバックアップしておいてからカスタマイズしています。
バックアップ容量が512MBを超えると有料ですが、十分価値はあると思います。
FTPソフトでサーバーにアクセスできるようにしておく
レベル２のカスタムCSSならばダッシュボードの中でstyle.cssを編集する、ということでもよいかもですが、レベル３ともなると、直接サーバーからファイルをダウンロードしてエディターで編集していくというのが現実的だと思います。
また、少し込み入ったカスタマイズをする（特にfunctions.phpをいじる）なんて場合は、サーバーにある実サイトで実行する前にローカル環境でテストしておくべきです。
したがって、FileZillaなどFTPソフトは必須です。
また、ローカル環境は、私はXAMPPを使っています。ワードプレス以外のWeb制作にも活用できるので。
でも簡単で人気なのはLocal by Flywheelですね。ワードプレスにしか使えませんが、ワードプレスのカスタマイズには簡単でもってこいです。私もサブのパソコンではXamppでなくLocal by Flywheelを使っています。
https://localwp.com/子テーマを利用する
レベル４だと逆に必要ありませんが、レベル３、４では必須です。直接親テーマのファイルを触ることがないので、最悪でもテーマそのものを壊すことはないので安心です。
私が実際にカスタマイズするときには、
①All in One WP Migrationで実サイトのコピーを取る
②Local環境（XamppまたはLocal by Flywheel）にコピーを移植
③Local環境で子テーマのファイルを編集（Localだと編集のたびにすぐサイト表示を確認できる）
④変更した子テーマのファイルのみFileZillaで実サイトのサーバーにアップロードする
といった手順でやっています。
まとめ
ワードプレスのカスタマイズのレベルに応じて必要なスキル、カスタマイズするうえでの注意点を解説してきました。
各レベルを最後にまとめておきます。
言うまでもありませんが、レベルがアップするほどテーマ依存度は低くなります。
私見ですが、個人レベルでカスタマイズを楽しむならばレベル2で十分かな、と思ったりします。そして、時々機能を足したいという場合に、レベル３を少しかじる程度でもよいのではないでしょうか。
あるいは仕事の請負を目指してレベル３を極めるのもありですね。
