プラグイン設定ガイド

Contact Form 7・WooCommerceのインストール方法と
HPYourselfとの連携手順を解説します。

このガイドはWordPressテーマを使う方向けです。HTMLダウンロードでは不要です。
Contact Form 7

WordPressで最も使われているお問い合わせフォームプラグインです。インストール無料・設定も簡単で、世界中で1億回以上ダウンロードされています。

1

プラグインをインストールする

WordPress管理画面から操作します

  • 1
    WordPress管理画面にログイン

    https://ドメイン名/wp-admin/ にアクセスしてログインします。

  • 2
    プラグイン → 新規追加

    左メニューの「プラグイン」→「新規追加」をクリックします。

  • 3
    「Contact Form 7」で検索

    検索ボックスに「Contact Form 7」と入力して検索します。

  • 4
    今すぐインストール → 有効化

    「今すぐインストール」を押し、完了したら「有効化」をクリックします。

💡 有効化完了後左メニューに「お問い合わせ」という項目が追加されます。
2

フォームを作成する

送信項目を設定します

  • 1
    お問い合わせ → フォーム一覧

    左メニューの「お問い合わせ」をクリックします。「コンタクトフォーム1」がデフォルトで作成されています。

  • 2
    フォームを編集する

    「コンタクトフォーム1」をクリックして編集画面を開きます。お名前・メールアドレス・件名・メッセージのフォームがデフォルトで設定されています。そのまま使って問題ありません。

  • 3
    メール設定を確認する

    「メール」タブをクリックして、問い合わせが届くメールアドレスを確認・変更します。

3

HPYourselfとの連携

固定ページにショートコードを貼り付けます

WordPress管理画面で固定ページを作成し、Contact Form 7のショートコードを貼り付けるだけで完了です。PHPファイルの編集やテーマの再アップロードは不要です。

  • 1
    Contact Form 7のショートコードをコピー

    WordPress管理画面の「お問い合わせ」→「お問い合わせ」を開きます。フォーム一覧の「ショートコード」列に表示されている [contact-form-7 id="xxx" title="コンタクトフォーム 1"] をコピーします。

  • 2
    固定ページを新規作成する

    WordPress管理画面の「固定ページ」→「新規追加」をクリックします。タイトルに「お問い合わせ」と入力します。

  • 3
    本文にショートコードを貼り付ける

    ブロックエディターで「+」をクリックし「ショートコード」ブロックを追加します。先ほどコピーしたショートコードを貼り付けます。

  • 4
    スラッグを「contact」に設定する

    右側の設定パネルの「パーマリンク」でスラッグを contact に変更します。これでHPYourselfのお問い合わせページと自動的に対応します。

  • 5
    「公開」をクリック

    右上の「公開」ボタンをクリックして固定ページを公開します。PHPファイルの編集・テーマの再アップロードは不要です。

💡 スラッグを「contact」にするのがポイントHPYourselfのお問い合わせページはスラッグが「contact」の固定ページを自動で表示します。スラッグが違う場合は正しく表示されないのでご注意ください。
4

フォームのデザインを変更する

HPYourselfのブログデザインタブから設定します

フォームのデザインはHPYourselfのエディターから変更できます。

  • 1
    ブログデザインタブを開く

    HPYourselfのエディター上部の「ブログデザイン」タブをクリックします。

  • 2
    「お問い合わせフォーム（Contact Form 7）」を開く

    アコーディオンをクリックして設定項目を表示します。背景色・ラベル色・入力枠線・ボタンの色や形などを設定できます。

  • 3
    プレビューで確認する

    ページ編集タブでお問い合わせページを選ぶとフォームのプレビューが表示されます。

  • 4
    WordPressテーマを再ダウンロード・再アップロード

    設定が決まったら「WordPressテーマをダウンロード」して、WordPressに再アップロード・有効化します。

💡 追加した項目も自動でデザインが適用されますテキスト入力・メール・電話・日付・ファイルアップロード・ラジオボタン・チェックボックスなど、Contact Form 7で追加できる入力項目はすべて統一されたデザインで表示されます。

設定完了！

お問い合わせフォームがWordPressページに表示されます。
テスト送信で正しく届くか確認しましょう。

HPYourselfに戻る
WooCommerce

WordPressで最も使われているネットショップ機能です。商品登録・カート・決済・在庫管理など本格的なEC機能を無料で追加できます。

⚠️ WooCommerceは設定が複雑です決済設定・送料設定・税金設定など多くの初期設定が必要です。「まず手軽に始めたい」場合はBASE（base.ne.jp）の利用をおすすめします。
1

プラグインをインストールする

WordPress管理画面から操作します

  • 1
    プラグイン → 新規追加

    左メニューの「プラグイン」→「新規追加」をクリックします。

  • 2
    「WooCommerce」で検索

    検索ボックスに「WooCommerce」と入力して検索します。

  • 3
    今すぐインストール → 有効化

    「今すぐインストール」を押し、完了したら「有効化」をクリックします。

  • 4
    セットアップウィザードに従う

    有効化後にセットアップウィザードが表示されます。店舗の住所・扱う商品の種類・決済方法などを設定します。

2

決済方法を設定する

お客様が支払いできる方法を設定します

WooCommerceでよく使われる決済方法は以下の3つです。

  • S
    Stripe（クレジットカード決済）

    Visa・Mastercard・JCBなどのカード決済に対応。手数料3.6%。WooCommerceとの連携が簡単です。

  • P
    PayPal

    PayPalアカウントでの支払いに対応。手数料3.6%+40円。外国人顧客にも対応できます。

  • 銀
    銀行振込

    手数料不要。ただし入金確認の手間がかかります。WooCommerceの標準機能で対応しています。

