Shopay（WordPressテーマ）のカスタマイズ

Shopayの概要

Shopayをカスタマイズするには、大きく分けて機能面とデザイン性をカスタマイズすることになります。最初に取り組むべきは、テーマカスタマイザーを使う、cssの追加をすることでしょう。どちらも手段が複数ありますので、事前に理解して取り組まれるとよいでしょう。プラグインを利用すれば高度なカスタマイズが可能になります。プログラムスキルをお持ちの場合は、直接テンプレート（PHP）ファイルを書き換えるカスタマイズになります。コードを直接編集する方法はリスクも高いので、よく理解されている方以外にはおすすめできません。

• Shopay
• WordPressバージョン / 4.7以上
• PHPバージョン / 5.2.4以上
• 評価 / 5つ星中4.8つ星
• サポートフォーラム

※最新の情報を公式ページで確認ください

WordPressテーマのカスタマイズ

WordPressテーマのカスタマイズ方法はいくつかあり、目的や技術レベルによって最適な方法が異なります。

一般的なカスタマイズ方法:

• WordPress管理画面のカスタマイザー:
  • 「外観」>「カスタマイズ」からアクセスできます。
  • サイトのタイトル、ロゴ、色、フォント、背景画像、メニュー、ウィジェットなど、テーマが対応している範囲で視覚的にカスタマイズできます。
  • メリット: コーディングの知識がなくても比較的簡単に操作できます。
  • デメリット: カスタマイズできる範囲はテーマによって異なります。
• テーマのオプション設定:
  • 多くのテーマには、独自のオプション設定画面が用意されています。
  • 「外観」メニューの下や、個別のメニュー項目として表示されることが多いです。
  • レイアウト、投稿・固定ページの表示設定、広告設定など、テーマ固有の詳細な設定が可能です。
  • メリット: コーディングなしで高度なカスタマイズができる場合があります。
  • デメリット: オプションの項目や内容はテーマによって大きく異なります。
• CSSの編集:
  • 「外観」>「カスタマイズ」>「追加CSS」からCSS（カスケーディングスタイルシート）を記述することで、デザインを細かく調整できます。
  • メリット: デザインに関する幅広いカスタマイズが可能です。
  • デメリット: CSSの知識が必要です。
• テーマファイルの編集:
  • FTPソフトなどを利用して、テーマのPHPファイルやCSSファイルを直接編集する方法です。
  • メリット: サイトの構造や機能を根本的に変更できます。
  • デメリット: PHP、HTML、CSSなどの専門知識が必要です。誤った編集はサイトの表示を壊す可能性があります。初心者には推奨されません。
• 子テーマの利用:
  • 親テーマを直接編集するのではなく、子テーマを作成してカスタマイズする方法です。
  • 親テーマがアップデートされても、子テーマで行ったカスタマイズは上書きされずに残ります。
  • メリット: 親テーマのアップデートに影響を受けずにカスタマイズできます。
  • デメリット: ある程度の知識が必要です。

テーマカスタマイザー

Shopay には、ルートから独自のWebサイトを構築するのに役立つ包括的なドキュメントガイドが付属しています。ライブプレビューで構成できるカスタマイザが組み込まれています。これらに加えて、完全に応答性が高く、モバイルフレンドリーで、あらゆる種類のデバイスに適合します。ワンクリックのデモインポートプラグインのサポートにより、あなたのウェブサイトを驚くべきオンラインストアに変えます。

Shopayは高度にカスタマイズ可能で美しくデザインされたネットショップ向けWordPressテーマで、WooCommerceを完全にサポートしています。あらゆる種類のeコマースストアと完全に統合されており、すべての広範な機能が搭載されています。 WooCommerceおよびYITH WooCommerceプラグインと完全に互換性があり、究極のeコマースの価値を提供します。さらに、カラーオプション、7以上のホームページウィジェット、サイドバーのレイアウト、ヘッダーとフッターのカスタマイズなどが含まれます。

WordPressは無料で利用できるCMS（Contents Management System）であることから、多くの企業やブロガー、アフェリエイターによって運用されています。利用数が多いといことは、同じようなサイトが存在するといううことになります。そこで、サイトをカスタマイズして他のサイトと差別化しビジネスに役立てませんか。

Shopay のカスタマイズは多岐にわたって設定できるようになっています。

Theme Options

