ワードプレスをやろう!と決めてから何日も過ぎている・・・

ようやく初めてログインできても全く進まない・・・

なんとかブログの投稿を始めたが全然稼げない・・・

これ以上時間を無駄にしたくない・・・

そんなあなたには下記の書籍がおすすめです!

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

初めてでも迷わない!ワードプレスのカスタマイズ方法4つのステップ(テーマカスタマイザー/CSS/PHP/テーマの自作) 

ワードプレスは、カスタマイズの自由度が高く、自分オリジナルのサイトが作成できることが魅力です。

しかし

自由にできる=それなりのスキルが必要

ということでもあるので、すぐに誰でもできるようになる、というわけではありません。

でも次の4つのステップを理解して進めていけば、迷わず着実に進めていけるでしょう。

  • レベル1:コーディング(専門言語)なしでカスタマイズ
  • レベル2:カスタムCSSでカスタマイズ
  • レベル3:テンプレートファイルやfunctions.phpを編集してカスタマイズ
  • レベル4:テーマを自作してカスタマイズ

この記事では、これから本格的にワードプレスのカスタマイズをしていきたい、と考えているあなたに、

カスタマイズス習得の4つのステップについて解説いたします。個人でブログサイトのカスタマイズを楽しむのに十分なレベル~仕事を請け負うのに必要なレベルまで把握できるようになります。

レベル1:コーディング(専門言語)なし

必要なスキル

テーマカズタマイザーを使いこなす

専門言語を使わずに、テーマカスタマイザーを使ってデザインをする段階です。必要な機能はプラグインで増強します。

テーマで準備された範囲でのデザイン変更となりますので、テーマ依存性が最も高くなります。

したがって、どのテーマを選択するのか?が一番重要な要素となりますよね。

選択したテーマにもよっては、個人ブログであれば、このレベル1でも十分運用もできますし、記事の質と量に応じて集客やアフィリエイトなどのビジネスにも十分通用します。

本来のワードプレスの理想的な形は、このレベル1です。そのためにさまざまなテーマとプラグインが提案されているわけです。

レベル1の概要

レベル2:カスタムCSSを使う

必要なスキル

HTMLとCSS

とはいえ、どんなに高機能なテーマであっても、同じテーマを使用している限り、どこか似通ったサイトができてしまいます。

また、使っているうちに、自分が欲しいデザインの内容も変わっていくこともありますよね。最初はテーマが準備してくれた見出しデザインで満足していたけれどもう少し違った見出しにしてみたくなった、とか、ヘッダー画像をページによって変えてみたくなった、とか。

そんなちょっとしたデザイン変更をするのであれば、CSSという言語を編集・追加してカスタマイズする、カスタムCSSを使うのが便利です。

カスタムCSSについては、次の記事でかなり詳しく使い方とポイントを解説しています。

カスタムCSSは、HTMLとCSSの基本知識があれば、あとはググって調べることでかなりのデザイン変更ができるようになります。

次のレベル3に比べると習得のハードルはぐっと低いので、まずはここまでできるようになりたいですね。

簡単なアニメーションなんかも、Javaascriptを使わずともCSSでできますし、年々CSSでできることは増えていくでしょう。

レベル2の概要

レベル3:PHPでテーマの各ファイルを編集する

必要なスキル

PHP
テンプレートタグ
必要に応じてJavascript・JQuery

カスタムCSSではデザインの変更はできますが、機能の変更・追加はできません。

例えば、次のような機能を追加するにはこのレベル3が必要です。

  • ブログ記事一覧表での記事の並び順を古いものを上にする
  • あるカテゴリーの記事一覧をトップページに表示する
  • javascriptやjQueryで表示機能を追加する

ワードプレスはPHPというサーバー側で動くプログラミング言語で記述されていますので、機能の編集・追加をするためには、PHPを使うスキルが必要不可欠というわけですね。

また、ワードプレスにはPHPの中で使える専用の関数が準備されています。これをテンプレートタグといいます。

例えばthe_title()というテンプレートタグで記事のタイトルを表示し、the_content()というテンプレートタグで記事の中身を表示する、という感じです(いずれもPHPの中で記述し、ワードプレスループというループの中で使います)。

PHPとテンプレートタグを使って、テーマのファイルを編集して機能を追加する、というのがこのレベル3です。

そのためには、PHPとテンプレートタグを知るだけでなく、ワードプレスのしくみをある程度知っておく必要がありますので、以下、ざっと解説していきましょう

テーマの中のファイル構成と編集するファイル

PHPやテンプレートタグで編集するファイルが入っているテーマフォルダの中身をを見てみましょう。

テーマフォルダは、サーバー内のワードプレスをインストールしたディレクトリ内の、wp-content/themes/の中にあります。

例えばFileZillaなどで、公式テーマTwenty Seventeenを見てみると、次のようなファイル構成となっています。

TwentySeventeenのテーマディレクトリ内

多くのファイルが表示されていますが、実は画面内に入りきらず表示されていないファイルもあります。

