WordPress ボトムアップ

WordPress以前の基礎から企業サイトの基本まで

version 1.0

toiee Lab LIVE™ textbook for Learning Facilitator
© 2017 toiee Lab (toiee.jp)


講座資料

[wc-restrict id=”5716,6004″ wcr_id=”10534″ message=”講座資料を見るには、お申し込みが必要です”]

以下のリンクを「副クリック」し、保存してください

研究用資料


[/wc-restrict]

ワークショップ動画

イントロ

講座の導入です。講座のゴールなどに触れます。

開始 終了 所用時間
0:00 0:05 5min

設計意図

ワークの進行

[vimeo 236369606 w=640 h=360]
1

1. 話す

ポイント

ウォーミングアップ

学習に取り組みやすくするための、ウォーミングアップのワークです。

開始 終了 所用時間
0:05 0:25 20min

設計意図

ワークの進行

1. Good & New

[vimeo 236369684 w=640 h=360]

ポイント

2. Think & Listen

[vimeo 236369819 w=640 h=360]
3

ポイント

3. 発表する

[vimeo 236377167 w=640 h=360]

4. まとめ

[vimeo 236369936 w=640 h=360]

ポイント

「探求して確かめる」を確かめる

[wc-restrict id=”5716,6004″ wcr_id=”10534″ message=”以降の動画を見るには、お申し込みが必要です”]

この講座のポイントである、「探求して確かめる」を練習する。URLとWebページの関係を、実験を通して理解するワーク。

開始 終了 所用時間
0:25 1:10 45min

設計意図

ワークの進行

1. 説明する

[vimeo 236377257 w=640 h=360]

2. ワークの説明

ポイント

3. 探求

ポイント

4. 振り返り

5. 探求を続ける

ポイント

5. 発表

[vimeo 236369894 w=640 h=360]

ブラウザをマスターする

[vimeo 236377491 w=640 h=360]

ブラウザの基本的な機能をマスターする。「探求して確かめる」を実践するワーク。

開始 終了 所用時間
1:10 1:35 25min

設計意図

ワークの進行




1. 説明する

[vimeo 236377491 w=640 h=360]

2. 探求して確かめる

ポイント

3. 振り返り

4. 探求

5. 振り返り

[vimeo 236377556 w=640 h=360]

休憩

開始 終了 所用時間
1:35 1:45 10min

ログイン、ログアウト、ユーザーの概念を学ぶ

ログイン、ログアウト作業を通して、ユーザー状態と、管理者状態の違いを発見する。

開始 終了 所用時間
1:45 2:15 30min

設計意図

ワークの進行

1. 説明する

[vimeo 236370311 w=640 h=360]

ポイント

2. 探求



ポイント

3. 発表

4. 振り返り

[vimeo 236369996 w=640 h=360]

ポイント

アドレスバーを見る

アドレスバーに注目することを通して、ここまでのワークで学んだことの確認と振り返りを行う。

開始 終了 所用時間
2:15 2:35 20min

設計意図

ワークの進行


1. 説明する

[vimeo 236377729 w=640 h=360]

2. ワークをする

3. 振り返り

ポイント

休憩

1時間の休憩をとる。お昼ご飯をこの間に食べてもらうなどする。

CMSのメンタルモデルを作る

ここまでで、すべてのワークのおよそ半分が終了。CMSの仕組みの大枠をつかむために、似た仕組みのものを考えるワーク。

開始 終了 所用時間
0:00 0:30 30min

設計意図

ワークの進行

1. 説明する

[vimeo 236370561 w=640 h=360]

ポイント

2. チームで話し合う

3. 発表

[vimeo 236370561 w=640 h=360]

ポイント

WordPressの操作を通して、CMS・WordPressについての理解を深める

前のワークで、WordPressの仕組みの大枠をつかんでいる状態。実際に操作する中で、CMS・WPについての理解を深める。

開始 終了 所用時間
0:30 1:00 30min

設計意図

ワークの進行




1. 説明する

[vimeo 236371784 w=640 h=360]

2. 探求する

3. 発表

3. 振り返り

[vimeo 236371993 w=640 h=360]

4つの要素

WordPressの4つの要素について探求することで、WordPressの仕組みをさらに理解する。

開始 終了 所用時間
1:00 1:30 30min

設計意図

ワークの進行

1. 説明する

[vimeo 236372576 w=640 h=360]

2. 探求する

ポイント

3. 発表

[vimeo 236378334 w=640 h=360]

休憩

