【WordPress】プラグインなしでカルーセルスライダーを実装する手順

悩む人

WordPressでカルーセルスライダーを表示させてみたいけど、プラグインなしで実装してみたい...。

こんな悩みに答えます。

本記事の執筆者

多くのサイトみていると、トップページで画像がクルクル回っているカルーセルバナーを見たことがあると思います。

今回はWordPress（ワードプレス）でプラグインを使わずカルーセルを実装してみました。

制作前は作成が難しそうに感じましたが、１分ほどあれば簡単に実装することができます！

図解を使って、実装方法を解説していますので、ワードプレスでサイトやブログに実装してみたい方は参考にしてみてください！

HTML

まずは、HTMLコードをコピーします。

今回は、ワードプレステーマ「Twenty Twenty」を使ってTOPページに表示をさせていきます。

HTMLは以下の通りです。

 command
<div> <ul class="slider">
<li><img src="表示する画像" alt=""></li> <li><img src="表示する画像" alt=""></li>
<li><img src="表示する画像" alt=""></li>
</ul>
</div>

CSS

CSSは、以下のコードをコピーします。

 command
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" type="text/css">

コピーできましたら、「header.php」内にある</head>の直前に貼ります。

ワードプレスでバックアップする方法は、以下の記事を参考にしてみてください。

コードの貼り付けができましたら、「ファイルを更新」をクリックします。

jQuery

続いて、jQueryのコードを貼ります。

今回は、設定したバナーを一定時間になると自動で切り替わる方法で実装してみます。

step
1jQueryをコピー

まずは、以下のjQuerryのコードをコピーします。

 command
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.1.0/jquery-migrate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('.slider').slick({
slidesPerView: 'auto',
spaceBetween: 30,
loop: true,
centeredSlides: true,
pagination: '.swiper-pagination',
autoplay: true,
disableOnInteraction: false,
});
</script>

参考：https://kenwheeler.github.io/slick/

step
2jQueryをワードプレスに貼る

コピーができましたら、「外観 → テーマエディタ → テーマフッター（footer.php）」にコードを貼ります。

コードを「</body>」の直前に貼ります。

貼り付けができましたら、「ファイルを更新」をクリックして完了です。

ちなみに、jQueryを使ってスライドを実装する方法には、いくつかやり方があります。

例えば、

上記の通りです。

