[TheThor]ブログにカルーセルスライダーを表示する方法

こんにちは、Nadaです。

今回は、WordPressのテーマ[TheThor]で、

ブログのトップページにカルーセルスライダーを表示する方法を解説していきます。

 

~この記事は、こんな方におすすめ!~
●よく見かけるトップページの記事のスライド表示どうやるの?
●ブログのトップページをもっとスタイリッシュにしたい!
●TheThorの機能に詳しくなりたい!


さて、カルーセルスライダーとは!?

一言で言うと、「トップページに記事のスライド表示ができる機能」です。

 

例として、当ブログ:ZENKAI BLOGのトップページをご覧ください。

《画像1》

《画像1》カッコ内がカルーセルスライダーです。

横広に記事のサムネイルが配置され、

自動で次の記事がスライド表示されていきます。


ユーザー自身でも、の矢印ボタンをクリックすると、

次の記事に任意で切り替える事ができます。


カルーセルスライダーを使っているブログは

よく見かけますが、スタイリッシュですよね♪

僕自身もこの使い勝手と見た目が気に入って、

ZENKAI BLOGのトップページに設置しました!

 

さて、本記事では、解説用サンプルとして、

ほぼ初期設定状態のWordPress(TheThorインストール済み)で、

事前に作成してあるサンプル記事を使って、

カルーセルスライダーに表示する手順を解説します。

 

WordPress設定上の『投稿』と、僕の解説上の『記事』という言葉は、

意味は同じですので、あらかじめご承知ください。


それでは、解説していきます。

 

スポンサーリンク

■カルーセルスライダーを表示する

カルーセルスライダーは、細かい設定をしなければ、

表示するだけなら、超カンタンにできます!

《画像2》

《画像2》を参照して、

外観 ➡ カスタマイズ ➡ TOPページ設定 ➡ カルーセルスライダー設定

を開きます。

 

カルーセルスライダーの設定画面が表示されます。

《画像3》


TheThorの初期設定では、

カルーセルスライダーは『非表示』になっています。


それでは、カルーセルスライダーを『表示』の状態にしてみましょう!

 

《画像3》の『カルーセルスライダーを表示するか選択』の

プルダウンメニューより、『表示』を選択。

 

画面左上、上部の『公開』をクリックします。《画像3》

※画像上では『公開済み』になっていますが、

変更を加えると『公開』に変わります。

 

トップページにカルーセルスライダーが表示されました。

《画像4》

 

このような感じ。 超カンタンですよね!

 

なお、《画像4》で表示されている記事は、

解説用に作成したサンプル記事です。

 

さて、以降は、カルーセルスライダーの設定画面で、

ほかに設定できる内容を詳しく解説していきます。

■表示条件を選択

《画像5》

《画像5》『表示条件を選択』では、

記事やカテゴリのIDを入力して、表示条件を選択することで、

カルーセルスライダーに「表示したい 記事/カテゴリ」と

「表示したくない 記事/カテゴリ」を区別することができます。

◆表示条件の種類

TheThorの初期設定では、

《画像5》のカッコ内『無し』が選択されています。

 

《画像3》で、カルーセルスライダーが『表示』状態であれば、

表示条件は『無し』になっているので、

全ての記事とカテゴリが表示されます。

 

《画像5》のカッコ内の

プルダウンメニューが選択可能な表示条件です。

 

上から、

●『無し』

●『指定した投稿を表示

●『指定した投稿以外を表示

●『指定したカテゴリの投稿を表示

●『指定したカテゴリ以外の投稿を表示

以上の5条件から選択することができます。

 

ただし、初期設定の『無し』以外を設定したい時は、

先に『指定するIDを入力』を行う必要があります。

《画像6》

《画像6》『指定するIDを入力』へ

記事かカテゴリのIDをカンマ区切り( , )で入力します。


解説では、例として「74,7」と入力します。

サンプルの『たぬき記事/たぬきカテゴリ』のIDを指定しました。


『指定するIDを入力』へID入力が終わったら、

『表示条件を選択』にて、条件を選びます。


5条件をそれぞれ選択した結果を画像にまとめました。

《画像7》

《画像7》を参照して、具体的に説明すると、

 

●『無し』を選択

  表示条件を指定していないので、全ての記事とカテゴリが表示されています。

●『指定した投稿を表示』

  たぬき記事を指定しているので、たぬき記事のみが表示されています。

●『指定した投稿以外を表示』

  たぬき記事を指定しているので、たぬき記事以外の記事が表示されています。

●『指定したカテゴリの投稿を表示』

  たぬきカテゴリを指定しているので、たぬきカテゴリの記事のみが表示されています。

●『指定したカテゴリ以外の投稿を表示』

  たぬきカテゴリを指定しているので、たぬきカテゴリの記事以外が表示されています。


選択後、設定を反映したい場合は、『公開』をクリックします。


『表示条件を選択』の設定は、

何かしら目算がある場合は、上手く使用すると効果的だと思います。

 

ですが、あくまで僕個人は初期設定の『無し』のままをおすすめします。

 

■表示件数を指定

《画像8》

『表示件数を指定』は、

カルーセルスライダーで表示する記事の件数を指定できます。


《画像8》に任意の件数を入力します。

選択後、設定を反映したい場合は、『公開』をクリックします。


参考程度に、ZENKAI BLOGでは10記事に設定しています。

■画像アスペクト比を選択

《画像9》

画像アスペクト比とは、画像の縦横の比率のことで、

TheThorでカルーセルスライダーに設定できるアスペクト比は

下記の3パターンになります。


●16:9・・・横長(ワイド)  TheThorの初期設定

●4:3・・・より正方形に近い横長

●1:1・・・正方形


《画像9》をクリックすると、ドロップダウンメニューが表示されて、

上記の3パターンから選択する事ができます。


具体的に3パターンでどう違うのか!?

3パターンをそれぞれ選択した結果を画像にまとめました。

《画像10》

こんな感じ。

こちらの設定は、作成者の好みになりますので、

気に入ったものに設定すると良いでしょう。

 

参考程度に、ZENKAI BLOGでは16:9の初期設定のままです。

■アイキャッチ上のカテゴリを非表示にする

TheThorの初期設定では、

アイキャッチ上のカテゴリを表示するようになっています。

 

具体的にどう違うのか!?画像で確認できます。

《画像11》

こんな感じ。

つまり、「アイキャッチ上のカテゴリを表示/非表示」とは、

カテゴリ名を表示する/非表示にする」ということです。

 

『アイキャッチ上のカテゴリを非表示にする』設定は、

チェックボックスにチェックを入れて、

『公開』をクリックすることで反映されます。


参考程度に、

ZENKAI BLOGでは初期設定のチェック無し(表示する)にしています。


ただ、この設定も作成者の好みになります。

良いと思った方を設定しましょう!

 

以上で、カルーセルスライダーを表示する手順と、

設定画面で設定できる内容の解説は終わりです。

■まとめ

カルーセルスライダーの表示設定は、超カンタン!

設定画面から『表示』と『公開』の2クリックで出来てしまう。

TheThorって素晴らしい♪


『表示条件』を選択すると、IDも絡むので少し複雑になりますが、

実際に表示を確かめながら作業できるので、

複雑になると言っても、まだ分かりやすい方ですね。


『表示条件』以外の設定は、お好みで設定していただければと思います。

以上、まとめでした。

 



TheThorの機能紹介や解説記事も

次々と掲載していきますので、ヨロシクお願いします。


ではでは!

スポンサーリンク