a-blog cmsで、PR付きの検索結果を実装する

検索サイトなどで、検索結果が表示された際に、通常の検索結果の上に「ピックアップ」や「PR」として、意図的に上部に表示されるデータを目にしたことがあると思います。
今回は、a-blog cmsの検索機能で、検索した際に、検索条件に当てはまるPRエントリーを出すカスタマイズをご紹介します。



PR記事として登録するためのカスタムフィールドを作成

まず、エントリーのカスタムフィールドとして、PR記事として登録するためのカスタムフィールドを作成します。
/テーマフォルダ/admin/entry/の中に、通常のカスタムフィールドを作成するのと同じ要領で、カスタムフィールドを作成してください。
以下は例になります。変数名は適宜変更して大丈夫です。

<table class="acms-admin-table-admin-edit">
  <tr>
    <th>ピックアップ</th>
    <td>
      <div class="acms-admin-form-radio">
        <input type="radio" name="pickup" value="false" {pickup:checked#false} id="input-radio-pickup-false" />
        <label for="input-radio-pickup-false">
          <i class="acms-admin-ico-radio"></i>ピックアップエリアに表示しない</label>
      </div>
      <div class="acms-admin-form-radio">
        <input type="radio" name="pickup" value="true" {pickup:checked#true} id="input-radio-pickup-true" />
        <label for="input-radio-pickup-true">
          <i class="acms-admin-ico-radio"></i>ピックアップエリアに表示</label>
      </div>
      <input type="hidden" name="field[]" value="pickup" />
    </td>
  </tr>
</table>

検索結果画面に、PR用のモジュールと、PR以外のモジュールを分けて設置

検索結果画面の方は、
・PR用のモジュール
・PR以外のモジュール
を分けて表示させます。

モジュールを分けることによって、例えば上のイメージ画像のように、PRエリアだけ背景色を変えたり、表示方法を変えたりするなど柔軟なレイアウト変更が可能になります。

モジュールの作成

例として、「list_pr」「list_default」の2つのエントリーサマリーモジュールを作成します。
表示条件の設定内容は、以下を設定します。
ここで注意したいのは、カスタムフィールドにはチェックを入れないことです。
表示条件は、CTXで指定するようにします。
CTXの使い方については、こちらを参考ください。



HTMLの記述

作成した2つのモジュールが表示できるよう、HTMLを記述していきます。

PR記事の表示用HTML
    <!-- BEGIN_MODULE Entry_Summary id="list_pickup" ctx="field/pickup/true/_and_/%{FIELD}" -->
   〜 ここに内容を記載します 〜
    <!-- END_MODULE Entry_Summary -->
PR以外の記事表示用HTML
    <!-- BEGIN_MODULE Entry_Summary id="list_default" ctx="field/pickup/false/_and_/%{FIELD}" -->
   〜 ここに内容を記載します 〜
    <!-- END_MODULE Entry_Summary -->

これで、PR記事とそれ以外の記事を出し分けることができます。
HTML内の「%{FIELD}」は、検索条件を取得するグローバル変数です。
検索条件に加えて、PR記事かそうでないかを付け加えて呼び出しています。

PR記事の出力方法は、このほかにもあるとは思いますが、
方法の一つとしてご紹介しました。
CTXをうまく利用すると、柔軟な出力が可能になります。
ぜひ試してみてください!


a-blog cmsでサイト構築時・公開時に確認しておきたいチェックリスト 2018年版


こちらは a-blog cms Advent Calender 2018の14日目の記事になります。


5年前のアドベントカレンダーで、「a-blog cmsのチェックリスト」を公開しました。今回は、そのバージョンアップ版をご紹介します。

5年前というと、DocomoからiPhone5sが発売された時期なんですね。もうずいぶん昔のことのように感じられます。

さて、a-blog cmsの方も5年前からかなり変わりました。5年前というと、バージョンはいくつだったでしょうか・・。
と思って調べてみると、なんとa-blog cmsのWikipediaが存在していました!
こちらの情報によると、ちょうど5年前に2.0がリリースされたようですね。

バージョンが変わったとはいえ、チェックリストの根幹部分はほぼ変わりません。
今回、主に変わった部分は以下になります。

  • 昔の機能のチェック項目を削除(top.htmlのリダイレクト等)
  • 解析タグの変更(GA→GTM)
  • a-blog cmsチェックリストの利用
  • リニューアルでURLが変更になる場合のリダイレクト処理
  • 常時SSLの設定
  • ソース出力まわりの整備

ダウンロードは以下よりお願いします。Excel形式です。


ファイルを開く

a-blog cmsチェックリスト 2018年版





a-blog cmsのチェックリストについて


a-blog cmsには、管理画面に「チェックリスト」というメニューがあります。チェックリストでは、
・ライセンスが適用されたか
・デバッグモード
・フォームの送信先メールアドレス
・画像などの容量上限
などが確認できます。
このページ1箇所を見るだけで、Excelのチェックリストの項目が一度に確認できるので便利です。



カレンダー表示の月送りをページ遷移せずに実装


こちらは a-blog cms Advent Calender 2017の18日目の記事になります。

a-blog cmsでは、カレンダーで予定や記事リンクを表示させるモジュールがいくつかあります。
「この日書いた記事」をブログ等で表示させることはもちろん、店舗などの営業日のお知らせやイベントなどのスケジュールを掲載することもあると思います。

その時、「次の月、前の月を見たいな」と思ってリンクをクリックすると、通常ならページごと遷移するようになっていますが、今回は、これをページ遷移せずに月送りできるカスタマイズをご紹介します。a-blog cmsの「ポストインクルード」という機能を使いました。

サンプル

カレンダー月送りサンプル
「前月」「次月」をクリックすると、ページ遷移せずにカレンダーが切り替わるようになっています。

1.テンプレートHTMLファイルを作成

まず、カレンダーモジュール自体を記述するHTMLファイルを作成します。
今回は「/sample/calendar/tpl_cal.html」としましょう。

作成したファイルに以下のコードを貼り付けてください。モジュールID設定やCSS表示の設定は適宜行っておきます。


「カレンダー表示の月送りをページ遷移せずに実装」の続きを読む

a-blog cmsで、特定のファイルを会員限定で閲覧できる機能を作ってみました


こちらは、a-blog cms Advent Calendar 2016の13日目のエントリーです。a-blog cmsの秋合宿で発表させていただいた内容です。画像やソースの説明を少し詳しく解説しています。

最近、ノウハウなどのファイルを会員限定でダウンロードできるサイトを見かけるようになりました。
会員登録を促す目的、アクセス解析に活かす目的などいろいろあると思います。
そういう時に使えるカスタマイズを今回はご紹介します。

上の図のように、誰でもアクセスできるファイルと、会員(ログイン時)のみアクセスできるファイルが混在している場合を考えていきます。


「a-blog cmsで、特定のファイルを会員限定で閲覧できる機能を作ってみました」の続きを読む

RSS 2.0