MENU
WordPressの使い方/カスタマイズ/Tips/コラム的な事を徒然と。
WPtips-WordPressのカスタマイズTips集-
  • プライバシーポリシー
  • About
WPtips-WordPressのカスタマイズTips集-

dockerでGutenbergのブロック開発の環境を整える

2019 4/19
カスタマイズ
2018.12.08 2019.04.19

今まで使ってきたWordPressのClassic Editorの開発サポート終了が2020年までと発表された今、新たな新エディターであるGutenbergに切り替えざるを得なくなりました。

そこでGutenbergのブロック開発をするために、開発環境を一新しました。
今までVVVを使用してきましたが、dockerで初開発です。

目次

dockerで開発環境を整えた経緯

早めに切り替えて慣れた方が良いとは思っているものの、投稿を半自動化して、パソコンで管理画面から投稿する事がなくなった私は、Gutenbergを使う意味があるのだろうか?と自問自答してしまう。

パソコンで投稿する時は、Add Quicktagの恩恵を受けていたので、それに変わるものと言ったら、カスタムブロックを作るしかありません。

そうなると、早々に開発環境を整えて、新しい技術も覚えなくてはいけなくなってしまいました…非常に面倒💧

この面倒臭がりな私が最短でGitenbergの開発環境を整える方法を記載したいと思います。

事前の開発環境の準備

今までWordPressのプラグイン開発と言ったら、開発環境を整える為にVVV(Varying Vagrant Vagrants)かVCCWを使用していたと思います。

※VCCWは開発者がWordPressの開発から引退するという事で衰退することになります。VCCWを使用している人は、今後VVVに移行することになると思います。

Gutenbergでブロックを作るための例的なgutenberg-examplesが上がっていたので読んでみると、ここに来てWordPressのGutenbergの推奨開発環境がdockerになっていることに気づきました。

え?docker?

dockerって、どちらかというとデザイナー向けじゃなかった?

しかし、Gutenbergのサンプルコードを扱う上で、dockerと書いてある以上、それに従わざるを得ない。

今後、WordPressの開発環境はdockerの流れになるんじゃないかと思っています。

確かに…VVV重いですからね…

という事で、Gutenbergのブロックを作る前提はdocker開発環境を整えるということになります。

dockerをインストールするにあたって参考にしたサイト

色んなサイトでdockerでWordPressの開発環境を整える方法が紹介されていましたが、どれも情報が古かったので、上手くインストール出来ず。

やはりここはDocker公式サイトに則ってやる方が良いです。

docker-compose.ymlを読み込む方法でないと上手くWordPressをローカルで表示するまでに辿り着けませんでした。

参考サイトを見ても良いですが、docker-compose.ymlのバージョン記載が3.3(2018年11月現在)と記載されているのを確認してからにしましょう。

ホスト上のディレクトリをマウントして開発環境を整える

VVVと勝手が異なるので、フォルダ階層はどこかな?と一瞬探してしまいました(汗)

よくよく考えて見ればdockerは仮想なので、docker exec -it コンテナ名 bashとコマンドで打って、cdで階層移動しましょう。

でも面倒臭いですよね?!

そこで、既にVVVで作った開発環境フォルダとマウントする方法があります。

docker公式サイトに記載されています。

データ・ボリュームとしてホスト上のディレクトリをマウント

※私は用心を取って一応別フォルダにしましたが、問題なさそうだったらVVVの開発環境フォルダとマウントしようと思います。

docker run -v /Users/<パス>:/<コンテナ内のパス> ...

と書いているので、テーマフォルダとプラグインフォルダをマウントしたいなら下記の記述になると思います。
私の場合は、ユーザー名直下にlocal-wordpressフォルダを作って、その中にプラグインフォルダとテーマフォルダを入れました。

docker run -v /Users/ユーザー名/マウントしたいトップフォルダ/plugins/:/var/www/html/wp-content/themes/
docker run -v /Users/ユーザー名/マウントしたいトップフォルダ/themes/:/var/www/html/wp-content/plugins/

マウントできると、仮想からいじらなくても、local-wordpressフォルダにプラグインを入れれば自動的にdocker側が認識してくれますし、ビルドすれば自動的にdockerの仮想サイトで変更場所が反映されています。

便利!

ちなみにdocker-compose.ymlには下記が記述されています。


version: '3.3'

services:
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: somewordpress
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress

wordpress:
depends_on:
- db
image: wordpress:latest
ports:
- "8000:80"
restart: always
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
volumes:
- ./themes/:/var/www/html/wp-content/themes/
- ./plugins:/var/www/html/wp-content/plugins
volumes:
db_data:

dockerをインストールしてつまづいた事

初めてのdockerでやはり躓きました…。

  • ローカルホストに繋がらない
  • マウント出来ない

