MENU

フォロー

LOST ARK（ロストアーク）の攻略を多数掲載中！

Simplicityにslick.jsでページトップ記事スライダーを追加しSTORK風テーマにカスタマイズ！

2017.11.13｜6年前930

こんにちは、SHUMiSTです。

Simplicity（シンプリシティー）テーマを使用して、STORK（ストーク）テーマを再現というかデザインを近づけるカスタマイズ第６回目です。

前回は、既存のSimplicity（シンプリシティー）テーマに組み込まれているjQueryプラグイン（animatedModal.js）を流用して、STORK（ストーク）テーマのように検索ウィンドウをモーダルウィンドウで表示するカスタマイズを行いました。

今回もハードルが高いですが、前回予定していたうちの一つ、ページトップのピックアップ記事スライダーを追加するカスタマイズを行います。

追加ソースはなるべく、子テーマのスタイルシート（style.css）に追加しましょう。
また、テンプレートファイルに変更を加える場合は親テーマの該当ファイルを子テーマのディレクトリにコピーし、子テーマで変更を加えましょう。

スポンサーリンク

第６回：ページトップに記事スライダーを追加しよう！

レスポンシブに強いjQueryカルーセルスライダー「slick.js」を使用して、ページトップに記事スライダーを追加します。

jQueryカルーセルスライダー「slick.js」の入手

まず、はじめにjQueryカルーセルスライダー「slick.js」の機能について一部ですが紹介しておこうと思います。

slickの機能概要

  • レスポンシブ対応
  • ブレイクポイント毎にスライドの表示数、スクロール数を変更可
  • スワイプ操作などタッチデバイス対応
  • 縦横カルーセル対応
  • 画像遅延読み込み可
  • オートプレイ対応
  • ナビゲーションの選択が可能
  • キーボード操作に対応
  • 無限ループ対応
  • IE8以上のブラウザで完全動作

などこの他にも様々な機能があり、高機能なスライダーになっております。
詳しく知りたい方は、下記のslickの入手先を参照してください。

slickの入手先

下記の公式サイトページ下部より、slick関係ファイルをダウンロードします。

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

kenwheeler.github.iokenwheeler.github.io

slick.js関係ファイルをアップロード

  1. 上記の入手先よりダウンロードしたファイルを解凍します。
  2. 下記の５つの必要なフォルダとファイルを探します。
    • font（フォルダ）
    • ajax-loader.gif
    • slick.css
    • slick-theme.css
    • slick.min.js
  3. ”slick”という名前のフォルダを作成し、上記５つのフォルダとファイルのうち”slick.min.js”以外の４つのフォルダとファイルをまとめて格納します。
  4. 作成した”slick”フォルダを子テーマディレクトリ直下にアップロードします。
  5. ”slick.min.js”を子テーマディレクトリ直下の以前（第５回）に作成した”js”ディレクトリにアップロードします。

function.phpにslick関係のCSS（スタイルシート）の呼び出しを設定

第５回のanimate.min.cssを追加した際に追加したadd_files()関数内に追加します。

変更前ソース

//必要なファイルをヘッダーに読み込む
function add_files() {
  //Googleフォントを読み込む
  wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Concert+One', array('simplicity-style') );
  //モーダル検索ボックス用のanimatedModal.js関連ファイルの呼び出し（重複呼び出し対策）
  //lib/scripts.phpでモバイルのみ呼び出されているが変更を加えたくないため記述
  if ( !is_mobile() ) {
    wp_enqueue_style( 'animatedmodal-animate-style',  get_template_directory_uri() . '/css/animate.min.css', array('simplicity-style') );
  }
  //ここに挿入します。
}
add_action( 'wp_enqueue_scripts', 'add_files' );

追加ソース

トップページとフロントページのみslick関係のCSS（スタイルシート）を呼び出すように上記挿入箇所に追加します。

  //ページトップスライダー用のslick.min.js関連ファイルの呼び出し
  if ( is_home() || is_front_page() ) {
    wp_enqueue_style( 'slick-slider-style',  get_stylesheet_directory_uri() . '/slick/slick.css', array('simplicity-style') );
    wp_enqueue_style( 'slick-slider-theme-style',  get_stylesheet_directory_uri() . '/slick/slick-theme.css', array('simplicity-style') );
  }

