THE THOR

THE THOR(ザ・トール)でカルーセルスライダーを設置する方法!

悩める人
「THE THOR」のデモサイトにあるような、トップページのスライダーを私も使ってみたい。しかし、どうやって設定すればよいのか分からない。

このような悩みを解決できる内容となっています。

 

「THE THOR」のトップページには、カルーセルスライダーと呼ばれるリンクを設置できます。

トップページの雰囲気を変えるのにも役立つカルーセルスライダーですが、「THE THOR」はカスタマイズ項目が非常に豊富なので、設定方法が分からないという方も多いはず。

そこで、カルーセルスライダーの詳細な設置方法を解説していきます。

本記事を読み終えることで、カルーセルスライダーを設置する方法が分かり、ご自身のサイトレベルも一段階アップします。

それでは、早速内容を見ていきましょう。

 

 

THE THOR(ザ・トール)のカルーセルスライダーとは?

「THE THOR」のカルーセルスライダーのことを知らない方向けに、どういった機能なのかご紹介します。

まず、カルーセルスライダーのイメージを下記アニメーションで見てみましょう。

カルーセルスライダーのアニメーション

 

記事のリンクがスライダー形式で横に流れているのが分かりますね。

「THE THOR」のカルーセルスライダーは、トップページのメインビジュアル下に設置されます。トップページのメインビジュアル下のカルーセルスライダー

 

表示する記事を絞り込むことも可能なので、トップページを閲覧してくれた読者に見せたい記事をアピールできます。

また、記事が流れるアニメーションを加えることにより、トップページがより華やかかつおしゃれになります。

読者の回遊率が上がるだけでなく、デザイン性も上がるので、是非設置しておきたい機能の1つです!
はらちゃん

 

THE THOR(ザ・トール)にカルーセルスライダーを設置する方法

カルーセルスライダーの概要についてご紹介したところで、次に設置する方法を見ていきます。

設置方法ですが、WordPressのダッシュボードから「外観 > カスタマイズ」と遷移します。

外観 > カスタマイズ

 

次に、カスタマイズ画面から「TOPページ設定 > カルーセルスライダー設定」をクリックします。

TOPページ設定 > カルーセルスライダー設定

 

カルーセルスライダー設定画面に「カルーセルスライダーを表示するか選択」の項目があるので、「表示」と変更しましょう。

なお、初期状態では「非表示」となっています。

「カルーセルスライダーを表示するか選択」を表示にする

 

設定変更後、「公開」ボタンを忘れずクリックしておきましょう。

「公開」ボタン

 

問題なく、カルーセルスライダーがトップページに反映されていれば、設置完了です。

カルーセルスライダーの反映確認

「THE THOR」は初期状態でカルーセルスライダーが非表示となっていますが、デザイン着せ替え機能を利用すると、表示する状態となっているスタイルもあります!
はらちゃん

関連記事THE THOR(ザ・トール)のデザイン着せ替え機能を使う方法!注意事項あり!

 

THE THOR(ザ・トール)のカルーセルスライダーのカスタマイズ方法

「THE THOR」のカルーセルスライダーは先述の通り、設定箇所を1つ変更するだけで簡単に設置可能です。

しかし、設置するだけでなく、細かいカスタマイズ項目も用意されています。

ここでは、下記カルーセルスライダーのカスタマイズについて解説していきます。

 

画像アスペクト比を変更する

アスペクト比とは、画像の長辺と短辺の比率のことを言います。

カルーセルスライダーに表示される画像は記事のアイキャッチ画像ですが、アスペクト比率を変更可能です。

設定できるアスペクト比のパターンとしては、下記の通りです。

アスペクト比

  • 16:9
  • 4:3
  • 1:1

 

アスペクト比の設定方法ですが、カルーセルスライダー設定画面から「画像アスペクト比を選択」の項目を変更しましょう。

「画像アスペクト比を選択」の項目

 

「THE THOR」は初期状態で、アスペクト比が「16:9」に設定されています。

アスペクト比「16:9」

これは、記事のアイキャッチ画像が通常正方形などではなく、横長の長方形で設定するのが基本だからです。

一応、他のアスペクト比に設定した場合のカルーセルスライダーも見ておきましょう。

 

アスペクト比「4:3」

アスペクト比「4:3」

 

アスペクト比「1:1」

アスペクト比「1:1」

 

特にこだわりがなければ、アスペクト比は初期状態の「16:9」で問題ないでしょう!
はらちゃん

 

