WordPressのパスワード保護ページのカスタマイズ

WordPressでパスワード保護したページのパスワード入力画面をカスタマイズする方法をご紹介します。

テーマによって見た目は多少異なりますが、デフォルトではこのようになっていると思います。

パスワード保護されたページの特徴

記事のタイトルの先頭に保護中:の文字が入る
本文には、このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。と書いてある
パスワードを入力するテキストボックスがある
確定と書かれた送信ボタンがある
正しいパスワードを入力するまで本文が表示されない

パスワード保護ページのタイトルのカスタマイズ
パスワード保護中の本文をカスタマイズする
1. 解説
まとめ

パスワード保護ページのタイトルのカスタマイズ

パスワード保護されたページのタイトルをカスタマイズするためのコードをいくつか紹介します。

タイトルをカスタマイズするためのコードは必要なコードをどれか一つだけ使用するようにしてください。

使用しているフィルターフックが同じですので、タイトルのカスタマイズは同時に使用しないようにしてください。

すべてのコードを貼り付けて使用するとfunctions.phpの一番下にあるコードが優先されます。

タイトルの先頭にある保護中:の文字を削除する

保護中:の文字を削除する場合は、functions.phpに以下のコードを入力します。

/*-------------------------------------------*/
/* パスワード保護ページのカスタマイズ */
/* 保護中:の文字を削除する */
/*-------------------------------------------*/
function remove_protected_word($title) {
	return '%s';
}
add_filter('protected_title_format', 'remove_protected_word');

タイトルの先頭にある保護中:が削除されます。

タイトルの先頭にある保護中:の文字を変更する

保護中:の文字を変更する場合は、functions.phpに以下のコードを入力します。

/*-------------------------------------------*/
/* パスワード保護ページのカスタマイズ */
/* 保護中:の文字を変更する */
/*-------------------------------------------*/
function change_protected_word($title) {
	return '【限定公開】%s';
}
add_filter('protected_title_format', 'change_protected_word');

こちらのコードを使用すると、タイトルの先頭に【限定公開】の文字が付きます。

保護中:の文字が【限定公開】に変更したパスワード保護画面 — 保護中:が【限定公開】に変わります

6行目を

return '%s【限定公開】';

にするとタイトルの最後に【限定公開】の文字が付きます。

パスワード入力画面と入力後ページでタイトルを切り替える

これまでに紹介したコードはパスワードを入力するページにもパスワード入力後のページにも同じタイトルが表示されています。パスワードを入力するときのタイトルと、パスワード入力後のタイトルを変えたい場合は以下のコードをfunctions.phpに追加します。

/*-------------------------------------------*/
/* パスワード保護ページのカスタマイズ */
/* パスワード入力前と後でタイトルを変更する */
/*-------------------------------------------*/
function branch_protected_word($title) {
	if ( post_password_required() ) {
		return '【限定ページ】%s';//パスワード入力前に表示させるタイトル
	} else {
		return '%s';//パスワード入力後に表示させるタイトル
	}
}
add_filter('protected_title_format', 'branch_protected_word');

こちらのコードを使用するとパスワード入力前と入力後でタイトルの文字が分岐されます。

パスワード入力後の本文 — パスワード入力後は【限定ページ】が消えて本来のタイトルのみ

例えば、パスワードを入力前は記事のタイトルを表示させずに、パスワードを入力後のみページのタイトルを出すということもできます。

/*-------------------------------------------*/
/* パスワード保護ページのカスタマイズ */
/* パスワード入力前と後でタイトルを変更する */
/*-------------------------------------------*/
function remove_branch_protected_word($title) {
	if ( post_password_required() ) {
		return '';//パスワード入力前に表示させるタイトル
	} else {
		return '%s';//パスワード入力後に表示させるタイトル
	}
}
add_filter('protected_title_format', 'remove_branch_protected_word');

7行目をreturn '';とするとパスワードを入力画面ではタイトルが表示されなくなります。%sはページのタイトルを表しています。

パスワード保護中の本文をカスタマイズする

デフォルトでは、このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。と書いてあります。

この文章を変更する場合は以下のコードで対応できます。

/*-------------------------------------------*/
/* パスワード入力ページの文章を変更する */
/*-------------------------------------------*/
function my_password_form() {
	$my_page_title = get_the_title();//パスワード保護されているタイトル
	$pw_text = '<p>'.$my_page_title. 'はパスワードで保護されています。</p><p>閲覧するには以下にパスワードを入力してください。</p><form class="post_password" action="' . home_url() . '/wp-login.php?action=postpass" method="post"><input name="post_password" type="password" size="24" class="pw_wid" /><input type="submit" name="Submit" value="' . esc_attr__("送信") . '" class="pw_btn" /></form>';
	return $pw_text;
}
add_filter('the_password_form', 'my_password_form');

こちらのコードをfunctions.phpに追加すると、以下のように表示されます。

変更した点

ページのタイトルを文章に組み込む
テキストボックスの前にあるパスワード:を削除
ボタンを確定から送信に変更

コードを詳しく解説します。

解説

$my_page_title = get_the_title();//パスワード保護されているタイトル

はパスワード保護したページのタイトルを取得しています。本文中にページのタイトルを出そうと思ったので取得して変数に代入しています。

$pw_text = '<p>'.$my_page_title. 'はパスワードで保護されています。</p><p>閲覧するには以下にパスワードを入力してください。</p><form class="post_password" action="' . home_url() . '/wp-login.php?action=postpass" method="post"><input name="post_password" type="password" size="24" class="pw_wid" /><input type="submit" name="Submit" value="' . esc_attr__("送信") . '" class="pw_btn" /></form>';

は実際の文章を変数に代入しています。HTMLが使用できますのでタグから入力しています。

'<p>'.$my_page_title. 'はパスワードで保護されています。</p><p>閲覧するには以下にパスワードを入力してください。</p>までが本文です。ここを変更すると本文が変わります。phpですのでシングルコーテーションとピリオドに注意しながら変更します。

シングルコーテーションでくくると文字扱いになる♪

ピリオドは文字を連結させる♪

<form class="post_password" action="' . home_url() . '/wp-login.php?action=postpass" method="post"><input name="post_password" type="password" size="24" class="pw_wid" /><input type="submit" name="Submit" value="' . esc_attr__("送信") . '" class="pw_btn" /></form>'はパスワード入力フォームの本体です。

この内容がを表しています。