実装するには、「jQueryの$('.slider').slick({」の下に追加してあげます。

詳しくは、「slick – the last carousel you’ll ever need」で紹介しているので、参考にしてみてください。

step
3CSSで装飾

最後に、CSSで装飾してあげます。

 command
.slider div {
text-align: center;
height: 300px;
width: 100%;
}
.slider img {
width: 300px;
height: auto;
vertical-align:middle;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}

【jQuery】カルーセルスライダーおすすめプラグイン３選

【jQuery】カルーセルスライダーおすすめプラグイン３選

カルーセルスライダーは、jQueryを使って作ることもできます。

おすすめのjQueryプラグイン3つをご紹介します。

1. bxSlider

1つ目に紹介するのが、bxSliderです。

bxSliderは、初心者でも簡単に設置することができ、レスポンシブ対応されているのがいいところです。

オプション機能も豊富に用意されているプラグインです。

カルーセルスライダーを使ったことのない方は、まずはbxSliderを使ってみるのがおすすめです。

2. slick

slickは、無限ループやスワイプなど、あらゆるカスタマイズができます。

また、こちらもレスポンシブデザイン対応に強いです。

bxSlider同様に、初心者から上級者まで幅広くプラグインです。

3. FlexSlider2

最後に紹介するのが、FlexSlider2です。

見慣れたカルーセルスライダーから上級者向けのカルーセルスライダーが紹介されています。

また、サムネイルを用いたページ送りやデザイン、エフェクトを設定でき、幅広くカスタマイズできます。

WordPressでプラグインなしでカルーセルを実装！：まとめ

今回はWordPressプラグインなしでカルーセルを実装してみました。

最後に、当ブログで使っているWordPressテーマ・AFFINGERを使用するとボタン１つで簡単に実装ができます。

収益化・アフィリエイト

2026/10/13

ユニクロはアフィリエイトできない？現状とおすすめの代わりの稼ぎ方

購入したユニクロの商品をアフィリエイトとして紹介したいけど、ASPはあるのかな？もしユニクロの商品を紹介できるオススメのASPがあれば教えてほしいです。 こんな悩みに答えます。 本記事の執筆者 当ブログでは、WordPressの基本的な設定方法からアフィリエイトに関する役立つ情報を発信しています。現在は、Webディレクターとして10年以上働いています。 結論からお伝えすると、現在、ユニクロ（UNIQLO）は、大手ASPを通じたアフィリエイトができません。2015年にリンクシェアとの提携が終了して以降、紹介 ...

ReadMore

ブログ

2026/9/24

動画接客をポップアップで実現！離脱率を抑えCVRを向上させる仕組みと導入法

Webサイト（ブログ）の離脱率が高く、ユーザーの滞在時間が短い。テキストや画像だけでは商品の魅力が伝わりにくいからなんとかして解決したい。またオンライン接客の方法が分からないから教えて欲しいです！ こんな悩みに答えます。 本記事はブログ中級者や企業のWebサイトを改善したいと考えるWeb担当者向けに記事を書いています。 Webサイト（ブログ）のテキストや画像だけでは自社商品の魅力が伝わりにくく、動画接客の導入を検討している方は多くいます。しかし、具体的に動画接客をポップアップ表示させる方法が分からずに困惑 ...

ReadMore

収益化・アフィリエイト

2026/7/27

歩いてポイントGet！おすすめのポイ活アプリ

歩いてる時間もポイントを貯めてみたいです！また貯まったポイントはAmazonギフト券に貯めて、貯まったポイントで商品をお得に購入したいです。おすすめのポイントアプリを教えてほしいです！ こんな悩みに答えます。 本記事の内容 歩いてポイ活ができるオススメサービス ポイ活運用で気をつけたいこと 歩くポイ活以外で効率よく稼ぐ方法 アンケートのポイ活を始めて、お小遣い稼ぎを考えていますか？ そんなボクもスキマ時間があれば、少しでもポイントを貯めたい人間です。 最近のポイ活では隙間時間があれば、ちょっとでもポイント ...

ReadMore

ブログ 収益化・アフィリエイト

2026/9/26

アフィリエイト初心者向け！転職ジャンルがあるASPを紹介

こんな悩みに答えます。 記事の執筆者 未経験からWeb業界に入社しWebディレクター歴10年目になります。本業をやりながらブログ運営をしており運用歴６年目になります。当ブログでは、アフィリエイトやブログの運用方法について発信しています。 「転職ジャンルのアフィリエイトは稼ぐのは難しい😔」ネットを開くと、厳しい言葉をよく目にしますね。 実際、企業サイトが検索上位を独占しているのが現状です。また最近では、個人のリアルな本音が書かれた「note」の記事が上位に食い込んでくるケースも増えています。 情報が溢れる中 ...

ReadMore

ブログ

2026/9/25

アフィリエイトブログはオワコン？6年継続して分かった「稼ぎにくい」正体と今から月5万稼ぐ新・戦略

    こんな疑問に答えます。 記事の執筆者 未経験からWeb業界に入社しWebディレクター歴10年目になります。本業をやりながらブログ運営をしており運用歴６年目になります。当ブログでは、アフィリエイトやブログの運用方法について発信しています。   「ブログはもう稼げない」という言葉を耳にします。 これから始める方や、楽に稼ぎたい人にとって、ブログは本当にオワコンなのでしょうか？   結論からお伝えすると、「かつてのやり方で、楽に稼ぐブログ」は完全にオワコンです。 ...

ReadMore

当ブログからアフィンガーを購入すると、特典プレゼントが手に入るのでぜひ参考にしてみてください！

今回は以上です。

ここまで読んでいただきありがとうございました。