この中で、PHPテンプレートタグを使って実際に編集していくファイルは、functions.phpテンプレートファイルというファイルになります

functions.phpというのは、テーマの機能を追加するのに使用するファイルで、いわばテーマ専用のプラグインと考えればよいでしょう。

テンプレートファイルというのは、コンテンツを記述するための器(うつわ)の役割をするファイルで、上の図でいえば、functions.php以外の〇〇.phpファイルはみんなテンプレートファイルです。

テンプレートファイルは、テーマによって準備されているファイル数と種類が異なります。

PHPとPHPファイル

〇〇.phpは、中身がPHPで記述されているファイルです。ワードプレスはPHPで記述されたシステムですので、主な構成ファイルは〇〇.phpとなるわけですね。

ところで、PHPの基本的な記述形式は次のようになっています。

PHPの記述形式

PHPは<?phpで始まり、?>で終わる形式ですが、特徴として上のようにHTML文の中に自由に挿入して実行できる、という特徴を持っています。HTML文との相性がよいプログラミング言語だということですね。

こういった理由で、PHPはワードプレスだけでなくさまざまなWebアプリケーションに応用されています。

テンプレートファイルの役割

テンプレートファイルという器の中に必要なコンテンツデータをデータベースから取得してはめ込むことでページを作成(HTML文として作成)する、これがワードプレスでWebページを表示させるしくみです。

ワードプレスのWeb閲覧のしくみ

このとき、どの器(テンプレートファイル)を使うかで、ページで表示するコンテンツとその基本レイアウトが決まります。

例えば、テーマTwenty Seventeenでは、固定ページと投稿ページとでは次のように大きくレイアウトが異なります。

Twenty Seventeenの固定ページと投稿ページのレイアウト比較

固定ページは1カラム、投稿ページはサイドバーある2カラムのレイアウトとなっています。

これは、固定ページと投稿ページで使用されるテンプレートファイルが異なることから起因しています。では、このテンプレートファイルはどのように選ばれているのでしょうか?

テンプレート階層を理解してうまく利用する

ワードプレスではテンプレート階層というルールで、ページの種類によって自動的にテンプレートファイルを選択します。

次の図は、よく使われるテンプレートファイルのテンプレート階層を表したものです。

主なテンプレートファイルとテンプレート階層

一番左にページの種類、そしてその右側にそれぞれに適用されるテンプレートファイルが記載されています。

テンプレートファイルが複数存在する場合は、左側に記載されているものが優先されます。

一番シンプルなテーマの場合、index.phpさえテンプレートファイルとして存在すればテーマとして成り立ち、すべてのページはindex.phpで表示することとなります。どのページでも表の一番右にあるのがindex.phpだからです。

テーマTwenty Seventeenの場合は、赤字で記載されているテンプレートファイルが準備されています。それを見ると、固定ページにはpage.php、投稿ページにはsingle.phpが使用される、ということになりますね。

先ほど、Twenty Seventeenの固定ページと投稿ページのレイアウトの違いは、page.phpが1カラム、single.phpが2カラムのテンプレートであるということなのです。

実際に、Twenty Seventeenのpage.phpとsingle.phpの中身を見てみると次のようになっています。

page.php

Twenty Seventeenのpage.php

single.php

Twenty Seventeenのsingle.php

PHPに慣れていないとわかりにくいかと思いますが、レイアウトの違いのポイントは1つだけです。

single.phpの中には、コンテンツを表示する記述の下に<?php get_sidebar(); ?>という記述がありますが、page.phpにはない、ということです。

get_sidebar()は、sidebar.phpというサイドバーを表示するためのテンプレートファイルを呼び出す関数(テンプレートタグ)です。single.phpではサイドバーを呼び出していますが、page.phpでは呼び出していない、これがページの表示の違いとなって表れているわけです。

このようにワードプレスは、テンプレート階層をうまく使ってページ表示を分けています。

より詳しいテンプレート階層はCodexを見よう

上のテンプレート階層の表はわかりやすいように代表的なものだけを記述しましたが、このほかにも優先されるテンプレートファイルは存在します。詳しくはワードプレスCodexテンプレート階層ページの”概観図”をご覧ください。

例えば、このCodex内テンプレート階層ページの”概観図”の中の固定ページのテンプレートファイルを見ると、page.phpより左側にpage-$id.phpというより優先度の高いテンプレートファイルが記載されています。

page_pheより優先度の高いテンプレートファイル

固定ページのidをうまく利用すれば、通常の固定ページと違う特別なページを作ることができる、ということです。

例えばidが123の固定ページの場合は、page-123.phpというテンプレートファイルを作成しておきます。そうすれば、id=123の固定ページのみpage-123.phpを使用し、その他の固定ページはpage.phpを使用することになるわけです。

このようにテンプレート階層をうまく利用すれば、ページ毎に表示させるコンテンツ/レイアウトを変化させる、というカスタマイズができるわけですね。

ここまででレベル3をまとめておくと次のようになります。

