【VVV3.2対応】ローカル環境でWordPressを始めよう!

ひとりアドベントカレンダー3日目です。Reoです。

先日、久々にうるおいらんどの改修をしようと思ったところ、VVV のバージョンが変わり、結構導入手順が変わってしまっていることに気がつきました。

かなり前に書いた記事「VVV+WordMoveでWordPressのローカル環境を構築するぞッ!【Xserver】」の情報が古くなってしまったので、改めて書き直しをしようと思います。

このVVVの記事は、このブログで一番何度も読んだ記事です。WordPress をローカル環境で動かしたいときにいつも読んでいました。

WordMove については今回触れません。本番環境とゴニョゴニョしたい人は上記の記事を参考にしてください。

書いていたら、かなりはじめてのWordPress感が出てきました。初めてのWordPress、ローカル環境からはじめませんか?

 

環境

  • Mac OS 10.14.6
  • Vagrant 2.2.6
  • VirtualBox 6.0.14
  • VVV 3.2.0

まだ Mojave でやってます… Catalina にするとAdobeソフト の CS6が死ぬんだってのが怖くてあげてないです…

 

Vagrant と VirtualBox を導入

vagrant を導入します。

ターミナルで

brew cask install vagrant
brew cask install virtualbox

brew がないよ cask がないよという場合は Homebrew を導入しましょう。

以下をターミナルに打ち込んで導入してから上記を実行しましょう。


/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

VVVを導入

VVV(Varying-Vagrant-Vagrants)を導入します。WordPressサイトを構築してくれるやつです。

vagrantディレクトリを作ってから GitHub よりリポジトリをクローンします。

mkdir vagrant && cd vagrant
git clone https://github.com/Varying-Vagrant-Vagrants/VVV.git
cd VVV

これで ls をして中身がこうなってたらおkです。

 

vagrant up で起動

起動しましょう。


vagrant up

Install local plugins には Y をしましょう。vagrant-hostsupdater という、127.0.0.1 とかではなく hogehoge.test で接続できるやつがインストールされます。

それが終わったらもう一度


vagrant up

