カテゴリー: 未分類

WordPressのブロックテーマで問い合わせページを作成するためには以下のことを行います。

• 問い合わせプラグインをインストール
• 固定ページで問い合わせページを作成する
• 問い合わせフォームのブロックを設置する
• フォームの内容を編集する

問い合わせページはデフォルトのテンプレートを使用するか、問い合わせページ用にテンプレートを作成して作ります。

問い合わせフォームはWordpressの標準ブロックでは作れないのでプラグインをインストールする必要があります。

ここからは、Wordpressのブロックテーマで問い合わせページを作る方法を画面の画像付きで詳しく解説していきます。

ブロックテーマで問い合わせページを作る方法

問い合わせプラグインをインストール

問い合わせページには問い合わせフォームを設置する必要があります。問い合わせフォームは標準のブロックにはないのでプラグインをインストールする必要があります。

問い合わせフォームを設置できるプラグインはたくさんありますが、ここでは最もよく使われていて日本語対応の「ContactForm7」を使います。

まずはWordpressの管理画面メニューから「プラグイン->プラグインを追加」を選択してプラグイン追加ページを開きます。

このページで「Contact Form 7」と検索して出てきたプラグインをインストールします。

「今すぐインストール」を押したあと、「有効化」ボタンを押せばインストール完了です。

固定ページで問い合わせページを作成する

次に問い合わせページを作成します。すでに作成されている場合はこのステップを飛ばして次に進んでください。

WordPressの管理画面メニューから「固定ページ->固定ページを追加」を選択してページを作成します。

問い合わせフォームは後ほど追加するので、タイトルと必要に応じて説明文を追加しておきましょう。

ここではデフォルトの固定ページテンプレートを使っていますが、問い合わせページ用にレイアウトをカスタマイズすることも可能です。固定ページ用テンプレートの詳しい作成方法については以下の記事をご覧ください。

WordPress ブロックテーマ 固定ページ 作り方

問い合わせフォームのブロックを設置する

次は問い合わせフォームをページ内に設置します。

左上にある「+」アイコンのついたボタンを押すと、ブロック一覧が表示されるので、その中にある「Contact Form 7」を探してクリックします。

設置すると「コンタクトフォームを選択」というボックスが表示されるので、とりあえず「コンタクトフォーム1」を選択しておきます。

この状態で右上のボタンから固定ページを保存(公開)して、ページを確認してみます。

上の画像のように、入力したページタイトルと説明文、フォームが表示されればOKです。

フォームの内容を編集する

この状態だと、問い合わせタイトルと内容しかありませんが、編集画面で追加や変更することができます。例えば、お問合せ種別の選択肢を追加したり、ファイルのアップロードや電話番号、住所の追加もできます。

また、スタイルも非常にシンプルなのでCSSコードを追加することでもう少しいい感じの見た目に変更することができます。

フォームの内容を編集するには、固定ページの編集画面に戻って、右側のパネルにある「このコンタクトフォームを編集」から行うことができます。

編集画面では、各種フォームのタグが項目名と一緒に<label>というHTMLタグに囲まれています。

ここに電話番号を追加したい場合、テキストエリアの上にある「電話番号」のボタンを押します。設定項目が表示されますが、とりあえずそのままにして「タグを挿入」ボタンを押します。

するとテキストエリアにフォームのタグがコピーされるのでこれを他の項目と同じようにlabelと項目名で囲みます。

他に追加したい項目があれば同様に追加していきます。最後に右上にある「保存」ボタンを押して内容を保存し、問い合わせページを更新して正しく設置されていれば編集完了です。

ContactForm7のフォームのスタイルを変更するには？

フォームのスタイルを変更するには、テーマフォルダのstyle.cssファイルなどにCSSコードを記述する必要があります。

CSSファイルは、ローカル環境で作成したものをサーバーにアップするか、「ツール->テーマファイルエディター」からstyle.cssを選んで編集することができます。

Googleフォームで問い合わせページを作れる？