レベル3の概要

レベル3ともなると、十分仕事でサイト制作が請負できるようになります。

レベル4:テーマを自作する

レベル4はテーマを自作できる、というレベルです。

これはもはや説明の必要もないでしょう。レベル1~3までを全て網羅できるスキルが身に付けば、実際にオリジナルのテーマを制作できるようになります。

ただ、理解する、というのと身につく、というのは少し違います。例えば、レベル2や3の場合、ある程度しくみを理解できれば、あとはググったり書籍で調べたりしながら既存のテーマを改造する、という作業を進めることができます。

しかし、全くのゼロからテーマを構築する、ということとなると・・・理解だけでなく、スキルが身についているからこそできる企画・設計も必要です。当然その分ハードルは高くなります。

とはいえ、売り物にならない程度のテーマならば、レベル3を少しかじればできるようになるでしょう。

実際私は、HTMLとCSSでゼロからコーディングしてサイト制作をすることはできますし、それをベースにしてワードプレス化し(すなわちテーマの自作の入口くらいでしょうか)、サイト運営もしていました。

しかし売り物レベルのテーマを作成する、ということとなると、レベル3までを極めていることはもちろんのこと、テーマカスタマイザーなどの使いやすいUIやその他の機能をどこまで盛り込むのかも含めて企画・設計できなければなりません。

さらに保守としても最新のワードプレスのバージョンアップやPHPのバージョンアップにも対応し続ける、など、やらねばならないことが結構でてくるのですね。

それでもテーマが売れなければビジネスになりませんので、なかなか難しいものですね。

しかしテーマを一度自作してみること自体は、ワードプレスの理解という意味で勉強になります。

私が開催しているセミナーではテーマの自作といったレベルまではレクチャーしていませんので、スクールに通うか、スクールに通うのが金額的に厳しければ、次のようなサービスを利用してみるのもよいでしょう。

初心者だけどワードプレスだけでなくHTML・CSSやブートストラップ(CSSフレームワークの一種)を学んでテーマを作成できるようになりたい、という方にはおすすめです。

そこまで時間は取れない、という方は、レベル3までを極め、既存のテーマを深く理解してカスタマイズの引き出しを増やしておくことでも仕事につながります。

いくつか気に入ったテーマを1つ2つ見つけて、それを徹底的にカスタマイズしていろいろなサイトを制作できるようにしておくとよいでしょう。

必要なスキル

レベル3までを網羅的に習得
テーマ制作の企画・設計力
保守・管理能力

テーマをカスタマイズをするときの注意事項

カスタムCSSの記事でも記述したことですが、レベル2、3においては、既存テーマのファイルを書き換える、という作業ですので、次のことに気をつけましょう。

サイトのバックアップは必ず取っておく

私はプラグインAll in One WP Migrationでサイトをまるごとバックアップしておいてからカスタマイズしています。

バックアップ容量が512MBを超えると有料ですが、十分価値はあると思います。

FTPソフトでサーバーにアクセスできるようにしておく

レベル2のカスタムCSSならばダッシュボードの中でstyle.cssを編集する、ということでもよいかもですが、レベル3ともなると、直接サーバーからファイルをダウンロードしてエディターで編集していくというのが現実的だと思います。

また、少し込み入ったカスタマイズをする(特にfunctions.phpをいじる)なんて場合は、サーバーにある実サイトで実行する前にローカル環境でテストしておくべきです。

したがって、FileZillaなどFTPソフトは必須です。

また、ローカル環境は、私はXAMPPを使っています。ワードプレス以外のWeb制作にも活用できるので。

でも簡単で人気なのはLocal by Flywheelですね。ワードプレスにしか使えませんが、ワードプレスのカスタマイズには簡単でもってこいです。私もサブのパソコンではXamppでなくLocal by Flywheelを使っています。

子テーマを利用する

レベル4だと逆に必要ありませんが、レベル3、4では必須です。直接親テーマのファイルを触ることがないので、最悪でもテーマそのものを壊すことはないので安心です。

私が実際にカスタマイズするときには、

①All in One WP Migrationで実サイトのコピーを取る
②Local環境(XamppまたはLocal by Flywheel)にコピーを移植
③Local環境で子テーマのファイルを編集(Localだと編集のたびにすぐサイト表示を確認できる)
④変更した子テーマのファイルのみFileZillaで実サイトのサーバーにアップロードする

といった手順でやっています。

まとめ

ワードプレスのカスタマイズのレベルに応じて必要なスキル、カスタマイズするうえでの注意点を解説してきました。

各レベルを最後にまとめておきます。

カスタマイズの4つのレベル

言うまでもありませんが、レベルがアップするほどテーマ依存度は低くなります。

私見ですが、個人レベルでカスタマイズを楽しむならばレベル2で十分かな、と思ったりします。そして、時々機能を足したいという場合に、レベル3を少しかじる程度でもよいのではないでしょうか。

あるいは仕事の請負を目指してレベル3を極めるのもありですね。

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる