サイトのTOPページにスライダーが設置してあると目を引くため、導入しているサイトも多いですよね。
WordPressでも多数のプラグインが用意されていますが、多機能だけにサイトの動作が重くなったり機能が干渉して不具合が起きてしまったりすることもあるようです。
不具合やサイトが重くなってしまうのを防止するために、他に影響を受けないスライダーを自作してWordPressテーマに追加してみましょう。
今回は、プラグインを使わずにjQueryを使用してWordPressにスライダーを追加する方法をご紹介します。
スライダーに出力する要素を追加する
まずは、slider.phpというテンプレートを作成し、スライダーで出力する要素を追加していきましょう。
今回は、新着記事から5記事をサブループで呼び出し『投稿日』『アイキャッチ画像』『カテゴリ』『記事タイトル』を出力します。
slider.phpに追加するコードは下記の通りです。
slider.phpを追加→記述<div id="slider-area">
<div id="slides" class="slides">
<div id="slides-inner" class="slides-inner">
<?php $args = array(
'posts_per_page' => 5,
);
$my_query = new WP_Query( $args );?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<article <?php post_class( 'slidekiji' ); ?>>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('large'); ?>
<div class="text">
<span class="kiji-date">
<time
datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
<?php echo get_the_date(); ?>
</time>
</span>
<span class="cat-data ">
<?php if( has_category() ): ?>
<?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
<?php endif; ?>
</span>
<h2><?php the_title(); ?></h2>
</div>
</a>
</article>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</div>
</div>
<div id="slides-nav" class="slides-nav"></div>
</div>スライダーとしての動作をjQueryで制御するために、『slider-area』『slides』『slides-inner』という3つのdiv要素を設定し、その中にサブループを記述します。
スライダーで呼び出す記事は、サブループの内容を変更することで簡単に変更することができます。
任意のカテゴリの記事 任意のカテゴリの記事を呼び出すためには、サブループでカテゴリIDもしくはカテゴリスラッグを指定して呼び出します。<?php $args = array(
'posts_per_page' => 5,
'order' => 'DESC',
'category' => カテゴリID
（または、'category_name' => 'カテゴリのスラッグ'）
);
$my_query = new WP_Query( $args );?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>IDを指定して記事を呼び出す場合は、コンマ区切りで記事IDを指定しましょう。
<?php $args = array(
'order' => 'DESC',
'post__in' => array( 記事ID,記事ID,記事ID )
);
$my_query = new WP_Query( $args );?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>人気記事を出力する場合は記事のview数をカウントし、その値を基準として出力します。人気記事を出力するためには、必ず記事のView数をカウントするための関数を先に設定してください。
<?php get_the_ID();
$args = array('posts_per_page' => 5
'meta_key'=> 'post_views_count',
'orderby' => 'meta_value_num',
'order' => 'DESC',
);
$my_query = new WP_Query( $args );?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>slider.phpの記述が完了したら、スライダーを呼び出したい場所にslider.phpを呼び出すためのコードを追加しましょう。
スライダーを追加したい場所に記述<?php get_template_part( 'slider' ); ?>上記のように記事一覧が表示されたら、slider.phpの作成は完了です。続いて、javascriptファイルを作成しましょう。
スライダーを動かすためのjavascriptファイルを追加する
スライダーの要素が出力できたら、スライダーとして動作させるためのテンプレートを作成しましょう。今回は、テンプレート内に『slider.js』という名前のjavascriptファイルを新しく作成し、スライダーを動作させるためのコードをjQueryで記述します。
slider.jsに追加するソースコードは下記の通りです。
slider.jsに記述jQuery(function($) {
jQuery('#slides').append('<ul id="pager"><li><a href="#" class="prev">＜</a></li><li><a href="#" class="next">＞</a></li></ul>');
var pager = jQuery('#pager'),
slidesWrap = jQuery('#slides'),
slides = jQuery('#slides-inner'),
slideKiji = slides.find('.slidekiji'),
slidenav = jQuery('#slides-nav'),
current = 0,
number = slideKiji.length;
slideKiji.each(function(i) {
jQuery(this).css({
left: '100' * i + '%'
});
slidenav.append('<a href="#"></a>');
});
function navUpdate() {
slidenav.find('a').removeClass('active');
slidenav.find('a').eq(current).addClass('active');
}
function slider(index) {
if (index < 0) {
index = number - 1;
}
if (index > number - 1) {
index = 0;
}
slides.animate({
left: '-100' * index + '%'
});
current = index;
navUpdate();
}
pager.find('a').click(function(event) {
event.preventDefault();
if (jQuery(this).hasClass('prev')) {
slider(current - 1);
} else {
slider(current + 1);
}
});
slidenav.find('a').click(function(event) {
event.preventDefault();
var navIndex = jQuery(this).index();
navUpdate();
slider(navIndex);
});
var start;
function timerStart() {
start = setInterval(function() {
slider(current + 1);
}, 3000);
}
function timerStop() {
clearInterval(start);
}
slider(current);
timerStart();
slideKiji.on({
mouseover: timerStop,
mouseout: timerStart
});
});WordPressのテーマにjavascriptテンプレートを追加した場合は、functions.phpに必ずjsファイルを読み込む処理を記述してください。
functions.phpに記述function slider_scripts(){
wp_enqueue_script( 'slider', get_template_directory_uri() .'/slider.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts' , 'slider_scripts' );WordPressテーマの直下にslider.jsを追加した場合、上記のソースコードを追加することで、slider.phpのコンテンツをスライダーとして動作させることができるようになります。
※WordPressテーマ内の他の位置に設置した場合は、『get_template_directory_uri() .'/slider.js'』の部分の記述を変更してください。
テーマフォルダ内に『js』という名前のフォルダを作ってその中に設置した場合は、『get_template_directory_uri() .'/js/slider.js'』
slider.jsを反映しても、CSSを反映させるまではスライダーとしては動作せず、先程のリストの一番下にページャーのみが出力されます。
スライドがに移動するまでの時間は3000ミリ秒に設定していますが、ソースコードの下記の部分の『3000』を任意の数字に変更することで、スライドさせる時間を調整することができます。
function timerStart() {
start = setInterval(function() {
slider(current + 1);
}, 3000);
}スライダー用のデザインを設定する
スライダーとしての動作をさせるために、style.cssにデザインを追加していきましょう。下記にデモCSSを載せておきますので、自分好みにカスタムして使用してください。
style.cssに記述※@mediaを使用してCSSをレスポンシブデザインにCSSを調整する場合は、headタグでviewportの設定を行なってください
.slides {
position: relative;
top: 0;
left: 50%;
overflow: hidden;
width: 100%;
height: 350px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
#slider-area {
position: relative;
margin-bottom: 50px;
}
.slides-inner {
position: relative;
top: 0;
width: 100%;
}
.slidekiji {
position: absolute;
display: block;
width: 100%;
height: auto;
}
.slidekiji a {
position: relative;
display: block;
overflow: hidden;
height: 350px;
}
.slidekiji img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slidekiji .text {
position: absolute;
bottom: 0;
box-sizing: border-box;
width: 100%;
padding: 25px 30px 15px;
background: linear-gradient(top, rgba(255, 255, 255, 0) 2%, #000 100%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 2%, #000 100%);
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 2%, #000 100%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 2%, #000 100%);
text-shadow: 0 0 3px #000;
-moz-text-shadow: 0 0 3px #000;
-webkit-text-shadow: 0 0 3px #000;
}
.slidekiji .kiji-date {
font-size: .9em;
color: #fff;
}
.slidekiji .cat-data {
font-size: .9em;
color: #fff;
background-color: transparent;
}
.slidekiji h2 {
font-size: 1.5em;
line-height: 1.4;
margin: 0;
color: #fff;
}
#pager {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#pager .prev, #pager .next {
line-height: 40px;
position: absolute;
top: 0;
width: 44px;
height: 40px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
text-decoration: none;
color: #fff;
background: #333;
}
#pager .prev {
left: 0;
}
#pager .next {
right: 0;
}
.slides-nav {
position: absolute;
bottom: -35px;
left: 0;
width: 100%;
text-align: center;
}
.slides-nav a {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 5px;
border-radius: 50%;
background: #ccc;
}
.slides-nav a.active {
cursor: default;
background: #333;
}
@media (max-width: 799px) {
.slides {
height: 240px;
}
.slidekiji a {
height: 240px;
}
.slidekiji h2 {
font-size: 1.2em;
}
.slidekiji .cat-data, .slidekiji .kiji-date {
font-size: .8em;
}
#pager .prev, #pager .next {
line-height: 8vw;
width: 8vw;
height: 8vw;
}
.slides-nav a {
width: 10px;
height: 10px;
border-radius: 100%;
}
}object-fitは、とても便利なCSSプロパティですがIEに対応していません。object-fitをIEにも対応させる方法は下記の記事で紹介しています。
wordpressで画像のサイズをCSSで最適化してレスポンシブデザインに対応する上記のCSSを追加すると、下記の画像のようにスライダーとして動作するようになります。
スライダーがきちんと動作したら作成完了です。この機会にWordPressに自分好みのスライダーを設定し、好きな位置に追加してみてください！