ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

ワードプレス公式チュートリアルでブロックを作成①【環境準備編】

2022年1月リリースのワードプレスversion5.9でフルサイトエディターが実装されると、ブロックをサイト内に自由に配置できるようになります。

したがって『Gutenbergのブロックを自作できるかどうか』が、サイト制作の自由度を大きく左右していく・・・そう考えて私もブロックの作成方法を勉強していくことにしました。

そこでまずはワードプレス公式サイトのブロック作成チュートリアル通りに進めてみようと思います。本記事を含めて3回に分けて、自分なりに実行した手順と理解した内容を紹介していきます。

今回は準備編として環境構築です。

この記事でわかること

ブロック作成の環境として、Node.jsのインストールをする。

使用PC/OS・・・Windows10
使用エディター・・・Visual Studio Code

公式サイトの環境構築ページは以下の通りです。

https://ja.wordpress.org/team/handbook/block-editor/getting-started/devenv/

残りの2回の記事は以下の通りです。

手順概要

  1. Node.jsの公式ページからインストール用ファイルをダウンロード
  2. ダウンロードしたファイルを実行してインストール
  3. VS CodeのターミナルでNode.jsが無事インストールできたことを確認

①ファイルのダウンロード

1.Node.js公式ページにアクセス

https://nodejs.org/ja/

2.ファイルをダウンロード

Node.jsのダウンロード

LTS版のほうをクリックしてダウンロードします。2022年1月1日現在はversion16.13.1です。
ダウンロードされるファイルは、node-v16.13.1-x64.msi です。

※ダウンロードタブに切り替えると、Mac用のファイルもダウンロードできます。

②インストール(ファイルの実行)

ダウンロードしたnode-v16.13.1-x64.msiをクリックするとインストールがスタートします。

以下画面の通りに進めます。

Node.jsのセットアップウィザード
Nextをクリック
ライセンスに合意
ライセンスに合意してNextをクリック
インストール場所
そのままNextをクリック
カスタムセットアップ
そのままNextをクリック
toolのインストール選択画面
チェックなしでNextをクリック
インストールを実行
Installをクリック

これでインストールがスタートします。しばらくして次の完了画面が表示されれば終了です。

インストール終了画面
インストール終了画面:Finishをクリック

③インストールできたことを確認

VS Codeを起動させます。もしすでに開いている場合でも一度立ち下げて再起動しましょう。

ここから先はVS Codeでの作業です。

1.ターミナルを開ける

VS Codeターミナルを開ける

すると画面したにターミナルが開きます。

開いたターミナル画面

VS Codeのワークスペースにフォルダが登録されている場合はそのフォルダ下で開いてしまうので、ワークスペースからフォルダを削除してからターミナルを開くとよいでしょう。

2.Nodeがインストールできたことの確認

次のコマンドを打ち込んでバージョンが表示されればOKです。

>node -v ⇒nodeのバージョン表示(今回インストールした16.13.1が表示される)
>npm -v ⇒npmのバージョン表示

nodeのバージョンを表示させる

まとめ

以上無事にNode.jsのインストールが確認できたら作業終了ですが、非常に簡単ですよね。ターミナルとかコマンドを打ち込む作業に慣れていないと少々難度が高く感じてしまいますが、この程度なら問題ないでしょう。

もう一度作業の概要を紹介しておきましょう。

  1. Node.jsの公式ページからインストール用ファイルをダウンロード
  2. ダウンロードしたファイルを実行してインストール
  3. VS CodeのターミナルでNode.jsが無事インストールできたことを確認

次回はこの開発環境を使ってブロックの雛形を作成します。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる