Lightningテーマの3PRの設定方法をお探しの方向け。
Lightningテーマには、「3PR」と呼ばれるユーザーにPRしたいコンテンツを表示できる機能があります。
この記事では、Lightningテーマの3PRの設定方法を解説します。
Lightningテーマの3PRの設定方法は2つ
Lightningテーマの3PRの設定方法は下記2つです。
- ブロックエディタ（投稿・固定ページ） → 投稿・固定ページに3PRを設置
- ウィジェット → トップページ・サイドバー・フッターに3PRを設置
各設定方法を上記の順に解説します。
ブロックエディタの固定ページ・投稿で3PRを設置する手順
最初に、ブロックエディタの固定ページ・投稿で3PRを設置する手順を解説します。
手順は次のとおり。
- 手順①：ページの編集画面でブロックを追加する
- 手順②：3PR Blocksの編集
上記のとおり。
手順①：ページの編集画面でブロックを追加する
編集画面のブロックメニューをクリックします（固定ページ・投稿共通）。
ブロックメニューが表示されたら「PR Blocks」を選択します。
下図のように3PRが出現しますので、テキストの編集や、アイコンの変更を行います。
手順②：3PR Blocksの編集
3PR Blocksを編集します。
各項目の設定方法は下記のとおりです。
- ：タイトルを入力します。
- ：ユーザーに訴求したい文章を入力します。
- リンクURL：テキストにリンクを張りたい場合はURLを入力します。
- アイコン：アイコンを選択します
- ：アイコンの色を変更します
- アイコン背景：アイコンの背景カラーを変更できます。
- PR画像：アイコンではなく画像を設定したい方は、画像を選択します（画像が優先されます）。
下図のように入力してみました。
3つのエリアを編集したら、「プレビュー」ボタンをクリックして表示を確認します。
編集内容に問題無ければ、「公開」ボタンをクリックしてページを公開しましょう。
ちなみに、ブロックは何段でも増やせますし、テキストにマーカーをつける事もできます。
このように、ブロックエディタを使えば3PRを簡単に設置できます。
3PRを作った固定ページをトップページに表示するには、別記事の「【WordPress】固定ページの作り方・使い方を図解入りで解説」をどうぞ。
ウィジェットで3PRを設置する手順
次に、ウィジェットを使って3PRを設置する手順を解説します。
ウィジェットで3PRを設置する方法は下記2パターンあり、基本的な設定方法は殆ど同じです。表示が異なりますので、サイトの雰囲気に合わせて使い分けましょう。
- VK 3PRエリアで設置する
- VK PR Blocksで設置する
上記のとおり。
VK 3PRエリアで設置する
VK 3PRエリアで設置する方法を解説します。手順は下記のとおりです。
- 手順①：ウィジェット開く
- 手順②：VK 3PRエリアを選択
- 手順③：VK 3PRエリアの編集
上記の順に解説していきます。
手順①：ウィジェット開く
まずはウィジェットに移動します。
ダッシュボード＞外観＞ウィジェット を選択します。
手順②：VK 3PRエリアを選択
ウィジェット一覧画面が表示されたら、「VK 3PRエリア」を選択します。
「VK 3PRエリア」を選択すると、表示位置の選択肢が一覧表示されます。
なお、本記事では見やすさを優先して、トップページに設定します。
①「トップページコンテンツエリア上部」を選択し、②「ウィジェットを追加」をクリックします。
手順③：VK 3PRエリアの編集
VK 3PRエリアを編集します。
各項目の設定方法は下記のとおりです。
- タイトル：見出しを入力します。
- PC用に表示される画像を選択：横幅300px 程度が推奨サイズとなります。
- スマホ用（ウィンドウサイズが 768px 以下の場合）に表示される画像を選択（横690px 以上推奨。空欄も可）：スマホ用の画像を設定できます。スマホ用の画像を設定しないとPCの画像が表示されます。
- 概要となるテキスト：ユーザーに訴求したい文章を入力します。
- リンク先ページのURL：テキストにリンクを張りたい場合はURLを入力します。
下図のように入力してみました。
残りの2つのエリアに画像とテキストを追加したら、「保存」ボタンをクリックして設定を保存します。
VK 3PRエリアの表示をプレビューで確認
プレビューで確認してみると、下図のようにVK 3PRエリアエリアが追加されたことが確認できます。
以上でVK 3PRエリアで設置する方法は完了です。
VK 3PRエリアを一段増やしたい場合は、同じ作業を繰り返すと1段追加できます。
VK PR Blocksで設置する
次に、VK PR Blocksで設置する方法を解説します。手順は次のとおりです。
- 手順①：ウィジェット開く
- 手順②：VK PR Blocksを選択
- 手順③：VK PR Blocksの編集
上記の順に解説していきます。
手順①：ウィジェット開く
ダッシュボード＞外観＞ウィジェット を選択して、
ウィジェットに移動します。
手順②：VK PR Blocksを選択
ウィジェット一覧画面が表示されたら、「VK PR Blocks」を選択します。
「VK PR Blocks」を選択すると、表示位置の選択肢が一覧表示されます。
①「トップページコンテンツエリア上部」を選択し、②「ウィジェットを追加」をクリックします。
手順③：VK PR Blocksの編集
各項目の設定方法は次のとおりです。
- 列の数：初期設定は3列ですが、4つに増やせます。
- タイトル：見出しを入力します。
- 概要となるテキスト：ユーザーに訴求したい文章を入力します。
- リンク先ページのURL：テキストにリンクを張りたい場合はURLを入力します。
- 使用したいアイコンフォントのクラス名：クラス名を変更するとアイコンを変更できます。
- アイコンの色：カラーピッカーでアイコンの色を変更できます。
- アイコン背景：アイコンの背景カラーを変更できます。
- 画像：アイコンではなく画像を設定したい方は、画像を選択します。
下図のように入力してみました。
残りの2つのエリアに画像とテキストを追加したら、「保存」ボタンをクリックして設定を保存します。
VK PR Blocksの表示をプレビューで確認
プレビューで確認してみると、下図のようにVK PR Blocksが追加されたことが確認できます。
以上でVK PR Blocksで3PRを設置する方法は完了です。
3PRを一段増やしたい場合は、VK 3PRエリア同様、同じ作業を繰り返すと1段追加できます。
Lightningの3PRを設置する時のよくある質問
最後に、Lightningの3PRを設置する時のよくある質問とその答えを紹介していきます。
- VK 3PRエリアがウィジェットに表示されない
- 3PRの表示はカスタマイズできないの？
上記のとおり。
VK 3PRエリアがウィジェットに表示されない
VK 3PRエリアがウィジェットに表示されない時は、VK 3PRエリアが有効化されていない可能性が高いです。
ダッシュボード＞ExUnit＞有効化 を選択し、
VK All in One Expansion Unit 有効化設定を確認して下さい。
チェックが外れていると、VK 3PRエリアは表示されません。
チェックを入れて、「変更を保存」をクリックして下さい。
これで、ウィジェットにVK 3PRエリアが表示されます。
3PRの表示はカード型に変更できる？
無料版では3PRの表示をカード型に変更できません。
カード型に変更したい方は、別記事の「Lightning有料版でノーコードカスタマイズ【デザイン強化】」で紹介している、有料版を購入する必要があります。
有料版は「VK Blocks Pro」というVK Blocksの機能を強化したプラグインが使えるようになり、カード型に変更できます。
カード型に変更できるだけでなく、順番の入れ替えやカラム数を自由に変更できます。
まとめ
以上、Lightningテーマの3PRの設定方法を3つ解説しました。
おわり。