WordPressカスタマイズ事例・実績として、ワードプレステーマのモバイルフレンドリー化（スマートフォン最適化）のカスタマイズについてお伝えしていきます。
WordPress（ワードプレス）は、たくさんの応用が可能なブログCMSです。ワードプレステーマ、プラグインの実装により、サイトを自由にカスタマイズできます。弊社ファンフェアファンファーレではWordPress（ワードプレス）でのホームページ制作・ウェブサイト制作、WordPress（ワードプレス）のテーマ・プラグインのカスタマイズサービスを提供しております。
まずWordPressテーマの概要について触れた後、WordPressテーマのモバイルフレンドリー事例について触れていきます。今回のモバイルフレンドリー化カスタマイズは、「モバイルフレンドリーの微調整」となります。
モバイルフレンドリー未対応サイトを根本からモバイルフレンドリー化したという事例ではなく、既にある程度モバイルフレンドリー化されているものの、一部分がスマートフォン表示に適していない仕様になっていたため微調整を加えた事例です。
WordPressテーマとは？
WordPress（ワードプレス）は、ブログCMSとして、ブログ機能をもった「ワードプレス本体」とウェブサイトの外観（デザイン）を設定する「ワードプレステーマ」、そして拡張機能の設定である「プラグイン」によって構成され、また、コンテンツはワードプレス本体の機能により、データベースに保存され、それを本体が呼び出して、ウェブページを生成する方式になっています。
簡単には、ブログ機能をもった「本体」は同じでも、ホームページ（ウェブサイト）の見た目や設定の「表示の仕方」は「WordPressテーマ」に委ねられているといったようなイメージです。
テンプレート（雛形）
WordPressテーマは、いわゆるテンプレート（雛形）のようなもので、テーマファイルとしてワードプレス本体とは独立して設置します。
このWordPressテーマも本体と同じように複数のファイル群で構成され、ヘッダー部用、記事コンテンツページ用、カテゴリページ用、トップページ用など、様々なファイルでテーマを構成しています。
しかしながら、テーマファイルの作り方は、テーマ作成者によって様々で、概ねの「型」の流れはあるものの、管理画面で細かな設定ができるように配慮されたテーマなどは、そのファイル構成が複雑な傾向にあります。
WordPressテーマのモバイルフレンドリー事例
弊社ファンフェアファンファーレは、WordPressなどのCMSをカスタマイズさせていただいております。
今回はWordPressで制作されたホームページ（ウェブサイト）において、WordPressテーマがモバイルフレンドリーに対応していなかったためご依頼をいただきました、テーマカスタマイズ事例・実績のご案内です。
WordPressテーマのカスタマイズ事例として、お受けしたご依頼内容をお伝えさせていただきます。このご依頼は、ホームページ（ウェブサイト）のモバイルフレンドリーの基本であるレスポンシブデザインが、「ある程度実装されている」という、WordPressテーマのモバイルフレンドリー微調整のご依頼でした。
ホームページが基本的なレスポンシブには対応しており、ある程度の「スマホ対応」はされているのですが、カスタムフィールドから吐き出される表などの影響で、厳密な意味でのモバイルフレンドリーではないWordPressテーマでした。
現状のWordPressテーマの問題点
現状のWordPressテーマの問題点は次のとおりです。
- カスタムフィールドより出力されるコンテンツページの表の表記が、4列のためスマートフォンでは表の列幅が狭すぎて、非常に縦長の表になってしまう。
- 一部文字列が改行されず、スマートフォン表示の際のウェブサイトの横幅がページによって異なり、その他の部分が縮小表示され、文字が読めない。
WordPressサイト内のページにおいて、「表」が掲載されている部分の仕様がカスタムフィールドを利用したものでした。この部分の出力箇所がスマートフォン表示に適した表示形式ではなく、表が4列であるため読みにくい縦長の表になっているという状態です。
それと同時に一部の文字が改行されないため、ページの横幅が伸びて、適切なモバイルフレンドリーサイトになっていないという状態でした。
これら問題があるページ以外での閲覧には問題がありませんでしたが、カスタムフィールドを利用した「表」があるページ、一部の文字列が改行されないページにおいて、モバイルフレンドリーサイトとしては不完全な状態になっていました。
スマホ表示時のコンテンツページの仕様の問題点とご要望
このWordPressテーマは、コンテンツページに吐き出されるカスタムフィールドの部分に問題がありました。
カスタムフィールドを利用して出力されることで、ページ作りの際の入力・配置においてマークアップの手間は省けます。しかしながら、表現の自由度が低く、また、「コンテンツページの表の表記が4列になってしまう」といった問題に対応できないという問題点を抱えていました。
ご要望は次のとおりです。
- カスタムフィールドでの入出力はそのままで、スマートフォン表示の際の表のレイアウトの問題を解決したい。なるべくスマートフォン表示の際は、列を1列にして読みやすくしたい。
- 合わせて、ページによって他の部分（表以外の部分）が縮小表示される問題を解決したい。
コンテンツページのカスタマイズ
上記のご要望を元にWordPressテーマのコンテンツページやカスタムフィールドをカスタマイズさせていただきました。
カスタムフィールドの出力が二重にも三重にもファイルを組み合わせて実装されていたため、htmlの要素出力に問題があり、CSSの編集だけでは変更できなかったため、テーマファイル、プラグインファイルの各phpファイルを操作いたしました。
基本的なレスポンシブ仕様にはなっていたものの、テーマの作りが複雑で、このカスタマイズは一筋縄では行かなかったため、少し費用がかかる結果になりました。
このカスタマイズと合わせて、表を際立たせるために表のウェブカラーの調整なども行いました。
カスタマイズによるメリット
今回のモバイルフレンドリー化に関する調整・カスタマイズによるメリットは次のとおりです。
- スマートフォン表示において、コンテンツページの表が見やすくなった。
- カスタムフィールドでの入力方式自体は残すことができたため、ページ作りは今まで通り。
- 該当箇所の非モバイルフレンドリーによって影響を受けていた各部分（縮小表示されてしまっていた部分）がモバイルフレンドリーに対応し、スマートフォン表示におけるユーザビリティが向上した。
費用 6.7万円(コンテンツページ・カスタムフィールドカスタマイズ分)
※費用は一例です。初回投稿掲載時点の価格です。
今回は、WordPressカスタマイズのうち、WordPressテーマのモバイルフレンドリー（微調整）のカスタマイズ事例をご紹介させていただきました。
（初回投稿日 2016年4月21日）