問い合わせプラグインを使わず、Googleフォームをページ内に埋め込んで問い合わせページを作成することもできます。

やり方は以下の通りです。

• Googleフォームを作成し、HTMLコードをコピー
• 問い合わせページにカスタムHTMLブロックを設置
• コピーしたHTMLを貼り付けて保存

コードはGoogleフォームの編集ページから「HTMLを埋め込む」をクリックして表示されたコードをコピーして使用します。

コードを貼り付けて表示すると、縦にスクロールバーが出ることがあります。これを消したい場合は、貼り付けたコードの`height`の値を増やして調整してください。

WordPressのブロックテーマで一覧(カテゴリやタグなど)ページは以下の手順で作成することができます。

• 一覧用テンプレートを作成する
• クエリーループブロックを設置する
• サムネイルを追加したり一覧のコンテンツを作成する

テンプレートがすでにある場合はそのテンプレートを編集することでカスタマイズできます。

一覧ページのレイアウトはサイドバーを作って2カラムにしたり、記事のレイアウトを縦並びから横並びに変更することができます。

ただ、Wordpressの標準ブロックではこれらのレイアウトを思うように作れなかったりすごく時間がかかることがあるため、パターンテンプレートを活用することをおすすめします。

OrigamiUIでは一覧ページでよくあるパターンテンプレートをたくさん用意していますのでぜひダウンロードしてみてください。

-> 今すぐテンプレートを使ってみる

ここからは、Wordpressのブロックテーマで一覧(カテゴリやタグなど)ページを作る方法を画面の画像付きで詳しく解説していきます。

ブロックテーマで一覧ページを作る方法

一覧用テンプレートを作成する

まずは必要な一覧用テンプレートを作成します。テーマによってはすでに用意されている場合もあるので(アーカイブテンプレートなど)それを使う場合はこのステップを飛ばしてください。

テンプレートを作るには、外観->エディター->テンプレートと進んでテンプレート一覧ページを開、右上の「テンプレート追加」ボタンで作成することができます。

ここで「〜アーカイブ」となっているのが一覧用のテンプレートです。以下のようなものがあります。

• 投稿者アーカイブ
• カテゴリーアーカイブ
• 日付アーカイブ
• タグアーカイブ
• カスタムタクソノミーアーカイブ

カスタムタクソノミー用は「Custom Post Type UI」プラグインなどでタクソノミーや投稿タイプを追加した場合に表示されます。

カテゴリーアーカイブテンプレートをクリックすると以下のような画面が出てきます。

ここでは全てのカテゴリーで共通のものか、特定のカテゴリー用のものかを選択できます。右側の「特定の項目に対して」の方を選ぶと、カテゴリを選択する画面が表示されるので作成したいカテゴリーを選びます。

選択するとテンプレート編集ページに移動します。あとは必要なブロックを設置しながらテンプレートで表示したいレイアウトを作っていきます。

クエリーループブロックを設置する

WordPressのブロックテーマで一覧ページを表示させるには、先ほど作成した一覧ページ用テンプレートに「クエリーブロック」を設置します。

クエリーブロックを設置すると、こんな感じで投稿一覧が表示されます(テンプレートの選択がありますがとりあえずなんでもOK)。この状態で一旦保存して一覧ページを表示してみたものが以下の画面(ここでは日付アーカイブを作成しています)。

編集ページと同じように表示されています。後ほど解説しますが、一覧ページにとって重要なページネーションも正しく機能しています。以前はWordpressタグをPHPファイルに設置したり、プログラミングする必要があったのでこのあたりはかなり楽に実装できるようになってます。

クエリーループではクエリータイプの項目で「カスタム」を選択することで表示数(1ページあたりの)や絞り込み、並び順などの設定ができます。

設定項目は以下のとおりです。

• 投稿タイプ
• 並び順
• 先頭固定表示の投稿
• 表示
• 絞り込み(タクソノミー、著者、キーワード、フォーマット)

サムネイルを追加したり一覧のコンテンツを作成する

