テーマVirtue(海外)を使ってみる2回目

 
Virtue
https://wordpress.org/themes/virtue/

今回は第2回目です。前回からの続きです。

 

トップバーの設定

トップバー (Topbar)は画面の一番上の横長の線のことです。

 

トップバー

 



 

今回の設定する場所は、ダッシュボード > 外観 > Theme Options > Topbar Setting

 

Topbar Settings

 

左側に縦に並んでいるメニューの上から2番めに
「Topbar Setting」と書いてある部分を
クリックします。

 

クリックすると以下のようなメニューが
ページの左側に表示されます。

 

トップバーの設定

 

設定項目について説明します。

Use Topbar?

こちらの部分では トップバーを使いますか?ということです。

 

Show Cart total in topbar?

こちらの部分では トップバーでショッピングカートの合計金額を表示しますか?ということです。

 

Display Search in Topbar?

こちらの部分では トップバーで検索窓を表示しますか? ということです。

 

Enable widget area in right of Topbar?

こちらの部分ではトップバーの右側のエリアにも、検索窓やショッピングカートなどの表示ができます。

*事前にダッシュボード > 外観 > カスタマイズ > Advanced Stylingにて、
「Topbar Background Color」でトップバーの色を決めて下さい。

「Transparent」にチェックを入れると いろいろな色が選べますのでいいと思います。
 
*事前に ダッシュボード > 外観 > ウィジット > Topbar widget
にて Topbar(トップバー)で表示項目を追加設定しておいたほうがいいです。

 

Topbar Layout Switch

こちらの部分では トップバーで表示内容の位置の入れ替え ということです。

 

そして最後に確認をして問題がなければ
「保存して公開」をクリックして保存します。
 

 



 

スライドショーの設定

先ほど設定をした、「Topbar Settings」の下に

「Home Slider Settings」という項目があります。
 
そこをクリックすると、以下のような画面になります。

 

Home Slider Settings

 

ここでは、まず、以下のプラグインをインストールして、有効化してくださいということです。
 
Virtue / Pinnacle ToolKit

home slider

 

WordPressのプラグインをインストールする方法
http://techacademy.jp/magazine/1384

インストールが終わりましたら、

 

テーマオプション

 

ダッシュボード > 外観 > Theme Options へと移動します。
 
左横にあるHome Slider Settingsをクリックします。
 
以下の画面になります。

 

ホームスライダーセッティング

 

「Home Slider Settings」の項目をひとつひとつ説明します。

 

Choose a Home Image Slider



Choose a Home Image Slider

 

ここではスライダーの種類を選択します。



選択項目(スライドショーの画面についての設定)
 
■ None
スライドショー自体が表示されません
 
■ Flex Slider
設定した通りになります。
 
■ Fullwidth Slider
高さを設定し、(背景画像など)の画像ページの全幅にすることができます。 このスライダーは、キャプションを可能にします。
 
■ Thumb Slider
スライドショーの画像の下側に
設定している画像が小さく並びます。
画像のサイド側にある < >をマウスでクリックすることで
画像が切り替わります。
 
■ Carrousel Slider
画像のサイド側にある ←  → を
マウスでクリックすることで
画像が切り替わります。
何もしなければ、自動で画像が横に流れます。
 
■ Latest Posts
スライドショーの画面ではなく、
最近のブログ記事が出ます。
 
■ Video
動画を使う場合にはこちらにします。
 

 



 

Slider Images
ここでは、スライドショーで使う画像をアップします。

 

スライダー画像の設定画面

 

設定の仕方ですが、

まず、事前に

ダッシュボード > メディア

スライダーに使う画像を追加します。
 

次に、

ダッシュボード > 外観 > Theme Options > Home Slider Settings

Home Slider Settings

戻り、

まず、左側に + のある横長のボタンを押します。

すると、大きく開きます。

Uploadボタンを押して、

先程、メディアに追加した、画像を選択します。

以下設定項目です。
 
■ URL
画像のURLです、画像を選択した後、自動的に表示されます。

■ title
項目を閉じたときによく分かるように名前を付けます。

■ Description
スライダー画像についての内容を記述します。

■ Slide Link
スライダー画像をクリックすると ここで設定したURLに移動するものです。

■ Open Link in New Tab/Windowç
チェックを入れると、今、表示されているページをそのままに、
新たにウィンドウが開いてリンク先のページが表示されます。

Delete Slideボタンを押すとスライダー画像の項目を削除できます。

Add Slideボタンを押すとスライダー画像の数を増やすことが
できます。


 



 

続いて、以下の項目を設定します。ここでは、画像のサイズの設定と、
スライドショーを自動で動かすか、クリックして動かすかの設定です。

 

スライダーのサイズ

 

Auto Play?

Onにすると、自動で画像が切り替わります。

無効にすると、画像のサイド側にある < >
をマウスでクリックすることで画像が切り替わります。

 



 

続いて以下の項目の説明をします。

スライダーの設定

 

Slider Pause Time
画像が切り替わる前の表示時間です。

 

Transition Type
「Fade」に設定すると 画像が透明になっていき、後ろの画像が表示されます。
「Slide」に設定すると、画像が横に流れていきます。

 

Slider Transition Time
ここはFadeタイプだと、画像が透明になっていき、次の画像が現れるまでの時間です。

 

Show Captions?
スライドショーの画像に対して 文字を入れます。
事前に追加した写真がある「Slider Images」で
+と表示されているところをクリックします。
Title項目だと 大きい文字、Descriptionだと 小さな文字になります。
入れたくない場合は 「Off」にします。

 

Video Embed Code
もし、動画(ビデオ)を使う場合はEmbed Codeを記入してください。ということです。




以上で、スライドショーの設定は終了です。

 

Save Changes

ボタンを押して完了します。

 



 

ダッシュボードの上にある家アイコンの隣りにある ホームページ名をクリックして公開します。

今回はこのようになりました、実際はスライドショーが動いています。

 

今回はこのようになりました、実際はスライドショーが動いています。

 

次は第3回目となります。

よろしくお願い致します。