WordPressのパスワード保護投稿の入力フォームをカスタマイズ

WordPressのパスワード保護投稿の入力フォームをカスタマイズ



普段あまり使うことがない機能ですが、WordPressには投稿にパスワードを入力しないと表示されない、「パスワード保護投稿」という機能があります。

この機能を有効にすると、

のようなメッセージとパスワード入力フォームが表示されます(テーマ:Twenty Fifteen)。

このパスワード入力フォームを現在作成中のBootstrapをベースにした以下のようなデザインに変更しようと思います。

メッセージとパスワード入力フォームはthe_password_formのフィルターでカスタマイズ可能です。

そこで、以下のようにカスタマイズしてみました。

function mx_custom_protected_form() {
	return '<p>この投稿を閲覧するためには、パスワードの入力が必要です。パスワードは<a href="#">こちら</a>から申請して下さい。</p>
	<form id="post-password" class="post_password" action="' . home_url() . '/wp-login.php?action=postpass" method="post" style="max-width:25rem;"><div class="input-group mb-3 flex-nowrap"><div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-key" aria-hidden="true"></i></span></div><input type="password" name="post_password" class="form-control" size="24" placeholder="パスワード" aria-label="パスワード" /><div class="input-group-append"><input type="submit" name="Submit" class="btn btn-secondary" value="' . esc_attr__("送信") . '" /></div></div></form>';
}
add_filter( 'the_password_form', 'mx_custom_protected_form' );

すると結果、

のように、余計なPタグが入ってしまい、コード通りのデザインになりませんでした。

どうやらこのメッセージとフォームは本文のthe_contentwpautop処理が適用され、自動改行が強制的に実行されるようです。

【WordPress】input要素の前に改行(br)が強制的に挿入される   at softelメモ
参考
【WordPress】input要素の前に改行(br)が強制的に挿入される at softelメモ

問題 WordPressで、Javascriptの動くデモなどを記事の中に書こうとしたら、inputタグの付近 […]...

【WordPress】input要素の前に改行(br)が強制的に挿入される   at softelメモ softelメモ

wpautopを停止するのが一番手っ取り早いのですが、改行をPタグでまとめる、という機能自体は必要であるためinputにはPタグを付加しないように設定する必要があります。

そこで今回は

function my_nowpautop_tag( $content ) {
	$content = preg_replace( '/<p><input(.*?)><\/p>/', '<input$1>', $content );
	return $content;
}
add_filter( 'the_content', 'my_nowpautop_tag' );

として、無駄なPタグを除去するように設定しました。

wpautopの扱いが非常に面倒です。

今日はここまで

関連する記事



こちらはいかが?


コメントを残す