Slide 1
Slide 1 text
WordPressハンズオン
話す⼈: ⼋⽊恵⼀
Slide 2
Slide 2 text
お品書き
1. 座学: CMSの解説
2. 座学: WordPressの導⼊事例や機能概要
3. 実践: WordPressの簡単な導⼊と設定
4. WordPressであった怖い話から学ぶカスタマイズ
Slide 3
Slide 3 text
今⽇やらないこと
Web上からみられるWordPressの構築
テーマやプラグインの作成
おすすめのテーマやプラグインの紹介
Slide 4
Slide 4 text
座学: CMSの解説
概要
CMSとはContents Management Systemの略
⽇本語ではコンテンツ管理システム
⽂章や写真、⾳楽などのコンテンツをWebサイトに掲載しやすくする仕組み
Slide 5
Slide 5 text
CMSを使わない場合
⼿順
1. HTMLファイルを書き換え
HTMLタグなどの知識が必要
2. ファイルアップロード
FTPクライアントが必要
Slide 6
Slide 6 text
CMSがある場合
1. CMSにログイン
2. CMSの記事編集画⾯を開く
3. 書きたい記事を書く
画像はドラッグアンドドロップでOK
Slide 7
Slide 7 text
⽐較
CMSを使わない場合
⻑所
ページの表⽰速度がはやい
サーバーの選択肢が多い
サーバーの費⽤が安い、あるいは無料
短所
⼤量のファイルを変更する場合などに⼿間がかかる
複数⼈で管理する場合の仕組み作りが⼤変
⽇記のように更新頻度の⾼いコンテンツだと、更新の⼿間が壁になる
Slide 8
Slide 8 text
CMSがある場合
⻑所
記事を書く、プレビュー、投稿で作業が完了する
複数⼈で記事の投稿や投稿前のチェックが⾏える
ブラウザとネットワークがあればどこからでも更新できる
短所
設置できるサーバーが限られる
CMS⾃体の管理が必要になる
CMS本体やプラグイン、テーマなどのアップデート
ユーザの管理
セキュリティ⾯の対応
Slide 9
Slide 9 text
座学: WordPressの導⼊事例や機能概要
導⼊事例
WordPress.com
WordPress.com
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
神⼾芸術⼯科⼤学
神⼾芸術⼯科⼤学 | 神⼾芸術⼯科⼤学はデザインとアートの総合⼤学です。質の
⾼い芸術の感性を育てることを⽬標に全国トップクラスの環境を整えています。
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
TechCrunch Japan
TechCrunch Japan - 最新のテクノロジーとスタートアップ・Webに関するニュー
スを配信するブログメディア
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
機能概要
記事の投稿
固定ページ
ブログ
プラグインやテーマによるカスタマイズ
ユーザ管理
ユーザの追加・削除
権限の設定
Slide 16
Slide 16 text
実際に使うには
WordPress.com を使う
アカウントを作るだけで利⽤できる
カスタマイズの⾃由度はやや下がる
WordPressをサーバーにインストールする
カスタマイズの⾃由度が⾼い
レンタルサーバなどを⽤意する必要がある
さくらのレンタルサーバ、ロリポップ︕レンタルサーバー、XREAなど
Slide 17
Slide 17 text
実践: WordPressの簡単な導⼊と設定
今回は実験⽤にパソコン上にWordPressが動く環境を作る
Webサイトとしては公開できない点に注意
Slide 18
Slide 18 text
インストール
1. サイトからダウンロード
2. ファイルを展開する
3. 展開したフォルダの中にあるファイルを開く
Windows: Start-InstantWP.bat
macOS: Start-InstantWP
2019/04/13時点の最新版5.3.6では正常に動作しない不具合がある。
5.3.4を利⽤する
Slide 19
Slide 19 text
ログインから⽇本語化まで
1. InstantWPの WordPress Admin を押す
2. ブラウザにWordPressのログイン画⾯が表⽰されたら、ID: admin、パスワード:
passwordでログイン
3. Settings にある General を開く
4. Site Language を ⽇本語 にする
5. Timezone を Tokyo にする
6. 画⾯の下のほうにある Save Changes を押す
7. ダッシュボードが⽇本語で表⽰されたらOK
Slide 20
Slide 20 text
記事の投稿
1. ダッシュボードの左メニューの 投稿 にある 新規追加 を押す
2. 編集画⾯が表⽰されたら、タイトルと本⽂を⼊⼒する
3. 編集画⾯右上の プレビュー で⽂章やデザインが正しいかを確認する
4. 問題がなければ、編集画⾯右上の 公開する を押す
Slide 21
Slide 21 text
テーマの変更
1. ダッシュボードの左メニューにある 外観 を押す
2. テーマ⼀覧画⾯が表⽰される
3. 変更したいテーマにカーソルを乗せて、 テーマの詳細 と表⽰されたらそれを押す
4. ライブプレビュー を押すと⾒た⽬が確認できる
5. 確定だったら 有効化 を押す
Slide 22
Slide 22 text
テーマの追加
1. ダッシュボードの左メニューにある 外観 を押す
2. テーマ⼀覧画⾯の左上にある 新規追加 を押す
3. WordPress.comで公開されているテーマが表⽰される
4. 好きなテーマにカーソルを乗せて、 テーマの詳細 と表⽰されたらそれを押す
5. 左上にある インストール を押すと、インストールがはじまる
6. インストールが完了すると インストール が 有効化 になる。 有効化 を押す
7. サイトを表⽰ リンクを押して、変わったかを確認する
Slide 23
Slide 23 text
プラグインの追加
1. ダッシュボードの左メニューにある プラグイン を押す
2. プラグイン⼀覧画⾯の左上にある 新規追加 を押す
3. 左上にある インストール を押すと、インストールがはじまる
4. インストールが完了すると インストール が 有効化 になる。 有効化 を押す
Slide 24
Slide 24 text
ユーザの追加
1. ダッシュボードの左メニューにある ユーザー を押す
2. ユーザー⼀覧画⾯の左上にある 新規追加 を押す
3. 新規ユーザーの追加画⾯で、ユーザー情報の⼊⼒をする
4. 画⾯下部の 新規ユーザーを追加 を押す
Slide 25
Slide 25 text
WordPressであった怖い話から学ぶカスタマイズ
事例1 突然、ページが真っ⽩に
WordPress本体の更新通知
本体の更新を⾏う
ページが真っ⽩に!
Slide 26
Slide 26 text
何が起きたのか︖
原因: 表⽰を⾼速化するためのプラグインとWordPressの相性が悪くなった
対処: FTPクライアント経由で問題のプラグインを直接、削除した
予防策: データベース関係の⾼速化プラグインの導⼊を避ける
Slide 27
Slide 27 text
事例2 レイアウトが崩れる
ファイルを圧縮・最適化し、サイトの表⽰を⾼速化するプラグインをインストー
ル
サイトのレイアウトが崩れた!
Slide 28
Slide 28 text
何が起きたのか︖
原因: レイアウトに関連するファイルの読み込みタイミングがずれた
対処: プラグインの設定を変更した
Slide 29
Slide 29 text
カスタマイズのコツ
テーマやプラグインはWordPress本体の機能を利⽤して成り⽴っている
WordPress本体のアップデートに対応しているものを選ぶ
公式サイトのライブラリに更新⽇付と対応バージョンが書かれている
Slide 30
Slide 30 text
利⽤するプラグインやテーマの数は少なくする
⼤量に⼊れると動作の確認やトラブルが起きたときに絞り込みが⼤変なため
Slide 31
Slide 31 text
実験環境で試す
本番以外にWordPressが動く環境を⽤意して、そちらで試す
Instant WP(今⽇使ったソフト)
XAMPP
各種仮想マシン
さくらのレンタルサーバのステージング環境
Slide 32
Slide 32 text
まとめ
サイトの更新頻度が⾼い場合は、CMSの利⽤を検討しよう
強⼒で便利な道具だけど、使い⽅には気を付けよう