Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

5,126 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

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

  1. 1. ローカルでのWordPress開発環境に向けて WordBench 三重 5月度勉強会 山尾 雅也
  2. 2. 自己紹介 山尾 雅也 ● 三重県桑名市育ち&在住 ● WordPressに関わったのはVer.2.1から。でも長期間、間が空いているた め、再度勉強中 ● WordBench 名古屋 WordBench 三重 運営スタッフ ● WordFes Nagoya 2016・2017 スタッフ (2017 広報担当) ● マークアップエンジニアやSEOマーケティング担当を経験し、サーバ構 築も行うんですが、デザインだけは今だに難航中 ● 天然で方向音痴。カーナビのGPSも狂わせるほど
  3. 3. ● レンタルサーバでテーマ・プラグインを試すのはこわい ● 使っているテーマに追加・編集してみたい ● XAMPP・MAMPを使っていて他の開発環境も試してみたい こんな経験ありませんか? でも、ローカル開発環境ってどんなもの? 開発環境を作るのって難しいんじゃないの? ↓そこで ダウンロード&クリックでWordPressに特化したローカル環境構築出来る 「Local by Flywheel」を題材として進めていきます。
  4. 4. 5/12 WordBench Nagoya 5月度に 「WordPressのローカル開発環境構築」として登壇しています。 今日のセッションでは前半に凝縮し、説明不足だった部分を後半に追加しています 今回のセッションにあたって https://www.slideshare.net/masayayamao5/wordpress-97582059 https://www.youtube.com/watch?v=kAxINe8_TUk
  5. 5. 1. Local by Flywheel での開発環境構築と機能について 2. ローカル環境などのデータベースの移動について 3. ローカル環境へテーマ・プラグインの導入や編集について アジェンダ
  6. 6. 1. Local by Flywheel での開発環境構築と機能について
  7. 7. https://local.getflywheel.com/ Local by Flywheel
  8. 8. Local by Flywheel Local by Flywheel は VirtualBox + Docker を利用しています VirtualBox 1台のPCで複数個のOSが同時実行出来る ソフトウェア https://www.virtualbox.org/ https://www.docker.com/ Docker Vagrant同様にコード化されたファイルで同じ環 境が作れる プロセス単位で動かす為、軽量で動かせる
  9. 9. Vagrant 開発環境の構築と共有を簡単に行う為のツール https://www.vagrantup.com/ (補足)Vagrantとは
  10. 10. ● BIOSで「VT-X」「AMD-V」を有効にする Local by Flywheelのインストール時に以下のアラートが 出た場合はBIOSの設定変更が必要です。 Local by Flywheel の Windows対応
  11. 11. 【BIOSの起動について】 使っているPCのメーカーのサポートに必ず書いてあります。 「(メーカー名) BIOS」で検索をすると、 操作手順が書いてありますので、確認をしてください。 【BIOSの設定項目について】 Advanced タブにある Intel(R) Virtualization Tech こちらを [Disabled] → [Enabled] に変更してください。 Windows対応 BIOSについて
  12. 12. ● 新規でサイトを作成 (Apacheやnginx・PHPのバージョンの変更化) ● WordPressのページ・WordPressの管理画面のリンク ● WordPress本体の保存フォルダのリンク ● データベースのページ説明 ● HTTPSへの対応 ● メールの送受信を仮想で実装 ● ローカルの様子をインターネット上に一時的に公開 ● SSH・WP-CLIについて Local by Flywheel で出来ること
  13. 13. 「ADMINER」 ↓ インターフェイスが 「phpAdmin」 に近いDBの管理画面 データベースの管理画面
  14. 14. データベースの管理画面 > Adminer
  15. 15. 「TRUST」をクリック  証明書が発行されHTTPSに対応します HTTPS の設定
  16. 16. ngrokを使って一時的に公開できる トンネリングサービス利用 アドレスは生成するたびに変わります Local by Flywheel のサーバを一時的に公開
  17. 17. MailHogを使ってローカル内でメール機能が使えます メール機能について
  18. 18. 2. ローカル環境などのデータベースの移動について
  19. 19. データベースをローカル等へ移動について 【順序】 1. データベースのバックアップを行い保存する https://wpdocs.osdn.jp/データベースのバックアップ ・phpMyAdminやAdminerでのエクスポート ・プラグイン「BackWPup」「UpdraftPlus」等を利用 2. データベースがすでにあれば全て削除 3. バックアップを取ったSQLファイルをインポート 4. データベース内のドメイン名の変更 (※注意 GUIDのカラム内のドメインを変更しない) ・Database Search and Replace ・wp-cli
  20. 20. 「GUID」って? https://wpdocs.osdn.jp/サイト_URL_の変更 (Codexより) "GUID" という言葉は "Globally Unique Identifier (グローバル一意識別子)" の略です。 このフィールドには「すべてのスペースと時間に置いてユニークであり、 絶対に変更されない」という投稿の識別子が含まれています。 GUID フィールドは主に、WordPress のフィードを作るのに使われます。 GUIDを変更する→ RSSフィードで今までの過去記事も すべて新規投稿の扱いで通知されてしまう
  21. 21. Database Search and Replace Database Search and Replace https://interconnectit.com/products/search-and-replace-for-wordpress-databases/
  22. 22. Database Search and Replace Database Search and Replace の設置場所 WordPress本体のフォルダに設置 Local by Flywheelの場合は 「app > public」の中に設置すればOK ※アクセスしやすいように  フォルダ名を変更すると使いやすいです
  23. 23. Database Search and Replaceの使い方 検索するドメイン名 変換するドメイン名 dry run : 仮実行(実行される内容が下に出ます) live run : 実行 テーブル内の置換しない列を指定 「guid」を入力
  24. 24. WP-CLI によるドメイン名の変更方法 SSHで接続して wp search-replace 'example.dev' 'example.com' --skip-columns=guid ● example.dev 検索するドメイン名 ● example.com 変換するドメイン名 ● --skip-columns=guid GUIDのcolumnを変更しない
  25. 25. 3. ローカル環境へテーマ・プラグインの導入や編集について
  26. 26. 実際に行う内容について ● テーマ「Lightning」「Sydney」の導入 ● プラグインの導入 ○ 「Gutenberg」 ○ 「Contact Form 7」 ○ 「Gutenberg」 ○ 「Elementor Page Builder」 ● テーマを実際に編集を行う ○ カテゴリ一覧の表示 ○ ぱんくずリストの表示 テーマ・プラグインの導入と編集
  27. 27. ● Vagrant系 ○ VVV https://varyingvagrantvagrants.org/ ○ vccw http://vccw.cc/ ● Docker系 ○ Wocker https://wckr.github.io/ 他のWordPressに特化した開発環境の紹介
  28. 28. ご静聴ありがとうございました
  29. 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. 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/ 参考にさせていただいたサイトについて

×