パスワード保護された投稿のパスワード入力画面のデザインを思い通りにする方法



パスワード保護された投稿 デフォルト

パスワード保護された投稿画面は、デフォルトのデザインはこんな感じで、かなり味気ないです。。
他のページのデザインを凝るなら、こちらもぜひ、変えたいところ。

ソースを見ると、このようになっています。

<form action="http://localhost/wp1/wp-pass.php" method="post">
<p>この投稿はパスワードで保護されています。表示するにはパスワードを入力してください:</p>
<p><label for="pwbox-4">パスワード<br />
<input name="post_password" id="pwbox-4" type="password" size="20" /></label><br />
<input type="submit" name="Submit" value="送信" /></p></form>

functions.phpにhtmlを書く

先ほどのhtmlを参考に、テーマ内のfunctions.phpにコードを追加します。

//パスワード入力画面カスタマイズ
function my_password_form() {
$output = <<< EOF
<form action="http://localhost/wp1/wp-pass.php" method="post">
<h2>パスワードをご入力ください。</h2>
<div><p id="pw">
<label for="pwbox-4">パスワード&nbsp;&nbsp;<input name="post_password" id="pwbox-4" type="password" size="20" /></label></p>
<p id="btn"><input type="submit" name="Submit" value="次へ" /></p></form></div>
EOF;
return $output;
}
add_filter( 'the_password_form', 'my_password_form' );

4から8行目の部分にパスワード画面のコードを書きます。

パスワード画面を見てみると・・・

パスワード保護された投稿 2

ソースはこちら。

<form action="http://localhost/wp1/wp-pass.php" method="post">
<h2>パスワードをご入力ください。</h2>
<div>
<p id="pw">
<label for="pwbox-4">パスワード&nbsp;&nbsp;<br />
<input name="post_password" id="pwbox-4" type="password" size="20" /></label></p>
<p id="btn">
<input type="submit" name="Submit" value="次へ" /></p>
</form>
</div>

思っていたhtmlとちょっと違って、改行が勝手に入ってしまっています。。(5行目)
これは、<input>をblockとして扱うので、自動的に挿入されるようです。
(詳しくは、こちら)
ということで、ベストな方法ではないということですが、上のサイトから拝借した以下のコードをfunctions.phpに追加して、改行タグを消します。

add_filter( 'the_content', 'no_block_for_input', 2000 );
function no_block_for_input( $c ) {
	return preg_replace( '/<br \/>\s<input/', '<input', $c );
}

ただし、他の本文にも影響する可能性があるので、ご注意ください。

完成!

パスワード保護された投稿 3

ソースをみてみると・・・

<form action="http://localhost/wp1/wp-pass.php" method="post">
<h2>パスワードをご入力ください。</h2>
<div>
<p id="pw">
<label for="pwbox-2687">パスワード&nbsp;&nbsp;<input name="post_password" id="pwbox-4" type="password" size="20" /></label></p>
<p id="btn">
<input type="submit" name="Submit" value="次へ" /></p>
</form>
</div>

改行も消え、思い通りのhtmlになりました。
あとは、cssでお好きにどうぞ☆

【参考にさせていただいたサイト】
・http://ja.forums.wordpress.org/topic/3290
・http://wordpress.org/support/topic/how-do-i-change-password-protected-text

パスワード保護された投稿のパスワード入力画面のデザインを思い通りにする方法」への2件のフィードバック

  1. ピンバック: つめもよう » WPのパスワード画面をカスタマイズする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です