変更後ソース

//必要なファイルをヘッダーに読み込む
function add_files() {
  //Googleフォントを読み込む
  wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Concert+One', array('simplicity-style') );
  //モーダル検索ボックス用のanimatedModal.js関連ファイルの呼び出し（重複呼び出し対策）
  //lib/scripts.phpでモバイルのみ呼び出されているが変更を加えたくないため記述
  if ( !is_mobile() ) {
    wp_enqueue_style( 'animatedmodal-animate-style',  get_template_directory_uri() . '/css/animate.min.css', array('simplicity-style') );
  }
  //ページトップスライダー用のslick.min.js関連ファイルの呼び出し
  if ( is_home() || is_front_page() ) {
    wp_enqueue_style( 'slick-slider-style',  get_stylesheet_directory_uri() . '/slick/slick.css', array('simplicity-style') );
    wp_enqueue_style( 'slick-slider-theme-style',  get_stylesheet_directory_uri() . '/slick/slick-theme.css', array('simplicity-style') );
  }
}
add_action( 'wp_enqueue_scripts', 'add_files' );

function.phpにピックアップ記事スライダー用のサムネイル画像サイズを設定

既存のサムネイル（アイキャッチ）画像でも代用できますが、メディア設定により幅や高さが伸びて画質が粗くなる場合や無駄に大きいサイズの画像を縮小して表示するとページ読み込み速度などに影響がある場合があるので、設定をオススメします。ただし、サーバー容量を圧迫するのでご自身の判断で行ってください。

設定後は、Regenerate ThumbnailsやForce Regenerate Thumbnailsなどのプラグインでサムネイルの再生成が必要になります。

https://ja.wordpress.org/plugins/regenerate-thumbnails/
https://ja.wordpress.org/plugins/force-regenerate-thumbnails/

追加ソース

function.phpの最後に追加します。

//ページトップピックアップスライダー用画像を設定
add_image_size('thumb235', 235, 135, true);

footer-javascript.phpにslick.min.jsの呼び出しを設定

”footer-javascript.php”の最後に下記の”slick.min.js”ファイルの呼び出し設定（ソース）を追加します。

追加ソース

.slick-slider・・・スライダーの親要素に付与されているクラス

その他のslick関係のオプションは検索したら、相当量の説明サイトがヒットするので各自参照してください。

<?php
///////////////////////////////////
//slick.min.jsファイルの呼び出し
///////////////////////////////////
if ( is_home() || is_front_page() ): ?>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/slick.min.js"></script>
<script type="text/javascript">
jQuery(function() {
    jQuery('.slick-slider').slick({
		centerMode: true,
		dots: true,
		autoplay: true,
		autoplaySpeed: 3000,
		speed: 260,
		centerPadding: '90px',
		slidesToShow: 4,
		responsive: [
		{
			breakpoint: 1160,
			settings: {
			arrows: false,
			centerMode: true,
			centerPadding: '40px',
			slidesToShow: 4
		}
		},
		{
			breakpoint: 768,
			settings: {
			arrows: false,
			centerMode: true,
			centerPadding: '40px',
			slidesToShow: 3
		}
		},
		{
			breakpoint: 480,
			settings: {
			arrows: false,
			centerMode: true,
			centerPadding: '25px',
			slidesToShow: 1
		}
		}]
	});
	$(window).load(function(){
	    $(".slick-slider").css("opacity", "1.0");
	});
});
</script>
<?php endif ?>

header.phpにピックアップ記事スライダー（slick）を表示するソースを追加

トップページとフロントページのみカスタムヘッダー（#header）とメインカラム（#body）の間にピックアップ記事スライダーを表示するようにソースを追加します。

変更前のソース

      </div><!-- /#header -->
	  // ここに追加ソースを挿入します。
      <!-- 本体部分 -->
      <div id="body">

