カスタムフィールドによるテーブルの整形 WordPressカスタマイズ事例・実績

カスタムフィールドによるテーブルの整形 WordPressカスタマイズ事例・実績


ファンフェアファンファーレではWordPress(ワードプレス)でのホームページ制作・ウェブサイト制作WordPress(ワードプレス)のテーマ・プラグインのカスタマイズサービスを提供しております。

WordPress(ワードプレス)は、たくさんの応用が可能なブログCMSです。コーポレートサイトなどのベースとしてもよく使用され、ブログ機能によってサイト内部にオウンドメディア機能を設置することができます。

このWordPressテーマを編集したりプラグインを追加することで、ホームページを自由にカスタマイズすることができます。

さて、今回は、WordPressカスタマイズ事例・実績として、WordPressテーマに組み込まれたカスタムフィールドによる「テーブル出力」について、このテーマの仕様が問題でレスポンシブ化できなかった事例をご紹介し、この問題を解決するために実施したテーマ内部の「テーブル」のレスポンシブ化によるモバイルフレンドリー(スマートフォン最適化)カスタマイズについてお伝えしていきます。

サイト管理者に配慮したWordPressテーマ仕様が裏目に

WordPressテーマは、いわゆる「テンプレート」ので、テーマファイルとしてブログ機能を担うWordPress本体とは独立して存在しています。

このWordPressテーマもWordPress本体と同じように複数のファイル群で構成されています。

今回のケースは、「テーマのモバイルフレンドリー化 WordPressカスタマイズ事例・実績」とほとんど同様のケースですが、ご使用のWordPressテーマが、レスポンシブ未対応であったため、ご自身である程度レスポンシブ化のカスタマイズを行われつつも、「コンテンツ部分」に関するテーマの仕様によって、うまくモバイルフレンドリー化できなかったため、完全なモバイルフレンドリー化のためにご依頼いただきました。

「なるべくフォーマット化して投稿を楽にする」

という、サイト管理者に配慮したWordPressテーマ仕様が影響を及ぼしていたケースです。

カスタムフィールドでの入力をコンテンツ部分の「テーブル」に反映する仕組み

今回のケースで一番問題となった部分は、コンテンツ内部に設置された「表(テーブル)」の入力に関して、エディタ内部に記載せずにカスタムフィールドでの該当項目を入力して、コンテンツ部分の「テーブル」に反映する仕組みです。

WordPressサイトの基本レイアウトは、レスポンシブ化されていましたが、スマートフォンからのアクセス時にサイドバーがコンテンツ部分の下に回り込んでいるものの、テーブル部分の影響によって、本文カラムとヘッダーがアンバランスなレイアウトになっていました。

レスポンシブは基本レイアウトだけではない

弊社では、WordPressカスタマイズサービスとして、ホームページ(ウェブサイト)の基本レイアウトのレスポンシブ化をメインとして、テーブルなどの要素をスマートフォンに合わせて最適化させていただくサービスを提供しております。

WordPressサイトのレイアウトカスタマイズ

ホームページのレスポンシブは基本レイアウトだけではなく、ブロック要素全てをチェックする必要があります。

今回の事例では、投稿時に表のレイアウトが崩れないようにという配慮から、テーブルの中の項目をカスタムフィールドで入力する仕様が採用されており、この「テーブル」の設置において、該当部分がうまくカスタマイズされていなかったために、スマートフォン表示の際にレイアウト崩れを起こしていました。

テーマのモバイルフレンドリー化 WordPressカスタマイズ事例」でもお伝えさせていただいたとおり、レイアウト崩れを起こさないことがまず第一ですが、テーブルの表記についてもスマートフォンユーザーが「読みやすい」と感じるレイアウトに変更する必要があります。

コンテンツ数が少なかったため、投稿ページをフォーマット化

今回の事例では、ホームページのコンテンツ数が少なかったため、カスタムフィールドでの入力項目は他のアーカイブページに反映される仕組みはそのままに、カスタムフィールドの利用を廃止し、該当テーブルを「投稿ページ」への直接マークアップという形をおすすめさせていただきました。

アーカイブ系のページ(カテゴリページ・タグページなど)のカスタマイズと投稿用のテーブルフォーマットサンプルを制作し、自由度の高い投稿を行っていただけるように配慮しました。

投稿ページ内部のHTMLにレスポンシブを関連付けたため、カスタマイズも比較的早く実装することができました。

WordPressカスタマイズによるメリット

  • スマートフォン表示において、WordPressサイトのレスポンシブ化が完全な形になった。
  • コピー・アンド・ペーストで制作できる仕様に変更し、ページ投稿の自由度が高まった。
  • カスタムフィールド自体は残しアーカイブページへの反映機能は継続した。

費用 5.3万円(コンテンツページ・アーカイブページ・
カスタムフィールドカスタマイズ分)

費用は一例です。

今回は、WordPressカスタマイズの内、WordPressテーマのカスタムフィールドによるテーブルの整形のカスタマイズ事例をご紹介させていただきました。

WordPress(ワードプレス)のカスタマイズ


「カスタムフィールドによるテーブルの整形 WordPressカスタマイズ事例・実績」のカテゴリ Web制作・Web関連
タグ: , , ,


ホームページ制作、サイトカスタマイズなどのお問い合わせ・ご依頼はこちら