クエリーループの設置と設定ができたら、次はレイアウトを作成していきます。

クエリーループを設置した際にテンプレートの選択ができますが、だいたいこんな感じのシンプルな表示になってると思います。

ここに記事のサムネイル(アイキャッチ)画像を追加したり、カテゴリや続きを読むリンクなど以下のようなコンテンツを追加することができます。

• 投稿のアイキャッチ画像: サムネイルを追加
• アバター: 著者の画像を表示
• 抜粋: 抜粋を表示
• 投稿者: 投稿者情報を表示
• 作成者名: 投稿の作成者名を表示
• 変更日: 更新日時を表示
• カテゴリー: 投稿のカテゴリーを表示
• タグ: 投稿のタグを表示
• 続きを読む: 続きを読むリンクを表示

これらのコンテンツを表示するには、左上のブロック追加ボタンを押して、ブロック一覧から選択すればOK。

ただし、どこにでも追加すればいいというものではなく、レイヤーパネル(リストビュー)の「投稿テンプレート」の中に配置する必要があります。

例えばアイキャッチ画像ならこんな感じ

タイトルの上にアイキャッチを設置してみたところ、先ほどは表示されていなかったアイキャッチ画像を表示されています。あとはこんな感じで必要なコンテンツを配置していけばOK。

ただ、ゼロからレイアウトを作る作業ってすごく大変で、時間がかかったり思ったようなレイアウトが作れなかったりするんですよね。

ページのデザインをさくさく作りたい！という方はOrigamiUIのパターンテンプレートを使ってみてください。編集画面にコピーするだけでキレイなレイアウトを簡単に作成できます。

パターンテンプレート一覧はこちらで公開しているのでぜひ活用してみてください。

-> いますぐパターンテンプレートをダウンロードする

1ページあたりに表示する数を変更するには？

過去のWordoressテーマの場合、一覧ページの表示数は「設定->表示設定」から「1ページに表示する最大投稿数」を変更することで調整することができました。

クエリーループを使用することで、ブロックの設定から直接変更することができます。

サムネイル(アイキャッチ)付きのデザインにするには？

記事一覧でサムネイル付きのデザインに変更するには以下の方法があります。

• クエリーループブロックを設置する際にサムネイルのあるテンプレートを選ぶ
• クエリーループブロックを設置したあと、自分でアイキャッチブロックを設置する

1つめは、最初から用意されているテンプレートの中からサムネイル付きのものを選ぶ方法。選ぶだけなので簡単に実装できます。

いい感じのデザインがない場合はOrigamiUIのパターンテンプレートから探してみてください。

2つめは自分でアイキャッチ用のブロックを設置する方法。

設置場所は「クエリーループ、投稿テンプレート、投稿のアイキャッチ画像」の順で階層化されている必要があります。カテゴリーやタグの表示も投稿テンプレートの中に入れておきます。

一覧ページにページタイトルを設置するには？

一覧ページにページタイトルを表示するには、「アーカイブタイトル」というブロックを設置します。

このブロックの設定で「タイトルにアーカイブを表示」をオフにするとタイトルだけが表示されるようになります。例えばカテゴリー一覧ページの場合は以下のように表示されます。

• アーカイブを表示ON: カテゴリー:未分類
• アーカイブを表示OFF: 未分類

カテゴリーごとの一覧ページを作るには？

WordPressのブロックテーマではカテゴリーごとの一覧ページを簡単に作成できます。

やり方はテンプレートの作成方法のところで説明したように、「特定の項目に対して」という方を選ぶとカテゴリーの選択画面が表示されるので作成したいカテゴリーを選べば、そのカテゴリ用の一覧ページを作ることができます。

カスタム投稿タイプやカスタムタクソノミーも同じように個別に一覧ページを作成することができます。

一覧ページでページネーションを作るには？

ブロックテーマで作成したテンプレートにページネーションを追加するには、「ページ送り」というブロックを設置します。

