• Home
  • /
  • ブログ運営
  • /
  • オフラインで安心カスタマイズ!WordPressのローカル環境を構築するためにMAMPを導入してみた。

オフラインで安心カスタマイズ!WordPressのローカル環境を構築するためにMAMPを導入してみた。

Mamp install

※01/25/2014:バージョンが変わっていたので加筆修正しました!

この二ヶ月程、我流でソース達と向き合いながら色々研究を重ね、少しずつですが(本当に本当にほんの少しずつですが)ようやく僕らがいつも見ているウェブサイト達がどういう風に出来ているのかが分かってきました。
それでまぁ、自分でもこのブログのテーマをいじったりなんだりして少しずつ改良を試みてはいるのですが、ごくまれに触っちゃいけないところを触ったりして、画面真っ白とかをやらかしてます。

それでも懲りずにバックアップも取らず直接編集し続けてたのですが、さすがにこれはアカンやろ、とゆうことでテーマ編集のためのオフライン環境を整えることにしました。

オフライン環境構築のために行ったMAMPというソフトウェアを導入→構築までのプロセスをまとめました。

MAMP

参考にさせて頂いた記事

今回これをやるにあたって相当色んな記事を読みましたが、一番わかりやすかったのが以下の記事でした。

WordPressをローカル環境へインストールする手順 | WPカスタマイズ&自作テーマ作成説明所(仮)

自分なりにこちらでも解説させていただきます。

MAMPのダウンロード/インストール

まずはこちらからMAMPをダウンロード。
今回は無料版のみの利用なので、インストール時にカスタマイズでPROを外しときます。
(追記:現行版は勝手にダウンロードされるみたいなので後で削除します。)

起動

無事インストールされたら、アプリケーションに出来たアイコンからMAMPを起動。僕はMAMP PROも一緒にダウンロードしてしまったのでPROで起動する事を推奨されましたが、無視してMAMPを起動でも大丈夫でした。

▼起動するとこんな画面。サーバーを起動をクリックして下さい。

Install mamp copy copy copy copy copy

▼右上のシグナルが緑になれば成功。

Install mamp copy copy copy copy copy

▼サーバーを開始するとメインブラウザが開き、こんなページが。

Install mamp copy copy copy copy copy copy

これがいわゆるローカル環境下での自分の代理サーバー?みたいなもんなんですかね。(認識は適当)

上のメニューのツール>phpMyAdminに行きます。

▼”サーバ接続の照合順序”をutf8mb4_general_ciに変更します。(以前のバージョンではutf8_general_ciでした。)

Install mamp copy copy copy copy

▼「データーベース」タブから新しいデータベース「Wordpress」を作成します。

Install mamp copy

Install mamp copy copy

MAMP側はこれで完了!

 
 
 

MAMPにWordpressをインストール

続きまして、MAMPにWordpressをインストールします。

まず、Wordpressのオフィシャルから最新版をダウンロードして、解凍したwordpressフォルダをアプリケーション/MAMP/htdocsへ。

終わったら、MAMPを起動している状態で
初期設定のままならhttp://localhost:8888/
(ポート番号を変えた場合は8888をその番号に)
番号を80にした場合はhttp://localhost/wordpressにアクセス。

▼このようになるので、Wordpressをクリック。
Install mamp

▼こんな画面が登場しますが、設定ファイルを作成する、を押して大丈夫です。
mamp_install

▼一個画面を挟んで自分のデータを記入する画面になるので、必要事項を入力して送信。
mamp_install

よくわからない(笑)ですが、ユーザー名とパスワードはrootにするそうです。

▼出来たら、インストール実行。
mamp_install

▼必要情報を記入します。ここの情報は自分の好きな物でOK(らしい)
mamp_install

弱い、って言われてます。皆さんは「強い」を目指して下さい。
検索エンジン云々は、オフラインだから要らない・・・はず。
僕はチェック外しました。

で、インストール。

その後、自動的もしくはhttp://localhost/wordpress/wp-admin/index.phpにアクセスするとすぐログイン画面に来るかので、先ほど決めたユーザー名とパスワードを入力してログインしましょう。
mamp_install