💡 StripeがおすすめWooCommerce → 設定 → 決済 から「Stripe」を有効化してAPIキーを設定するだけで使えます。Stripeのアカウント作成はstripe.comから無料でできます。
3

商品を登録する

販売する商品を追加します

  • 1
    商品 → 新規追加

    左メニューの「商品」→「新規追加」をクリックします。

  • 2
    商品名・説明を入力

    商品名・詳細説明・短い説明を入力します。

  • 3
    価格・在庫を設定

    「商品データ」セクションで価格・在庫数・SKUなどを設定します。

  • 4
    商品画像を設定

    右側の「商品画像」から商品のメイン画像をアップロードします。

  • 5
    公開する

    右上の「公開」ボタンを押して商品を公開します。

4

HPYourselfとの連携

ショップページをサイトに表示します

HPYourselfでショップページを追加してWordPressテーマをダウンロードすると、woocommerce.php が自動で追加されます。これによりWooCommerceの商品一覧がHPYourselfのデザインに合わせて表示されます。

  • 1
    テーマをアップロード・有効化

    ダウンロードしたテーマをWordPressに再アップロードして有効化します。

  • 2
    ショップページのURLを確認

    WooCommerce → 設定 → 商品 → 「ショップ」ページを確認します。デフォルトでは /shop/ です。

💡 ナビへのリンクは自動で設定されますHPYourselfでWordPress用ショップページを追加してテーマをダウンロードすると、ナビに /shop/ へのリンクが自動で追加されます。カスタムリンクを別途追加する必要はありません。
⚠️ 特定商取引法の表記が必要ネット販売を行う場合は法律で義務付けられています。必ず特定商取引法に基づく表記ページを作成してください。
5

ショップのデザインを変更する

HPYourselfのブログデザインタブから設定します

商品一覧のデザインはHPYourselfのエディターから変更できます。

  • 1
    ブログデザインタブを開く

    HPYourselfのエディター上部の「ブログデザイン」タブをクリックします。

  • 2
    「ショップページ（WooCommerce）」を開く

    アコーディオンをクリックして設定項目を表示します。背景色・カード色・商品名色・ボタンデザイン・列数などを設定できます。

  • 3
    プレビューで確認する

    ページ編集タブでショップページを選ぶとダミー商品付きでプレビューが表示されます。

  • 4
    WordPressテーマを再ダウンロード・再アップロード

    設定が決まったら「WordPressテーマをダウンロード」して、WordPressに再アップロード・有効化します。

💡 WooCommerceの標準デザインが上書きされますHPYourselfで設定したCSSがWooCommerceのデフォルトスタイルより優先されます。商品カード・ボタン・価格表示などが統一されたデザインになります。
3

商品を登録する

WordPressの管理画面から商品を追加します

WooCommerceをインストール後、WordPress管理画面に「商品」メニューが追加されます。

  • 1
    商品 → 新規追加をクリック

    WordPress管理画面の左メニューから「商品」→「新規追加」をクリックします。

  • 2
    商品名・説明を入力する

    ページ上部に商品名、エディター部分に商品の説明を入力します。

  • 3
    商品データを設定する

    「商品データ」ボックスで以下を設定します。
    ・通常価格：商品の販売価格（税抜）
    ・セール価格：セール時の価格（任意）
    ・在庫：在庫管理をする場合はチェック

  • 4
    商品画像を設定する

    右側の「商品画像」から商品のメイン画像をアップロードします。複数枚アップロードする場合は「商品ギャラリー」を使います。

  • 5
    カテゴリーを設定する

    右側の「商品カテゴリー」から商品のカテゴリーを設定します（任意）。

  • 6
    「公開」をクリック

    設定が完了したら右上の「公開」ボタンをクリックして商品を公開します。

💡 商品の種類について通常商品（在庫あり）・バーチャル商品（デジタルコンテンツ・サービス）・ダウンロード商品（ファイル配布）の3種類があります。施術予約やデジタル商品の場合は「バーチャル」にチェックを入れましょう。
4

Stripe決済を設定する

クレジットカード決済を追加します

WooCommerceにStripeプラグインを追加することで、クレジットカード決済・Apple Pay・Google Payに対応できます。

  • 1
    Stripeアカウントを作成する

    https://stripe.com/jp にアクセスしてアカウントを作成します。本人確認書類の提出が必要です。

  • 2
    WooCommerce Stripeプラグインをインストール

    WordPress管理画面の「プラグイン」→「新規追加」で「WooCommerce Stripe Payment Gateway」を検索してインストール・有効化します。

  • 3
    Stripeの設定画面を開く

    WooCommerce → 設定 → 支払い → Stripe をクリックします。

  • 4
    APIキーを入力する

    StripeダッシュボードのAPIキーページから以下をコピーして入力します。
    ・公開可能キー：pk_live_から始まる文字列
    ・シークレットキー：sk_live_から始まる文字列

  • 5
    テスト購入で確認する

    本番稼働前にStripeのテストモードで動作確認します。テストカード番号（4242 4242 4242 4242）で購入してみましょう。

💡 送料・消費税の設定も忘れずにWooCommerce → 設定 → 配送 で送料を、WooCommerce → 設定 → 税金 で消費税の設定を行いましょう。日本の場合は消費税率10%（軽減税率対象は8%）を設定します。
⚠️ テスト購入は必ず行いましょう本番稼働前に必ずテストモードで購入・キャンセル・返金の動作を確認してください。本番モードに切り替えたら実際のカードで少額テスト購入することをおすすめします。

設定完了！

商品ページにアクセスしてカートに追加・決済できるか確認しましょう。
本番稼働前にテスト購入を行うことをおすすめします。

HPYourselfに戻る