追加ソース

指定タグの記事（ピックアップ記事）を新着順に5件取得し、記事スライダー上にタイトル、サムネイル（アイキャッチ）画像・カテゴリを表示するソースになります。

<?php if ( is_home() || is_front_page() ): ?>
<div id="top-slider">
<?php
    // posts_per_pageで取得件数の指定、orderbyでソート順を新着順、tagでPICKUPを指定
    $args = array('posts_per_page' => 5, 'orderby' => 'date', 'tag' => 'pickup');
    $query = new WP_Query($args);
?>
<?php if( $query->have_posts() ) : ?>
<ul class="slider slick-slider">
    <?php while ($query->have_posts()) : $query->the_post(); ?>
    <li>
        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
        <figure class="slick-thumbnail">
            <?php the_post_thumbnail('thumb235'); ?>
            <?php $cat = get_the_category(); ?>
            <?php $cat = $cat[0]; ?>
			<span class="slick-cat"><?php echo get_cat_name($cat->term_id); ?></span>
        </figure>
        <h2 class="slick-title"><?php the_title(); ?></h2>
        </a>
   </li>
   <?php endwhile; ?>
</ul>
<?php else: ?>
    <p>ピックアップ記事がありません。</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div>
<?php endif ?>

変更後のソース

      </div><!-- /#header -->
      <div id="top-slider">
      <?php
          // posts_per_pageで取得件数の指定、orderbyでソート順を新着順、tagでPICKUPを指定
          $args = array('posts_per_page' => 5, 'orderby' => 'date', 'tag' => 'pickup');
          $query = new WP_Query($args);
      ?>
      <?php if( $query->have_posts() ) : ?>
      <ul class="slider slick-slider">
          <?php while ($query->have_posts()) : $query->the_post(); ?>
          <li>
              <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
              <figure class="slick-thumbnail">
                  <?php the_post_thumbnail('thumb235'); ?>
                  <?php $cat = get_the_category(); ?>
                  <?php $cat = $cat[0]; ?>
                  <span class="slick-cat"><?php echo get_cat_name($cat->term_id); ?></span>
              </figure>
              <h2 class="slick-title"><?php the_title(); ?></h2>
              </a>
         </li>
         <?php endwhile; ?>
      </ul>
      <?php else: ?>
          <p>ピックアップ記事がありません。</p>
      <?php endif; ?>
      <?php wp_reset_postdata(); ?>
      </div>
      <!-- 本体部分 -->
      <div id="body">

メディアクエリに記事スライダーボックスのスタイルを追加

第３回で追加してある以下のメディアクエリ（1166px以上）の設定に記事スライダーボックスのスタイルを追加します。

追加先のメディアクエリ

@media only screen and (min-width: 1166px) {
//この括弧内に追加する
}

追加ソース

    #top-slider {
        width: 1166px;
    }

メディアクエリにモバイル用の記事スライダーのスタイルを追加

新しくメディアクエリ（480px以下）の設定を追加し、モバイル用の記事スライダーのスタイルを追加します。

追加ソース

@media only screen and (max-width: 480px) {
    /* ページトップスライダー */
    #top-slider {
        width: 100%;
    }
    #top-slider .slider {
        padding: 0;
        list-style-type: none;
    }
    #top-slider .slider li {
        max-height: 230px;
    }
    #top-slider .slider a {
        padding: 0;
        position: relative;
    }
    #top-slider .slider a:after {
        content: '';
        display: block;
        width: 100%;
        height: 5.8em;
        background: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 1) 100%);
        position: absolute;
        bottom: 0;
        opacity: .5;
        z-index: 1;
    }
    #top-slider .slick-thumbnail {
        max-height: 180px;
    }
    #top-slider .slider a .slick-title {
        position: absolute;
        bottom: .1em;
        padding: .4em .9em .6em;
        font-size: 1.05em;
        color: #fff;
        z-index: 2;
    }
    .slick-dots li button, .slick-dots li button:before {
        width: 15px;
    }
}

