StingerPlus2でSwiperを動かす方法

Wordpress
2018.03.23

プラグインを使用せずにスライダーを追加すれば、応用が効くコンテンツスライダーを作成することが出来ます。しかも、大抵のプラグインスライダーより動作が軽いです。

当記事ではStingerPlus2テーマを利用した際の手順を紹介します。この手順で、ほとんどのWPテーマで流用できる方法だと思います。

もしJavascriptを動かすのに困っていた場合、こちらの記事を参考にしてみてください。

スポンサーリンク

準備するもの

Stingerplus2テーマ、Stingerplus2子テーマ

Swiper

functions.phpを触れるエディタ、FTPソフト

Swiperをダウンロード

Swiper
idangero.us

上記サイトへ移動後、「Download」をクリック

最新バージョンが一番上にあるので「zip」か「tar.gz」をクリックしてダウンロードします。

Swiperを子テーマ内に入れる

ダウンロードしたデータを子テーマ内にアップロードします。

アップロードするデータは

  1. 「swiper-0.0.0（バージョン）」→「dist」→「css」→「swiper.min.css」
  2. 「swiper-0.0.0」→「dist」→「js」→「swiper.min.js」

の２つです。ほとんどのjavascriptは、min.cssとmin.jsを入れると動きます。min.cssと.cssの2種類ありますが、minは縮小版という意味です。データの軽い縮小版を入れましょう。

2つのデータを、現在使用中の子テーマ内にアップロードします。

自分がいつも使用しているDreamweaverのFTP画面です。上図のように「wp-content」→「themes」→「stingerplus2-child」内に「css」と「js」のフォルダを作成し、それぞれのデータを入れました。これで、アップロード準備は完了です。

functions.phpを編集する

子テーマ内のfunctions.phpを編集して、先程の「swiper.min.css」と「swiper.min.js」を読み込みます。

swiper.min.cssを追加する

Stingerplus2子テーマのfunctions.phpを開くと下記のような表記があります。

//親スタイルシート読み込み
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

これは親スタイルシートの後に子スタイルシートを読み込むphpコードです。ほとんどの子テーマにこちらの記述があると思います。こちらのphpコードをそのまま流用して「swiper.min.css」を読み込みます。一番最後にコードを追加します。

//親スタイルシート読み込み
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
//↓追加のcssを書き込む
wp_enqueue_style( 'swipercss', get_stylesheet_directory_uri() . '/css/swiper.min.css' );
}

「swiper.min.css」の場所は子テーマの「css」フォルダに入れたので、「’/css/swiper.min.css’」と記入します。

swiper.min.jsを追加する

JavaScriptを追加するには下記のコードを、追加入力します。

/* スクリプトの読み込み
---------------------------------------------------------- */
function register_script() {
//読み込むJavaScriptを登録する
wp_register_script( 'swiperjs', get_stylesheet_directory_uri() . '/js/swiper.min.js', array(), '', true );
}
function add_script() {
//登録したJavaScriptを以下の順番で読み込む
register_script();
wp_enqueue_script( 'swiperjs' );
}
add_action( 'wp_enqueue_scripts', 'add_script' );

上記のphpを書き込むと、ヘッダーやフッターにいちいち記入しなくても、自動でJavascriptが読み込まれます。管理しやすくするため、Javascriptを登録→読み込みの2段階の手順で行います。

wp_register_script

最初に、wp_register_scriptを使ってJavascriptを登録します。

wp_register_script($handle, $src, $deps, $ver, $in_footer);

  • $handle…登録する際の名前を決めます。後で使うので管理しやすい名前にします。
  • $src…JavaScriptの場所を指定します。先程は子テーマの「js」フォルダ内に入れたので、’/js/swiper.min.js’という表記をします。CDNを使う際は、CDNのアドレスを入力すれば大丈夫です。
  • $deps…jQueryを使う際は、こちらに記入をします。
  • $ver…すんません、よくわかんないです。未記入（”）のままか NULL で大丈夫です。
  • $in_footer…footerで使う場合は「true」を入力します。footerで読み込ませた方がGoogleからの評価が良いのでtrueを使用します。

上記のように設定します。

wp_enqueue_script

次に、wp_enqueue_scriptを使用して、先程登録したJavaScriptを読み込ませます。

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer);

wp_enqueue_scriptにも、同じ要素が設定できます。しかし、今回は先程wp_register_scriptで決めた$handle名を入力して以下のようにすれば大丈夫です。

wp_enqueue_script( ‘swiperjs’ );

本文にデモを入れてみる

Swiperのページへ移動し、Demosのページへ飛びます。

たくさんのデモが並んでいますが、今回は上のサンプルで紹介した「3D Coverflow Effect」を使用します。「Souce code 」をクリックします

”https://github.com/nolimits4web/Swiper/blob/master/demos/240-effect-coverflow.html”

ソースコードを見ると、HTMLの構造が表記されています。今回使用するのは上記の３箇所です。この辺りは、Demoによって変わってきます。順に説明していきます。

子テーマのstyle.cssに追加する。

html, body やbody以降のCssコードを、子テーマのstyle.cssに追加してください。

/*
#################################

Swiper 3D Coverflow Effect用

#################################
*/
.swiper-container {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
height: 300px;
}

html, body やbodyは、テーマのstyle.cssと被ってしまう可能性があるので追加しません。

<!–Swiper–>以降のコードを本文に記入する

赤枠の部分をコピーして、スライダーを表示させたい場所に記入します。

上記のスライドは、background-imageのurlを変えて、好きな写真をスライド表示できます。

もしも、本文に記入する際は「テキストモード」で記入しないと動かないので注意して下さい。

また、上記HTMLが書かれたphpデータを作成して、phpを呼び出すのも手です。

http://innervisions.info/wordpress/shortcord-php/
innervisions.info

<!–Initialize Swiper–>のjsデータを作成する

赤枠の部分をコピーしたjsデータを作成します。

「my_swiper01」という名前のjsデータを作成します。

デモ用のJavaを読み込む

先程のfunctions.phpにmy_swiper01を追加します。

/* スクリプトの読み込み
---------------------------------------------------------- */
function register_script() { //読み込むJSを登録する
wp_register_script( 'swiperjs', get_stylesheet_directory_uri() . '/js/swiper.min.js', array(), '', true );
wp_register_script( 'my_swiper01', get_stylesheet_directory_uri() . '/js/my_swiper01.js', array(), '', true );//← my_swiper01を登録
}
function add_script() { //登録したJSを以下の順番で読み込む
register_script();
wp_enqueue_script( 'swiperjs' );
wp_enqueue_script( 'my_swiper01' );//← my_swiper01を読み込む
}

add_action( 'wp_enqueue_scripts', 'add_script' );

3D Coverflow EffectのSwiperが動作すると思います。

まとめ

  1. Swiperを子テーマフォルダに入れる
  2. functions.phpを編集
  3. デモ用のデータを作成、追加する

この３つの手順をきちんと踏まないと動かないので、JavaScriptを初めて導入するのは敷居が高いと思います。
自分もWordpressでJavaScriptが動かせるまで、大分さ迷っていた気がします。一回理解できると、簡単なんですけどね。

JavaScriptとjQueryの入れ方はまた、少し作業内容が変わるので、また紹介できたらと思います。

スポンサーリンク

コメント