chiilog

WordPressのテーマカスタマイザーを使うときに考えておいたほうがいいなと思ったこと

—

by

chiaki
in

この記事は旧ブログ（mellowchanter）からの移植記事です。

結構WordPressはやってきているのですが、使い始めた頃から我流で、テーマテリトリー・プラグインテリトリーなどの考え方なんてもちろんなくて、全部テーマファイルにベタ書きするような使い方をしていました。

ですが、初めて関西で参加したWordCamp Kobe 2013でWordBenchの存在を知って、たくさんの人と知り合って、だんだんWordPressの機能を活用できるテーマの作り方が出来るようになってきました。

メニューはカスタムメニューを使って、サイドバーにはウィジェットを使って。時にはプラグインで機能を拡張して。
そんなこんなで「WordPressの機能を活用できる」サイトを作るように心がけていたのですが、テーマカスタマイザーの機能はあまり触ったことがなくて、ようやくしっかり触る機会があったので、「これは最初に詰めておいたほうがいいな」と思ったことを、配色を例に書いてみました。

テーマカスタマイザーとは？

管理画面の[外観]→[カスタマイズ]から、テーマの編集が出来る機能のことです。
何を編集できるのかは、その有効化しているテーマによりますが、

  • サイトの基本情報（サイト名や、サイトのディスクリプション、ファビコン）
  • 固定フロントページの選択（最新の投稿か、特定の固定ページにするのか）

この2点については、おそらくどのテーマでも[外観]→[カスタマイズ]から変更できます。

テーマカスタマイザーが充実しているテーマでは、テキストや背景色はもちろん、SNSのURLを管理したり、レイアウトのカラムを選択したりする機能をもつテーマもあるようです。

また、WordPress4.5からロゴを設定する機能がコアに実装されました。

WordPress 4.5 から追加されたカスタムロゴを使用する方法 | VisuAlive – 埼玉県蕨市で活動するWeb制作者

テーマカスタマイザーをつけるのは簡単？

日本語版CodexのテーマカスタマイズAPIのページにはこうあります。

この記事は、あなたが WordPress のテーマやプラグイン作成について説明しているテーマの作成、プラグインの作成を読んでいることを前提としています。また、オブジェクト指向プログラミングについての理解も必要です。WordPress の Settings_API に精通しているなら、より理解しやすいでしょう。

端的に言うと、難しいです。コードだけならサンプルテーマカスタマイズクラス（英語はこちら）の項目からコピーしてくればいいのですが、ただコピーしたからといって動かないのが難しいところ・・・。

わたしもまだ全貌を掴みきれていないので、具体的なテーマカスタマイザーの使い方は今回は書けませんが、いずれ使用方法をまとめたいなと思います。

テーマカスタマイザーをつけるときに考えたいこと

まず、デザインをするときに「どこをカスタマイズできるようにするのか」を考える必要があります。

色だけでも

  • 背景色
  • リンクの色
  • テキストの色
  • ボタンの色
  • 見出しテキストの色

などなど、考えられるところはたくさんあります。たとえば、こんなデザインがあるとします。

あえて全て違う色にしてみました。こういうデザインだと、考えうるテーマカスタマイザーで変える箇所は、下図のようになると思います。

  1. 全体の背景色
  2. カテゴリー名の背景（必要であればカテゴリー名のテキスト色）
  3. テキストの色
  4. 見出しについているボーダーの色（紫の箇所と灰色の箇所）
  5. シェアボタンの背景色
  6. この記事の関連記事の背景色

必要であれば、の項目を含めると計8色。ここまで細かすぎると、逆にありがた迷惑な感じもしますね。
かといって、背景だけを変えれるように想定すると、5番のシェアボタンの背景など、設定された色によってはサイトがちぐはぐな感じになってしまいます。

基本的に、使用する色は3色＋無彩色に

3色とは、「ベースカラー」「メインカラー」「アクセントカラー」の3色のことです。Webの基本的な配色ですね。
必要に応じて、「サブカラー」も追加してよいと思いますが、あんまりに増えすぎると「これはどこの色？」となってしまいます。

では、今回のサンプルの場合の配色を考えてみます。

配色はPaletton.comから生成してみました。これをベースに考えてみます。色を整理するとこうなりました。

コンテンツエリアの背景は、白の透過グラデーションにしました。
見出しのボーダーも、有彩色は変更ができるようにして、グレーを薄くしてどんな色が設定された場合でもなじむようにしています。

これで、テーマカスタマイザーで変えた場合はこうなります。

配色の考え方の参考サイト

まとめ

わかりやすいのは何かなと思ってデザイン寄りの話になりましたが、例えば

  • SNSアカウントへのリンクをカスタマイザーで管理するのか（or プラグインを使うのか）
  • No Imageの扱いはどうするのか（アイキャッチが登録されなかったら何も出さないのか、テーマカスタマイザーで設定した画像を出すのか）
  • 1カラムや2カラムにするボタンをつけてみる

などなど、テーマカスタマイザーを使って出来ること、したいこと、あえてしないこと、用途はかなり広いです。

多機能・高機能にすると、かえって管理画面が煩雑になって使いづらくなってしまったりすることもあるので、この辺りは要件と要相談ですね。