2020年2月5日

工藤

WordPressで特定のページにのみベーシック認証をかけて、ID・パスワードを管理画面で設定できるようにしたい

WordPress

facebook
twitter

WordPressで特定のページにのみベーシック認証をかけたい時ってありませんか？
全体にかけるプラグインはありますが、特定ページだと見当たらなかったりします。

今回はベーシック認証をかけて、管理画面からでも簡単に設定できる方法をご紹介します。

1 ベーシック認証のかけ方

ベーシック認証のかけ方

①function.phpにコードを記述する

まずは以下のコードをfunction.phpに記述してアップください。
『認証に失敗しました。～』のテキストは自由に変更できます。

//ベーシック認証
function basic_auth($auth_list,$realm="Restricted Area",$failed_text="認証に失敗しました。ブラウザバックでもう一度入力してください。"){ 
    if (isset($_SERVER['PHP_AUTH_USER']) and isset($auth_list[$_SERVER['PHP_AUTH_USER']])){
        if ($auth_list[$_SERVER['PHP_AUTH_USER']] == $_SERVER['PHP_AUTH_PW']){
            return $_SERVER['PHP_AUTH_USER'];
        }
    }
 
    header('WWW-Authenticate: Basic realm="'.$realm.'"');
    header('HTTP/1.0 401 Unauthorized');
    header('Content-type: text/html; charset='.mb_internal_encoding());
 
    die($failed_text);
}

//ベーシック認証

function basic_auth($auth_list,$realm="Restricted Area",$failed_text="認証に失敗しました。ブラウザバックでもう一度入力してください。"){

if (isset($_SERVER['PHP_AUTH_USER']) and isset($auth_list[$_SERVER['PHP_AUTH_USER']])){

if ($auth_list[$_SERVER['PHP_AUTH_USER']] == $_SERVER['PHP_AUTH_PW']){

return $_SERVER['PHP_AUTH_USER'];

}

header('WWW-Authenticate: Basic realm="'.$realm.'"');

header('HTTP/1.0 401 Unauthorized');

header('Content-type: text/html; charset='.mb_internal_encoding());

die($failed_text);

}

②header.phpにコードを記述する

次にheader.phpに以下のコードを記述してアップします。

<?php
  if(!is_home()): 
  if(is_page('members')): 
  $userArray = array("admin" => "password");
  basic_auth($userArray); 
  endif;
  endif;
?>

<?php

if(!is_home()):

if(is_page('members')):

$userArray = array("admin" => "password");

basic_auth($userArray);

endif;

今回の記述は3行目部分で固定ページ内の『members』というスラッグを持っている記事を対象にしています。

この部分をカテゴリーにしたいときは

if(is_category('カテゴリーID')) :

1	if(is_category('カテゴリーID')) :

カスタム投稿タイプにしたい場合は

if(get_post_type() === 'カスタム投稿名'):

1	if(get_post_type() === 'カスタム投稿名'):

などに変更してみてください。wpの通常の出し分けの記述で対応できるかと思います。

また、『admin』部分はID、『password』部分はパスワードを自由に入力してください。
以下のように記述すると、複数設定も可能です。

$userArray = array(
	"admin01" => "password01",
	"admin02" => "password02"
);

$userArray = array(

"admin01" => "password01",

"admin02" => "password02"

);

これで通常のベーシック認証の設定は完了です。

【応用】管理画面からIDとパスワードを設定できるようにする

普通にベーシック認証をかける分には上記までの対応で問題ないのですが、もし運用していく人がソースコードを触れないという場合などにはWPの管理画面でIDとパスワードを設定できるようになると便利です。

今回はカスタムフィールドを使用します。カスタムフィールド部分はある程度分かっている方向けにざっくりと説明します。

————

今回は『Advanced Custom Fields』を使ってカスタムフィールドを作っていきます。
とりあえず新規追加でIDとパスワードを入力できるエリアを作成します。

■ラベル・フィールド名・デフォルト値→任意のもの
■フィールドタイプはテキスト
■必須は「はい」
■説明は必要であれば入力
で設定してください。

『位置』については全ページに表示されるとややこしいので、今回ベーシック認証をかけるページを選択してください。

これで問題なければ『公開』をクリックしてください。

選択したページにベーシック認証を入力するフィールドができました！

————

あとはさっきのheader.phpに戻ります。
ここで先ほどのコードを編集して、カスタムフィールドの内容を出力しましょう。

<?php
  //IDを出力
  $basic_id = get_field('basic_id');
  //パスワードを出力
  $basic_password = get_field('basic_password');

  if(!is_home()): 
  if(is_page('members')):
  $userArray = array("$basic_id" => "$basic_password"
  );
  basic_auth($userArray); 
  endif;
  endif;
?>

<?php

//IDを出力

$basic_id = get_field('basic_id');

//パスワードを出力

$basic_password = get_field('basic_password');

if(!is_home()):

if(is_page('members')):

$userArray = array("$basic_id" => "$basic_password"

);

basic_auth($userArray);

endif;

コードはこんな感じです。
とりあえずget_field～のところに各フィールド名を入れてください。フィールドの内容が出力されるようになります。

これでソースコードを直接さわらなくても、管理画面からIDやパスワードを設定できるようになりました！

割と自分でカスタマイズして管理しやすいので、ぜひやってみてください。

執筆者：工藤[ WEBデザイナー ]

WEBデザイナー。最近はWordPressを触るのが好きです。よろしくお願いします。

プログラミング

SharePointではできないこと 4選

「これってSharePointでできないの!?」なんていう瞬間、開発やカスタマイズの現場では意外と多くあります。SharePointはとても柔軟なプラットフォームですが、実は“万能ツール”ではありません。「コードを書けば何とかなる」と思って構築を進めると、モダンページの仕様や制限に阻まれて苦い思いをすることもしばしば。今回は、実際のプロジェクトや運用の中で見えてきた「SharePointではできないこと」をまとめて紹介します。目次1 1.CSSとJSが直接使えない1.1 ク […]

2025年10月10日

Webサイト制作

WordPress納品後にクライアントが安心して運用できる仕組みづくりをしよう

ホームページ制作において、更新機能を手軽に導入できるのがWordPressです。専門知識がなくても記事の投稿やページ編集を行いやすい一方で、クライアントが自分で運用するには、が欠かせません。今回は、そのための仕組みづくりについてご紹介します。制作側の方はもちろん、クライアント側でホームページ運用を担当される方も、制作時のご相談などにぜひ参考にしてみてください。目次1 管理画面のロゴを企業ロゴに変更する2 管理画面のURLを変更する・認証などを付けてセキュリティ面を強化 […]

2025年10月3日

Webデザイン

アプリのロゴアニメーションをAfter Effectsで作成→Lottieに変換【iOS/Android対応】

こちらは、当社でリリースしたアプリ「ピンピタ」で使用しているロゴアニメーションです。スプラッシュ画面でロゴが動くと、ぐっとアプリらしい印象になりますし、作ってみたいですよね。今回は、After Effects（以降AE）でロゴアニメーションを作成し、アプリに組み込むまでをご紹介します。 AEと聞くと難しい印象がありますが、PremiereやFlashなどを触った経験がある方なら、すぐに慣れます。もう一度再生目次1 作業フロー1.1 注意点：グラデーションが使用不可2 […]

2025年9月19日

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。

Web制作、Webサービスに関する技術やノウハウを発信するコラムサイト