WeblocoオリジナルWordPressテーマを使ったホームページ作成マニュアル

WeblocoオリジナルWordPressテーマを使ったホームページ作成マニュアル

WeblocoオリジナルWordPressテーマをご購入されたお客様に、弊社のデモサイトと同じ状態にするまでの手順をご説明いたします。

これからご紹介する手順は、あくまでデモサイトとほぼ同じに状態にする手順ですので、状況によっては、マニュアル通りに操作する必要はありません。

また、テーマファイルに同梱するWordPressインポートデータは、お客様のサイト制作を手助けするものであり、デモサイトと完全に同じ状態にする事を保証するものではございません。

なお、このマニュアルと同時に、「WeblocoオリジナルWordPressテーマの概要及び仕様」も並行して閲覧いただくと、理解が深まると思います。

 

サイト制作マニュアル

1.プラグインのインストール

下記のプラグインをインストールして有効化させます。

  • Classic Editor
  • Contact Form 7
  • TinyMCE Advanced
  • WordPress インポートツール
  • WP Multibyte Patch
  • Meta slider(スライドショーが表示されているテーマの場合)


2.テーマのアップロード⇒インストール

ダウンロードしたテーマのアップロード⇒インストールをして有効化させます。

 

3.WordPressデータのインポート

購入したテーマファイルと一緒に支給された、WordPressデータをインポートします。

  • 「管理画面の左メニュー」の「ツール」⇒「インポート」から「インポーターの実行をクリック
  • ダウンロードした、WordPressデータをインポート(添付ファイルをダウンロードしてインポートにチェック。※仮でインポートした画像は、本番では必ず他の画像に置き換えてください。)

 

4.グローバルメニューの設定

  • 「管理画面の左メニュー」の「外観」⇒「メニュー」をクリック
  • メニュー画面の「編集するメニューを選択:」で「mainNav」を選択して、
    「メニューの位置 Main Navigation」にチェックを入れて「メニューを保存」

 

5.ウィジェット設定

  • 「管理画面の左メニュー」の「外観」⇒「ウィジェット」をクリック
  • 「フッターエリア1」にデフォルトで入っているウィジェットを全て削除して、「ナビゲーションメニュー」を「フッターエリア1」ドラッグ&ドロップ
  • 「メニューを選択:」で「footerNav」を選択して「保存」

「series3」のテーマには、「デスクトップヘッダーエリア」というウィジェットエリアがあるので、デモサイトと同じようにしたい場合、「カスタムHTML」をドラッグ&ドロップしていただき、以下のHTMLソースを挿入して、「保存」

<div class="right display-desktop">
<a href="https://webloco.webolha.com/template/sample5/contact" class="btn-m btn-main"><i class="far fa-envelope"></i> <span class="pr-s">メールでのお問い合わせ</span></a>
<a href="#" class="btn-m btn-accent"><i class="fas fa-phone"></i> <span class="pr-s">0120-1234-5678</span></a>
</div>

 

6.ロゴ設定

  • 「管理画面の左メニュー」の「外観」⇒「カスタマイズ」をクリック
  • カスタマイズ画面の「ロゴ画像」を選択して、「任意のロゴ画像」をセット
  • カスタマイズ画面の「ロゴ画像2」を選択して、「任意のロゴ画像」をセット
  • カスタマイズ画面の「スマホのヘッダーエリアのCTA」を選択して、以下のようなコードを挿入
    <a href="任意のURL"><i class="fas fa-envelope"></i><br>MAIL</a>
  • その他必要な項目に値を入力して、「公開」をクリック

 

7.トップページ設定

「管理画面の左メニュー」の「設定」⇒「表示設定」から「mainNav」を選択して、
「ホームページの表示」の項目の「固定ページ」を選択して、ホームページ:「フロントページ」を選択して「変更を保存」

 

8.固定ページのテンプレート設定

固定ページのテンプレート設定は、ページ単位で適時設定します。多くの固定ページは、「フリースタイル」に設定します。

  • 「管理画面の左メニュー」の「固定ページ」⇒「固定ページ一覧」から、各固定ページの「編集」をクリック
  • 「ページ属性」の「テンプレート」を任意のテンプレートに選択して更新

 

9.ファビコンの設定

  • ファビコンファイルを2つ用意(favicon.icoとapple-touch-icon.png)
  • FTPクライアントソフトを使って、「WordPressのルートディレクトリ/wp-content/themes/テンプレートID/images/」のディレクトリにアップデート

 

10.デフォルト設定完了

上記の設定を漏れなく行えば、デモサイトとほぼ同じ状態になるはずです。後は、自由にカスタマイズしてください。

※仮でインポートした画像は、必ず他の画像に置き換えてください。

 

Webマーケターが制作するユーザー目線のホームページ作成のバナー
Webマーケターが制作するユーザー目線のホームページ作成のバナー