このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

WordPress スマホサイト WPtouch 3.8.3 をカスタマイズ その2 【環境編】WordPress x Vagrant

WordPress

2015.08.25

この記事は最終更新日から1年以上が経過しています。

スクリーンショット 2015-08-24 23.28.20

前回の、

Web帳 スマートフォン リニューアルしました。WPtouch 3.8.3 をカスタマイズ その1

の続きとなります。

WordPressのスマホ用プラグイン「WPtouch 3.8.3」をカスタマイズしていくのですが、まずは環境を作っていきましょう!

Vagrant環境構築

wp_vagrant

 

地味で時間のかかる環境構築ですが、きちんと開発環境を整えることが重要となりますのできちんと構築しましょう。

 

Vagrantの環境構築がまだって方はこちらなどを参考に構築の方を宜しくお願いします。

VirtualBoxとVagrantで開発環境を構築

VirtualBoxとVagrantで開発環境を構築 その2 PHP + MySQLインストール

VirtualBoxとVagrantで開発環境を構築 その3 phpMyAdmin インストール centOS apache設定

【保存版】MVCモデルのPHPアプリケーション作成 (vagrant + Smarty + PHP)

Vagrant + Chef Solo の基本的な使い方(設定方法)

本番データを開発環境に移行

と、当方も以前まで作っていなくて、

既存のWordPressサイトをローカル(vagrant等)に移行方法(MySqlエクスポート)

こちらで書いている通り、本番データを開発環境に移行し構築しました。

上記を参考に、既存のWordPressのMySQLデータをエクスポートしましょう。

手順として、

本番データを開発環境に移行手順

1.ftpソフトなど使ってWordpressのファイルをダウンロード

スクリーンショット 2015-08-24 23.56.49

2.phpMyAdminなどからMySQLデータをエクスポート

b439b3bfe25986ee7081def76d5047a7

3.phpMyAdminやSQL文を使ってエクスポートしたsqlファイルをインポート

スクリーンショット 2015-08-24 23.59.17

スクリーンショット 2015-08-24 23.59.29

4.phpMyAdminやSQL文、またはWordPressの管理画面でURLを変更

phpMyAdminやSQL文する際は、対象のテーブルは「wp_options」となりますのでこちらを変更。

スクリーンショット 2015-08-25 0.03.29

Vagrantのデフォルトのipアドレスは「192.168.33.10」となりますので、こちらを設定します。

 

たまに、「テキストエディタでエクスポートしたファイルを開き一括置換して編集…」などの記事があったりしますが、WordPressに保存されるデータは

s:23:"https://www.webcyou.com/";

このような感じでシリアライズされて格納されていますので、テキストエディタでURLを置換すると

s:23:"http://local.com/";

本来なら s17となるのですが、URLだけ置換されるこのような形となってしまい、整合性がとれなくなりエラーを生じます。

なので、SQL文で変更するか、PHPMyAdminまたは、wordpressの管理画面で変更を行いましょう。

と、ここまで以前行っていたのですが、うっかりVirtualBoxのUpdateを行ってしまい、

スクリーンショット 2015-08-25 0.10.16

 

(こんな感じで促されるついつい行ってしまう。)

もろもろ、まっさらの状態にとなってしまいました。。。

これが、これから始まる「いろいろと Updateでデータが消える現象」の始まりとなってしまいますw

ということもありますので、Chefでサーバー構築もきちんと管理しましょう。

Chefでの構築はこちらなど参考に宜しくお願いします。

Chefでサーバー管理

Vagrant + Chef Solo の基本的な使い方(設定方法)

2014年は Vagrant と Chef soloでサクっと環境構築

a5f6c508b4afc5fd7a116afa8e5ee184

Chefのレポジトリは個別にGitで管理しておくと今後も幸せになるかと思います。

ちなみに、Git管理はGitHubが有名ですが、

GitHub

https://github.com/

スクリーンショット 2015-08-25 0.22.33

無料で使えるのは、パブリックレポジトリまでで、

プライベートレポジトリを作ろうとすると、有料となってしまいます。

無料でプライベートレポジトリをつくりたい方は、bitbucketなどが良いかと思います。

bitbucket

https://bitbucket.org/

 

無料でプライベートレポジトリを作成出来、Githubと同様の機能を利用できますのでオススメです。

やはりなんでも、無料が嬉しいですよね。

imgres

とここまで行えたでしょうか。

当方はひょんな事からWordPressの管理画面が真っ白になってしまいました><

WordPressの管理画面が真っ白

なんという事でしょう。

WorsPressの管理画面が真っ白になってしまったではありませんか。

スクリーンショット 2015-08-17 0.26.59

本番環境だとかなり焦りますねw

ネットで検索すると結構上がってきますね。

