インストラクターの追加・編集方法について解説。
手順は、
- 固定ページを作る
- メニューに追加
- PC表示用のウィジェットに追加
- スマホ表示用のウィジェットに追加
固定ページを作る
まず追加するインストラクターのページを作成する。
step
1ダッシュボードの「固定ページ」を選択
step
2既存のインストラクターのページを開く（誰でもOK）
step
3画面右の「公開」にある「Copy this post」をクリック「
step
4右上を「Default」にして「Copy it!」をクリック
step
5固定ページ一覧をクリック
step
6コピーされたページが表示されるので、クリックして内容を訂正していく
step
7URL名をつけて公開
インストラクターのURLは以下の様式。
*ttps://haleta.jp/instructor/yukiko/
instructorが入っていない場合は、親が選択されていない可能性があるので確認する。
固定ページをメニューに追加する
新しく作成したインストラクターのページをメニューに追加する。
step
1「外観」の「メニュー」を選択
step
2左のメニュー項目を追加から「固定ページ」→「すべて表示」→「追加したいファイル名」→「メニューに追加」をクリック
step
3
追加したページは一番下にあるので、クリックしてドラッグし、インストラクター（親）の下に入れる
※追加したページをクリックしてそのまま入れたい場所にドラッグ
step
4メニューが表示されるか確認
この作業で、パソコンとスマホのメニュー両方に追加されている。
パソコンのトップ画面の設定
パソコンのトップ画面の設定を行う。
step
1「外観」から「ウィジェット」を開く
step
2「メインコンテンツエリア上部」から「パララックスコンテンツ-instructor」を選択
step
3下部の「オリジナルパララックスコンテンツ」を表示させる
step
4コピーしてメモ帳に貼り付ける
※そのまま編集してもいいが、かなり細かい設定なので、慣れるまではメモ帳などにコピペして編集、編集したものをまたここに貼り付けたほうが確実。
①オリジナルパララックスコンテンツの中ならどこでもいいのでクリック
②キーボードの「command」と「A」をクリック →すると全部選択される（色が変わる）
③その状態でキーボードの「command」と「C」をクリック
④メモ帳（何でもOK）を開き、キーボードの「command」と「V」で貼り付ける
step
5コードの内容を確認する
トップに[flipcard]のコード（ピンクの部分）、
[flipcarditem]から[/flipcarditem]がそれぞれのインストラクターの内容（オレンジで囲われた部分）、
最後に[/flipcard]を閉じるコード（最後のピンクの部分）がある。
追加したい場合は、オレンジで囲った[flipcarditem]から[/flipcarditem]を、入れたい場所に入れる。
今回の例は、YUKIKOさんをMIKIさんの下に入れるので、
①MIKIさんの[flipcarditem]から[/flipcarditem]を選択して右クリックでコピー
②挿入したい場所をクリックして貼り付け
※必ず[/flipcarditem]と[/flipcard]の間、の間、もしくは[/flipcarditem]と[flipcarditem]の間に入れること！
step
6コピペした内容を訂正していく
①名前を変更
②メディアのURLを入れる
※メディアのURLの取得方法：
1. メディアを開き
2. 入れたい写真をクリックして開く
3. 右下に「リンクをコピー」という欄があるので、キーボードの「command」+「A」で選び、「command」＋「C」でコピー、貼り付けたいところで「command」＋「V」もしくは右クリックでペーストする。
③固定ページのURLを入れる（通常はhttps://haleta.jp/instructor/○○○/で作成している）
step
7訂正が終わったら、メモ帳のデータをすべて選択してコピーし、先程のウィジェットへ貼り付ける
※前のものが残っているので、全部選択して削除、メモ帳からコピーしたものを貼り付ければデータが更新される
step
8保存してトップページを確認する
スマホのトップ画面の設定
次にスマホのトップ画面の設定を行う
step
1ダッシュボードの「ウィジェット」から「コンテナ上部（モバイル用）」→「パララックスコンテンツ：instructor」を選ぶ
step
2パソコンの時と同じように「オリジナルパララックスコンテンツ」の中身をメモ帳にコピぺする
※コードがパソコンと同じように見えるが、トップコードなどがパソコンとモバイルでは違うので、パソコンのデータは使えない
step
3パソコンのコード変更と同じように訂正する
パソコンと違うところは、一人分のインストラクター1行「flexitem margin=5]が追加されているので一緒にコピペすることと、URLと写真の場所がパソコンとは違うので注意する。
以降はパソコンと同じ。