ローカルでのWordPress開発環境に向けて WordBench 三重 5月度勉強会

1. ローカルでのWordPress開発環境に向けて
WordBench 三重 5月度勉強会
山尾 雅也

2. 自己紹介
山尾 雅也
● 三重県桑名市育ち＆在住
● WordPressに関わったのはVer.2.1から。でも長期間、間が空いているた
め、再度勉強中
● WordBench 名古屋 WordBench 三重 運営スタッフ
● WordFes Nagoya 2016・2017 スタッフ （2017 広報担当）
● マークアップエンジニアやSEOマーケティング担当を経験し、サーバ構
築も行うんですが、デザインだけは今だに難航中
● 天然で方向音痴。カーナビのGPSも狂わせるほど

3. ● レンタルサーバでテーマ・プラグインを試すのはこわい
● 使っているテーマに追加・編集してみたい
● XAMPP・MAMPを使っていて他の開発環境も試してみたい
こんな経験ありませんか？
でも、ローカル開発環境ってどんなもの？
開発環境を作るのって難しいんじゃないの？
↓そこで
ダウンロード＆クリックでWordPressに特化したローカル環境構築出来る
「Local by Flywheel」を題材として進めていきます。

4. 5/12 WordBench Nagoya 5月度に
「WordPressのローカル開発環境構築」として登壇しています。
今日のセッションでは前半に凝縮し、説明不足だった部分を後半に追加しています
今回のセッションにあたって
https://www.slideshare.net/masayayamao5/wordpress-97582059
https://www.youtube.com/watch?v=kAxINe8_TUk

5. 1. Local by Flywheel での開発環境構築と機能について
2. ローカル環境などのデータベースの移動について
3. ローカル環境へテーマ・プラグインの導入や編集について
アジェンダ

6. 1. Local by Flywheel での開発環境構築と機能について

7. https://local.getflywheel.com/
Local by Flywheel

8. Local by Flywheel
Local by Flywheel は VirtualBox ＋ Docker を利用しています
VirtualBox
１台のPCで複数個のOSが同時実行出来る
ソフトウェア
https://www.virtualbox.org/ https://www.docker.com/
Docker
Vagrant同様にコード化されたファイルで同じ環
境が作れる
プロセス単位で動かす為、軽量で動かせる

9. Vagrant
開発環境の構築と共有を簡単に行う為のツール
https://www.vagrantup.com/
（補足）Vagrantとは

10. ● BIOSで「VT-X」「AMD-V」を有効にする
Local by Flywheelのインストール時に以下のアラートが
出た場合はBIOSの設定変更が必要です。
Local by Flywheel の Windows対応

11. 【BIOSの起動について】
使っているPCのメーカーのサポートに必ず書いてあります。
「（メーカー名） BIOS」で検索をすると、
操作手順が書いてありますので、確認をしてください。
【BIOSの設定項目について】
Advanced タブにある
Intel(R) Virtualization Tech
こちらを
[Disabled] → [Enabled] に変更してください。
Windows対応 BIOSについて

12. ● 新規でサイトを作成
（Apacheやnginx・PHPのバージョンの変更化）
● WordPressのページ・WordPressの管理画面のリンク
● WordPress本体の保存フォルダのリンク
● データベースのページ説明
● HTTPSへの対応
● メールの送受信を仮想で実装
● ローカルの様子をインターネット上に一時的に公開
● SSH・WP-CLIについて
Local by Flywheel で出来ること

13. 「ADMINER」
↓
インターフェイスが
「phpAdmin」
に近いDBの管理画面
データベースの管理画面

14. データベースの管理画面 ＞ Adminer

15. 「TRUST」をクリック
証明書が発行されHTTPSに対応します
HTTPS の設定

16. ngrokを使って一時的に公開できる
トンネリングサービス利用
アドレスは生成するたびに変わります
Local by Flywheel のサーバを一時的に公開

17. MailHogを使ってローカル内でメール機能が使えます
メール機能について

18. 2. ローカル環境などのデータベースの移動について

