Webサイト制作のCMSとしてWordPressを使用している方は多いと思いますが、Webサイト制作の場合はオリジナルでテーマを作ることが多いと思います。
TAMでもデザインから作成して、オリジナルのテーマにすることが多いですが、予算や納期に合わせて、既存のテーマをカスタマイズして作る取り組みなども行っています。
僕も2回ほど既存テーマをカスタマイズしてサイト制作を行う機会があり、メリットやデメリット、カスタマイズするときのポイントが見えてきたので紹介しようと思います。
既存テーマを使う4つのメリット
工数を減らすことが出来る
簡単に高品質なサイトを作ることが出来るので、Webサイト構築にかかる時間が大幅に短縮できます。 簡単な設定などをするだけで使いはじめることができるので、サイトを素早く作って、コンテンツ作りに時間をかけることが出来るというのは大きなメリットだと思います。機能が豊富
例えば配布されているテーマの多くはレスポンシブデザインで作成されており、マルチデバイス対応になっています。 また、高機能なものなどテーマによっては、- レイアウトの変更が簡単に可能
- スライダー
- SNSとの連携が簡単に出来る
- 人気記事のレコメンド
管理画面から様々な設定やカスタマイズができる
これもテーマによって出来ることは変わりますが、管理画面から様々な設定をすることでサイトが出来るようになっているものが多いように思います。 僕が使ったテーマでは、管理画面からロゴの変更・色味の変更やカラム数の変更など、管理画面から簡単にデザインを調整することができ、HTMLやCSS、PHPの知識がなくてもサイト制作をすることが出来るようになっていました。テーマ作りの参考になる
これは制作者に取ってのメリットになると思いますが、自分でオリジナルのテーマを作る際に参考になる部分がたくさんあると思います。 例えば僕の触ったテーマでは、記事を書くためのショートコードが豊富に用意されていたり、カスタムフィールドを使用して細かい設定ができるようになっていたりと、入力や更新のしやすい管理画面になっていて、自分でテーマを作る際に参考にしたい部分がたくさんありました。既存テーマを使う4つのデメリット
逆にデメリットや注意点もあるので紹介していきます。テーマの仕様を理解するのが大変
テーマによって機能や出来ることは違います。 そのため、そのテーマにどういう機能が用意されていて、何が簡単にできるのか、その設定はどこからするのか。 逆に何はできないのかなど、そういった仕様を理解するところから始めなくてはいけません。 テーマの紹介で○○が出来ると書いてあったので設定しようと思ったが、どこから設定するのかがわからなくて探しまわるということが何度もありました。細かいデザインの調整や機能外のカスタマイズが大変
管理画面から様々なカスタマイズが出来るとはいえ、細かい部分や既存の機能を少し変更したい時、機能外のカスタマイズを行いたい場合は、テンプレートファイルを触らないといけません。 ですが、多くはその多機能さゆえに、テンプレートファイルがとても複雑に作られているため、Web制作に携わる人であっても、高いスキルがないと理解することは難しいと思います。 基本的にテンプレートやCSSをさわることなく構築ができるようになっているので、デザインの細かい調整のためにHTMLを変更したいと思った時にも、該当のHTMLがどこにあるかわからないことも多いです。イメージ通りの見た目にならない場合がある
デモでは良い感じに見えたのに、写真や文字を当て込んでみたらなんか微妙… みたいなこともあります。 デモでは綺麗な写真が使われていますし、英語ではかっこ良く見えるけど日本語に変えてみたらイメージと違うみたいなことは起こりがちです。似たようなサイトデザインになってしまう
これは当然ですが、同じテーマを使っているサイトがあれば同じようなデザインになってしまいます。 見る人が見れば使っているテーマなどもわかってしまうと思います。 オリジナリティを求めるのであれば避けたほうが良いでしょう。有料テーマや野良配布テーマを使う時の注意点
配布されているWordPressテーマの中には、セキュリティ上の問題があるものや、悪質なスクリプトが埋め込まれているものなどもあるので注意が必要です。 どのぐらい危険かは、Firegobyさんの記事WordPressテーマをググって探すのは超ハイリスクなので気をつけよう！をみるとわかりやすいです。 無料のテーマに関しては、基本的には野良配布テーマは使わずに公式ディレクトリに登録されているテーマを使うことをおすすめします。公式ディレクトリに登録されているものは以下の様なメリットがあるので安全です。- 審査が入って、許可が出ないかぎり掲載されることがないため安全なソースコードが担保される。
- テーマがアップデートされた場合、管理画面にアップデートの情報が出てくる。
- GPLライセンスがが担保されているので、利用者は制限なく使うことが出来る。
カスタマイズ方法
カスタマイズには子テーマを使おう
既存テーマのカスタマイズをする際は、WordPressの子テーマという機能を使ってカスタマイズを行うことをおすすめします。 子テーマというくらいなので別途テーマを作る必要はあるのですが、使いたいテーマの機能や見た目を継承しつつ、変更したい部分だけをカスタマイズすることが出来るようになります。 なぜ、直接カスタマイズするのではなく子テーマを使うかというと、配布テーマの多くは機能追加等があるとアップデートが行われます。 アップデートすると、テンプレートファイルが上書きされてしまうので、直接テンプレートファイルに施したカスタマイズは無効になってしまいます。 それでは困るので子テーマを使います。 子テーマについての詳しい説明は省きますが、下記のブログで詳しく説明されていましたので紹介しておきます。 WordPressテーマをカスタマイズするなら子テーマを使った方が良い理由、使い方など子テーマを作るときの注意点
style.cssに書くのは親のテーマ名ではなくフォルダ名 子テーマを作る際にfunctions.phpとstyle.cssは必須ですが、style.cssには最低でも、子テーマの名前と親テーマのフォルダ名の記載が必要です。 親テーマはテーマ名ではなくフォルダ名なので注意が必要です。 ディレクトリパスの取得にはget_stylesheet_directory_uri()を使うget_template_directory_uri()を使用すると親テーマのディレクトリを参照してしまうので、子テーマのディレクトリを参照したい場合はget_stylesheet_directory_uri()を使用しましょう。
カスタマイズ用のCSSを作る
管理画面からcssを編集できるテーマもあるようですが管理画面でcss書くのめんどくさいので、子テーマ側でカスタマイズ用のcssを作って、そこにスタイルを書いていくと便利だと思います。 ただ、これもheader.phpに直接読み込みを書くのではなく、functions.php内でwp_enqueue_styleを使用して読み込む方法がおすすめです。
wp_enqueue_style
参考までに僕の書いたfunctions.phpです。
ここで注意することは、普通に読み込みをすると既存テーマのcssより先に読み込まれてしまい、cssの上書きができないので読み込みの順番を指定するところです。
今、hogeと記述してあるところにcssのIDを入れるとそのCSSより後に読み込まれます。
cssのidはソースを見るとid="hoge-css"と書いてありますが、hogeのところがidなので「-css」は不要です。