[MW WP Form] ショートコードにpattern属性追加



#MW WP Formとは
[https://plugins.2inc.org/mw-wp-form/](https://plugins.2inc.org/mw-wp-form/)
>MW WP Form はショートコードを使って確認画面付きのメールフォームを作成することができるプラグインです。


# 基本の使い方
今回は`<input type="text">`を例にします。
[https://plugins.2inc.org/mw-wp-form/shortcode/mwform_text/](https://plugins.2inc.org/mw-wp-form/shortcode/mwform_text/)

```php:shortcode
[mwform_text name="テキスト"]
```
```html:html表示
<input type="text" name="テキスト" size="60" />
```

他にもid,class,maxlength等の属性が追加できます。

## 💡 属性の追加
十分機能は揃ってますが、htmlのすべての属性には対応していません。
今回は、フロントエンドでもバリテーションを行うためにpattern属性を追加したい。

このプロジェクト内を読んでみます。
[inc2734/mw-wp-form](https://github.com/inc2734/mw-wp-form)

以下を追記すると追加できました。
抜粋して記述

```php:/classes/form-fields/class.text.php

// デフォルトの設定
protected function set_defaults() {
		return array(
			'name'        => '',
			'id'          => null,
			'class'       => null,
			'size'        => 60,
			'maxlength'   => null,
			'value'       => '',
			'placeholder' => null,
            'pattern'     => null,   // 追記
			'show_error'  => 'true',
			'conv_half_alphanumeric' => null,
		);
	}
/>


// ショートコードで出力される属性を指定している（はず）
protected function input_page() {
		$_ret = $this->Form->text( $this->atts['name'], array(
			'id'          => $this->atts['id'],
			'class'       => $this->atts['class'],
			'size'        => $this->atts['size'],
			'maxlength'   => $this->atts['maxlength'],
			'value'       => $value,
			'placeholder' => $this->atts['placeholder'],
			'pattern'     => $this->atts['pattern'], // 追記
			'conv-half-alphanumeric' => $conv_half_alphanumeric,
		) );

		return $_ret;
	}


// GUI用
	public function mwform_tag_generator_dialog( array $options = array() ) {
		?>
        <!-- 追記 -->
		<p>
			<strong>pattern</strong>
			<?php $pattern = $this->get_value_for_generator( 'pattern', $options ); ?>
			<input type="text" name="pattern" value="<?php echo esc_attr( $pattern ); ?>" />
		</p>
	}
}

```
```php:/classes/models/class.form.php

	/**
	 * Return input[type=text]
	 *
	 * @param string $name
	 * @param array $options
	 * @return string
	 */
	public function text( $name, $options = array() ) {
		$defaults = array(
			'id'          => null,
			'class'       => null,
			'size'        => 60,
			'maxlength'   => null,
			'value'       => '',
			'placeholder' => null,
			'pattern'     => null,  // 追記
			'conv-half-alphanumeric' => null,
		);

		return $this->remove_newline_space(
			$this->_render( 'text', $options )
		);
	}
```
```php:/templates/form-fields/text.php
<input type="text"
	name="<?php echo esc_attr( $name ); ?>"
	<?php echo MWF_Functions::generate_input_attribute( 'id', $id ); ?>
	<?php echo MWF_Functions::generate_input_attribute( 'class', $class ); ?>
	<?php echo MWF_Functions::generate_input_attribute( 'size', $size ); ?>
	<?php echo MWF_Functions::generate_input_attribute( 'maxlength', $maxlength ); ?>
	<?php echo MWF_Functions::generate_input_attribute( 'value', $value ); ?>
	<?php echo MWF_Functions::generate_input_attribute( 'placeholder', $placeholder ); ?>
    <?php echo MWF_Functions::generate_input_attribute( 'pattern', $pattern ); ?>
	<?php echo MWF_Functions::generate_input_attribute( 'data-conv-half-alphanumeric', $conv_half_alphanumeric ); ?>
/>
```
---

## 😢 属性は追加できたけど…
今回実装したpattern属性の場合

```html
<input type="text" pattern="^[ぁ-ん]+$">
```

正規表現特有の記号がWordPressのショートコードと干渉します。
属性値でエスケープするには数値文字参照に変換するしかしかありません :sob:
[HTML数値文字参照変換（文字実体参照一覧付き）](http://ochikochi.com/tool/character/)


コードポイントに変換して

```php:shortcode
[mwform_text pattern="^&#91;ぁ-ん&#93;+$"]
```

なんだか腑に落ちないけど…これでしっかり実装できました。


# 反省
・プラグインの選定を任せてしまった。
・PHPがわからない。
・そもそも属性を自由に使いたいなら、このプラグインに依存するべきじゃない気がする。