ロゴ
【note:検索上位を狙うブログ理論】一騎当千SEO

【マナブログコピー】保護ページ(パスワード)設定のカスタマイズ

外観デザイン設定

こんにちは、ごま吉(@Lv1gomakichi)です。

この記事では、Manablog Copyに保護ページ(パスワード)をカスタマイズする方法について解説します。

変更の方法は、テーマのphpファイルを直接変更します。

注意念のため必ずコードのBackupを取っておいてください。※トラブル等あった場合は責任は負えませんので必ず自己責任でお願いします。

【マナブログコピー】保護ページ(パスワード)設定の作り方

保護ページとはパスワードを入力しないと閲覧できないページです。

当ブログでは以下のように、パスワード入力欄を設けてページへのアクセスを制限しています。


実際のところ、保護ページ化はカスタマイズ無しで使うことはできます。
記事投稿ページの公開状態のステータスを変更するだけで使うことができます。


ただ、ユーザーへの案内などちょっと不親切な部分もあるのでカスタマイズしていきます。

例えば、デフォルトでは下記のようにタイトル部分にある保護中:という文字が出たり、


入力するフィールドの文章やボタンの文字も定型になります。


当ブログでは、ページの保護ページ化にあたり

  • LINE@に登録してもらった人だけに見て頂ける
  • LINE@にてパスワードを配布

というスキームを作りました。

なので、保護ページを見た際に『LINE@』への誘導バナーも設置しました。こうすることで見たい人に、自然と登録を促すことができています。


このテクニックはユーザーとのエンゲージメントを高めるために有効な方法ですので「他ブログにはない有益な情報」を掲載する際には、覚えておくと良い方法の1つです。

保護ページ(パスワード)設定の作り方


作り方は以下です。

まずは、バナー画像をアップします。
管理画面メディアライブラリ新規追加をクリックします。


アップしたバナーのURLをコピーして控えておきます。


ワードプレス管理画面にログインします。
管理画面外観テーマエディターfunction.phpを開きます。


function.phpへ下記のコードを追加します。

/*********************
保護中の文字削除
*********************/


add_filter('protected_title_format', 'remove_protected');
function remove_protected($title) {
       return '%s';
}


/*********************
保護中の変更
*********************/


function my_password_form() {
  return
    '<p>案内文章<p>
<a href="ジャンプ先のURL"><img src="バナー画像のURL"></a>
    <form class="post_password" action="' . home_url() . '/wp-login.php?action=postpass" method="post">
    <input name="post_password" type="password" size="24" />
    <input type="submit" name="Submit" value="' . esc_attr__("パスワード入力") . '" />
    </form>';
}
add_filter('the_password_form', 'my_password_form');


変更箇所は以下です。

  • 案内文章→自由に変更してください
  • ジャンプ先のURL→バナーをクリックした際の飛び先のURL
  • バナー画像のURL→先程控えたバナー画像のURL

※その他の部分は変更しないほうが無難です。

次にCSSを追加します。

カスタマイザー追加CSSをクリックします。



下記のコードをコピペします。

/*-------------------------
  保護コンテンツ フォーム
-------------------------*/

input[type="submit"] {
margin-top:10px;
	margin-bottom:30px;
}


画像提供
Blossomstar – jp.freepik.com によって作成された background ベクトル



\将来につながるプログラミング/

エンジニアとして活躍したい人
プログラミング未経験でも安心
WordPressにもっと詳しくなれる
無料体験レッスン受講後に受講料が1万円引に!




注目こちらも合わせてどうぞ▼
アフィリエイトを始めるための手順を紹介しています。マナブログコピーのカスタマイズが終わったら『ASP登録』をしましょう。

note


注目こちらも合わせてどうぞ▼
アフィリエイト初心者向けに【月3,000円を稼ぐ着実なSEO】をテーマにnote執筆しました。マナブログコピーと合わせて運用すると効果大です。

note

人気記事【マナブログコピー(WordPressテーマ)】文字装飾プラグインの設定