ピックアップ記事スライダーのスタイルを設定

最後に、ピックアップ記事スライダーにCSS（スタイルシート）を使用して、スタイルを設定しデザインを整えます。

追加ソース

下記の追加ソースを子テーマのスタイルシート（style.css）に追加します。

#top-slider {
    margin: 0 auto;
    font-size: .75em;
    zoom: 1;
}
#top-slider:before, #top-slider:after {
    content: "";
    display: table;
}
#top-slider:after {
    clear: both;
}
#top-slider .slick-slider {
    margin-top: 0;
}
.slick-thumbnail {
    position: relative;
    max-height: 135px;
    overflow: hidden;
}
.slick-slide a {
    display: block;
    text-decoration: none;
    color: #444;
    padding: .5em .5em 0;
}
.slick-slide img {
    width: 100%;
    border: 0;
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
}
.slick-cat {
    background: #fcee21;
    color: #444444;
    position: absolute;
    top: 0;
    right: -1px;
    font-size: .8em;
    text-align: center;
    font-weight: bold;
    padding: 0.1em 0.5em;
    min-width: 8em;
    opacity: .9;
    filter: alpha(opacity=90);
    -ms-filter: "alpha(opacity=90)";
}
.slick-title {
    font-size: 1em;
    margin: .3em 0;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
.slick-slide a:hover .slick-title {
    color: #E69B9B;
}
#top-slider .slick-prev {
    left: -45px;
}
#top-slider .slick-next {
    right: -45px;
}
#top-slider .slick-prev, #top-slider .slick-next {
    width: 40px;
    height: 40px;
    margin-top: -10px;
}
#top-slider .slick-prev:before {
    content: '\f104';
}
#top-slider .slick-next:before {
    content: '\f105';
}
#top-slider .slick-prev:before, #top-slider .slick-next:before {
    font-family: 'fontawesome';
    font-size: 40px;
    color: #272724;
    font-weight: normal;
}
#top-slider .slick-dots {
    bottom: -1.6em;
}
#top-slider .slick-dots li {
    margin: 0 1px;
}
#top-slider .slick-dots li button:before {
    width: 20px;
    height: 10px;
    content: "●";
    font-family: inherit;
}

カスタマイズまとめ

今回のカスタマイズにより、カスタムヘッダーとメインカラムの間にピックアップ記事スライダーが追加されました。

前回、今回とjQueryプラグインを使用したカスタマイズになっており、ハードルが高かったかもしれませんがピックアップ記事スライダーを追加したことによりサイト全体の雰囲気が変わり、STORK（ストーク）テーマにまた１歩近づいたと思います。

次回は、メインカラムのデザインをCSS（スタイルシート）を使用して整えていく予定ですが、範囲が広そうなので分割して記事をお届けするかもしれません。

Simplicity（シンプリシティー）テーマの元々の機能やソースを流用して、STORK（ストーク）テーマに近づけているため、STORK（ストーク）テーマのソースをそのまま丸ごと利用したりはしておりませんので中身はまったく別物です。

STORK（ストーク）テーマの機能面などを利用したい方はSTORK（ストーク）テーマを購入してご利用ください。

今回のカスタマイズ前後のスクリーンショット

カスタマイズ前

カスタマイズ後

第５回：検索ボックスのモーダルウィンドウ表示編を読む

第７回：記事一覧をシンプルタイプに変更編

SimplicityをSTORK風にカスタマイズシリーズ目次へ

スポンサーリンク

この記事が気に入ったら
いいね！しよう！

最新記事をお届けします。

書いている人

SHUMiST

趣味人

書いている人”SHUMiST（シュミスト/趣味人）”は自他共に認める「割と極度に面倒くさがり」です。 よく人に「極度に面倒くさがりだよね。」とか「変な所で几帳面だよね。」とか自分はＯ型なんですけど「本当にＯ型？」とか言われることが多い。なぜ、WEB関係に手を出したのかが自分でも疑問。

Follow Me

カテゴリー

アーカイブ