WeblocoオリジナルWordPressテーマをご購入されたお客様に、弊社のデモサイトと同じ状態にするまでの手順をご説明いたします。
これからご紹介する手順は、あくまでデモサイトとほぼ同じに状態にする手順ですので、状況によっては、マニュアル通りに操作する必要はありません。
また、テーマファイルに同梱するWordPressインポートデータは、お客様のサイト制作を手助けするものであり、デモサイトと完全に同じ状態にする事を保証するものではございません。
なお、このマニュアルと同時に、「WeblocoオリジナルWordPressテーマの概要及び仕様」も並行して閲覧いただくと、理解が深まると思います。
Contents
前提条件
以下に記載しております「WordPressサイト制作マニュアル」は、レンタルサーバーの契約や独自ドメインの取得、WordPressのインストール、WordPressの基本設定と言った事は、既に完了している事を前提にしております。
また、当マニュアルは、「series1」から「series4」までのWeblocoオリジナルテーマを対象としています。
「series5」は、「ホームページ作成マニュアル（series5）」をご覧ください。
WordPressサイト制作マニュアル
１．プラグインのインストール
下記のプラグインをインストールして有効化させます。
- Classic Editor:
WordPressのクラシックエディタを有効にするプラグイン
- Classic Widgets:
WordPressのクラシックウィジェットを有効にするプラグイン
- Contact Form 7:
お問い合わせフォーム構築プラグイン
- TinyMCE Advanced:
WordPressのエディタを拡張するプラグイン
- WordPress インポートツール:
WordPressインポートデータをインポートする為のプラグイン
- WP Multibyte Patch:
日本語環境強化プラグイン
- Meta slider:
スライドショー実装プラグイン（スライドショーが表示されているテーマの場合）
- HTML Editor Syntax Highlighter:
テキストエディタをリッチにするプラグイン（必須ではございませんが、コーディングがしやすくなります。）
２．テーマのアップロード⇒インストール
ダウンロードしたテーマのアップロード⇒インストールをして有効化させます。
３．WordPressデータのインポート
購入したテーマファイルと一緒に支給された、WordPressデータをインポートします。
- 「管理画面の左メニュー」の「ツール」⇒「インポート」から「インポーターの実行をクリック
- ダウンロードした、WordPressデータをインポート（添付ファイルをダウンロードしてインポートにチェック。
※仮でインポートした画像は、必ず他の画像に置き換えてください。
４．グローバルメニューの設定
- 「管理画面の左メニュー」の「外観」⇒「メニュー」をクリック
- メニュー画面の「編集するメニューを選択:」で「mainNav」を選択して、
「メニューの位置 Main Navigation」にチェックを入れて「メニューを保存」
５．ウィジェット設定
ウィジェットエリアの仕様は、テーマによって若干違います。以下の操作方法は、１つの参考例としてご認識ください。
series1-3
- 「管理画面の左メニュー」の「外観」⇒「ウィジェット」をクリック
- 「フッターエリア1」にデフォルトで入っているウィジェットを全て削除
- 「ナビゲーションメニュー」を「フッターエリア1」ドラッグ＆ドロップ
- 「メニューを選択：」で「footerNav」を選択して「保存」
series3のテーマには、「デスクトップヘッダーエリア」というウィジェットエリアがあるので、デモサイトと同じようにしたい場合、「カスタムHTML」をドラッグ＆ドロップしていただき、以下のHTMLソースを挿入して、「保存」
<a href=”https://webloco.webolha.com/template/sample5/contact” class=”btn-md btn”><i class=”far fa-envelope”></i> <span class=”pr-s”>メールでのお問い合わせ</span></a>
<a href=”#” class=”btn-md btn-accent”><i class=”fas fa-phone”></i> <span class=”pr-s”>0120-1234-5678</span></a>
</div>
series4
- 「管理画面の左メニュー」の「外観」⇒「ウィジェット」をクリック
- 「フッターエリア1」にデフォルトで入っているウィジェットを全て削除
- 「画像ウィジェット」を「フッターエリア1」にドラッグ＆ドロップして、ロゴ画像をセット
- 「カスタムHTMLウィジェット」を「フッターエリア1」にドラッグ＆ドロップして、任意のHTMLを挿入
- 「ナビゲーションメニュー」を「フッターエリア2」にドラッグ＆ドロップ
- 「メニューを選択：」で「footerNav」を選択して「保存」
- 「ナビゲーションメニュー」を「モバイルナビゲーション」にドラッグ＆ドロップ
- 「メニューを選択：」で「mainNav」を選択して「保存」
「テーマNo074939」のデモサイトで使用している「カスタムHTMLウィジェット」に入っているHTML例
６．ロゴ設定
series1-3
- 「管理画面の左メニュー」の「外観」⇒「カスタマイズ」をクリック
- カスタマイズ画面の「ロゴ画像」を選択して、「任意のロゴ画像」をセット
- カスタマイズ画面の「ロゴ画像2」を選択して、「任意のロゴ画像」をセット
- カスタマイズ画面の「スマホのヘッダーエリアのCTA」を選択して、以下のようなコードを挿入
<a href=”任意のURL”><i class=”fas fa-envelope”></i><br>MAIL</a> - その他必要な項目に値を入力して、「公開」をクリック
series4
- 「管理画面の左メニュー」の「外観」⇒「カスタマイズ」をクリック
- カスタマイズ画面の「ロゴ画像」を選択して、「任意のロゴ画像」をセット
- その他必要な項目に値を入力して、「公開」をクリック
７．トップページ設定
「管理画面の左メニュー」の「設定」⇒「表示設定」から、「ホームページの表示」の項目の「固定ページ」を選択して、ホームページ：「トップ」を選択して「変更を保存」
８．固定ページのテンプレート設定
固定ページのテンプレート設定は、ページ単位で適時設定します。多くの固定ページは、「フリースタイル」に設定します。
- 「管理画面の左メニュー」の「固定ページ」⇒「固定ページ一覧」から、各固定ページの「編集」をクリック
- 「ページ属性」の「テンプレート」を任意のテンプレートに選択して更新
９．ファビコンの設定
- ファビコンファイルを２つ用意（favicon.icoとapple-touch-icon.png）
- FTPクライアントソフトを使って、「WordPressのルートディレクトリ/wp-content/themes/テンプレートID/images/」のディレクトリにアップデート
１０．デフォルト設定完了
上記の設定を漏れなく行えば、デモサイトとほぼ同じ状態になるはずです。後は、自由にカスタマイズしてください。
※仮でインポートした画像は、必ず他の画像に置き換えてください。