top_visual_1120

Lightning Origin Pro は Lightning 標準のデザインスキン 「Origin」を更にパワーアップするプラグインです。

デモサイトを見る

ヘッダー上部機能拡張

より結果を出しやすくするためにヘッダー上部を強化

ウェブサイトは存在しているだけでは意味がありません。ビジネスにおいてはあくまでも問い合わせなどのアクションを得る事が目的です。

そのためにヘッダー上部に電話番号問い合わせボタンを配置しました。

また、ユーザーがより使いやすくなるようにサブナビゲーションを配置する事が可能で、加えてPC閲覧時には画面左上にサイトのキャッチコピーも表示されるようになっています。

※ヘッダーメニューの装飾は各デザインスキンに依存しますので下記の画像とは異なる事があります。ご購入前にご希望の商品のデモサイトにてご確認ください。

ヘッダーに問い合わせボタンや電話番号などを表示

ヘッダーに問い合わせボタンや電話番号などを表示

 

ナビゲーションの設定

管理画面の『外観』→『カスタマイズ』からカスタマイザーを起動して、左のメニューに『メニュー』というセクションを選択します。

カスタマイザーの『メニュー』を選択

新しくメニューを登録して使う場合は、『メニューを新規作成』でメニューを追加します。

任意の「メニュー名」を入力して「次へ」を押します。

「項目を追加」からメニューとして設定したい固定ページを選択して、「メニューの位置」にチェックを入れてください。
今回はヘッダートップのナビゲーションになるので、「Header Top Navigation」を選択します。

すべて設定したら最後に必ず。「公開」ボタンを押して保存してください。

設定して公開ボタンを押します。

問題なく設定できるとヘッダーのトップに表示されます。

Media Post ウィジェット / アーカイブレイアウト機能

Media Posts ウィジェット

WordPressは投稿された情報を条件によって絞り込んで表示する事を得意としていますが、Media Posts ウィジェットではその強みを最大限活かし、投稿タイプ・カテゴリーを指定した上で、様々なレイアウトで配置する事ができます。

※見出しの装飾は各デザインスキンに依存しますので下記の画像とは異なります。ご購入前にご希望の商品のデモサイトをご確認ください。

 

160910-0002

160909-0010160909-0011

160909-0012

160909-0013

160909-0014

160909-0015

表示する記事のオフセットで、複数のレイアウトを組み合わせて表示可能

通常は公開日付が新しい順に表示しますが、例えば新しい記事の4件目から表示するという事も可能です。この機能によって、例えばMediaPostウィジェットで1件だけ A のレイアウトで配置、その下にまたMediaPostウィジェットを設置し、見出しを空欄にした上で今度はBのレイアウトを選択して表示記事のオフセットを 1 にすれば、ウィジェットとしては2つのウィジェットを使用していますが、見た目は一つのグループとしてまとまります。

Media Post ウィジェットを複数組み合わせたレイアウト例

Media Post ウィジェットを複数組み合わせたレイアウト例

トップページの拡張ウィジェットエリアを拡張

無料で利用出来る標準のLightningではトップページのコンテンツエリアのウィジェットエリアは1つですが、Varietyではトップページでより多くのバリエーションを実現出来るようにさらに4つのウィジェットエリアを用意していますので、コンテンツエリアだけで合計4つのウィジェットエリアが利用可能です。

拡張されるウィジェットエリア

拡張されるウィジェットエリア

Media Posts ウィジェット用の画像のリサイズ

Media Posts ウィジェットでは独自の画像サイズを利用していますのでアップロード済みの画像について、プラグインを利用して画像を再生成してください。

登録済みの画像を一括リサイズするプラグイン Regenerate Thumbnails

ページヘッダーカスタマイズ機能

ページの訴求力を高めるページヘッダーカスタマイズ機能

ページを開いてまず初めに目にとまるのがヘッダー画像です。ヘッダー画像によってページの中身に興味を持ってもらえるか左右されると言っても過言ではありません。