開始 終了 所用時間
1:30 1:40 10min

どのように設計するか?

Webサイトを作る場合の設定と、ブログを作る場合の設定を読んで、実際に行ってみて、なぜそのように設定するのか?を話し合うワーク。

開始 終了 所用時間
1:40 2:10 30min

設計意図

ワークの進行




1. 説明する

[vimeo 236373041 w=640 h=360]

2. 探求して、話し合う

3. 発表する

[vimeo 236372654 w=640 h=360]

Sydneyで探求する

アドレスバーに注目することを通して、ここまでのワークで学んだことの確認と振り返りを行います。

開始 終了 所用時間
2:10 2:40 30min

設計意図

ワークの進行



1. 説明する

2. 探求

ポイント

3. 発表

まとめ

[vimeo 236373246 w=640 h=360]

アドレスバーに注目することを通して、ここまでのワークで学んだことの確認と振り返りを行います。

開始 終了 所用時間
2:40 2:55 15min

設計意図

ワークの進行

1. 説明する

ポイント

2. Think & Listen

3. シェアする

4. まとめ

ポイント
– できるようになったことだけでなく、探求の仕方についても振り返ってもらう
– あらかじめ用意しておいた台詞を使うのではなく、その日起こったことに触れながらまとめると良い


特典マニュアル

1 WordPressとは?

ここでは、WordPressの全体像を図解で紹介しています。
なぜ、全体像から始めるかというと、いきなり具体的なマニュアルから入ると、具体的な操作をしている時に「自分が今なにをしているのかわからなくなる」からです。
一時的に実現したいことは達成できるかもしれませんが、何かしらの問題が発生した時に、対処のしようがありません。
そこで、まずは「ザッ」と全体像を理解しましょう。よくわからないところがあっても構いません。「へー、そうなんだー」となんとなく見てみてください。

WordPressの全体像を知る

[vimeo 218103561 w=640 h=360]

画像解説

(1) WordPressは、CMS(Content Managment System) と呼ばれるもので、高機能なWebサイト(Webシステム)を作る仕組みのことを言います。

(2) WordPressには、様々なプログラムのファイルがあります。ファイルには「編集した時に、データベースに保存しておくもの」と「閲覧する時にhtmlとして表示するもの」の2つがあります。データベースはWordPressとは別の「MySQL」という仕組みを利用しています。

(3) WordPressは「iPhone」のようなものです。アプリを入れることで様々なことができるようになるようにWordPressは、「プラグイン」や「テーマ」を入れることで、あなたが実現したいWebサイトを作ることができます。

(4) WordPress自体の操作はそこまで難しくありませんが、「プラグイン」や「テーマ」の操作が難しい場合があります。そこで、それぞれ1個1個の使い方を覚えるのではなく「その場で学ぶ力」や「本質」を学ぶことがマスターの鍵です。

時々見よう

私たち人間は、「抽象的なものは、具体な体験を通じて」学びます。
WordPressの全体像も、一度見ただけでは理解できません。実際にインストールして、データベースと接続して、編集して、、、と具体的な作業を繰り返す中で、少しずつ理解をしていくことができます。
ぜひ、今回の一度だけではなく、何度も戻ってきて、動画を再生してみてください。


2 WordPress の学び方

まずは、「WordPressの学び方」を知るところから始めましょう。
私たちは、人から教えられたことを繰り返すでけでは、決して何かを身につけることはできません。思考錯誤して、実際に手を動かした時に理解します。

WordPressの学び方を理解しよう

[vimeo 207587049 w=640 h=475]

「その場で学ぶ力」が鍵

WordPressをはじめとするITをバリバリに使いこなしている人たちは、新しいテーマやプラグイン、便利機能が出る度に、分厚い本を買って、読み終わって、パソコンを操作するというような手順で学んではいません。
彼らは、困った「その場」で学び、解決しています。
困った瞬間に「原因の仮説をたて」「仮説を確かめるための実験を考え出し」「実際に実験をする」という手順でどんどん学んでいます。
つまり、ITがバリバリになるためには、「豊富な知識を身につける」ことではなく、「その場で学ぶ」力を鍛えることが鍵です。
この力を向上させる効果的なワークがあります。
それが「5つのステップ」です。
WordPressを触る時に、この5つのステップを意識して使うだけで、目の前の課題を解決する方法だけでなく、操作をすればするほどITに詳しい状態を生み出すことができます。

ITバリバリになる5つのステップ

>>ここをクリックして、5ステップの資料をダウンロード


