カテゴリー
開発環境 ホームページ製作

wordpressをdockerに複製する

wordpressサイトを自分のパソコンのdockerにコピーする

  1. レンタルサーバー(mixhost)にあるwordpressのコピーサイトを作る。
    1. コピーしたサイトで設定→表示設定より、検索エンジンがサイトをインデックスしないようにする。
    2. 簡単にログインできるよう、新規に管理者を作る。
    3. All-in-One WP Migrationをプラグインで入れる。
    4. 不要なプラグインを無効化し、削除する。
    5. All-in-One WP Migrationの高度なオプションで、メディアライブラリをエクスポートしない、テーマをエクスポートしないにチェックを入れ、エクスポート先をファイルにしてエクスポート。
    6. メディアが入っているuploadフォルダをダウンロード。
    7. 自作テーマが入っているフォルダをダウンロード。
  2. 自分のパソコンに入っているdockerでwordpressを立ち上げる。
    1. 自分のパソコンに専用フォルダを作り、そのフォルダからdockerを起動し、wordpressを入れる。

      npm i @wordpress/env –save-dev
    2. そのフォルダのpackage.jsonに書き込む。

      “scripts”: {“wp-env”: “wp-env”}
    3. そのフォルダに.htaccessファイルを作り、書き込む。

      php_value upload_max_filesize 128M
      php_value post_max_size 128M
      php_value memory_limit 256M
      php_value max_execution_time 300
      php_value max_input_time 300

      【参考サイト】
      https://help.servmask.com/2018/10/27/how-to-increase-maximum-upload-file-size-in-wordpress/
    4. そのフォルダにwp-contentフォルダを作り、ダウンロードしたuploadフォルダと自作テーマフォルダを入れる。
    5. そのフォルダに.wp-env.jsonを作り、書き込む。

      {“plugins”: [    “https://downloads.wordpress.org/plugin/all-in-one-wp-migration.7.44.zip”  ],
      “themes”: [ “./wp-content/themes/自作テーマフォルダ” ],
      “mappings”: {“.htaccess”: “./.htaccess”,”wp-content/uploads”: “./wp-content/uploads”}
      }

      【参考サイト】
      https://qiita.com/akinov/items/5554cad0aaedb53e5aed
    6. wp-envでwordpressを立ち上げる。自然と同期される。

      npm run wp-env start

      【参考サイト】
      https://tomosta.jp/blog/wordpress%E3%81%AE-docker%E7%92%B0%E5%A2%83%E3%81%8C%E7%B0%A1%E5%8D%98%E3%81%AB%E3%80%82wp-env%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86/
    7. wordpressにログインし、日本語設定に変更する。
  3. dockerのwordpressの作業。
    1. All-in-One WP Migrationを有効化し、インポートファイル容量が128MBになっていることを確認する。2MBだったら、同期がうまくいってないので、.htaccessファイルを確認。
    2. All-in-One WP Migrationのエクスポートファイルを実際にインポートする。
    3. インポート後、ログアウトし、最初に作った管理者でログインできるかどうか確認する。
    4. wordpressサイトが表示されるか確認する。
    5. 固定ページが表示されるか確認する。されない場合、設定→パーマリンク設定の変更保存をクリック。
    6. All-in-One WP Migrationを無効化して、終了。

カテゴリー
開発環境 ホームページ製作

docker基本操作

docker内容の確認

イメージ数とコンテナ数とボリューム数とキャッシュ数の確認

docker system df

一番目に削除

コンテナ確認
docker ps -a

コンテナをを全部止める
docker stop $(docker ps -q)

コンテナ削除
docker rm コンテナID

コンテナ全削除 一括削除
docker rm $(docker ps -q -a)

二番目に削除

イメージ確認
docker images

イメージ削除
docker rmi イメージID

イメージ全削除 一括削除
docker rmi $(docker images -q)

三番目に削除

ボリューム確認
docker volume ls

ボリューム全削除 一括削除
docker volume prune

四番目に削除

キャッシュ全削除 一括削除
docker system prune

dockerの三要素

  • イメージ
  • コンテナ
  • ボリューム

参考になったサイト

https://www.digitalocean.com/community/tutorials/how-to-remove-docker-images-containers-and-volumes-ja

カテゴリー
ホームページ製作

正規表現のサイト

正規表現でお世話になったサイト

https://userweb.mnet.ne.jp/nakama/

https://murashun.jp/article/programming/regular-expression.html

カテゴリー
ホームページ製作

JQueryなどで気になったサイト

JQuery、webpack5、npmで気になったサイト

【bootstrap5】
https://bootstrap-guide.com/layout/grid

【JavaScriptのswitch】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/switch

【JavaScriptのthis】
https://www.webopixel.net/javascript/901.html

【JQueryのeachメソッド】
https://itsakura.com/jquery-each

【webpack5】
https://www.webdesignleaves.com/pr/css/sass_webpack.html

【node,npmでのバージョン確認】
https://dackdive.hateblo.jp/entry/2016/10/10/095800

カテゴリー
ホームページ製作

Mapboxでお世話になったサイト

Mapboxでお世話になったサイト

https://qiita.com/niwasawa/items/7e88278489cd0780e843

https://docs.mapbox.com/jp/yolp-to-mapbox/javascript/

https://docs.mapbox.com/jp/help/tutorials/custom-markers-gl-js/#%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC

https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker#getlnglat

https://stackoverflow.com/questions/50899452/mapbox-gl-js-change-the-color-from-the-default-marker

https://studio.mapbox.com/

https://web-designer.cman.jp/javascript_ref/others/gps/

https://day-journal.com/memo/mapboxgljs-014/

https://docs.mapbox.com/jp/mapbox-gl-js/example/locate-user/

https://www.systemexpress.co.jp/htmlcss/geolocation.html