さらにはページの雰囲気も決まってきます。ページヘッダーカスタマイズ機能では以下の項目をカスタマイズする事ができます。

  • トップページ以外のヘッダー画像を投稿タイプ別に指定する事ができます。
  • 固定ページでは、各固定ページ編集画面より個別にヘッダー画像を指定する事ができます。
  • 固定ページでは親ページで画像が指定されている場合、下階層のヘッダー画像は親階層の画像が自動的に適用されます。
  • ヘッダー画像上の文字色(固定ページであればページ名 / その他のページの場合は投稿タイプ名)
  • 文字の影の色
  • 文字の位置(左・中央・右)

ページごとに画像を選定することで、ページを訪れたユーザーの興味を惹き付けましょう。

もちろん基本設定もあるので、むやみに変更する必要のないページは共通の画像を表示させておくことも可能です。

  • このページで掲載している画面はデザインスキン JPNSTYLE適用時のサンプルです。JPNSTYLE以外での利用時は書体・余白などが異なります。
  • 投稿ページ(post)は各投稿個別で画像を設定できません。

 

 

設定について

基本となるヘッダー画像はカスタマイザーで設定します。

管理画面の【外観】→【カスタマイズ】からカスタマイザーを起動して、左のメニューに【Lightning ページヘッダー 設定】というセクションが表示されるので、そこから [ 基本 ] [ 投稿 ] [ 固定ページ ] [ メディア ] の4つが設定できます。

この画像が各ページごとに設定できます。

この画像が各ページごとに設定できます。

カスタマイザーの 【Lightning ページヘッダー 設定】を選択

カスタマイザーの【Lightning ページヘッダー 設定】を選択

カスタマイザーの【Lightning ページヘッダー 設定】を選択する または ヘッダー画像の鉛筆マークをクリックすると直接編集セクションにジャンプします。

初期設定の状態

何も設定されていない状態では、初期設定の画像がヘッダー画像として読み込まれています。

画像の上に表示する文字色などを設定

ページヘッダー画像の上に表示される文字の色を設定できます。
また、シャドウの色や文字を表示させる位置も設定できるので、ヘッダー画像の色味に併せて適宜設定してください。

画像を選択するとヘッダー部分に反映

画像を選択するとヘッダー部分に反映

【画像を選択】から画像を選ぶと、ヘッダー部分に反映されます。【削除】【画像の変更】で自由に選択し直すことができます。

ページヘッダー画像[基本]を設定すると、固定ページや投稿ページのすべてのヘッダー画像が設定されます。

投稿ページ用ヘッダー画像設定

ページヘッダー画像[投稿]に画像を設定すると基本設定の画像は反映されず、投稿用のヘッダー画像が表示されます。

投稿ページは共通画像のみの設定となっており、記事ごとでの設定はできません。

固定ページ用ヘッダー画像設定

投稿ページと同様に、[固定ページ]で設定された画像が表示されます。

固定ページに限り、それぞれの固定ページで違うヘッダー画像を設定することができます。

【Choose Image】各固定ページで別々の画像を設定できる

【Choose Image】で各固定ページで別々の画像を設定できる

個別で設定したい固定ページの編集画面を開き、【ページヘッダー画像】のカスタムフィールドで【Choose Image】から個別の指定画像を設定します。

個別の設定画像が表示される

個別の設定画像が表示される

拡張デザインスキンの設定

1. デザインスキン ( プラグイン ) をインストールする

管理画面からアップロードする場合

  • 「管理画面」→「プラグイン」→「新規追加」画面※1に移動します。
  • 「プラグインのインストール」画面でタイトル下の「アップロード」※2をクリック
「管理画面」→「プラグイン」→「新規追加」画面に移動、タイトル下の「アップロード」をクリック

「管理画面」→「プラグイン」→「新規追加」画面に移動、タイトル下の「アップロード」をクリック

  • 「ファイルを選択」ボタン※3をクリック。
  • アップロードするプラグインのファイルを選択※4して「開く」ボタン※5でアップロード

プラグインファイルを選択

アップロードするプラグインのファイルを選択して「開く」ボタンでアップロード

  • 「いますぐインストール」※6をクリック
「いますぐインストール」をクリック

「いますぐインストール」をクリック

  • 「プラグインを有効化」※7をクリックします。
「プラグインを有効化」をクリック。

「プラグインを有効化」をクリック。

FTPなどで直接アップロードする場合

