初心者・独学でもわかる！WordPressブロックエディター・ギャラリー・カスタム投稿-WEBST8動画で学ぶ実践講座 Part4
WordPressをネット動画で学習する中で、「画面の動きは分かるけど、どう応用したらいい？」と迷う場面が出てきますよね。
本記事ではPart4として、「資料請求ブロック」「コード編集」「ギャラリーブロック」「カスタム投稿／フィールド」など、動画から学んだ内容を実務で使える形に整理して紹介しています。
「ぼくら」の失敗談
1.カスタム投稿タイプの有用性が分からず、投稿（ブログ）との違いが曖昧だった。また、どこに表示されるか分からなかった。⇒「新着情報」「製品紹介」「コラム」「事例」「イベント」などを任意で作成でき、管理画面に「新しい投稿タイプ」が追加され、そこで編集できる。具体的な活用シーンとして「スクールサイト」「商品紹介サイト」などがあり、慣れが必要。
今回、ネット教材の動画は、株式会社WEBST8のブログさんの「ホームページを自作したい人のためのWebスクール・教室」を使用させていただきました。
”自分の事業用ホームページを自作できるようになる”ことを目的とした少人数制・個別指導型スクールとして、非常に高い評価を得ているブログになります。
1.ファイルブロックで資料請求やDL機能を作る
- PDFやWord、Excelなどのドキュメントファイルへのリンクを生成し、ユーザーがダウンロード出来るようにするには、ファイルブロックが活用できます。
「ファイルブロック」を使えば、資料ファイルを記事内に配置して、訪問者がダウンロードできるリンクとファイル名を自動生成できます。これは企業サイトの「資料請求ページ」や、講座LP・お知らせページなどでとても便利です。 - 画像ファイルには非対応なので注意！です。
- LP（ランディングページ）で「PDF資料ダウンロード」などの成約導線となります。
- テキストリンクでは目立ちづらいため、手動で編集して、見出し風に整えるとUXが向上します。
＊例：Excelファイル「算数パズル」をDLできる☞
2.コードエディターとカスタムHTMLブロックの使い方
- はじめにWordPressで表示されている画面を、「ビジュアルエディター」といいます。「コードエディター」に切り替えるには、右上の「︙」をクリックします。
「コードエディター」は、プログラミングコードを記述・編集するための専用ツールです。 - 編集画面（ブロックエディター）で独自のHTMLやCSSコードを追加する際には、カスタムHTMLブロックを利用します。
- まとめて整理したものが次の表です。
| 機能 | 解説 |
|---|---|
| ビジュアルエディター | 直感操作で編集可能。初心者向き |
| コードエディター | HTML/CSSの直接編集が可能。右上の「︙」から切り替え |
| カスタムHTMLブロック | 部分的にコードを追加したいときに活用（CTA、iframeなど） |
3.ギャラリーブロックは画像（写真）一覧を美しく並べる方法
- 複数の画像を美しく並べて表示できる機能です。
通常の画像ブロックとは異なり、複数の画像を一括で配置できるため、写真ギャラリーやポートフォリオの作成に便利です。 - 設定/画像の切り抜きのチェックをはずすと、画像本来の縦横比で表示されます。（本来のサイズで表示されるわけでなくテーマなどによって変わります）それで、縦横比が違う画像がある場合、高さがでこぼこになってしまったり隙間ができたりします。レイアウト的におかしくなりますので、揃えるには、画像の縦横比を同じにします。
- 「画像の切り抜き」ON／OFFの違いによるレイアウト崩れ
| 状態 | 表示形式 | レイアウト |
|---|---|---|
| ON（チェックあり） | 画像が同じ縦横比に強制トリミングされる | 高さが揃うため、見栄えが安定 |
| OFF（チェックなし） | 元の画像サイズと縦横比で表示される | 高さにバラつきが出て、崩れることがある |
4.カスタム投稿タイプで情報ジャンルを分ける
- 新着情報・コラム記事・製品一覧といったように、複数をジャンル分けして一覧作成したい場合、そのようなニーズに適しているのが「カスタム投稿タイプ」です。
カスタム投稿タイプは、「固定ページ」「投稿」とは異なる“独自ジャンルの投稿一覧”を追加できる重要な機能です。 - プラグイン「VK All in one Expansion Unit」（Lightning向け）を利用すると、簡単にカスタム投稿タイプを実装できます。
Lightning以外のテーマを利用する場合は、より高度なカスタム投稿タイプ設定ができる「Custom Post Type UI」というプラグインがよく使われます。 - 使用例（具体的な活用シーン）
| サイトジャンル | カスタム投稿タイプ名 | 用途例 |
|---|---|---|
| スクールサイト | 講座情報／学習カテゴリ | コース紹介や教材案内の投稿管理 |
| 商品紹介サイト | 製品一覧 | 製品名／価格／特徴などを並べて表示 |
| コーポレートサイト | 事例紹介／お知らせ | 過去実績や更新情報を整理して一覧化 |
| メディアサイト | コラム／特集 | 通常ブログとは別の読み物カテゴリー設計 |
5.カスタムフィールドで入力の抜け漏れとレイアウト崩れを防ぐ
カスタムフィールドは、独自の入力項目を追加できる機能です。通常、WordPressの投稿には「タイトル」や「本文」しか入力できませんが、カスタムフィールドを使うことで、例えば「価格」「商品カラー」「商品型番」「イベント日時」などの特定の情報を追加できます。
つまり、「カスタムフィールド」を使うことで、入力項目を増やし、ページに出力することができます。「本文にまとめて書けばいいのでは？」という意見もありますが、カスタムフィールドを使うことで、後から管理・再利用しやすいという利点が生じます。
- テーマのテンプレートファイルに任意のレイアウトでカスタムフィールドの値を出力するように組み込みます。入力項目に情報を入力していくと、あらかじめ決まったレイアウトでページが完成するので、入力漏れやレイアウト崩れを無くすことができます。
通常の本文に商品名や商品価格など全ての情報を入力していくことも可能ですが、カスタムフィールドを利用することで各項目を個別属性として扱い・出力することができます。 - 投稿画面に「価格」「型番」「開催日時」などの独自項目を追加可能
- テーマテンプレートに対応させると、入力するだけで綺麗なレイアウトに自動反映
- SEOにも有利：構造化データとして情報を整理できる
○資料DLボタンのカスタムCSS例
WordPressのファイルブロックで挿入した「資料ダウンロードリンク」を、より視認性の高いボタン風デザインにしたい場合、以下のようなカスタムCSSを使います。
.wp-block-file a {
display: inline-block;
padding: 10px 20px;
background-color: #0073aa;
color: #fff;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
transition: background-color 0.3s ease;
}
.wp-block-file a:hover {
background-color: #005f8c;
}
このCSSの特徴：
| デザイン要素 | 内容 |
|---|---|
| 配置 | インライン→ブロック風ボタンとして表示 |
| 色 | WordPress標準カラー（#0073aa）を採用。他テーマにも合わせやすい |
| ホバー効果 | マウスを乗せると色が濃くなる（UX向上） |
| 文字の強調 | 太字・白文字で「アクションボタン」らしさを演出 |
| 角丸／影 | 柔らかく立体感のある仕上がり |