3 編集画面とサイト

WordPressには、2つの画面があります。
1つ目は「ダッシュボード」と呼ばれる編集画面です。ダッシュボードではサイトに必要な文字や画像、ページなどを編集できる画面です。
2つ目は「サイト」です。実際に作成しているサイトを確認することができます。
「ダッシュボード」の画面で必要な情報を入力し、「サイト」で確認しながらWebサイトを作ります。

ダッシュボード ( 編集画面 ) サイト ( 実際の画面 )

 

WordPressの操作を、「ざっくり」理解しよう

大切なことは「すべてを覚える必要なない」ということです。なんとなく「へー、編集画面はこんな感じになっているのね」「こんな感じで触っていけば、理解していけそう」と思うことができればOKです。

編集画面を操作してみよう

動画を見て、なんとなく「編集画面に慣れる方法」がイメージできたと思います。
早速WordPressの編集画面にログインして色々触って見ましょう。ここでも「その場で学ぶ力」を鍛えることができます。
好奇心のままに色々触ってみましょう。

探求のポイント

 

ダッシュボード と サイト を切り替える方法

(1) ページ左上のサイトタイトルにマウスを置いて、「サイトを表示」「ダッシュボード」を選択する

 
(2) 切り替わる


4 ログイン、ログアウト

WordPressには、2つの画面があります。
1つ目は「ダッシュボード」と呼ばれる編集画面です。ダッシュボードではサイトに必要な文字や画像、ページなどを編集できる画面です。2つ目は「サイト」です。実際に作成しているサイトを確認することができます。
「ダッシュボード」の画面で必要な情報を入力し、「サイト」で確認しながらWebサイトを作ります。

ダッシュボード ( 編集画面 ) サイト ( 実際の画面 )

ダッシュボード と サイト を切り替える方法

(1) ページ左上のサイトタイトルにマウスを置いて、「サイトを表示」「ダッシュボード」を選択する

 

2. ログインをする方法

(1) URLバーに「あなたのWebサイトのドメイン/wp-admin」と入力する
(2) ログイン画面が表示される
(3) 必要な項目を入力し、ログインを選択する
(4) ログイン完了

 

3. ログアウトをする方法

(1)ダッシュボードの画面右上の「こんにちは、〇〇さん」にマウスを置いて、ログアウトを選択する
(2)完了

1. ダッシュボード と サイト を切り替える方法

(1) ページ左上のサイトタイトルにマウスを置いて、「サイトを表示」「ダッシュボード」を選択する
(2) 切り替わる

 

2. ログインをする方法

(1) URLバーに「あなたのWebサイトのドメイン/wp-admin」と入力する
(2) ログイン画面が表示される
(3) 必要な項目を入力し、ログインを選択する
(4) ログイン完了

 

3. ログアウトをする方法

(1)ダッシュボードの画面右上の「こんにちは、〇〇さん」にマウスを置いて、ログアウトを選択する
(2)完了

 

4. パスワードを変更する方法

(1) ログイン画面下の「パスワードをお忘れですか?」を選択
(2) 登録しているメールアドレスを入力して、「新しいパスワードを取得」を選択
(3) 再設定用のメールが届くので再設定する

5 WordPressの4つの要素

WordPressは4つの要素で出来ています。どんなWebサイトも、この4つの要素をうまく組み合わせて作っています。
4つの要素とは

です。

4つの要素を詳しく見る

動画の前半部分で、4つの要素の紹介をしています。「あー、こんな感じね」とざっくり理解できればOKなので、気軽な気持ちでみましょう。

画像解説

(1) WordPressは、4つの要素(固定ページ、投稿ページ、メニュー、ウィジェット)から構成されます。

(2) 固定ページは「会社概要」「お問い合わせ」などの、動かないずっと固定されているページのことです。それに対して、ブログのように流れていくページを投稿ページと言います。それらは全てデータベースに格納されています。

(3) 固定ページ、投稿ページを含め、4つの要素は「テーマによって、どこに、どのように表示するか」が決められています。

(4)多く場合、テーマの初期設定ではフロントページには「投稿ページ」しか表示されなくなっているので、固定ページが表示されません。そこで固定ページを表示するためには、メニューを作る必要があります。

(5) メニューの項目と固定ページをリンクさせ、フロントページ内に表示をすることで、閲覧者は固定ページにアクセスできるようになります。

(6) 同様に、ウィジェットもフロントページ内のどこに表示をするのかを決めます

