WordPressテーマ「SWELL」を使ってサイトを作成する際のガイドをまとめました。
WordPressテーマ「SWELL」でトップページを作成する前に、以下の準備をしておくとスムーズに進められます。
トップページ作成前の準備
使用する画像や素材の準備
以下の画像や素材を用意しておきます
ロゴ画像
推奨サイズ1600×360px
メインビジュアル画像
推奨サイズ1600×900px（スマホ用は600～960px
プロフィール画像やアイコン
自己紹介セクション用。
その他各セクションで使用する画像（例: 商品写真、サービス紹介用画像）
必要な固定ページを作成
以下の固定ページを事前に作成しておきましょう
トップページ用固定ページ
空白でもOK。後から内容を追加できます
新着記事一覧ページ
最新記事を一覧表示するための空白ページ
お問い合わせページ
Contact Form 7などで作成。
プライバシーポリシー・免責事項ページ
法的な記載が必要な場合に備える
必要な記事コンテンツ
トップページに配置するための記事をあらかじめ用意します
最低でも5～10記事程度あると見栄えが良いです
カテゴリー分けも考慮し、記事がどこに表示されるべきか整理しておきましょう。
WordPress初期設定
不要な投稿（例: 「Hello World」）やサンプル固定ページを削除する
パーマリンク設定を「投稿名」に変更する（管理画面 → 設定 → パーマリンク）
SWELLで入れるべきプラグイン
必須プラグイン
1. SEO SIMPLE PACK
SWELL公式が開発したシンプルなSEOプラグイン。基本的なSEO設定が簡単に行えます
2. XML Sitemap & Google News
サイトマップを生成し、検索エンジンに通知するためのプラグイン
3.Akismet Anti-Spam
コメントスパムを防止するためのプラグイン
4. BackWPup
サイトのバックアップを自動化するプラグイン
5. WP Multibyte Patch
日本語サイトの文字化けや不具合を防ぐための必須プラグイン
6. Wordfence Security
サイトのセキュリティ対策を強化するプラグイン
あると便利なプラグイン
1. Contact Form 7
お問い合わせフォームを簡単に作成できる
これらを導入すれば、ブログ運営がスムーズになります。ただし、プラグインは必要以上に入れすぎないよう注意してください。
トップページの作り方
SWELLではブログ型からサイト型トップページへの変更が簡単にできます。以下はその手順です
基本設定
1. WordPress管理画面で「外観」→「カスタマイズ」を開き、サイト全体のカラーやフォント、コンテンツ幅などを設定します
2. ヘッダーやフッターもカスタマイズし、ロゴやSNSアイコンを追加します[8]。
トップページの作成手順
1. 固定ページを新規作成し、タイトルを「ホーム」などに設定します。
2. ページ属性で「ホーム」テンプレートを選択します
3. 投稿リストや自己紹介など必要なコンテンツをSWELLブロックで配置します。投稿リストはカテゴリーや条件で表示内容を指定できます
4. WordPress管理画面で「設定」→「表示設定」を開き、「フロントページ」に先ほど作成した固定ページ（例：「ホーム」）を選択して保存します
デザインとコンテンツ配置
トップページには最低でも5～10記事程度があると見栄えが良くなります
自己紹介やサービス内容、お問い合わせフォームなども追加して、訪問者が必要な情報にアクセスしやすくしましょう
Contact Form 7を使ったWordPressお問い合わせフォームの作成方法
Contact Form 7の概要と特徴
Contact Form 7は、お問い合わせフォームを作成できるWordPressの無料プラグインです。プログラミングに関する専門知識が不要で、簡単に設置可能なのが特徴です。日本人が開発したプラグインであるため、管理画面や操作画面に日本語表記が多いというメリットもあります
このプラグインを使えば、お名前、メールアドレス、題名、メッセージ本文などの基本的な項目を含むフォームを簡単に作成でき、サイト内への設置も発行されるショートコードを貼り付けるだけと容易です1。さらに、自動返信メール機能も備えており、ユーザーがフォームを送信した際に自動的に確認メールを送ることができます
インストールと有効化の手順
Contact Form 7を使い始めるには、まずプラグインをインストールして有効化する必要があります。
ステップ1：プラグインのインストール
- WordPressの管理画面にログインします
- 左側のメニューから「プラグイン」→「新規追加」をクリックします
- 右上の検索窓に「Contact Form 7」と入力します
- 検索結果に表示された「Contact Form 7」の「今すぐインストール」ボタンをクリックします
ステップ2：プラグインの有効化
- インストールが完了すると、「有効化」ボタンが表示されるのでクリックします6
- 有効化が成功すると、WordPress管理画面の左側メニューに「お問い合わせ」という項目が追加されます
お問い合わせフォームの作成手順
Contact Form 7を有効化したら、実際にお問い合わせフォームを作成していきましょう。
ステップ1：コンタクトフォームの作成
- WordPress管理画面の左側メニューから「お問い合わせ」をクリックします
- 「新規追加」ボタンをクリックします
- フォームのタイトルを入力します（例：「お問い合わせフォーム」）
- デフォルトでは、お名前、メールアドレス、題名、メッセージ本文などの項目が設定されています
- これらの項目をそのまま使用するか、必要に応じてカスタマイズします
- 設定が完了したら「保存」ボタンをクリックします
- 保存すると、ショートコードが生成されるのでコピーしておきます
ステップ2：固定ページの作成
- 左側メニューから「固定ページ」→「新規追加」をクリックします
- ページタイトルに「お問い合わせ」など分かりやすい名前を入力します
- コンテンツエリアにフォームを設置します
ブロックエディタの場合
- 「+」ボタンをクリックしてブロックを追加します
- 「ショートコード」ブロックを選択します
- 先ほどコピーしたショートコードを貼り付けます
ステップ3：メニューへの追加（オプション）
- 左側メニューから「外観」→「メニュー」をクリックします
- メニューを作成していない場合は、メニュー名を入力して「メニューを作成」をクリックします
- 左側の「固定ページ」セクションで、作成した「お問い合わせ」ページにチェックを入れて「メニューに追加」をクリックします
- メニュー構造を確認し、「メニューを保存」をクリックします
フォームの詳細設定とカスタマイズ
Contact Form 7の基本設定だけでなく、より詳細な設定やカスタマイズも可能です。
メール設定
「メール」タブでは、フォームが送信された時に管理者に届くメールと、ユーザーに送られる自動返信メールの設定ができます。
- 「メール」タブをクリックします
- 「送信先」フィールドに、お問い合わせ内容を受け取りたいメールアドレスを入力します
- 「送信元」には通常、サイトのドメイン名のメールアドレスを使用します（例：info@yoursite.com）
- 「メッセージ本文」には、フォームから送信される内容をどのように表示するかを設定できます
- 必要に応じて、CCやBCCの設定も行えます
自動返信メールの設定
ユーザーがフォームを送信した後に自動返信メールを送るには：
- 「メール」タブの下部にある「メール(2)」をクリックします1
- 「使用する」にチェックを入れます
- 「送信先」に[your-email]を設定して、問い合わせたユーザーにメールが送信されるようにします1
- 「題名」や「メッセージ本文」を、お問い合わせの受付確認メールとして適切な内容に編集します1
- 設定が完了したら「保存」をクリックします
完了画面（サンクスページ）の設定
フォーム送信後に特定のページに遷移させる設定も可能です：
javascript
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
location.replace(“https://yoursite.com/thanks/”);
}, false );
- URLの部分をサンクスページのURLに変更します
- 「保存」をクリックして設定を保存します
フォームのカスタマイズ
Contact Form 7では、標準の項目以外にもさまざまな入力項目を追加できます：
- チェックボックスやラジオボタン、プルダウンメニューなどの設定ができます7
- 「フォーム」タブ上部の各種ボタン（テキスト、メールアドレス、URL、電話番号など）をクリックすると、対応するコードが挿入されます3
- 必須項目にする場合は、コード内の「」を付けます（例：[text your-name]）3
スパム対策設定
迷惑メール対策として、reCAPTCHAを設定することをおすすめします：
- Google reCAPTCHAのサイトでサイトキーとシークレットキーを取得します
- Contact Form 7の「統合」タブから「reCAPTCHA」を選択します4
- 取得したキーを入力して保存します
- フォームのコードに[recaptcha]タグを追加します
コメント