このブロックはクエリーループの内側で、投稿テンプレートの外側に設置します。

設定できるのは、配置や矢印の有無やフォントスタイルのみで、細かいスタイルができませんが、OrigamiUIのカスタムCSSを使うことで編集ページ上でCSSコードを追加でき、デザインに合わせたスタイリングが可能になります。

WordPressのブロックテーマでトップページを作るには、固定ページの作成と、エディターで作れるテンプレートが必要です。トップページは以下の手順で作成することができます。

1. 外観/エディターから新しいテンプレートを作成し
2. ヘッダーとフッターを作成
3. 中身のコンテンツを作成
4. テンプレートを保存してトップページを確認
5. 作成したものが表示されていれば完了

テンプレートを再編集したい場合は、同じ方法でテンプレートを開いて編集してください。

以前のWordpressテーマのように固定ページで作って表示設定からトップページとして表示することも可能です。こちらは後ほど解説します。

WordPressのフルサイトエディターはかなり使いやすくなったとはいえ、ゼロからサイトを作るのは結構大変。今すぐWordpressでサイト作りたい！という方はコピペできるブロックやテンプレートを配布しているのでぜひ使ってみてください。

-> 今すぐテンプレートを使ってみる

ここからは詳しいやり方を解説していきます。

ブロックテーマでトップページを作る手順

エディターからテンプレートを作成する

まずはWordpressの管理画面メニューにある「外観/エディター」からエディターページを開いて左のメニューにある「テンプレート」を選びます。

すると画像のようなページが表示されるので、右上にあるテンプレート追加ボタンを押します。

ここで作成するテンプレートの種類を選ぶことができます。今回はトップページなので「フロントページ」を選びます。

クリックして空白の編集ページが表示されればテンプレートの作成完了です。

ヘッダーとフッターを作成

次にヘッダーとフッターを作成していきます。

編集ページの左上にある「+」アイコンのボタンを押すと設置できるブロック一覧が表示されるので、この中から選んでヘッダーを作成していきます。

フッターも同様に作成していきます。

冒頭にも書いたようにいきなり作るといわれてもレイアウトやデザインは結構時間のかかる作業になってしまうので、効率化したい場合はコピーできるテンプレートを使いましょう。

OrigamiUIストアではヘッダーやフッターなどのパーツごとにテンプレートを用意しています。特定のパーツだけに絞り込んで探すこともできるのでぜひ活用してみてください。

中身のコンテンツを作成

続けて中身のコンテンツも同様に作成していきます。こちらも先ほどのヘッダー、フッターと同様にブロックを設置してレイアウトを作っていきます。

テーマによってはオリジナルのパターンが多数同梱されている場合もあります。

また、設置したブロックは左のパネルで色や文字サイズなどのスタイルを変更することができます。

テンプレートを保存してトップページを確認

コンテンツの作成が完了したら、右上の保存ボタンで忘れずに保存しておきましょう。

保存できたらトップページを確認してみてください。とくに設定する必要なく先ほど作ったトップページが表示されます。

作成したものが表示されていれば完了

トップページを見て作成した通りに表示されていれば完了です。

ここではブロックの使い方やスタイル方法については省きましたが、以下のページで詳しく解説しているので参考にしてみてください。

縦横のレイアウトの作り方

スタイルの作り方

テンプレートではなく固定ページでトップページを作るには？

ブロックテーマでは、トップページをテンプレートで作る方法だけでなく、固定ページをトップページに設定する方法もあります。こちらの方法なら、ページ単位で自由にデザインでき、他の固定ページと同じ操作感で編集できます。

手順は以下の通りです。

1. 通常通り固定ページを新規作成
2. 管理画面の左メニューから「設定 → 表示設定」を開く
3. 作成した固定ページをトップに設定

固定ページの作成の際、テーマ側で用意されたテンプレートをそのまま使う場合は「テンプレート」のところはそのままにしておきます。

ヘッダーとフッターだけを入れたテンプレートを使う場合は「テンプレート」で使用するテンプレートを入れ替える必要があります。