Gerneral （一般）	Site Style （サイトスタイル） 利用可能なレイアウトから選択・アニメーションを有効にする・スティッキーサイドバーを有効にする Preloader （プリローダー） プリローダーを有効にする Colors（色） Header Text Color,背景色,Theme Color Social Icons （ソーシャル・アイコン） Social Link Target,Social Icons Scroll to Top （トップにスクロール） スクロールを有効にする
Header	Top Bar Site Identity Main Area Breadcrumb
Homepage	Sponsors Section Services Section
Design	Sidebar Layout
Footer	Main Area Bottom Area

Shopay のメニューは以下のような設定になっています。

• Footer Navigation
• Footer Site map
• Header Navigation
• kind
• Post-navi
• Production
• s-menu-etc
• s-menu-tapm
• size
• tpd-size

ウイジェット

Shopay のウイジェットは以下のように、サイドバーとフッターに配置されています。

• Sidebar
• Footer Sidebar1
• Footer Sidebar2
• Footer Sidebar3
• Footer Sidebar4
• Footer Sidebar5

css（スタイルシート）でカスタマイズ

部分的に色を変更したり、背景や囲みを装飾、文字の大きさを変更したりしたいのであればcss（スタイルシート）を追加することになります。「スタイルシート・css」記述するには、「テンプレートファイルに直接記述」する、「テーマカスタマイザーで記述」する。「プラグインを使って記述」などの方法があります。

ブロックエディタ対応のテーマではブロックごとにタイポグラフィ（「文字や文章を読みやすく、または美しく見せるための技術」）を指定できるので、文字の大きさや色を指定したい場合は、こちらを利用されたほうが良いでしょう。

注意点）スタイルシート・cssが大きくなりすぎると表示速度に影響を及ぼすこともあるので注意が必要です。

テーマカスタマイザーの「css追加」は複雑なコード編集は、編集エリアが狭く操作しづらいですが、テーマの更新よって上書きされることはありません。逆にテンプレートファイルの「style.css」は上書きされるので、子テーマで対応するか、バックアップをとり対応するかになります。推奨は「css追加」となっています。

css（スタイルシート）を追加するには、ダッシュボードの　外観　→　カスタマイズ　→　追加css　と進みコードを追加します。スタイルシートを適用させるには編集ブロックに　高度な設定で　「追加 css クラス」にクラス名を記述します。スタイルはブロック対して適用されるようになっています。複数のブロックに適応させたいならブロックをグループ化しておきます。

ページごとに css を記述したい場合はプラグインを利用すると良いでしょう。「VK All in one Expansion Unit」の cssカスタマイズ　を有効にしておくと、ページごとに スタイルシートを追加することができます。

テーマによってはあらかじめ、ページごとに css を記述できるようにしたものもあります。複雑なデザインを施したいサイトの場合はこちらを選ぶとよいかもしれません。

テンプレートファイル（PHP）でカスタマイズ

テンプレートファイル（テーマファイル）のカスタマイズは、外観 → テーマファイルエディタで編集することになります。テンプレートファイルの構成は各テーマによって異なっていますが概ね以下のようなファイルで構成されています。

• スタイル（style.css）
• テーマの関数
• 404テンプレート
• コメント
• テーマフッター
• テーマヘッダー
• 検索フォーム
• 単一テンプレート

テンプレートファイルを直接編集してカスタマイズすることもできます。ただ、この方法は高度な知識を必要とされますので、十分な知識をお持ちの方におすすめなります。記述ミスによって画面が表示されなくなったり、管理画面にログインすらできなくなったりすることもあります。

子テーマを作成する

テンプレートファイルを直接編集してサイトを運用するなら子テーマを作成しましょう。なぜならWordPressは頻繁にアップデートが繰り返されソースコードが上書きされてしまい、再びカスタマイズをしなければならなくなってしまうからです。

「子テーマ」は、WordPressでウェブサイトやブログのデザイン・レイアウトを構築する際に、「親テーマ」と連動して機能するもうひとつのテーマです。 WordPressのデザインテンプレートは、「テーマ」を有効化させることで構築されます。

WordPressのカスタマイズ手順

WordPressをカスタマイズするには下記の手順で行うとよいでしょう。

1. WEBサイトの構成を考える　（※注１）
2. 不要な機能を削除する
3. 必要な拡張機能（プラグイン）を追加する
4. グローバルナビゲーションやサイドメニューを作る
5. TOPページを作る
6. 企業サイトなどは、会社案内や事業内容などを作る
7. お知らせや、ブログ（製品やサービスをカテゴリーに構成する）を設置する

※　注１）固定ページ・投稿ページのコンテンツを書き出す。そしてカテゴリーやタグを振り分ける。などの設計書・制作ガイドラインを作成しておくと作業をスムースに進めることができ、修正が発生しても最小限の工程で完結できるようになります。