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