「Dat Pass」は、投稿や固定ページの本文内の一部を簡単なショートコードを追加するだけでパスワード保護できる便利なプラグインです。
WordPress標準機能にあるページ全体のパスワード保護ではなく、一部をパスワード保護できて便利です。
複雑な処理や、ブラウザのCookieなどを使わない単純機能ですので、動作も軽く、使いやすいプラグインです。
【Dat Pass】プラグインの用途や機能
任意のブロック、または、範囲(クラシックエディタの場合)を以下のショートコードで囲むことで、パスワード保護されます。
[datpass pass="パスワード"]
パスワードで保護するブロックまたは範囲(クラシックエディタの場合)
[/datpass]
ショートコード中の「パスワード」部分を任意の文字列へ変更するだけで、簡単にパスワード保護ができます。
他のパスワード保護のように、パスワード保護用の設定を作って投稿内へ何かで挿入・設定するものではなく、ショートコードで直接編集画面へパスワードの文字列と共に保存できるので、直感的に管理できるところがこのプラグインのおすすめポイントです。
また、パスワード保護中のコンテンツはHTMLソース上にも出力されませんので、ソースコードから情報を読み取られる心配もありません。
このプラグインはパスワード入力した値をCookieなどを利用して一時保存する機能はありません。したがって、訪問者はパスワード付きページを表示するたびにパスワードの入力と認証が必要になります。
本ページを最後に編集したときの環境・バージョンなど
プラグインは製作者によって日々更新されていくため、この紹介記事が最新バージョンのものであるとは限りません。参考までに本記事の最終更新日時点におけるテスト環境、プラグインバージョン、プラグイン導入時の留意点などを記載しておきます。
プラグインを使用(試用)したテスト環境・公式ページなど
この紹介記事作成にあたって、試用(テスト)を行った環境、本記事で紹介するプラグインバージョン、現在配布されている最新バージョン、公式ページのリンク等は以下の通りです。
テストしたサーバー | カラフルボックス |
WordPressバージョン | 6.0 |
PHPバージョン | 7.4.27 |
テストしたテーマ | HABONE(本サイトでも使用しているオリジナルテーマ) |
プラグインバージョン | 本記事で紹介するために試用したバージョン :1.1.6 公式サイトで配布されている最新バージョン :1.1.6 ※バージョンが違うと、仕様が大きく変更となっている可能性があります |
テストした日 | ※本記事の最終更新日であり、実際の試用日とは異なることがあります |
公式サイト | https://wordpress.org/plugins/dat-pass/ ※wordpress.org上のページへのリンクです |
作者サイト | ※プラグイン制作者の独自ページ(サイト)リンクです |
本記事を参考にWordPressサイトへプラグインの導入を検討される方へ
WordPressは古くから無料で配布されているサイト作成ツール(CMS)で、随時改良が加えられており、さまざまなバージョンが存在します。
さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。
そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。
本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。
- テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。 - プラグインに無料版と有料版(Pro版)がある場合、特に記載がなければ無料版の情報のみを紹介しています
- このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
- プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください(ここでは質問にお答えすることはできません)
【Dat Pass】プラグインの設定画面や表示画面の日本語化と翻訳
【Dat Pass】プラグインは管理画面、パスワード入力フォームとも、英語で表示されるため、日本語で使うには翻訳が必要です。
以下のようなフォームの文字列でよければ、私が作成した翻訳ファイルをこちらからダウンロードしてお使いください。
翻訳ファイルの適用先は、WordPress標準のプラグインフォルダです。
翻訳ファイルの適用方法が不明な方は、翻訳ファイルを更新で上書きされない場所へ保存し、優先読み込みさせるプラグイン「HA Language Overwrite」をお使いになるとよいでしょう。
【Dat Pass】プラグインのインストールと設定方法
インストール方法
インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください(プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください)。
WordPressを使い始めて間もない方(初心者の方)は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール&追加方法とエラー対処の方法も併せてご覧ください。
基本的な設定方法と使用方法
冒頭で書いた通り、パスワード保護したいブロック(ブロックエディタの場合)や範囲(クラシックエディタの場合)をショートコードで囲むだけで簡単にパスワード保護できます。
[datpass pass="パスワード"]
パスワードで保護するブロックまたは範囲(クラシックエディタの場合)
[/datpass]
このプラグインはパスワード入力をCookieなどで一時保存する機能はありません。したがって、訪問者はパスワード付きページを表示するたびにパスワードの入力と認証が必要になります。
ショートコードの特性上、プラグインを停止・削除すると、ショートコード及びパスワードがそのまま表示されてしまいますので、気を付けてください
【Dat Pass】プラグインの便利な使い方・カスタマイズ方法など
このプラグインをより便利に使うカスタマイズ技、テストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない情報、発見した不具合などを紹介します。
デザインは選べるけどイマイチかも...
このプラグインは本当に単機能なので、デザインの変更も設定上からは簡易的にできるだけになっています。
実際に表示してみると...うーーーん、ちょっとアレな画像が表示され、ちょっとアレなデザインと感じるのではないでしょうか?
しかも、通常のプラグインのように別のCSSファイルを読み込ませる方式ではなく、インライン(HTMLソース内にべた書き)で書かれているため、子テーマや追加CSSへ記述しても適用されません。
以下は、デザイン選択でWhite(デフォルト)にした状態で、下図のようになんとなくいい感じに見えるようにしたデザインサンプルとコードです。
コードはテーマのfunctions.phpへ追記します。
function ha_dat_pass_form_design(){
echo '<style>
.dathinh {
display: none;
}
.datbox {
display: block!important;
grid-template-columns: none;
padding: 20px;
background: #fff;
border: 1px solid #ccc;
border-radius: 12px;
box-shadow: none;
border: 1;
max-width: 100%!important;
margin-bottom: 10px;
margin-top: 20px;
color: #666;
font-family: inherit;
white-space: initial;
}
.datinput #datnhap:hover {
border: 2px solid #333 !important;
}
.datinput #datnhap {
border: 2px solid #333 !important;
background-color: #fff !important;
width: 100% !important;
font-size: inherit!important;
border-radius: 8px 0px 0px 8px !important;
outline: none !important;
color: inherit!important;
padding: 10px 10px 10px 33px !important;
margin: 0px !important;
box-shadow: none!important;
height: auto !important;
}
.datinput #datnut {
border: 2px solid #333 !important;
background: #333 !important;
color: #fff !important;
font-size: inherit !important;
border-radius: 0px 8px 8px 0px !important;
font-weight: normal !important;
text-align: center !important;
outline: none !important;
padding: 10px 20px 10px 20px !important;
margin: 0px !important;
box-shadow: none!important;
min-width: auto !important;
height: auto !important;
width: auto !important;
}
</style>';
}
add_action('wp_footer','ha_dat_pass_form_design');
styleタグの間は通常のCSSの書き方と同じですので、各自調整ください
インラインのスタイルコード上でも「!important」がガンガンに使われているため、上記コードもそれを上書きするためにガンガンに使っています
このページの更新履歴
更新日 | 更新内容 |
---|---|
2022年 6月 7日 | 本ページを公開しました |