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

Shopay

カスタマイズ

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

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

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

Shopayのテーマカスタマイザー

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のウイジェット

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テンプレート
• コメント
• テーマフッター
• テーマヘッダー
• 検索フォーム
• 単一テンプレート

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

インストールしたいプラグイン

コンタクトフォームを設置	Contact Form 7
再利用ブロック拡張機能	Reusable Blocks Extended
SEO対策を細かく設定するプラグイン	All in One SEO Pack | SEO SIMPLE PACK
記事に目次を表示	Easy Table of Contents
ページと関連する記事を表示	Related Post

子テーマを作成する

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

WordPressのカスタマイズ手順

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

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

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

テーマの選び方

WordPressテーマを選ぶ際、ビジネスサイトでは、自社のイメージと近いデザインを選びましょう。中小企業や個人事業主の場合、高度なカスタマイズは負担が大きすぎ、デフォルトのデザインでサイトを作成し運用していくことが多いようです。このため、ビジネスサイトにおすすめな有料WordPressテーマを利用されるとデザインのカスタマイズが容易だったり、必要な機能がプラグインによって提供されているので、サイト運用開始時や運用中の負担を軽減できます。

テーマを選ぶ際にはにはレスポンシブデザインかどうかは着目しましょう。レスポンシブデザインとは、スマートフォンやタブレット・PC別に１つのデザインで表示できるようにしたものです。サイトの内容によってはスマホユーザーが少ないこともあるでしょうが、Googleはモバイル端末での表示を標準と考えていますので、この点からも対応すべきポイトです。

• レスポンシブデザインなのか
• デザインをカスタマイズしやすいか
• ダウンロード数（利用されている数）が多いのか
• ブロックエディタに対応しているのか
• 日本語に対応しているのか
• テーマは安全なのか

関連記事