記事の表示件数を変更する

次に、カルーセルスライダーに表示する記事件数の変更方法です。

表示できる記事件数は5~10件となっており、カルーセルスライダー設定画面から「表示件数を指定」の項目を変更してください。

「表示件数を指定」の項目

 

10記事まで表示することも可能ですが、1つの画面に表示される記事数の上限は5記事までです。

1つの画面に表示される記事数の上限

10記事と設定しても、あとに表示される記事は読者の目に触れない可能性もあるので、ご注意ください。

 

記事の表示条件を変更する

カルーセルスライダーは特に条件を指定しなければ、投稿した記事がランダムに表示されます。

しかし、トップページのメインビジュアル下に表示されるカルーセルスライダーなので、クオリティの高い記事に絞りたいという方もおられるでしょう。

そのような時に、カルーセルスライダーに表示する記事を指定できます。

 

記事の指定ですが、下記4つの方法があります。

なお、記事の指定は全てカルーセルスライダー設定画面の「表示条件を選択」の項目から行います。

「表示条件を選択」の項目

では、それぞれの条件について解説していきます。

 

指定した投稿を表示

最初に、カルーセルスライダーに表示したい記事を個別に表示する方法です。

流れとしては、「指定するIDを入力」の項目に記事のIDを入力し、特定の記事を表示します。

「指定するIDを入力」の項目

 

IDについては、「THE THOR」の投稿記事一覧画面から確認できます。

投稿記事一覧画面にID列があるので、ここからカルーセルスライダーに表示したいIDを取得しましょう。

「THE THOR」の投稿記事一覧画面

 

IDを取得したら、「指定するIDを入力」の項目にカンマ区切りで数字を入力していきます。

カンマ区切りで数字を入力

カルーセルスライダーに設定した記事だけが表示されれば、完了です。

 

指定した投稿以外を表示

次に、指定した投稿以外を表示する方法ですが、先ほどの指定した投稿を表示する手順と同じです。

「指定するIDを入力」の項目にカンマ区切りで、カルーセルスライダーに表示したくない記事のIDを入力していきましょう。

カルーセルスライダーに表示したくない記事のIDを入力

 

ただし、サイトの規模が大きくなってくると、表示したくない記事の指定より、表示したい記事の指定を利用する機会のほうが多くなります。

手間の少ない設定方法を利用するようにしましょう。

 

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

先ほどは記事を個別に指定する方法でしたが、カテゴリを指定することも可能です。

カテゴリにも記事と同様に、それぞれIDが付番されているので、カテゴリ一覧のID列から確認しましょう。

カテゴリ一覧のID列

 

例えば、上記カテゴリの中から「THE THOR」というカテゴリの記事を表示したい場合、ID「2」を「指定するIDを入力」の項目へ打ち込みます。

ID「2」を「指定するIDを入力」の項目へ打ち込み

 

入力すると、「THE THOR」のカテゴリに属している記事のみがカルーセルスライダーに表示されます。

「THE THOR」のカテゴリに属している記事

 

記事を個別に指定するのが面倒という方は、こちらの機能をご利用ください。

 

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

最後に、指定したカテゴリの投稿以外を表示する方法です。

方法としては、指定したカテゴリの投稿を表示するのと同じで、カルーセルスライダーに表示したくないカテゴリIDを「指定するIDを入力」の項目へ入力します。

カルーセルスライダーに表示したくないカテゴリIDを入力

 

こちらについても、「指定した投稿以外を表示」の設定と同様に利用する機会は少ないでしょう。

カルーセルスライダーのカスタマイズに関する解説は以上です。

 

THE THOR(ザ・トール)のカルーセルスライダー設置方法まとめ

「THE THOR」では、標準機能でカルーセルスライダーを利用できるので、不要なプラグインの導入を抑えられます。

また、カルーセルスライダーに表示したい記事やカテゴリを指定できるので、読者の回遊率アップを期待できます。

デザイン面で言うと、動くスライダーをトップページに設置することで、サイト全体のおしゃれ度もアップするでしょう。

カルーセルスライダーは設置方法も簡単ですので、「THE THOR」を購入された方は是非利用してみてくださいね。

「THE THOR」のカルーセルスライダーで、読者に優しく、また内部リンクでGoogleからも評価されやすいサイトに仕上げましょう!
はらちゃん
 

-THE THOR

© 2020 アフィリエイトゼミ