[Wordpress] Gutenbergのカスタムブロック作成で始めるReactプログラミング

カテゴリ:
Web
Wordpress
| トラックバック(0)
投稿者:yo yo

流れ(Windows 10 VScodeを想定)

  1. Nodeをインストールする。
  2. テーマフォルダなどへ移動して`custom-block`とか解り易い名前のフォルダを作る。
  3. 作った`custom-block`フォルダへ移動して`npm init`して`package.json`を作る。entry pointは`build/index.js`とかにしておく。
  4. `Run npm install --save-dev --save-exact @wordpress/scripts`でWordpressのパッケージをインストールする。
  5. package.jsonを開いてビルドコマンドを追記する。
    ``` "scripts": { "start": "wp-scripts start", "build": "wp-scripts build" }, ```
  6. シェル・コマンドプロンプトを開いて開発時は`npm start`を、本番用ファイルは`npm build`でファイルが作成される。
  7. `custom-block`フォルダ内に`src`フォルダを作成し、index.jsを作成する。
  8. `custom-block/src/index.js`に独自ブロックjsをインポートさせるjsを書く。
  9. `custom-block/src/user-block01.js`を作成して、独自ブロックのjsを書く。
  10. テーマフォルダ内の`functions.php`へ、カスタムブロックをWordpressへ読み込むPHPを書く。`custom-block/custom-block.php`とかで別ファイルにして読み込ませても良い。公式ではプラグインとして登録させるようになっているがどっちでもよい。
  11. コンポーネントのGithubコンポーネントリファレンスを見て使いたいタグを使う。Reactのコンポーネントも使える。Wordpress Gutenberg よく使いそうなコンポーネントまとめも解り易いのでみる。

続きに、ファイルの例を記載する。

[Wordpress] Windowsのローカル環境でPHPUnitが動かない時の対処法

カテゴリ:
Web
Wordpress
| トラックバック(0)
投稿者:yo yo

PHP Warning: require_once(/tmp/wordpress//wp-includes/class-phpmailer.php): failed to open stream: No such file or directory in C:\Users\%User%\AppData\Local\Temp\wordpress-tests-lib\includes\mock-mailer.php on line 2

Windows10でWordpressのプラグインを作成し、ユニットテストをしようとして動かない時、WP-CLIで作成したテスト用のWordpressの設定ファイル、wp-tests-config.phpに記載されているABSPATHをWindows用に修正する必要がある

# User\AppData\Local\Temp\wordpress-tests-lib\wp-tests-config.php
define( 'ABSPATH', 'C:\ユーザ名\AppData\Local\Temp/wordpress/' );

[Windows] Bashを使う

カテゴリ:
Web
その他
| トラックバック(0)
投稿者:yo yo
  1. スタート
  2. 設定
  3. アプリと機能
  4. Windowsの機能の有効化または無効化
  5. Windows Subsystem for Linuxへチェック
  6. 再起動
  7. 設定
  8. 更新とセキュリティ
  9. 左側のメニューから開発者向けを選択
  10. コマンドプロンプトでbashコマンドを入力

[PHP] WindowsでのComposerの使い方メモ

カテゴリ:
Perl / PHP
| トラックバック(0)
投稿者:yo yo

Composerについての拙い認識

カレントディレクトリにプログラムライブラリがインストールされ、composer.jsonに何がインストールされているか管理されている。ディレクトリ毎消すと全部消えてやり直せる。

パッケージ名の書かれたcomposer.jsonさえあれば復元できる。要するに設計図・説明書。誰でも開発者と同じPHPライブラリ構成をすぐに構築できるので便利。

Windowsへのインストールの仕方

事前にPHPをインストールする。XAMPPでも良い。多分XAMPPだと楽。

composerでググって公式からソフトウェアをダウンロードして適当にインストールする。

使い方

コンソールで使う。解りやすいのだけこちらに書く。詳しくはQiitaでまとめてる人がいるのでそっちを見る。

# composer.jsonのあるカレントディレクトリで実行するとcomposer.jsonに記述されている環境が現在のプロジェクトに整う。
$ composer install

# composer.jsonに記載されたパッケージを最新にする。
$ composer update

# composer.jsonへパッケージを追加する
$ composer require vender/package

# composer.jsonへ記載されているパッケージを一覧で表示する
$ composer show -i

# composer.jsonへ記載されているパッケージから指定して削除する
$ composer remove vender/package

# vender/packageをフォークしてソースコードをぶんどってくる
$ composer create-project vender/package

疑問点

WP-CliやPHPUnitなどをWindowsで利用する場合はフォーク(create-project)してC:\などのルートディレクトリへ置き、環境パスを通すのがいいのか、Globalへインストールしてそちらに環境パスを通すのがいいのか解らない。

requireでvenderディレクトリをルートに作り?そこにぶっこんでくのとどう違うのか?ローカル環境なら何でもいいのか。何が正解なのか解ってない。

[Wordpress] WP-CLIをWindowsへインストールする。

カテゴリ:
Perl / PHP
Wordpress
| トラックバック(0)
投稿者:yo yo

公式https://make.wordpress.org/cli/handbook/installing/を読む。とにかく読む。

Composerを使う場合

公式https://make.wordpress.org/cli/handbook/installing/#installing-via-composerを読む

  1. Composerをインストールした状態でカレントをC:\にしてcomposer create-project wp-cli/wp-cli --no-devをする。
  2. コントロールパネル>システム>システムの詳細設定から環境変数を追加する。ここでは"c:/wp-cli/bin"。

Composerを使わずwp-cli.pharからインストールする場合

公式https://make.wordpress.org/cli/handbook/installing/#installing-on-windowsを読む

  1. https://raw.github.com/wp-cli/builds/gh-pages/phar/wp-cli.pharからwp-cli.pharをダウンロードする。
  2. 適当なディレクトリに置く。公式だとルートc:\wp-cli。
  3. wp.batという名前の空ファイルを作り、c:\wp-cliへ入れる。
  4. wp.batへ
    @ECHO OFF
    php "c:/wp-cli/wp-cli.phar" %*
    という内容を記述して保存。
  5. コントロールパネル>システム>システムの詳細設定から環境変数を追加する。ここでは"c:/wp-cli/bin"。
ページの先頭に戻る