トップページをCSSでスタイル変更したいときは？

トップページの見た目（文字の色、余白、背景など）を調整したいときは、ブロックのスタイル設定を変更する方法と、CSSコードを追加する方法の2つがあります。

手順は以下の通りです。

1. 管理画面の左メニューから「ツール → テーマファイルエディター」を開く
2. 編集画面右側のファイル一覧から「style.css」をクリック
3. 編集エリア内に変更したいCSSコードを追加して保存

WordPressのブロックテーマでCSSコードを追加するには、ツール->テーマファイルエディタからテーマファイルの編集画面を開いて、style.cssに必要なスタイルを追加してください。

注意点としては、ここでの変更はテーマ全体に反映されること、テーマをアップデートすると変更内容が上書きされてしまう場合があることです。

安全にカスタマイズしたい場合は「子テーマ」を作成してそちらにCSSを追加するのがおすすめです。

トップページにお知らせを表示するには？

WordPressではクエリループというブロックを設置することで、トップページに「お知らせ」や「ブログ」のような投稿記事一覧を表示することができます。

方法は以下の通りです。

1. 編集ページの左上の「+」アイコンをクリック
2. ブロック一覧から「クエリループ」を選択して設置
3. 表示するカテゴリや投稿タイプなどの設定
4. クエリループ内で使えるブロックを設置してレイアウトを作成

クエリループの設定で「カスタム」を選ぶことで、投稿タイプを選択したり、カテゴリで絞り込んだり、表示数を変更することができます。

トップページのお知らせでカスタム投稿タイプやカスタムタクソノミーを表示するには？

WordPressでは「Custom Post Type UI」という無料プラグインを使うことで投稿タイプを追加したり、新しいタクソノミーを追加できます。

お知らせコンテンツを「投稿」ではなく「お知らせ」のような投稿タイプを追加し、カテゴリやタグではなく新しく「news-type」のような分類(カスタムタクソノミー)を追加した場合の設定手順は以下の通りです。

• クエリーループで「投稿タイプ」を「お知らせ」に変更
• クエリーループのブロック内に「news-type」ブロックを設置
• 必要に応じてブロックの設定を行う

「Custom Post Type UI」でカスタムタクソノミーを追加すると同じ名前のブロックが追加されるのでそれを使って表示することができます。

もっと効率よくトップページを作るには？

WordPressのフルサイトエディターを使ってコーディングすることなくページを作れるようになりましたが、ゼロからレイアウトを作るのは時間がかかる作業です。

効率よくトップページを作るにはコピペできるテンプレートを活用することをおすすめします。

WordPressでは編集画面に設置したブロックをスタイルやレイアウトの情報を保持したままコピーすることができます。

この機能を使ってWebサイトによくあるパターンをOrigamiUIストアにまとめています。

OrigamiUIストアでは、ページ全体のテンプレートだけでなく、「お知らせ」「お客様の声」「料金プラン」「CTA（お問い合わせ）セクション」など、部分的なブロックテンプレートも豊富にそろっています。

作りたいホームページの内容に合わせて必要なパーツを組み合わせるだけでOK。デザインの一貫性を保ちながら、オリジナルのトップページをすぐに完成できます。

👉 OrigamiUIストアのテンプレートを見る

まとめ

ここまでの内容をまとめるとこちらのようになります。

• 「外観 → エディター」から新しいテンプレート作成からトップページを作れる
• テンプレートではなく固定ページでもトップページを作成可能
• 「ツール → テーマファイルエディター」でCSSを編集できる
• クエリループブロックを使うことで、投稿一覧をトップページに表示できる
• 「Custom Post Type UI」プラグインで投稿タイプや分類（タクソノミー）を追加可能
• 効率的に作りたい場合は、テンプレートを活用するのがおすすめ

テンプレートをうまく活用できれば、ブロックをコピー＆ペーストするだけでページを作成できるのでかなり作業効率を上がります。