こんにちは、Nadaです。
今回は、WordPressのテーマ[TheThor]で、
ブログのトップページにカルーセルスライダーを表示する方法を解説していきます。
～この記事は、こんな方におすすめ！～
●よく見かけるトップページの記事のスライド表示どうやるの？
●ブログのトップページをもっとスタイリッシュにしたい！
●TheThorの機能に詳しくなりたい！
さて、カルーセルスライダーとは!?
一言で言うと、「トップページに記事のスライド表示ができる機能」です。
例として、当ブログ：ZENKAI BLOGのトップページをご覧ください。
《画像1》カッコ内がカルーセルスライダーです。
横広に記事のサムネイルが配置され、
自動で次の記事がスライド表示されていきます。
ユーザー自身でも、①の矢印ボタンをクリックすると、
次の記事に任意で切り替える事ができます。
カルーセルスライダーを使っているブログは
よく見かけますが、スタイリッシュですよね♪
僕自身もこの使い勝手と見た目が気に入って、
ZENKAI BLOGのトップページに設置しました！
さて、本記事では、解説用サンプルとして、
ほぼ初期設定状態のWordPress（TheThorインストール済み）で、
事前に作成してあるサンプル記事を使って、
カルーセルスライダーに表示する手順を解説します。
意味は同じですので、あらかじめご承知ください。
それでは、解説していきます。
スポンサーリンク
■カルーセルスライダーを表示する
カルーセルスライダーは、細かい設定をしなければ、
表示するだけなら、超カンタンにできます！
《画像2》を参照して、
外観 ➡ カスタマイズ ➡ TOPページ設定 ➡ カルーセルスライダー設定
を開きます。
カルーセルスライダーの設定画面が表示されます。
TheThorの初期設定では、
カルーセルスライダーは『非表示』になっています。
それでは、カルーセルスライダーを『表示』の状態にしてみましょう！
《画像3》①の『カルーセルスライダーを表示するか選択』の
プルダウンメニューより、『表示』を選択。
画面左上、上部の『公開』をクリックします。《画像3》②
※画像上では『公開済み』になっていますが、
変更を加えると『公開』に変わります。
トップページにカルーセルスライダーが表示されました。
このような感じ。 超カンタンですよね！
なお、《画像4》で表示されている記事は、
解説用に作成したサンプル記事です。
さて、以降は、カルーセルスライダーの設定画面で、
ほかに設定できる内容を詳しく解説していきます。
■表示条件を選択
《画像5》①『表示条件を選択』では、
記事やカテゴリのIDを入力して、表示条件を選択することで、
カルーセルスライダーに「表示したい 記事/カテゴリ」と
「表示したくない 記事/カテゴリ」を区別することができます。
◆表示条件の種類
TheThorの初期設定では、
《画像5》②のカッコ内『無し』が選択されています。
《画像3》①で、カルーセルスライダーが『表示』状態であれば、
表示条件は『無し』になっているので、
全ての記事とカテゴリが表示されます。
《画像5》②のカッコ内の
プルダウンメニューが選択可能な表示条件です。
上から、
●『無し』
●『指定した投稿を表示』
●『指定した投稿以外を表示』
●『指定したカテゴリの投稿を表示』
●『指定したカテゴリ以外の投稿を表示』
以上の5条件から選択することができます。
ただし、初期設定の『無し』以外を設定したい時は、
先に『指定するIDを入力』を行う必要があります。
《画像6》③『指定するIDを入力』へ
記事かカテゴリのIDをカンマ区切り( , )で入力します。
解説では、例として「74,7」と入力します。
サンプルの『たぬき記事/たぬきカテゴリ』のIDを指定しました。
『指定するIDを入力』へID入力が終わったら、
『表示条件を選択』にて、条件を選びます。
5条件をそれぞれ選択した結果を画像にまとめました。
《画像7》を参照して、具体的に説明すると、
●『無し』を選択
表示条件を指定していないので、全ての記事とカテゴリが表示されています。
●『指定した投稿を表示』
たぬき記事を指定しているので、たぬき記事のみが表示されています。
●『指定した投稿以外を表示』
たぬき記事を指定しているので、たぬき記事以外の記事が表示されています。
●『指定したカテゴリの投稿を表示』
たぬきカテゴリを指定しているので、たぬきカテゴリの記事のみが表示されています。
●『指定したカテゴリ以外の投稿を表示』
たぬきカテゴリを指定しているので、たぬきカテゴリの記事以外が表示されています。
選択後、設定を反映したい場合は、『公開』をクリックします。
『表示条件を選択』の設定は、
何かしら目算がある場合は、上手く使用すると効果的だと思います。
ですが、あくまで僕個人は初期設定の『無し』のままをおすすめします。
■表示件数を指定
『表示件数を指定』は、
カルーセルスライダーで表示する記事の件数を指定できます。
《画像8》①に任意の件数を入力します。
選択後、設定を反映したい場合は、『公開』をクリックします。
参考程度に、ZENKAI BLOGでは10記事に設定しています。
■画像アスペクト比を選択
画像アスペクト比とは、画像の縦横の比率のことで、
TheThorでカルーセルスライダーに設定できるアスペクト比は
下記の3パターンになります。
●16：9・・・横長(ワイド) TheThorの初期設定
●4：3・・・より正方形に近い横長
●1：1・・・正方形
《画像9》②をクリックすると、ドロップダウンメニューが表示されて、
上記の3パターンから選択する事ができます。
具体的に3パターンでどう違うのか！？
3パターンをそれぞれ選択した結果を画像にまとめました。
こんな感じ。
こちらの設定は、作成者の好みになりますので、
気に入ったものに設定すると良いでしょう。
参考程度に、ZENKAI BLOGでは16：9の初期設定のままです。
■アイキャッチ上のカテゴリを非表示にする
TheThorの初期設定では、
アイキャッチ上のカテゴリを表示するようになっています。
具体的にどう違うのか！？画像で確認できます。
こんな感じ。
つまり、「アイキャッチ上のカテゴリを表示/非表示」とは、
「カテゴリ名を表示する/非表示にする」ということです。
『アイキャッチ上のカテゴリを非表示にする』設定は、
チェックボックスにチェックを入れて、
『公開』をクリックすることで反映されます。
参考程度に、
ZENKAI BLOGでは初期設定のチェック無し（表示する）にしています。
ただ、この設定も作成者の好みになります。
良いと思った方を設定しましょう！
以上で、カルーセルスライダーを表示する手順と、
設定画面で設定できる内容の解説は終わりです。
■まとめ
カルーセルスライダーの表示設定は、超カンタン！
設定画面から『表示』と『公開』の2クリックで出来てしまう。
TheThorって素晴らしい♪
『表示条件』を選択すると、IDも絡むので少し複雑になりますが、
実際に表示を確かめながら作業できるので、
複雑になると言っても、まだ分かりやすい方ですね。
『表示条件』以外の設定は、お好みで設定していただければと思います。
以上、まとめでした。
TheThorの機能紹介や解説記事も
次々と掲載していきますので、ヨロシクお願いします。
ではでは！
スポンサーリンク