(WordPress) InstantWPでのローカルサーバーの構築

WordPressのテーマを編集する際には、やはり、ローカルサーバーで作業した方が効率が上がります。
私は、PHPファイルとCSSファイルだけ編集して、ローカルで確認できればいいと思っていたので、簡単そうだったInstantWPを使ってローカルサーバーを構築しました。
InstantWPでローカルサーバーを構築する自体はとても簡単でしたが、その後のWordPressのデータベースを移転する作業に結構つまづきいています。
今回、これからのInstantWPを使ってローカルサーバーを構築する人のために、InstantWPのインストールからWordPressの移転までの作業手順を書いてみました。
参考になれば幸いです。

 

InstantWPを使ってのローカルサーバーの構築

wondows環境において、現時点でWordPress用ローカルサーバーを手軽に構築するには、XAMPPか、InstantWPを利用することになるのではないでしょうか。(MacだとMAMPが主流みたいです)
中でも、色々なサイトで紹介されているInstantWPはとっても簡単ということが言われています。
実際私もやってみて、拍子抜けするほど簡単でした。

以下、その作業順序です。

まず、下記のサイトからファイルをダウンロードします。
InstantWP

ファイルを実行して、C:\にインストールします。

これだけです。
(大切なことはC:\にインストールすること。私は、Program Filesにインストールしましたが、ブラウザでWordPresがうまく表示されませんでした。また、ディレクトリ名に全角文字が入っていたりしてもだめなようです。)

あとは、インストールしたフォルダにあるInstantWP.exeを実行すればInstantWPが起動されます。

また、デフォルトでは、サイトが表示されるブラウザがIEになっているので、以下の手順で変更できます。

「C:\InstantWP_4.5\iwpserver」内の「pms_config.ini」をメモ帳で開いて、「BrowserPath」を表示させたいブラウザのパス名に書き換えます。

BrowserPath=”C:\Program Files\Google\Chrome\Application\chrome.exe”
(上記はデフォルトのクロームのパスです。)

 

WordPressのファイルとデータベースの移転

次に、WordPressのファイルとデータベースの移転です。

WordPressのファイルのダウンロードはFTPクライアントソフトを利用します。(FFFTPが有名です。)

ダウンロードしたWordPressのファイルを、先程インストールしたInstantWPの以下のフォルダ内のファイルと入れ替えます。
C:\InstantWP_4.5\iwpserver\htdocs\wordpress

この時、「wp-config.php」だけは入れ替えないようにします。

以上で、WordPressのファイルの移転は終了です。

 

次に、WordPressのデータベースファイル(sql)のエクスポートとインポートです。

サーバーの管理画面からphpMyAdminを起動します。
(さくらインターネットであれば、コントロールパネル → データベースの設定 → 管理ツール ログイン)
データベース名を選んでから、エクスポートタブ、テーブルが全選択されていることを確認します。
(この時「DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT を追加」にチェックを入れると、インポート時に上書きしてくれます。)
後は何もいじらずに「実行」ボタンを押すと、sqlファイルが、エクスポートされます。

当然ですが、このままインポートして、ブラウザで表示しても、元のサーバーに接続されてしまいます。
そこで、エクスポートしたsqlファイル内のドメイン名を以下のように置換します。

サイトのドメイン名(例)
xxxxxxx.com

ローカルサーバーのドメイン名(InstantWPの場合)
127.0.0.1:4001/wordpress

置換箇所は数千箇所になると思うので、サクラエディタを使うことをおすすめします。このソフトはとても軽く、置換もすぐに完了します。

次に、置換したファイルをローカルサーバーのデータベースにインポートします。ですが、おそらくファイルサイズが大きく、そのままではインポートできないので、「C:\InstantWP_4.5\iwpserver\server\config_tpl」にある「php.ini」をメモ帳で開いて、以下の項目を検索して置換します。

memory_limit = 128M
post_max_size = 64M
upload_max_filesize = 32M

容量は目安です。
そして、一度InstantWPを再起動します。

あとは、InstantWPのphpMyAdminから、ドメイン名を置換したsqlファイルをインポートします。
(データベース名を選択してからインポートすることを忘れずに)

(変更したphp.iniが上手く認識されていれば、「ファイル選択」の右側の表示が(最長: 32MiB)となっているはずです。)

最後に、InstantWPの初期画面からWordPress Adminを実行します。

これで一応は、ローカル環境で、WordPressの編集ができると思います。

ですが、ウィジットは保存されません。
また、sqlファイルのドメイン名の置換ですが、Search-Replace-DB-masterというソフトを使用したほうがいいと言われている方もいます。→こちら
私のPC環境ではSearch-Replace-DB-masterが上手く機能しなかったので、今回のような方法を取っています。

追記
※ リンクが開けない場合があります。このようなときは、パーマリンク設定を保存し直したり、基本に戻すと正常に開ける場合があります。(こちらで書かれていることが参考になります)
※ 子テーマでsingle.phpやpage.phpを作っていても、リンクが正常に開けないようです。

ウィジェットのテキストでリンクに下線が入ってしまう – wordpress

twentyfifteenのテーマを使っています。

ウィジェットのテキストでリンクを作成した所、下線が入ってしまいます。

 

160629_1

 

他のリンクには下線がないので、少し違和感が。。

一体どうなっているんだろうと見ていると、style.cssに以下のような記述を発見。

 

.textwidget a {

border-bottom: 1px solid #333;

}

 

ウィジェットのテキストのリンクを指定するスタイルみたいです。

なぜわざわざborder-bottomを指定しているんでしょう。。

よくわかりませんが、デザインのことを考えて消させていただくことに。

 

子テーマのstyle.cssに

 

.textwidget a {

border-bottom: 0;

}

 

を追加すると、下線が消えました。

 

160629_2

 

子テーマを作っておくと本当に便利なので、おすすめです。

つまづいたところ – 子テーマの有効化でレイアウトが崩れる。。 – wordpress

twentyfifteenの子テーマを作っています。

wordpress/wp-content/themes/

に、子テーマのフォルダ、twentyfifteen_childを作成。

その中に親テーマtwentyfifteenのstyle.cssをコピペ。(FTPで)

テーマの編集で中身を削除して以下を記述。

 

/*

Theme Name:   Twenty Fifteen Child

Template:     twentyfifteen

*/

 

外観→テーマで、子テーマTwenty Fifteen Childを有効化(違和感ありますが、子テーマのスクリーンショット画像は表示されません)

サイトを確認すると、レイアウトがめちゃくちゃ。。

 

style.cssに以下の記述が抜けていました。

 

/*

Theme Name:   Twenty Fifteen Child

Template:     twentyfifteen

*/

 

@import url(“../twentyfifteen/style.css”);

 

さらに調べていると、この方法だと、読み込み時間が少し遅くなるということ。

以下のようにするのが現在の主流みたい。

 

style.css内は以下のようにする。

 

/*

Theme Name:   Twenty Fifteen Child

Template:     twentyfifteen

*/

 

次に、子テーマのフォルダ内にfunction.phpを作成。

テーマの編集で、以下のように記述。

 

<?php

 

add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );

function theme_enqueue_styles() {

wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );

 

}

 

先走って色々といじったりしていたので、問題解決まで3時間くらいかかりましたorz。

初めは極力シンプルにして動作確認するということを再認識させられました。