みなさん同じ状況に遭遇しているのですね。(良い状況ではないw)

この場合、色々な原因が考えられます。

・function.phpが原因

・wp-config.phpが原因

・キャッシュファイル

・WordPressのバージョン

etc..

と、色々見たのですが、解決出来ず orz

もう、WordPressをインストールしなおしたら方が早いなと。

公式サイトから最新をダウンロード。

WordPress

https://ja.wordpress.org/

スクリーンショット 2015-08-25 0.43.08

というのも、WordPress自体のアップデートを行っていなかったので、

スクリーンショット 2015-08-17 2.03.51

バージョン3.3.1のままでした。

もう、4.2.4とかになっているのか。。

この際、Updateも行えて、ちょうどいいやとインストールしなおしました。

スクリーンショット 2015-08-23 22.19.44

WordPress 4.3にアップデート!!

すごい新鮮な気持ちになれましたw

と、管理画面もきちんと表示(当たり前ですが)

と、このように本番で行うと危険なので開発環境で問題ないかチェックするのが大事ですね。

Glupでフロントエンド管理

フロントエンドのクライアントツールはglupを利用します。

まだという方はこちらなど参考に。

Grunt.jsからgulp.jsに移行したら捗った件。 gulp移行のまとめ

Gulp

http://gulpjs.com/

wordpressディレクトリ内に格納すると何かとややこしいので、このような感じで

wordpressディレクトリとは別に「develop」(任意の名前)ディレクトリを作成し

スクリーンショット 2015-08-25 1.11.02

別に管理を行うと良いかと思います。

スクリーンショット 2015-08-25 1.16.10

developディレクトリは「pc」と「sp」(スマホ)と別々に管理。

wordpressテンプレート内のデータは

スクリーンショット 2015-08-25 1.19.47

このような形で、それぞれwatchを行い、

gulpfile.jsの方で、

RELEASE_DIR = '../../../../blog/wp-content/plugins/wptouch/themes/webcyou/default';

と、dest先の指定をし反映させております。

gitの管理もそれぞれ別々に行っても良いかと思いますが、なんせブログなんで、gitレポジトリ1つで良いかなと思ってとりあえず、1つで管理しております。

と言った感じで、環境はこのぐらいで

次回は「WPtouch 3.8.3」をカスタマイズしていきます。

ではでは。

Comment

Related Article

WordPress サイトで、長時間 500 Internal Server Error発生。解決した方法とは。

2019.06.18

PHP7に変更して、早くなりました!!ConoHaにwebアプリケーションを集約。ひとりサーバー移管プロジェクト終了。

2017.03.23

【WordPress】 VVV(Varying-Vagrant-Vagrants)を使った 最強ローカル環境構築!!

2016.11.26

【WordPress】カスタムフィールドテンプレートで マスターデータ作成。 簡単、素早くミニサイト作成

2016.11.06

【WordPress】WordPress Popular 画像が表示しない。

2016.10.19

WordPress 外部から関数呼び出し・記事一覧表示・ランダム表示

2016.04.28

WordPress + Vagrant の環境構築が超簡単に!!「VCCW」を使ったら簡単すぎて困った件。

2016.01.02

WordPress スマホサイト WPtouch 3.8.3 をカスタマイズ その2 【環境編】WordPress x Vagrant

2015.08.25

Web帳 スマートフォン リニューアルしました。WPtouch 3.8.3 をカスタマイズ その1

2015.08.24

サイト高速化!Web帳で無料で使えるCDNサーバー(CloudFlare)を試してみた。(ムームードメイン設定例)

2014.12.09

CATEGORY LIST

LATEST NEWS

アーキテクチャConference 2024に参加してきました。

イベント

2024.11.28

Mac minicomでシリアル通信を行う

電子工作

2024.11.21

Mac 容量足りない問題は、外付けSSDで快適に解決!おすすめ外付けSSD

mac

2024.10.16

Z80エミュレータ- EMUZ80の組み立て

電子工作

2024.10.13

Mac VSCodeで、SFML C++開発環境を作る。

C++

2024.09.09

Rust-SDL2 examplesをすべて試す

Rust

2024.09.01

JavaScriptで、DOMを放り投げる処理

JavaScript

2024.07.27

Rustで創る MOS 6502 CPU その2

Rust

2024.07.23

Rustで創る MOS 6502 CPU その1

Rust

2024.07.19

汎用 3D mesh/model viewerを求め。と、簡単に、FBXファイルをglTF(glb)に変換ツールを求め。

C++

2024.06.06

M1 Macで、OpenGL GLUTを使ってコンパイルする

C

2024.04.27

Rust - Actix Web mongo ユーザー登録 JWT認証

Rust

2024.03.24

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US