をします。結構時間がかかります。お茶でも飲んでマタ-リ ( ´ー`)y-~~しましょう。

終わったら vvv.test に接続してみましょう。

 

失敗したら…

今ちょっと環境を作ったことがない Mac で試しながら書いているんですが、なんかエラーが出ました。

There was an error while executing `VBoxManage`, a CLI used by Vagrant
for controlling VirtualBox. The command and stderr is shown below.

Command: [“hostonlyif”, “create”]

Stderr: 0%…
Progress state: NS_ERROR_FAILURE
VBoxManage: error: Failed to create the host-only adapter
VBoxManage: error: VBoxNetAdpCtl: Error while adding new interface: failed to open /dev/vboxnetctl: No such file or directory
VBoxManage: error: Details: code NS_ERROR_FAILURE (0x80004005), component HostNetworkInterfaceWrap, interface IHostNetworkInterface
VBoxManage: error: Context: “RTEXITCODE handleCreate(HandlerArg *)” at line 94 of file VBoxManageHostonly.cpp

こんなやつ。

こうなった場合、VirtualBox を入れるのに失敗してますね…。

もし、brew cask install virtualbox をした後に、許可がないよとかで設定のセキュリティとプライバシーであとから許可をしていた場合は失敗しているかもしれません。(私は今回それでした。)

許可をしてから、再度


brew cask install virtualbox

を実行して、その後にもう一度


vagrant up

をしてみてください。

可愛いクマさんに会えましたか?(クマじゃなかったらどうしよう)

 

vvv.test を開いてみましょう。

この画面がひらけたらおkです。

 

config.yml を作成しよう

さて、ここからが VVV 3.2 からの変更点になります。

config.yml を作ることは同じなんですが、ファイルの場所が以前とは変わりました。

既に VVV 3.2 より前のバージョンを使っている場合は、git pull origin master で最新の VVV を落としてくるだけで自動でマイグレーションしてくれるはずです。

VVV/config/default-config.yml をコピーして、config.yml を作成します。


cp config/default-config.yml config/config.yml

config.yml を編集していきます。普通にエディタで開いた方が楽です。


vi config/config.yml // もしくは適当なエディタで開く
  vvv-test:
    skip_provisioning: false
    description: "WordPress and VVV test!"
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git
    hosts:
      - vvv-test.test

wordpress-one 等を書き換える形で大丈夫です。もしくはコピペして貼り付けましょう。インデントがおかしいと失敗するので気をつけてください。

config.yml を編集をした後は保存して


vagrant --reload provision

をしましょう。

 

config.yml の中身の説明

ドキュメントを見てください!!!!

https://varyingvagrantvagrants.org/docs/en-US/config/

 

丸投げだとちょっとアレなので。

sites: の後に追加したいサイトの設定を書いていきます。wordpress-default を見ていきましょう。

まず wordpress-default がサイト名になります。フォルダ等の名前になります。

repo

このリポジトリを元にしたサイトが構築されます。

https://github.com/Varying-Vagrant-Vagrants/custom-site-template を覗いてみてください。

最初はこのまま設定しておきましょう!

古いバージョンから使っていて、vv を用いてサイトを構築した等の場合は、必要ないです。

vm_dir / local_dir

VirtualBox内とローカルでのパスを書きます。 書かなくても自動で作成されます。

branch

repo を使うときにどの branch から取得するかを決めます。

skip_provisioning

いくつかのサイトを構築した場合、もし使用してないやつがあれば false にしておきましょう。true のもののみ provisioning されます。

また使うときになったら true にしましょう。

allow_customfile

難しいことが書いてありました。provisioning中にRubyを使用する場合等に使うらしいです。false もしくは書かなくておkです。

nginx_upstream

PHPのversionを指定できます。 php72 等で設定できます。

hosts

ドメインとホストを定義します。サイト名.test がオススメです。

理由についてはhttps://varyingvagrantvagrants.org/docs/en-US/troubleshooting/dev-tld/を参照してください。

 

雑ですが適当にこんなかんじです。

 

で、結局のところ何を書けば構築できるかというと、さっきの

  vvv-test:
    skip_provisioning: false
    description: "WordPress and VVV test!"
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git
    hosts:
      - vvv-test.test

だけ書いておけばとりあえず大丈夫です。

vagrant –reload provision が無事完了していれば、先ほど作ったホスト名(今回はvvv-test.test)にブラウザでアクセスしてWordPressのサイトが見れればおkです!

やったぜ。

 

もしこんな画面が出たら…

こういうのが出たら、失敗しています。

repoにhttps://github.com/Varying-Vagrant-Vagrants/custom-site-template.gitを設定してみる、インデントを確認する等をしてやり直してみてください。

 

管理画面に接続してみよう

さてさて、これでWordPressのローカル環境が構築されました。

管理画面は、先ほどの例だと、vvv-test.test/wp-admin でログイン画面に移動します。

ユーザ名は admin, パスワードは password に設定されています。

 

テーマを追加してみよう

あとはもう好きなように作るだけ!になります。

最後にテーマを配置するところまでやってみようと思います。

VVV では、VVV/www/サイト名(vvv-test)/public_html/wp-content/themes/ にテーマを設置します。

 

適当に sample フォルダを作ってその中に、index.php と style.css を配置しましょう。

index.php の中身はとりあえず空で大丈夫です。確認用に好きな文字でもいれておいてください。

style.css の中に

@charset "UTF-8";
/*
Theme Name: Sample
Description: サンプルです。
*/

適当にテーマの名前を書いて保存しましょう。


そして管理画面から、外観 > テーマ (英語なら Appearance > Theme)で 先ほど作った Sample ができていれば有効化しましょう。

 

これで、テーマを作る準備ができました。

 

おわりに

この方法を使えば、サーバーを用意してなくても WordPress を試すことができます。

WordMove を組み合わせて、ローカル環境をコマンド一つで本番環境に反映させることもできます。本番環境から持ってくることもできます。 WordMove については、昔の記事の方「VVV+WordMoveでWordPressのローカル環境を構築するぞッ!【Xserver】」を参照してください。

 

WordMove を使わなくても、FTP等 でやる場合でもローカルで作っておいて損はないと思います。

WordPress のテーマを作ってみたい、プラグインを作ってみたい、そういう方は是非是非導入してみてください!

 

VVV3.2 になって、以前までサイト構築に利用していた vv を使わなくて良くなりました。逆に vv を使うと失敗してハマってしまう場合があります。(なんもドキュメント読んでなくて結構ハマった)

ドキュメントがしっかりしてますので、そちらもご確認ください!

https://varyingvagrantvagrants.org/

 

それではでは、良い WordPress ライフを!

 

 

アドベントカレンダー3日目にしてクソ長記事を書いてしまった…毎日3000字以上とか死ぬのでは…今日なんて5000字超えてしまったんだけど…

明日はちょっと楽するかもしれません。いや、頑張ります。
あと、prism.js がちょっと調子悪くて2行じゃないと反映してくれないのでそのうち直しますorz

WordPress ,
コメントは認証制です。詳しくは下記の注意をお読みください。お気軽にコメントお願いします!

Write a Comment

コメント時の注意

「Twitter」「Facebook」「Google+」「WordPress」のいずれかのアカウントをお持ちの方は各アカウントと連携することでコメントできます。 コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。 アカウントをお持ちでない方はメールアドレスで投稿することができます。 初回コメント時は承認後に表示されます。

Related Memo...

wordmove+ロリポップうまくいかないときメモ

無駄に2回も同じことでハマった。くそう。

rsyncがうまくいかない

ssh接続でrsyncがどうのっていうエラーが出た時

rsync: connection unexpectedly closed (0 bytes received so far) [sender]
rsync error: error in rsync protocol data stream (code 12) at io.c(226) [sender=3.1.0]

権限がおかしい(が自分はどこの権限がおかしいのかよくわかっていない)のだが

ロリポに SSH で公開鍵接続して rsync でサーバー同期をしてみる – IMPOV::In My Point Of View

で公開鍵接続の設定をするとなんか上手くいく(パスワード接続できない→鍵生成・配置→パスワード接続できるようになる。実際には鍵使わずパスワード認証してるのになんでだろう)

 

子ページが404になる

ロリポップサーバーでサブディレクトリを変更して記事が404エラーになる場合の対処法

まさにこれで、WordPressのパーマリンク設定を開いて保存を押すだけで直る。

 

でもこのメモ見る機会なければいいなぁとは思う。

WordPress

WordPressで現在のカテゴリから親カテゴリ/祖先カテゴリのスラッグを取得

//現在のカテゴリを取得
$categories = get_the_category($post->ID);
$category_slugs = array();
foreach($categories as $category){
    $cat = $category;
    array_push($category_slugs,$cat->slug);
    //親のカテゴリがなくなるまで回す
    while ($cat->parent) {
        $cat_parent_id = $cat->parent;
        $cat = get_category($cat_parent_id);
        array_push($category_slugs,$cat->slug);
    }
}

わりと頑張ってPHP書いてる。

WordPress

【WordPress】メディアライブラリ の画像IDを取得する

WordPressのメディアライブラリ にアップロードされた画像IDを取得する方法です。

例えば6件取得してギャラリーで表示するとき。

$ids = get_posts( 
    array(
        'post_type'      => 'attachment', 
        'post_mime_type' => 'image', 
        'post_status'    => 'inherit', 
        'posts_per_page' => 6,
        'fields'         => 'ids',
    ) 
);

$ids_str = '';
foreach ( $ids as $id ) {
    $ids_str .= $id . ',';
}

$ids_str = rtrim($ids_str, ',');

// ショートコードでギャラリーを表示
echo do_shortcode( '[gallery ids="' . $ids .'"]' );

意外と便利なのでは!

 

WordPress

【WordPress】プラグイン化したカスタム投稿をテーマ内で使うとき

通常テーマ内でカスタム投稿を表示させる時に

$args = array( "posts_per_page" => 5,
        "post_type" => 'news'
    );
$the_query = new WP_Query( $args );
if($posts):

と書けば表示されるのに、プラグイン化していたので表示されなかった話。

 

functions.phpでカスタム投稿を追加している場合は必要ないが、newsというカスタム投稿をプラグイン化していたので、以下の記述が必要でした。

    public function __construct() {
        add_action( 'pre_get_posts', array($this, 'add_my_post_types_to_query') );
    }

    // queryにnewsをセットする
    function add_my_post_types_to_query( $query ) {
        if ( is_home() && $query->is_main_query() )
            $query->set( 'post_type', array( 'post', 'page', 'news' ) );
        return $query;
    }

WordPressプラグインの作り方は、また後日ちゃんとした記事にしたいと思ってます。今回はとりあえず忘れそうなのでメモだけで失礼。

WordPress
more