WordPressのテーマとは？

今回は「WordPressのテーマ」についてご紹介したいと思います。

WordPressのテーマとは？

そもそも、WordPressの「テーマ」とはなんでしょうか？

WordPressにおけるテーマ(Themes)とは、簡単に言うとサイトのデザインテンプレートパックのようなものになります。テーマを切り替えると、フロントエンドでのサイトの外観、つまり訪問者がWebでサイトを閲覧したときに表示される部分が切り替わります。

また、テーマは以下の要素等に関わってきます。

• サイトの全体的なデザインまたはスタイル
• フォント（文字）のスタイリング
• 色
• ウィジェットの場所
• ページレイアウト（またはテンプレート）
• ブログ投稿とブログアーカイブのスタイル

WordPressテーマには無料と有料のものがあり、2020年現在、約7000個以上の無料テーマと12000個以上の有料テーマが存在します。

テーマの構造・含まれているファイル

次に、テーマを構成しているファイルについて詳しく見てみましょう。テーマは基本的に「zipファイル」で保存されています。アップロードする際にはこのzipファイルをアップロードすることで、サイト上に追加することができます。

以下は、あるテーマのzipファイルの中身です。基本的にはファイル構成は以下のようになっています。

404.php
→404ページを表示する時のファイル

archive.php
→カテゴリーのアーカイブなどを表示するためのファイル

comments.php
→コメントセクションを表示するためのファイル

footer.php
→フッターエリアを表示するためのファイル

header.php
→ヘッダーエリアを表示するためのファイル

single.php
→投稿ページをを表示するためのファイル

style.css
→デザインを管理するCSSのコードをまとめてあるファイル

index.php
→メインテンプレートファイル

languages
→翻訳用の言語ファイルがまとめられているフォルダ

plugins
→テーマに付属している必須プラグインがある場合、プラグインが入っているフォルダ

テーマファイルはこのようなファイルで構成をされていますが、この中で必ず含まれている必要があるのは「index.php」「style.css」のファイルになります。他のファイルは必須ではなく、テーマのレイアウトを増やしたり、他のプラグインとの連携性を高めるために存在しています。

テーマの役割・機能

テーマはデザインテンプレートパックとご紹介しましたが、テーマは専用の機能が付属しているものも多いです。これにより、テーマを追加することで付属の専用プラグインも追加することになるので、専用の機能を使うことができるようになります。

有料テーマには多くの機能が付属しているものがありますが、あくまでもテーマに専用のプラグインが付属しており、それを同時にインストールすることでその機能を使えるようになるということです。テーマ自体に特別な機能がついているという訳ではありません。

↓以下は特別な機能が付属しているサイトの一例です

テーマ選びの際のチェックポイント

冒頭でもご紹介したように、オープンソースのWordPressでは多くのテーマが存在します。その中でどのように自分の目的やイメージに合ったテーマを見つけるのがよいのでしょうか？テーマの探し方から、着目すべき点についてご紹介します。

テーマの探し方

WordPress公式ディレクトリから探す

テーマを探すのに１番簡単な方法はWordPressのダッシュボード >「外観」>「テーマ」>「新規追加」から無料のテーマを探す方法です。

テーマ検索のフィルターを掛けることもできるので、自分の希望に合ったテーマを検索することもできます。

希望のテーマがあれば「詳細＆プレビュー」をクリックすることで、実際のDEMOテーマを確認することができます。実際に確認して見て、希望通りであれば「インストール」をクリックすることで自分のサイトにインストールすることができます。

WordPressのサイト内からでなくても、公式ディレクトリからも検索することが可能です。

WordPress Theme Directory https://wordpress.org/themes/

テーマのマーケットから探す

有料テーマを探すには Themeforest のような海外サイトを使うのが良いです。テーマ開発者が作成した高度なテーマを販売しており、実際にプレビューで確認することもできますし、実際のテーマ購入者のレビューを読むこともできます。

有料のWordPressテーマのメリットは、無料テーマにはない高度な機能性であったり、問題や疑問があった時にサポートに連絡ができる点です。無料テーマには基本的には簡易的なサポートフォーラムしかありませんが、有料テーマの場合は、テーマの開発チームがサポートを提供してくれます。

サイトの表示スピードを測定

開発者の作り方によってテーマのページ読み込み速度が変わってきます。これはテーマ以外にもホスティングサーバーなどの要素が起因しますが、できるだけ軽いテーマを選択するのがSEO的にもユーザービリティの点からもいいでしょう。

欲しいテーマを見つけたらインストールもしくは購入する前に、サイトのページ速度を計測することをオススメします。ページ速度の計測はトップページだけではなく、記事ページについても行なうのがよいでしょう。特にブロガーやオウンドメディア運営者の場合、多くのユーザーが見るのはブログの部分になるからです。

