WordPress公式テーマを選ぶ時はデモサイトを見るべし!プレビューで判断しちゃダメ。絶対。

WordPressテーマ

WordPress Official Theme Directory Top

WordPressの公式ディレクトリに登録されているテーマは、有料テーマの販促用に機能を制限した無料版という位置付けのものが多いので、デザイン的に優れたテーマが多いように思います。

しかしその公式テーマもダッシュボードからのプレビュー画面では、テーマのデザインが全くと言っていいほどわかりません。もし、あのプレビュー画面でテーマの良し悪しを判断してる方がいたら、それは理想のテーマに出会うチャンスを逃している可能性大?かも?

というわけで、当エントリーでは公式テーマを選ぶ時は必ずデモサイトを見てからにしましょうね?というお話になります。

プレビューで判断しちゃダメ。絶対。

ダッシュボードからのプレビュー画面ではテーマの良さが全く伝わらないどころか、どのテーマもほとんど同じに見えちゃうんですよねぇ…むしろあの詳細画面にこそデモサイトへのリンクを貼るべきだと思うんですが、なんであんな面倒くさい事になってるのかと小一時間問い詰めたい、いやマジで。

とは言え、インストールして有効化したばかりのテーマは実際あんな感じになる事が多いので「全然話が違うじゃないですか!」とはいつも思いますが、必要な設定さえきっちりとしてやればデモサイトのようになる…はずです。

ただし、海外テーマを日本語の環境で利用する場合、フォントのサイズやマージンの手直しくらいは必要だと思って下さい。

何れにしてもまずはデモサイトを見ましょう、話はそれからです。

デモサイトとプレビューの違いの例

違いがわかりやすい例をいくつか選んでみました。

Sydney

画面いっぱいのスライダーがトップにあるので一瞬「おっ?」と思いますが、Sydneyのウリのパララックスが全く生かされていません。と言うかわざわざSydney使ってこんな普通のブログ作る人いないと思うんですけど…(いたらすいません、決してディスってるわけじゃないです)

参考 プレビュー デモサイト

Ultimate

見た目はスッキリして上品な感じはします…が、もうこれ何のテーマだかわかんないよというか、どのテーマでもほとんど同じじゃね?って感じです。

参考 プレビュー デモサイト

Colormag

マガジンスタイルのテーマも選んでみましたが、同じテーマとは思えないレベルでヤバいです。

参考 プレビュー デモサイト

全くプレビューになっていないのが問題

こうしてあらためて見るとよくわかりますが、プレビューではアイキャッチも無いような記事一覧と、簡単な投稿・固定ページしか無いのがやはりマズいのではないかと…フロントページのデザインが凝ったテーマほどデザインがわかりにくいと言うか、ここまでくるとプレビューの役割を全く果たしてないと言っていい気がします。

テーマのデモサイトを確認しよう

デモサイトを確認する手順としては

  • ① WordPress公式ディレクトリから気に入ったテーマを探す
  • ② そのテーマのホームページに行く
  • ③ ページ中にあるデモサイトへのリンクを探す
  • ④ デモサイトを開く

という流れになります。

まずはここからスタートしましょう。

WordPressテーマ 特徴で絞り込む

人気・最新のタブから適当に見つくろってもいいですが、希望するテーマの特徴である程度絞り込んだ方が自分好みのものを探しやすいです。

WordPressテーマ フィルターの設定

特徴で絞り込むをクリック > 該当するものに チェックを入れる > フィルターを適用をクリックでテーマを絞り込んで一覧表示する事が出来ます。

テーマの詳細は別タブで開くべし

WordPressテーマ 詳細情報

デモサイトを見る為には、テーマの画像をクリックして詳細情報からテーマのホームページへ移動し、更にそのページからデモサイトへのリンクを探して開く事になります。

WordPressテーマ ホームページへのリンク

デモサイトを見た後に毎回ブラウザのバック機能でテーマ一覧まで戻るのも面倒ですし、そうする事によってテーマの一覧がリセットされてしまう場合があるので、引き続きテーマのデモサイト巡りを続ける場合はブラウザの別タブで詳細情報を開くようにした方がいいです。

デモサイトへのリンク

テーマのホームページに行くと大抵そのページ内に

  • Demo
  • View Demo
  • Live Demo
  • View Live Demo

この中のどれかが書かれたボタンかリンクがあるかと思います。Free(Lite)とProでリンクが分けてある場合はFreeの方をクリックしましょう。

WordPressテーマ デモサイトへのリンク1

WordPressテーマ デモサイトへのリンク2

中にはFree版(テーマ名+Liteという名称が多い)なのかPro版(有料版は大抵テーマ名+Pro)なのか明記していない場合もありますが、インストールしてみたらFree版ではほとんどの機能が使えなかったという事も…Free版とPro版でデモサイトが分けてある場合はそういった事は無いはずです。

テーマによってはデモサイトが無い場合もあります。

レスポンシブ表示を確認出来る場合あり

デモサイトの一番上か下にこんな感じのツールバーが表示されている場合があります。

WordPressテーマのデモサイトにあるレスポンシブ表示用ボタン

アイコンからして使い方は何となくわかると思いますが、タブレットやスマホで見た場合のレイアウトが確認出来るので十分チェックしておきましょう。

デモサイトのようなカッコいいサイトを作ろう

デモサイトって本当にうまく作ってあるんですよね、本当にこれ無料でいいんですか?っていうレベルのテーマが多くて目移りするくらいです。

ただ、テーマを有効化した直後はデモサイトとはまるで別物な事が多く、どちらかと言えばプレビュー画面に近くてガッカリするかもしれません。設定方法はテーマによって違いますが、カスタマイザーやウィジェットを正しく設定して初めてデモサイトのようなデザインにする事が出来るわけです。テーマのホームページにインストールと設定に関する説明が用意されている場合もあるので、それをページごとGoogle翻訳にでも突っ込んで頑張ってみましょう。

当サイトでもこれいいなーと思ったWordPress公式ディレクトリのテーマをピックアップして、基本的な設定方法について書いていきたいと思ってます…が、いつになる事やら。