masalibの日記

システム開発、運用と猫の写真ブログです

今更なんだけど・・・WordPressのデザインの勉強する事になった

マナブさんという誰でもかせげるプログラマーになれると謳っている ユーチューバーがいるのですが、その人が稼ぐなら「WordPress」がいいと言っていた。 プログラマーとしてはちょっと「WordPress」というプラットフォームにのる形で好きではなかった。 またセキュリティーがもれる事が多々あるのでちょっと怖くて手の出さずにいた。

このご時世なのでもらえるお仕事がない時もあって、もしかしてもらえるお仕事が「WordPress」だった。 「WordPressならデザインもできるでしょ」とプレッシャーをかけられてうなずいてしまった。

ちょっとテーマを触る程度ならできるけど、お金ももらうのでちょっと怖くなって勉強する事にした。

開発環境構築はvagrantのvccwで簡単につくれる。

ちなみにVCCWとは

V…Vagrant C…Chef C…CentOS W…Wordpress

の頭文字を取ったものらしいです

公式の手順どおりだとWindowsではうまくいきませんwwww

  1. VirtualBoxをインストールする。

https://www.virtualbox.org/

  1. Vagrantをインストールする。

http://www.vagrantup.com/

  1. vagrant-hostsupdaterプラグインをインストールする。
vagrant plugin install vagrant-hostsupdater

Windowsではhostsファイルを変更できません。

管理者権限でメモ帳を開く "C:\Windows\System32\drivers\etc\hosts"

f:id:masalib:20200513002034p:plain

「192.168.33.10 vccw.test」を追加する

  1. Vagrant Boxをダウンロードする
vagrant box add vccw-team/xenial64
  1. .zipをダウンロードする。

vccw.cc

公式にあるリンクをダウンロードして解凍する

6.新しいディレクトリに移動します。

$ cd vccw-x.x.x

Windowsの場合は下記のファイルを修正する

vccw-x.x.x/Vagrantfile

下記をコメントアウトする

  if Vagrant.has_plugin?('vagrant-hostsupdater')
    config.hostsupdater.aliases = _conf['hostname_aliases']
    config.hostsupdater.remove_on_suspend = true
  end

   ↓

#  if Vagrant.has_plugin?('vagrant-hostsupdater')
#    config.hostsupdater.aliases = _conf['hostname_aliases']
#    config.hostsupdater.remove_on_suspend = true
#  end

  config.vm.provision "ansible_local" do |ansible|
    ansible.compatibility_mode = "2.0"
    ansible.extra_vars = {
      vccw: _conf
    }
    ansible.playbook = "provision/playbook.yml"
  end

   ↓

  config.vm.provision "ansible_local" do |ansible|
    #ansible.compatibility_mode = "2.0"
    ansible.extra_vars = {
      vccw: _conf
    }
    ansible.playbook = "provision/playbook.yml"
  end

参考にさせてもらったページ https://dev83.com/wordpress-vccw/

あとvagrantの性質上、フォルダに日本語や全角などは使わない方がいいです。

  1. Vagrant環境を開始します。
$ vagrant up

9.ブラウザでVagrantWordPressにアクセスします 訪問のhttp://vccw.test/またはhttp://192.168.33.10/

便利な世の中になったものだ。

現在は下記のサイトでデザインを勉強中。 https://plusers.net/wordpress_theme_0