ページの速度を計測するサイトはいくつかありますが、以下の２サイトが一般的です。

上の２サイトはサイト速度を簡単に測定することができます。ホスティングサーバーの速度などにもよるので一概には言えませんが、できればスコアが高いテーマを選択するのがいいでしょう。有料テーマになるとテーマ説明欄にサイト速度の実証などが載っているものもあるので、そのようなテーマ選択するのもいいかと思います。

モバイル フレンドリー テストでスマホ表示をチェック

PC上では綺麗なテーマであっても、スマホでは思った通りではない、、ということもあります。テーマ導入を決める前にはスマホでもイメージ通りに表示されるかどうかを確認する必要があります。

DEMOサイトのURLがわかっていれば、それをスマホに送信して調べることで確認ができますが、PC条からも確認する方法があります。　Google Chromeの場合は「F12」もしくは右クリックで「検証(I)」を選択することで、開発者モードに進むことができます。そしてモバイルマークのアイコンをクリックすると、モバイルビューになります。

サイトによってはこれではスマホ表示に切り替わらない場合があるので、モバイルマークのアイコンをクリックした後に、ページの更新を行うことでスマホビューを確認できます。

スマホ表示になると、「ヘッダーのスタイル」や「サイドバーの位置」や「メニューのデザイン」が変更されることが多いので、しっかりとチェックしましょう。必要であれば、タブレットビューも確認することができます。

テーマをカスタマイズする方法

WordPressに関して初心者であっても、WordPressは簡単にカスタマイズすることが可能です。基本的には「ダッシュボード」>「外観」>「カスタマイズ」から行なうことができます。

カスタマイズ画面へ進むと、左側にバーが表示されてリアルタイムでサイトの情報を変更できます。例えば以下のような情報はカスタマイズ画面から設定ができます。

• サイトタイトル
• ヘッダーの画像
• モバイルヘッダーの画像
• サイトのメインカラー
• 背景画像・色
• メニュー
• ファビコン
• ウィジェット

有料のテーマだと、このカスタマイズ画面でさらに多くのことを編集できるものもあります。

また、テーマによっては専用のカスタマイズページを持っているものもあります。このようなテーマの場合はフッターの列数や、ページタイトルのデザイン、サイドバーの位置など事細かく設定することができます。

高度なカスタマイズも可能だが、注意が必要

コーディングの知識がある方なら、WordPressの構成ファイル自体を編集してカスタマイズすることも可能です。「外観」>「テーマエディター」から行なうことができます。

ただし、サイト内のファイルを直接いじることになるので、必要なコードを消してしまったり、不要なコードで邪魔をしてしまうと、最悪の場合はWordPressのサイトが表示されなくなってしまうことがあります。

コード書き込みエラーでページが表示されなくなってしまった場合、海外ではよく「死のホワイトスクリーン（White Screen of Death）」と呼ぶことが多いです。このようなことが起こらないように、コードを直接変更する場合は、しっかりとバックアップを取るか、知識のある方に依頼するのがよいと思います。

カスタマイズ箇所が見える化するプラグイン「Show Current Template」

コーディングによってサイトをカスタマイズする方向けに、便利なプラグインをご紹介します。「Show Current Template」というプラグインを使うと、今自分が見ているページを構成しているテンプレートを見ることができます。このプラグインは日本人が作っているということで結構気が利いたプラグインになっています。

インストールは「ダッシュボード」>「プラグイン」>「新規追加」から「Show Current Template」と検索すればインストール可能です。もしくはこちらからダウンロード可能です。

プラグインの使い方は簡単で、特に設定などはありません。プラグインを有効化すると、今いるページのテンプレートファイルがサイト上の管理者バーに表示されるようになります。また、それだけでなくそのページを構成しているヘッダーテンプレートやフッターテンプレートも表示されるので、どのコードを編集したらいいかを簡単に見える化することができます。

他にもこのようなプラグインはありますが、ページに含まれている他のテンプレートも確認できるという点でこのプラグインはとても優れていると思います。

管理者バーに表示されているテンプレート情報はログインしているユーザーにしか見えないので、通常のゲストユーザーは見ることができないので、テンプレート情報が漏れることはありません。

まとめ

いかがでしたでしょうか？WordPressサイトの見栄えはテーマによって決まると言っても過言ではありません。WordPressのテーマは本当に数が多いので、理想のテーマを見つけることは難しいかもしれませんが、テーマに付属する機能やページの速度、モバイル表示についてしっかりと確認することで希望のテーマを見つけることができると思います。また、各テーマはカスタマイズが可能なので、それも考慮することでサイトの目的に合った機能・デザインを持つサイトを作ることができると思います。