1. TOP
  2. 2019年10月

[Wordpress] Shibbolethプラグインを入れて有効にすると.htaccessが書き換わる

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

そのまま管理画面をリロードしようとすると500エラーになるので落ち着いて対処すること。

[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 よく使いそうなコンポーネントまとめも解り易いのでみる。

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

  • 1
ページの先頭に戻る