インストラクター紹介

a.kubota により 2019年 7月 1日, 12:50が変更された | 履歴

インストラクターの追加

画像の用意

(1)縦200px、横200px以上の正方形の写真をご用意ください。

左の写真が、右のように切り取られますので、顔等の位置が端にならないようにしてください。

(2)Wordpress管理画面のメディアページよりメディアアップロードで画像をアップします。

記事の用意

(1)下記のコードをコピーします。

<!-- インストラクター紹介__ここから -->
<div class="col-sm-3 col-xs-6">
  <a class="instructor_toggle collapsed" data-toggle="collapse" href="#instructor_r_kikkawa">
    <div class="">
      <div class="instructor-link-image-wrapper">
        <img src="wp-content/themes/harmonie-yoga/images/instructor/instructor_img_r_kikkawa_x2.png" class="instructor-link-image">
      </div>
      <p class="instructor-link-title">代表 兼 インストラクター</p>
      <p class="instructor-link-name">橘河 里奈</p>
    </div>
  </a>
  <div class="collapse instructor_box" id="instructor_r_kikkawa">
    <div class="well">
      <div class="instructor-note">
        <p class="instructor-note-title">代表 兼 インストラクター</p>
        <p class="instructor-note-name">橘河 里奈</p>
        <p class="instructor-note-txt">
          ヨガを通じて、自然と調和した心身の健やかさが身につくように<br>
          毎日の生活が、豊かで爽やかになるように<br>
          笑顔の輪がどこまでもひろがるように願っています<br><br>
          《保有資格》<br>
          東海大学体育学修士(現 東海大学非常勤講師）<br>
          内閣府認証NPO法人日本予防医学療術協会認定ヨガインストラクター<br>
          乳がんリハビリヨガ指導者養成講座修了<br><br>
          《その他の活動》<br>
          ヒプノセラピスト<br>
          お寺で四季ヨガ 主宰<br>
          絵本【きぼうの星】　<a href="https://ameblo.jp/moritotunagu/entry-12226357726.html" target="_blank" class="link-style-01">詳しくはこちら＞＞＞</a>
        </p>
      </div>
    </div>
  </div>
</div>
<!-- インストラクター紹介__ここまで -->

(2)必要箇所を適宜変更します。

※変更する箇所がわかりやすいように、上記のコード列に番号を振り、変更する箇所の文字色を赤にしました。

01    <!-- インストラクター紹介__ここから -->
02    <div class="col-sm-3 col-xs-6">
03      <a class="instructor_toggle collapsed" data-toggle="collapse" href="#instructor_r_kikkawa">
04        <div class="">
05          <div class="instructor-link-image-wrapper">
06            <img src="wp-content/themes/harmonie-yoga/images/instructor/instructor_img_r_kikkawa_x2.png" class="instructor-link-image">
07          </div>
08          <p class="instructor-link-title">代表 兼 インストラクター</p>
09          <p class="instructor-link-name">橘河 里奈</p>
10        </div>
11      </a>
12      <div class="collapse instructor_box" id="instructor_r_kikkawa">
13        <div class="well">
14          <div class="instructor-note">
15            <p class="instructor-note-title">代表 兼 インストラクター</p>
16            <p class="instructor-note-name">橘河 里奈</p>
17            <p class="instructor-note-txt">
18              ヨガを通じて、自然と調和した心身の健やかさが身につくように<br>
19              毎日の生活が、豊かで爽やかになるように<br>
20              笑顔の輪がどこまでもひろがるように願っています<br><br>
21              《保有資格》<br>
22              東海大学体育学修士(現 東海大学非常勤講師）<br>
23              内閣府認証NPO法人日本予防医学療術協会認定ヨガインストラクター<br>
24              乳がんリハビリヨガ指導者養成講座修了<br><br>
25              《その他の活動》<br>
26              ヒプノセラピスト<br>
27              お寺で四季ヨガ 主宰<br>
28              絵本【きぼうの星】　<a href="https://ameblo.jp/moritotunagu/entry-12226357726.html" target="_blank" class="link-style-01">詳しくはこちら＞＞＞</a>
29            </p>
30          </div>
31        </div>
32      </div>
33    </div>
34    <!-- インストラクター紹介__ここまで -->

(3)コードに名前を指定します。

下記コードの"# 〜 " の間の赤字部分を変更します。

03      <a class="instructor_toggle collapsed" data-toggle="collapse" href="#instructor_r_kikkawa">

これは、このコードが追加するインストラクターについて書かれたコードであることを指定するための名前になるので、

他の名前と同じにならないようにしてください。

（同じ名前をつけると、画像をクリックした際、同じ名前のつけられたインストラクターさん両名の詳細が同時に開閉します。）

命名規則として、[instructor_(名前イニシャル)_名字ローマ字]でつけています。

命名に使用できるのは半角英数字と「_」アンダースコアです。

こちらでつけた名前と同じ名前を下記コードの id="　〜 "の間の赤字部分に入れてください。

12 <div class="collapse instructor_box" id="instructor_r_kikkawa">

(4)画像を指定します。

管理画面からメディアページへ移動します。使用したい画像をクリックして表示された「添付ファイルの詳細」からURL欄をコピーして下記コードの src=" 〜 "の間の赤字部分に貼り付けます。

06            <img src="wp-content/themes/harmonie-yoga/images/instructor/instructor_img_r_kikkawa_x2.png" class="instructor-link-image">

(5)他部分の、インストラクター情報を書き換えてください。

前と後ろにあります<>で囲われたタグに気をつけて書き換えて下さい。

(6)Wordpress管理画面から、インストラクター紹介の編集ページを開きます。

(7)編集モードを「ビジュアル」から「テキスト」に切り替えます。

(8)先程編集したコードをコピーして記事内のの後ろにカーソルを置いて貼り付けてください。

(9)更新ボタンをクリックして、ページを確認してください。

インストラクターの削除

(1)Wordpress管理画面から、インストラクター紹介の編集ページを開きます。

(2)編集モードを「ビジュアル」から「テキスト」に切り替えます。

(3)削除したいインストラクターのコードの

から

を選択して削除します。

(4)更新ボタンをクリックして、ページを確認してください。

インストラクターの変更

(1)Wordpress管理画面から、インストラクター紹介の編集ページを開きます。

(2)編集モードを「ビジュアル」から「テキスト」に切り替えます。

(3)削除したいインストラクターの名前またはフリースペースの部分を編集してください。

(4)更新ボタンをクリックして、ページを確認してください。

ギャラリーの追加

(1)下記のコードをコピーします。こちらがギャラリーを置くベースになります。

<div class="instructor-note-images row">

</div>

(2)先程コピーしたコードに、下記コードを追加したい画像分、追加していきます。

<div class="col-sm-3 col-xs-12">
  <div class="images-wrapper">
    <a href="[画像URL]" target="_blank" class="light-box-link" data-lightbox=ギャラリーの名前]" rel="noopener">
      <img src="[画像URL]" />
    </a>
  </div>
</div>

3つの画像を乗せる場合は下記のようになります。

<div class="instructor-note-images row">
  <div class="col-sm-3 col-xs-12">
    <div class="images-wrapper">
      <a href="[画像URL]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
        <img src="[画像URL]" />
      </a>
    </div>
  </div>
  <div class="col-sm-3 col-xs-12">
    <div class="images-wrapper">
      <a href="[画像URL02]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
        <img src="[画像URL02]" />
      </a>
    </div>
  </div>
  <div class="col-sm-3 col-xs-12">
    <div class="images-wrapper">
      <a href="[画像URL03]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
        <img src="[画像URL03]"/>
      </a>
    </div>
  </div>
</div>

(3)必要箇所を適宜変更します。

※変更する箇所がわかりやすいように、上記のコードの変更する箇所の文字色を赤にしました。

<div class="instructor-note-images row">
  <div class="col-sm-3 col-xs-12">
    <div class="images-wrapper">
      <a href="[画像URL]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
        <img src="[画像URL]" />
      </a>
    </div>
  </div>
  <div class="col-sm-3 col-xs-12">
    <div class="images-wrapper">
      <a href="[画像URL02]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
        <img src="[画像URL02]" />
      </a>
    </div>
  </div>
  <div class="col-sm-3 col-xs-12">
    <div class="images-wrapper">
      <a href="[画像URL03]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
        <img src="[画像URL03]"/>
      </a>
    </div>
  </div>
</div>

(4)ギャラリーの名前を指定します。

下記コードの[ギャラリーの名前]となっている赤字部分を変更します。

<a href="[画像URL]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">

これは、このコードを追加するインストラクターのギャラリーを指定するための名前になります。

インストラクターごとに同じ名前をつけます。

名前付けのルールは[image_(名前イニシャル)_名字ローマ字]でつけています。

（命名に使用できるのは半角英数字と「_」アンダースコアです。）

(5)画像を指定します。

管理画面からメディアページへ移動します。使用したい画像をクリックして表示された「添付ファイルの詳細」からURL欄をコピーして下記コードの[画像URL]となっているの赤字部分に貼り付けます。

<a href="[画像URL]" target="_blank" class="light-box-link" data-lightbox="[ギャラリーの名前]" rel="noopener">
        <img src="[画像URL]" />