WordpressでIntro.jsを使ってチュートリアルを作成する 

## はじめに
### Intro.jsとは？

Webページにチュートリアルを設置できるJavaScriptライブラリです。

使用感はこんな感じです（画像は公式から拝借しました）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406963/00293a20-1b3b-2db8-ea1f-2507793a2c65.png)

Githubで公開されています。
https://github.com/usablica/intro.js

今回はWordpress上に設置してみます。


## 目次
1. Intro.jsをダウンロード
2. Intro.jsの設置と読み込み（子テーマ）
3. チュートリアルの実装


## 1. Intro.jsをローカルにダウンロード

主な入手方法は以下の３つです。
※bowerもあるみたいですが、非推奨なので試してません。

以下のどれかを実施してIntro.jsライブラリをローカルにダウンロードします。

###・ Githubからダウンロード
https://github.com/usablica/intro.js/tags
から最新バージョンをダウンロードする（2020/08/14時点ではv2.9.3）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406963/1b0d1ffd-e987-0548-e159-3f1cd3c8b20a.png)


###・ git clone で入手
```
git clone https://github.com/usablica/intro.js.git
```

###・ npm で入手
```
npm install intro.js --save
```

## 2. Intro.jsの設置と読み込み（子テーマ）

チュートリアルを設置したい子テーマ配下に`css/`と`js/`フォルダを作成し、１で取得した「intro.js」と「introjs.css」を配置します。

また、実装に必要な独自JS（tutorial.js）と、CSSファイル（tutorial.css）も同時に設置しておきます。
※この時点では空ファイルで良いです。

```bash
(子テーマフォルダ)/js/intro.js
(子テーマフォルダ)/js/tutorial.js
(子テーマフォルダ)/css/introjs.css
(子テーマフォルダ)/css/tutorial.css
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406963/15f1bf32-629c-bf2c-5b58-29f5f79203ef.png)

子テーマのfunctions.phpに以下を記載し、サーバに反映させます。

```functions.php
<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles' );
function child_enqueue_styles() {
  wp_enqueue_style( 'child-style_intro', get_stylesheet_directory_uri() . '/css/introjs.css' );
  wp_enqueue_style( 'child-style_tutorial', get_stylesheet_directory_uri() . '/css/tutorial.css' );
  wp_enqueue_script( 'child-script_intro', get_stylesheet_directory_uri() . '/js/intro.js' );
  wp_enqueue_script( 'child-script_tutorial', get_stylesheet_directory_uri() . '/js/tutorial.js' );
}
```

反映したら、ChromeでTOPページを開き、F12（デベロッパーツール） > Sourcesタブを開いてJSとcssが読み込まれていることを確認しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406963/273f7144-2cdb-0e5a-ce47-bdbe5d9ad829.png)


## 3. チュートリアルの実装

tutorial.jsに以下を追加し、サーバーにアップロードします。

```javascript:tutorial.js
// #tutorial_buttonをクリックしたらスタート
jQuery(function($){
    $('#tutorial_button').on('click', (function(){
        introJs().start();
    }));
});

```

次に、固定ページに、チュートリアル用のHTMLを記載します。

管理者でwordpressにログイン > ダッシュボード > 固定ページ > 新規追加 で固定ページを新規作成します。
カスタムHTMLを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406963/35790cb3-ca22-a303-19e8-1f069aa84162.png)

以下を記載し、「公開する」を押して保存＆公開します。

```html:カスタムHTML
<div class="tutorial">
    <button id="tutorial_button">チュートリアルスタート</button>
    <select name="select_one" id="tutorial_select" data-intro="好きなくだものを選択してください" data-step="1">
        <option value="fruits1">みかん</option>
        <option value="fruits2">りんご</option>
        <option value="fruits3">バナナ</option>
    </select>
    <input type="text" name="favorite" id="tutorial_text" placeholder="Qiitan"  data-intro="好きなものを自由入力して下さい" data-step="2" />
</div>

```

対象の固定ページを表示してみるとこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406963/1f951486-33e2-9017-043d-d204bb27cf50.png)

「チュートリアルスタート」を押してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406963/00eb3df8-b7db-0b13-ecfb-38f728970987.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406963/67dc4ad6-9df9-93c8-c41c-7d86020794fe.png)

簡単！

# 最後に
すごくシンプルで使いやすかったです。
アレンジも簡単そうなので、少しずつ試していきたいと思います。

<details><summary>Qiitanとは</summary>
Qiitaのマスコットキャラクター。きーたんと読みます。かわいいよ。
[こんなのもあります](https://qiitadon.com/tags/qiitan%E7%94%BB%E5%83%8F%E3%81%8C%E6%B5%81%E3%82%8C%E3%81%A6%E3%81%8F%E3%82%8B%E3%82%B9%E3%83%AC)</details>