【THE THORカルーセルスライダーのカスタマイズ】初心者向けに画像付きで解説

カルーセルスライダー

今回は、THE THOR(ザ・トール)カルーセルスライダーのカスタマイズ方法についてお伝えします。

 

カルーセルスライダー以外のTHE THORのカスタマイズ方法は、こちらにまとめてありますので参考になさってください。

関連記事

初心者さん・THE THORのTOPページをカスタマイズをしたいけど、ここの名前ってなに?・THE THORのTOPページは、なにからカスタマイズすればいい? Chi[…]

トップページカスタマイズ

 

THE THORカルーセルスライダー設定の手順

 

  • STEP1
    サンプルを見てカスタマイズする内容を決める
  • STEP2
    それぞれのカスタマイズをする
    1.カルーセルスライダーの表示・非表示
    2.カルーセルスライダーの表示条件
    3.カルーセルスライダーの画像サイズ
    4.カテゴリーのイメージカラーのカスタマイズ

 

THE THORサポート

当ブログでは、THE THORを購入したけれど「使い方がわからない…」という方のためにカスタマイズサポート・カスタマイズ代行をお受けしています。

これからブログをはじめる方のお悩み相談や、WordPressの相談・設定代行もお気軽にお問い合わせください。

 

THE THORカルーセルスライダーのカスタマイズサンプル

 

the thor カルーセルスライダー表示
the thor カルーセルスライダー非表示

 

the thor カルーセルスライダー16:9
the thor カルーセルスライダー4:3
the thor カルーセルスライダー1:1

 

the thor カルーセルスライダーカテゴリ名がイメージカラー
the thor カルーセルスライダーカテゴリ名がテーマカラー

 

【カスタマイズ1】カルーセルスライダーの表示・非表示

 

THE THORカルーセルスライダーは、表示・非表示を選択できます。

 

the thor カルーセルスライダー表示
the thor カルーセルスライダー非表示

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー トップページ
カスタマイザー カルーセルスライダー
カスタマイザー カルーセルスライダー

Topページ設定>カルーセルスライダー設定>カルーセルスライダー設定>カルーセルスライダーを表示するか選択

選択してカスタマイザー公開 をクリック

 

【カスタマイズ2】カルーセルスライダー表示条件

 

THE THORカルーセルスライダーに、どのページを表示するのか指定することができます。

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

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー トップページ
カスタマイザー カルーセルスライダー
カスタマイザー カルーセルスライダー

Topページ設定>カルーセルスライダー設定>カルーセルスライダー設定>表示条件の選択

それぞれ選択してカスタマイザー公開 をクリック

表示指定は、投稿名・カテゴリ名ではなく、IDを使って指定します。IDは、投稿記事やカテゴリを作成すると自動で番号がふられるようになっているので、番号を調べてIDに入力します。

IDを使う:表示させたい投稿が複数ある場合は「, 」で区切って、「26,24,22」と入力
表示件数:5〜10件まで

 

投稿ID
投稿記事のIDは、ダッシュボード>投稿>投稿一覧から調べることができます。
カテゴリーID
投稿カテゴリのIDは、ダッシュボード>投稿>カテゴリーから調べることができます。

 

【カスタマイズ3】カルーセルスライダー画像の大きさ

 

THE THORカルーセルスライダーで表示する画像の大きさは、16:9・4:3・1:1の3種類から選択できます。

 

the thor カルーセルスライダー16:9

the thor カルーセルスライダー4:3

the thor カルーセルスライダー1:1

 

カスタマイザーへ
  1. WordPressのダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー トップページ
カスタマイザー カルーセルスライダー
カスタマイザー カルーセルスライダー

Topページ設定>カルーセルスライダー設定>カルーセルスライダー設定>画像アスペクト比を選択

画像アスペクト比を選択して、カスタマイザー公開 をクリック

 

【カスタマイズ4】カテゴリーのイメージカラー

 

THE THORのカテゴリーはイメージカラーをカスタマイズすることができます。イメージカラーをカスタマイズすると、アイキャッチの右上にイメージカラーを背景にしてカテゴリーが表示されるようになります。

 

the thor カルーセルスライダーカテゴリ名がイメージカラー
the thor カルーセルスライダーカテゴリ名がテーマカラー

 

他には、カテゴリーごとのアーカイブページのタイトル、TOPページのピックアップ3記事、TOPページのカテゴリごとの最新記事にイメージカラーが反映されるようになっています。

 

カテゴリー
  1. ダッシュボード
  2. 投稿
  3. カテゴリー
ダッシュボード カテゴリー
  1. 色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力カラーパネル
  2. 更新 をクリック

 

カテゴリーの作成方法もお伝えしますね。

 

カテゴリー
  1. ダッシュボード
  2. 投稿
  3. カテゴリー
ダッシュボード カテゴリー
  1. カテゴリーの名前を入力
  2. カテゴリーのURLをアルファベットで入力
  3. 新規カテゴリ追加 をクリック

 

投稿新規追加
  1. ダッシュボード
  2. 投稿
  3. 新規追加
クラッシックエディタ カテゴリー

クラッシックエディタ

  1. カテゴリー名を入力
  2. 新規カテゴリーを追加をクリック
  3. 公開 をクリックしてカテゴリの追加が完了
ブロックエディタ カテゴリー

ブロッククエディタ

  1. カテゴリー名を入力
  2. 新規カテゴリーを追加をクリック
  3. 公開 をクリックしてカテゴリの追加が完了

 

THE THORカルーセルスライダーのカスタマイズは完了です。

 


 

おつかれさまでした。

 

以上、【THE THORカルーセルスライダーのカスタマイズ】初心者向けに画像付きで解説でした。

 

わからないことや、ご相談は、お気軽にお声がけくださいね。

 

お問い合わせはこちら

 

お読みいただき、ありがとうございました。

Chiharu