見慣れた画面が登場!大成功です。
mamp_install

これでMAMPとWordPressの連携は完了。
次は、このWordPressに既存のサイトのデータを反映させます。

既存サイトの反映

必要なファイルの取得

やり方は至ってシンプル。
FTP上のwp-contentをそのままダウンロードして、先ほど作ったローカル環境上のwp-contentに上書きするのみ。

めちゃくちゃシンプルなんですが、自分のサーバーからカスタマイズに使う記事をダウンロードするのみ。
僕がここで落としたのは

  • 自分が使っているテーマのファイル

  • のみ。
    ディレクトリはwp-content/themes以下です。
    ダウンロードする方法は色々ありますが、僕はCyberduckで落としました。

    FTPって何?Mac&ロリポップ利用者のためのFTPソフトCyberduckの導入方法。

    取得したファイルをローカル環境へ適応

    アプリケーション/MAMP/htdocs/wordpres(設定次第)/wp-content/themesの中に、先ほど取得したテーマファイルをそのまま放り込みます。

    それだけ。簡単。

    確認してみる。

    先ほど構築したローカル環境側のダッシュボードから外観→テーマにいくと、先ほどのテーマが追加されてるはず!

    mamp_install

    ▲はいきたこれ!

    これを有効化させて、適当に記事をプレビューすると・・・

    ▼キターーーーーー・・・・?

    mamp_install

    ヘッダー画像やフッター、サイドバーが反映されていない。

    何でやねん!!!と小一時間悩んでたら、Twitterでぎゅうさん(@Gyuuuuuuuu)よりアドバイスが。

    あー・・・そうだわ、プラグインと画像忘れてた・・・。
    いつもありがとうございますぎゅうさん・・・。

    というわけで、再びCyberduckよりFTPから

    /wp-content/plugins(プラグイン
    /wp-content/uploads(画像

    を拾って来て、アプリケーション/MAMP/htdocs/wordpres(設定次第)/wp-content/に上書き。

    さらに、サイドバーはウィジェットだから、設定が反映されてない・・・って当たり前のことに途中で気付く(笑)。

    のでウィジェットの設定も、本家(オンライン)から設定をコピペ。

    これで全て終了なり!

    感想

    丸一日つぶれました。

    でもなんとか見た目の適応に成功しました!
    とりあえずダミー記事を一つだけ書いて、広告関係は一切入れずシンプルにデザインのみ。

    これで一応オフライン環境下は整いました。
    一応この環境をDreamweaverと連携させてテーマをいじっていく、っていうのが理想型なんですけど、ここに至までに恐ろしく時間がかかったのでそれはまたいつか頑張ります。(笑)

    Webデザインを学ぶなら

    独学でWebデザインを学ぶ道は長いです…。
    かかる時間を考えたら、今なら圧倒的にオンラインスクールなどで学ぶことをオススメします…。

    マンツーマンでWebデザイン教えてくれるプログラミングのオンラインスクールCodeCamp
    とかまじで最高だと思います。無料体験もあるし。



    また全額返金保障してくれて、自分のやりたい期間でコースが選べるTechAcademyのオンラインブートキャンプ Webデザインコース
    なども、いいかもしれません。



    ぼく自身も独学で学んで来た知識しかなく、もっとしっかりした知識の必要性を感じているので、近いうちにどちらかのコースを受けようかなぁと考えております。

    独学でも出来なくはないですが、やっぱり非効率的ですよ。

    こんな記事もありますよ

    Macアプリ
    ブログの方向性に悩み、迷走。そして辿り着いた答え。
    Mac×ロリポップ利用者のためのFTPソフトFilezilla日本語版の導入方法。
    Mars Editで投稿しようとしたら”Post to Weblog Error”が出て来て投稿出来なかった時に僕がとった対策法。
    ブログエディタMarsEditの導入方法と最初にやったほうが良い設定諸々の話。
    僕がMacbook Airで文章やブログを書くために入れているオススメアプリ達を紹介します。
    MarsEditでWorpressのプラグイン「Meta Manager」を使うため簡単な2つの設定!