試行錯誤しながらやっていたので、色々知らずにいじってしまったのか全くうまくいきませんでした。
ですが、dockerをGUIから全てデータを削除してから立ち上げたら、全てうまくいきました(謎

結局原因分からない…けれど、まぁ上手く動いたのでいっか(汗)

上手く行かなかったら、画面右上のツールバーにいるクジラを叩いて、Preferencesをクリックして、一番右にある爆弾をクリックして全てリセットしましょう。

最初からやった方がうまくいく可能性が高いです(^_^;)

ITエンジニアになる!  チャレンジDocker仮想化環境構築入門

ITエンジニアになる! チャレンジDocker仮想化環境構築入門

小島 一也
3,300円(02/26 19:04時点)
発売日: 2018/08/21

Amazon楽天ブックス

Amazonの情報を掲載しています

docker&Gutenbergの関連記事

  • カテゴリーとタグのトップページをGutenbergで作り込む方法
  • GutenbergはClassic Editor(クラッシックエディター)を超えられるのか?
  • Gutenbergでブロックをブロックカテゴリーで管理する方法
  • Gutenbergでreact-fontawesomeを使う方法
  • Gutenberg の次期フェーズについて

今売れているプログラミングの本

  • 1位Python 1年生 体験してわかる...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
  • 2位Python2年生 データ分析のし...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
  • 3位Python2年生 スクレイピング...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
  • 4位スッキリわかるJava入門(実...
    中山清喬 インプレスBKSCPN_【bookーfestivalーthr】 スッキリ ワカル ジャバ ニュウモン ナカヤマ,キヨ...
  • 5位現場で使える!pandasデータ...
    機械学習エンジニア&データサイエンティスト必携! 初学者でもpandasによる前処理手法がわかる 【本書...

今売れているデザイン本

  • 1位1冊ですべて身につくHTML & C...
    Mana SBクリエイティブイッサツデスベテミニツクエイチティーエムエルアンドシーエスエストウェブデザイ...
  • 2位沈黙のWebライティング ーWeb...
    ※本書は固定レイアウト型の電子版です 【SEOのためのライティング教本の決定版! 「成果が上がる」文章...
  • 3位UIデザインの教科書[新版] ...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
  • 4位大人女子デザイン 女性の心を...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
  • 5位Adobe XDではじめるWebデザイ...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
カスタマイズ
dockerGutenberg
  • GutenbergはClassic Editor(クラッシックエディター)を超えられるのか?
  • Gutenberg の次期フェーズについて

この記事を書いた人

奏音桃のアバター 奏音桃

WordPress1X歴のテーマ開発者がWordPressの有料テーマを購入したのがキッカケで、WordPressのカスタマイズTipsを纏めています。

関連記事

  • Gutenbergでreact-fontawesomeを使う方法
    Gutenbergでreact-fontawesomeを使う方法
    2018.12.05
  • post_thumbnail_htmlフックを使って、画像周りを一括管理する方法
    post_thumbnail_htmlフックを使って、画像周りを一括管理する方法
    2019.04.23
  • WordPressのテーマやプラグイン移行時に、メタディスクリプションを一括移行する方法
    WordPressのテーマやプラグイン移行時に、メタディスクリプションを一括移行する方法
    2019.04.26
  • WordPressで回遊率を高めるタグ関連記事を出力するカスタマイズ
    WordPressで回遊率を高めるタグ関連記事を出力するカスタマイズ
    2018.08.13
  • Gutenbergでブロックカテゴリーを作成する方法
    Gutenbergでブロックをブロックカテゴリーで管理する方法
    2018.12.04

コメント

コメントを残す コメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

  1. ホーム
  2. カスタマイズ
  3. dockerでGutenbergのブロック開発の環境を整える
人気記事
  • dockerでGutenbergのブロック開発の環境を整える
    WordPressのテーマやプラグイン移行時に、メタディスクリプションを一括移行する方法
    2019/04/26
    カスタマイズ
  • dockerでGutenbergのブロック開発の環境を整える
    Gutenbergでreact-fontawesomeを使う方法
    2018/12/05
    カスタマイズ
  • dockerでGutenbergのブロック開発の環境を整える
    WordPressで回遊率を高めるタグ関連記事を出力するカスタマイズ
    2018/08/13
    カスタマイズ
  • dockerでGutenbergのブロック開発の環境を整える
    post_thumbnail_htmlフックを使って、画像周りを一括管理する方法
    2019/04/23
    カスタマイズ
  • dockerでGutenbergのブロック開発の環境を整える
    dockerでGutenbergのブロック開発の環境を整える
    2018/12/08
    カスタマイズ
New Entry
  • WordPressの有料テーマ【JIN】から【SWELL】に移行した理由
    WordPressの有料テーマ【JIN】から【SWELL】に移行した理由
    2020.06.17
    コラム
  • カテゴリーとタグのトップページをGutenbergで作り込む方法
    カテゴリーとタグのトップページをGutenbergで作り込む方法
    2020.06.16
    【SWELLテーマ】カスタマイズ
  • WordPressのテーマやプラグイン移行時に、メタディスクリプションを一括移行する方法
    WordPressのテーマやプラグイン移行時に、メタディスクリプションを一括移行する方法
    2019.04.26
    カスタマイズ
  • WordPressのテーマ【JIN】に画像読み込み遅延echo.jsを導入する
    WordPressのテーマ【JIN】に画像読み込み遅延echo.jsを導入する
    2019.04.24
    【JINテーマ】カスタマイズ
  • post_thumbnail_htmlフックを使って、画像周りを一括管理する方法
    post_thumbnail_htmlフックを使って、画像周りを一括管理する方法
    2019.04.23
    カスタマイズ
Category
  • 【JINテーマ】カスタマイズ(5)
  • 【SWELLテーマ】カスタマイズ(1)
  • カスタマイズ(6)
  • コラム(7)
Page
  • About
  • プライバシーポリシー
Archive

© 2020 WPtips.

目次
閉じる