19. データベースをローカル等へ移動について
【順序】
1. データベースのバックアップを行い保存する
https://wpdocs.osdn.jp/データベースのバックアップ
・phpMyAdminやAdminerでのエクスポート
・プラグイン「BackWPup」「UpdraftPlus」等を利用
2. データベースがすでにあれば全て削除
3. バックアップを取ったSQLファイルをインポート
4. データベース内のドメイン名の変更
（※注意 GUIDのカラム内のドメインを変更しない）
・Database Search and Replace
・wp-cli

20. 「GUID」って？
https://wpdocs.osdn.jp/サイト_URL_の変更
（Codexより）
"GUID" という言葉は
"Globally Unique Identifier (グローバル一意識別子)" の略です。
このフィールドには「すべてのスペースと時間に置いてユニークであり、
絶対に変更されない」という投稿の識別子が含まれています。
GUID フィールドは主に、WordPress のフィードを作るのに使われます。
GUIDを変更する→
RSSフィードで今までの過去記事も
すべて新規投稿の扱いで通知されてしまう

21. Database Search and Replace
Database Search and Replace
https://interconnectit.com/products/search-and-replace-for-wordpress-databases/

22. Database Search and Replace
Database Search and Replace の設置場所
WordPress本体のフォルダに設置
Local by Flywheelの場合は
「app > public」の中に設置すればOK
※アクセスしやすいように
フォルダ名を変更すると使いやすいです

23. Database Search and Replaceの使い方
検索するドメイン名 変換するドメイン名
dry run : 仮実行（実行される内容が下に出ます） live run : 実行
テーブル内の置換しない列を指定 「guid」を入力

24. WP-CLI によるドメイン名の変更方法
SSHで接続して
wp search-replace 'example.dev' 'example.com' --skip-columns=guid
● example.dev 検索するドメイン名
● example.com 変換するドメイン名
● --skip-columns=guid GUIDのcolumnを変更しない

25. 3. ローカル環境へテーマ・プラグインの導入や編集について

26. 実際に行う内容について
● テーマ「Lightning」「Sydney」の導入
● プラグインの導入
○ 「Gutenberg」
○ 「Contact Form 7」
○ 「Gutenberg」
○ 「Elementor Page Builder」
● テーマを実際に編集を行う
○ カテゴリ一覧の表示
○ ぱんくずリストの表示
テーマ・プラグインの導入と編集

27. ● Vagrant系
○ VVV https://varyingvagrantvagrants.org/
○ vccw http://vccw.cc/
● Docker系
○ Wocker https://wckr.github.io/
他のWordPressに特化した開発環境の紹介

28. ご静聴ありがとうございました

29. 【 Local by Flywheel 】
● WordPressのローカル環境のためのGUIツール”Local by Flywheel”が便利 | Capital P
https://capitalp.jp/2017/01/05/local-by-flywheel/
● WordPressローカル環境「Local by Flywheel」が有能ツールだったので良いとこ言いたい | 寝ログ
https://nelog.jp/local-by-flywheel
● Local by Flywheelを導入してWordPress開発環境を構築しよう | 株式会社マグネッツ
https://magnets.jp/web_design/8023/
● WordPressローカル環境の構築にはこれだ！「Local by Flywheel」が超絶簡単で使いやすいぞ！ |
JunJunWeb.net
https://junjun-web.net/tool/local-by-flywheel/
参考にさせていただいたサイトについて

30. 【 バックアップのプラグインや方法 】
● BackWPupでWordPressをバックアップしてみたがとても簡単だった | はづきラボ
https://hazukilab.com/backwpup/
● WordPressのバックアップ 有名プラグインbackWPupの使い方 | Webst8
https://webst8.com/blog/wordpress-backup-plugin/
● 「Search Replace DB」データベースのドメイン名を変更するツール
https://interconnectit.com/products/search-and-replace-for-wordpress-databases/
● WordPressのドメイン変更に必携のツール「Search Replace DB ver3.1」 | kira-ism
http://kira-ism.com/archives/4358
● ドメイン変更を伴うWordPress引っ越し ローカル環境への移行手順 | Webst8
https://webst8.com/blog/wordpress-transfer-local-pc/
● WordPress のドメイン名やURLを変える際の GUID 問題のちゃんとした話 | Capital P
https://capitalp.jp/2017/01/25/do-not-change-the-guid/
参考にさせていただいたサイトについて