# WordPress

> Custom HTML ブロックで WordPress に Ikiform のフォームを追加するか、ショートコードを登録して、どの投稿者でも同じフォームをどこにでも置けるようにします。

フォームプラグインは WordPress の中で送信を処理します。フォームは自分のサイトに送信され、プラグインが結果を保存してメールで送ります。Ikiform に向けたプレーンな HTML フォームなら、プラグイン、データベース、メールの設定が不要で、WordPress の nonce を含まないのでキャッシュされたページでも動き続けます。

## フォームを貼り付けられる人

WordPress は投稿や固定ページの HTML をフィルタリングします。`unfiltered_html` 権限を持たないユーザーの場合、コンテンツの保存時に `<form>` と `<input>` が削除されます。

| サイト | Custom HTML ブロックにフォームを保存できる人 |
| --- | --- |
| セルフホスト、シングルサイト | 管理者と編集者 |
| セルフホストのマルチサイト | 特権管理者のみ |
| `wp-config.php` で `DISALLOW_UNFILTERED_HTML` を `true` に設定 | 誰も保存できません。[ショートコード](#shortcode)を使ってください。 |
| WordPress.com | 編集できる人なら誰でも。ただし、ホスティング機能を有効にした有料プランのみです。ホスティング機能はプラグインをインストールすると有効になります。その他のプランではタグが削除されます。 |

## Custom HTML ブロック

### ステップ 1: ブロックを追加する

ブロックエディターで `/html` と入力し、**Custom HTML** を選びます。すべてのページにフォームを置くには、代わりにサイトエディターでフッターなどのテンプレートパーツにブロックを追加します。

### ステップ 2: フォームを貼り付ける

`Custom HTML`:

```html
<form class="ikiform" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <p><label>Name <input name="name" autocomplete="name" required></label></p>
  <p><label>Email <input name="email" type="email" autocomplete="email" required></label></p>
  <p><label>Message <textarea name="message" rows="5"></textarea></label></p>
  <input type="hidden" name="_redirect" value="https://example.com/thank-you/">
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <p><button type="submit" class="wp-element-button">Send</button></p>
</form>
```

`wp-element-button` を付けると、ブロックテーマではボタンにテーマのボタンスタイルが適用されます。フォームはテーマのフォントと入力欄のスタイルを引き継ぐので、通常 CSS は不要です。

### ステップ 3: プレビューしてから更新する

ブロックの **Preview** タブを使ってから保存します。エディターを再読み込みしてブロックをもう一度開き、`<form>` と `<input>` のタグが消えていれば、そのアカウントでは保存できません。下のショートコードを使ってください。

`_redirect` が動くのは、フォームの許可ドメインに自分のサイトが含まれている場合だけです。それ以外の場合、訪問者には Ikiform のサンクスページが表示されます。フォームの設定で **Redirect after submit**（送信後のリダイレクト）を設定し、非表示の入力欄を削除することもできます。

## ショートコード

ショートコードなら HTML を PHP の中に置けるので、コンテンツのフィルターの影響を受けず、投稿者や寄稿者もフォームを置けます。WordPress が自動で読み込む must-use プラグインとして保存してください:

`wp-content/mu-plugins/ikiform.php`:

```php
<?php

add_shortcode('ikiform', function ($atts) {
    $atts = shortcode_atts([
        'id' => 'frm_xxxxxxxxxxxxxxxx',
        'subject' => '',
        'redirect' => '',
        'button' => 'Send',
    ], $atts, 'ikiform');

    ob_start();
    ?>
    <form class="ikiform" action="<?php echo esc_url('https://ikiform.com/f/' . rawurlencode($atts['id'])); ?>" method="post">
      <p><label>Email <input name="email" type="email" autocomplete="email" required></label></p>
      <p><label>Message <textarea name="message" rows="5"></textarea></label></p>
      <?php if ($atts['subject']) : ?>
        <input type="hidden" name="_subject" value="<?php echo esc_attr($atts['subject']); ?>">
      <?php endif; ?>
      <?php if ($atts['redirect']) : ?>
        <input type="hidden" name="_redirect" value="<?php echo esc_url($atts['redirect']); ?>">
      <?php endif; ?>
      <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
      <p><button type="submit" class="wp-element-button"><?php echo esc_html($atts['button']); ?></button></p>
    </form>
    <?php
    return ob_get_clean();
});
```

あとは **Shortcode** ブロックを追加するか、任意のコンテンツにショートコードを入力します:

`Shortcode ブロック`:

```text
[ikiform subject="New enquiry" redirect="https://example.com/thank-you/"]
```

- 別のフォームを使うには `id` を渡します: `[ikiform id="frm_..."]`。
- PHP 内のフィールドをフォームに合わせて変更してください。`name` を持つ入力欄はすべて保存されます。
- クラシックエディターでは、生の HTML は **テキスト** タブにだけ貼り付けてください。ビジュアルエディターはフォーム内に `<p>` や `<br>` タグを追加します。ショートコードならこれを避けられます。

## 許可ドメイン

サイトが応答するすべてのアドレスを登録します。WordPress のサイトは、構築中に複数のアドレスを持つことがよくあります。

| フォームが動く場所 | 許可ドメインに追加するもの |
| --- | --- |
| 本番のドメイン | `example.com`（`www.example.com` も含まれます） |
| WordPress.com のアドレス | `your-site.wordpress.com`（ステージングサイトは `your-site.wpcomstaging.com`） |
| ホスティング会社のステージングサイト | ホスティング会社のダッシュボードに表示されるステージングのホスト |
| ローカル開発 | `localhost`、または `my-site.local` のような、ツールが割り当てるローカルのホスト名 |

- `wordpress.com` や `wpcomstaging.com` だけを追加しないでください。他の人のサイトも含め、そのホスト上のすべてのサイトが一致してしまいます。

## テストのチェックリスト

1. ログアウトするか、プライベートウィンドウを開きます。ログイン中の管理者は一部のキャッシュをスキップし、少し違うページを見ています。
2. フォームを送信し、Ikiform で送信データがスパムではなく受信済みになっていることを確認します。
3. サンクスページに移動することを確認します。Ikiform のページが表示される場合は、サイトが許可ドメインに含まれていないか、`_redirect` の URL が `https:` ではありません。
4. 管理者以外のユーザーでページを編集し、保存してもフォームが残ることを確認するか、ショートコードを使います。

## トラブルシューティング

| 症状 | 原因 | 対処 |
| --- | --- | --- |
| 保存するとフォームの入力欄が消え、ラベルだけが残る | アカウントに `unfiltered_html` がない、または WordPress.com のプランが `form` と `input` をフィルタリングしている | ショートコードを使うか、管理者にブロックを貼り付けてもらいます。 |
| 余分な `<p>` や `<br>` タグでレイアウトが崩れる | クラシックエディターのビジュアルモードが HTML を整形し直した | Custom HTML ブロックかショートコードを使います。 |
| ブラウザーのコンソールに、`form-action` ディレクティブによってフォームデータが拒否されたと表示される | セキュリティプラグインまたはホスティング会社が `Content-Security-Policy` ヘッダーを送っている | `form-action` に `https://ikiform.com` を追加し、`fetch` で送信する場合は `connect-src` にも追加します。 |
| 送信データが `origin_mismatch` でスパムフィルターの下に届く | 送信したページが、フォームの許可ドメインに含まれていない | 上の表のホストを追加します。**Reject** を選んでいる場合、同じ送信には代わりに `403 origin_not_allowed` が返ります。 |
| Unknown field を示す `422 validation_failed` | フォームにフィールドが定義されていて、入力欄の名前がそのどれでもない | 入力欄の名前をフィールド ID に変更するか、自分用のマーカーなら `_` で始めます。 |

## 関連ページ

- [HTML フォーム](https://ikiform.com/ja/docs/html.md): リダイレクト、予約済みフィールド、ハニーポット。
- [サイトビルダー](https://ikiform.com/ja/docs/guides/site-builders.md): どのビルダーでも使える埋め込み。
- [スパム対策](https://ikiform.com/ja/docs/spam.md): ハニーポット、スコアリング、人間確認。
- [トラブルシューティング](https://ikiform.com/ja/docs/troubleshooting.md): CORS、オリジンの不一致、429。