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を設置する時のよくある疑問を2つ紹介します。
- VK 3PRエリアがウィジェットに表示されない
- 3PRの表示はカスタマイズできないの？
上記のとおりです。
VK 3PRエリアがウィジェットに表示されない
VK 3PRエリアがウィジェットに表示されない時は、VK 3PRエリアが有効化されていない可能性が高いです。
ダッシュボード＞ExUnit＞有効化 を選択し、
VK All in One Expansion Unit 有効化設定を確認して下さい。
チェックが外れていると、VK 3PRエリアは表示されません。
チェックを入れて、「変更を保存」をクリックして下さい。
これで、ウィジェットにVK 3PRエリアが表示されるようになります。
VK PR Blocksも同様、ウィジェットに表示されなければ、ウィジェット有効化設定でチェックが外れている可能性がありますので、チェックが入っているか確認して下さい。
3PRの表示はカード型に変更できる？
無料版では3PRの表示をカード型に変更できません。
カード型に変更したい方は、「Lightning有料版でノンコードカスタマイズ【デザイン強化】」という記事で紹介している、有料版を購入する必要があります。
有料版は「VK Blocks Pro」というVK Blocksの機能を強化したプラグインが使えるようになり、カード型に変更できます。
カード型に変更できるだけでなく、順番の入れ替えやカラム数を自由に変更できます。
まとめ
以上、Lightningテーマの3PRの設定方法を3つ解説しました。
おわり。