(7) つまり、テーマによって決められた配置に「どのような情報をおくか」を考えて、設計することでサイトをデザインすることができます。

(8)また、テーマを変更すると4つの要素の「場所、表示の仕方」を変更することができます。


6 固定ページ

ここでは、「固定ページ」でできる基本的な操作と、その方法を紹介しています。

新規固定ページ作成

(1) ダッシュボードの画面左の「固定ページ」を選択する

(2) 画面上部にある「新規作成」を選択する

(3) タイトルや本文を追加する

タイトルを入れる

(1) 編集したい固定ページを選び、「編集」を選択する

(2) タイトル部分を編集する

本文を入れる

(1) 本文部分を編集する

文章を装飾する

(1) 見出しをつける

(2) 太字にする

(3) 色を変更する

(4) 箇条書きする

(5) リンクを貼り付ける

 

画像を貼り付ける

(1) メディアを追加を選択

(2) ファイルをアップロードを選択 (既にアップした画像がある場合は、画像を選択し、「固定ページに挿入」を選択)

(3) 画像を追加する

(4) サイズを調整し、「固定ページに挿入」を選択

(5) 貼り付け完了

 

テーブル(表)を貼り付ける

(1) TinyMCE advanced というプラグインをインストールして有効化する
(2) 「テーブル」を選択して、追加したい表のマスの量を決める

(3) 完了

 

段組みする

(1) shortcodes ultimate というプラグインをインストールして、有効化する

(2) 固定ページの編集画面から「ショートコードを挿入」を選択する

(3) 「Columns」を選択する

(4)「ショートコードを挿入」を選択

(5) 段組の数を調整する (2つなら”1/2”と書いた箱を2つ、3つなら”1/3”と書いた箱を3つ用意する、)


(6) コンテンツを追加する

 

URL(パーマリンク)を変更する

(1) パーマリンクの「編集」を選択

(2) 変更後、Okを選択する

ページタイトルを表示しない設定をする

(1) Hide title というプラグインをインストールする

2) 固定ページの編集画面から、Hide titleにチェックボックスを入れる


7 投稿ページ

基本的に「固定ページ」の作り方と同じなので、ここでは投稿ページならではの機能を紹介します。

カテゴリーをつける

(1) カテゴリを作る

(2) 投稿ページの編集画面で、カテゴリにチェックを入れる

タグをつける

(1) タグを作る

(2) 投稿ページの編集画面で、タグを入力する


8 メニュー

メニューの作り方

(1) ダッシュボードの左部分から、「外観」=> 「メニュー」を選択する

(2) 新規メニューを選択して、メニュー名を追加し、メニューを作成する

(3) メニューに追加する固定ページにチェックを入れて、「メニューに追加」を選択する

(4) 固定ページの順番を、表示したい順番に入れ替える

(5) メニュー設定で、Webサイトのどこに表示させるのかを選択する

(6) 完了

ドロップダウンのメニューの作り方

(1) ドロップダウンにしたい項目を、ドラック&ドロップで「右にずらす」

(2) 完了


9 ウィジェット

ウィジェットとは、便利機能の塊のことです。
主に、サイドバーやフッター(ウィジェットエリアという)などに「何をおくか」「どうやっておくか」の設定を行うことができます。

サイドメニューの作り方

(1) メニューで、サイドメニューを作る


(2) ダッシュボードの左部分から、「外観」=>「ウィジェット」を選択

(3) カスタムメニューを選択し、「サイドバー」に追加する

(4) 「メニューを選択」から、先ほど作成したサイドメニューを選び、保存する

(5) 完了

 

フッターの作り方

(1) メニューでフッターを作る

(2) ダッシュボードの左部分から、「外観」=>「ウィジェット」を選択

(3) カスタムメニューを選択し、「フッター1」に追加する

(4) 「メニューを選択」から、先ほど作成したフッターを選び、保存する

(5) 完了


10 投稿と固定ページの違い

4つの要素の中の、「投稿ページと固定ページの違い」について詳しく解説をしています。
単に違いを紹介するだけではなく「違いのみつけ方」も紹介しているので、ぜひ「探求の仕方」に注意をしながらご覧下さい。

[vimeo 218367969 w=640 h=360] [/wc-restrict]

ティーチャー

[wc-restrict id=”5717″ wcr_id=”10561″ message=”WordPressボトムアップ – ティーチャー”]

ワークショップ進行レジュメ

以下のリンクを「副クリック」し、保存してください

  • 進行レジュメ
  • [/wc-restrict]