Creative for Life !

バドミントンクリエイターを目指す学生のブログ

a-blogcmsのエントリーにパスワード設定機能を実装してみた

a-blogcmsでエントリーごとにパスワードが設定できる機能を実装してみました。

使用したa-blogcmsについて
バージョン:2.6.1.2
テンプレート:blog2016

エントリーパスワード認証のデモページ(「pass」で認証)


実装方法

今回はエントリーの編集画面にパスワード設定のカスタムフィールドを追加し、パスワード認証フォームを設置できるようにしました。

カスタムフィールドの設定

ますはじめにカスタムフィールドの設定を行います。
blog2016テーマの場合 [.../themes/blog2016/admin/entry/] に任意のHTMLファイルを作成します。この記事では「pass.html」という名前で作っていきます。

pass.htmlのソースコード

<div class="acms-admin-accordion">
<h3 class="acms-admin-accordion-title"><a href="#fadePwInfo" class="js-fader acms-admin-accordion-title-link">パスワード設定<span class="acms-admin-icon-arrow-small-down"></span></a></h3>
<div id="fadePwInfo" class="acms-admin-accordion-inner">
<table class="entryFormTable acms-admin-table-entry">
<tr>
<th>エントリーパスワード<i data-acms-tooltip="エントリーのパスワードを設定します。" class="acms-admin-icon-tooltip js-acms-tooltip"></i></th>
<td>
<input type="text" name="entryPass" value="{entryPass}" size="20" />
<input type="hidden" name="field[]" value="entryPass" />
</td>
</tr>
<tr>
</table>
</div>
</div>

ファイルを作成したら、同じ階層にある「field.html」に以下のソースコードを追加します。

<!--#include file="/admin/entry/pass.html" -->

これでエントリー編集時にパスワードを設定する機能を実装することができました。

パスワード認証フォームのテンプレート

次にパスワード認証を行うためのフォーム作っていきたいと思います。

blog2016テーマの場合 [.../themes/blog2016/include/] に任意のHTMLファイルを作成します。この記事では「entry-pass.html」という名前で作っていきます。

entry-pass.htmlのソースコード

<!-- ## パスワードが設定されている場合は認証フォームを表示 -->
<!-- BEGIN_MODULE Touch_NotEdit -->
<!-- BEGIN_IF [{entryPass}/nem/_and_/%{pass}/neq/{entryPass}] -->
<p>このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。</p>
<form action="{titleUrl}?pass=%{pass}" method="get" class="acms-form">
<!--#include file="/contact/form/input.html"-->
<input type="password" name="pass" value="%{pass}" />
<input type="submit" value="認証" class="acms-btn" />
</form>
<!-- BEGIN_IF [%{pass}/nem] -->
パスワードが間違っています
<!-- END_IF -->
<!-- END_IF -->
<!-- END_MODULE Touch_NotEdit -->

<!-- ## パスワードが正しいか未設定の場合にエントリーを表示 -->
<!-- BEGIN_IF [%{pass}/eq/{entryPass}/_or_/{entryPass}/em] -->
<!--#include file="/include/unit.html"-->
<!-- END_IF -->

次にエントリーの本文が表示される場所に「entry-pass.html」を読み込みます。

blog2016テーマの場合 [.../themes/blog2016/include/] の「entry-body.html」ファイルに以下の変更を行います。

<!--#include file="/include/form/unit.html"-->」を以下のコードに変更

<!--#include file="/include/entry-pass.html"-->

実装する際の注意点

  • 認証後はURLにパスワードが表示されてしまう
  • RSSリーダーではパスワードを入力しなくても記事の中身が見えてしまう

など

まだまだ改善の余地がありそうなので上手くできそうな方法を探してみたいと思います。


blog comments powered by Disqus
桂川涼伊の画像

桂川涼伊(Katsuragawa Ryoi)

Badminton Creator

バドミントンクリエイターを目指す放送大学4年生。
バドミントンのコーチを5年間努めた経験を活かし、バドミントンのWebサービスやアプリの制作に取り組んでいます。

エントリーリスト

お探しの記事は見つかりませんでした。

カテゴリーリスト

タグクラウド