公式サイトからダウンロードできるプラグインの他に、一般のサイトで公開されているプラグインも多数ありますので、それらを利用する場合は /wp-content/plugins/ フォルダにアップロードします。

  • /wp-content/plugins/ フォルダに、ダウンロードしたファイルを解凍してアップロード
  • 管理画面左メニューの「プラグイン」を開くと、インストールされているプラグインの一覧が表示されます。
    アップロードしたプラグインが含まれているはずですので、有効化をすると利用出来るようになります。

 

2. デザインスキン ( プラグイン ) を切り替える

ダッシュボードでプラグインを有効化したあとに、【外観】>【カスタマイズ】でカスタマイザーを起動します。

  1. 「Lightning デザイン設定」のセクションを開いてください。
  2. 「デザインスキン」のプルダウンに先程有効化したデザインスキンを選択します。
  3. 設定が完了したら「公開」ボタンを押して保存。
  4. 公開ボタンを押したらページを再読込してください。再読込しないとデザイン及びスキン固有の入力欄などが正しく表示されません。

注意事項

対応アプリケーション WordPress 4.9 以降
Lightning 4.4.0 以降
Lightning Advanced Unit 3.3.0 以降
対応ブラウザ 下記ブラウザ最新版及びIE11
* Chrome
* Safari
* Firefox
* Eddge
ライセンス GNU General Public License version 2
※一つのプラグインの購入で複数のサイトにご利用いただけます。
販売価格 販売価格 4,980円(税抜)

※楽天ID決済でご購入のお客様はメールアドレスが取得できませんので、将来的に商品アップデート通知やアップデートデータを受け取れなくなる可能性があります。DLmarketの都合上、楽天ID決済を使えなくする事が出来ないので、楽天ID決済をご利用の方は、上記についてご理解の上ご購入ください。


デモサイトを見る

DL-MARKETで購入


▼必ずお読みください▼

※本拡張デザインスキンはテーマではなく『プラグイン』です。プラグインとしてインストールして下さい。
プラグインのインストールについては「プラグインの説明と設定方法」をご参照下さい。
プラグインの説明と設定方法

更新履歴

Origin Pro Version リリース 動作確認済 Lightning 変更箇所
2.4.0 2018.05.31 4.4.7 Font Awesome 5(Web Fonts with CSS 版) 対応
2.3.1 2018.04.27 4.3.0  [ ファイル整理 ] 前回のアップデートファイル容量が2Mを越えており管理画面からのアップデートでエラーになる場合があるため軽量化
2.3.0 2018.04.24 4.2.0 [ 機能追加 ] PR コンテンツウィジェット機能を追加
2.2.0 2018.02.06 4.1.2 [ 仕様変更 ] 試験実装中の Lighting 新モバイルメニューに対応する各種調整
2.1.1 2017.11.14 4.0.3 [ 不具合修正 ] ご利用の環境によっては、固定ページ編集画面でヘッダー画像が設定できない不具合を修正
2.1.0 2017.11.13 4.0.3 [ 機能追加 ] ページヘッダーカスタマイズ機能を追加
2.0.4 2017.04.13 3.0.2 [ 不具合修正 ] MediaPostsで「Vertical card 3 column」「Vertical card large image 3 column」レイアウト利用時に最下段が2つの時にレイアウトが左寄せにならない不具合を修正
2.0.3 2017.03.28 3.0.2 [ 不具合修正 ] Safariにて特定の画面サイズで閲覧時に Media Posts の Vertical card 3column のレイアウトが崩れる不具合を修正
[ 不具合修正 ] Safariにて特定の画面サイズで閲覧時に Media Posts の Vertical card 3column の高さが揃わない不具合を修正
2.0.0 2016.12.16 3.0.0 ブレイクポイント変更に伴う調整
1.0.0 2016.11.25 2.7.8 初版リリース

Lightning Origin Pro

Lightning 標準のデザインスキン 「Origin」適用時にヘッダー上部に「キャッチコピー」「サブメニュー」「電話番号」「問い合わせボタン」を表示する事ができます。

また、MediaPostsウィジェット機能で投稿を多彩なデザインレイアウトで表示する事がが可能です。