MTタグ逆引き辞典

ページ送り機能でカスタムフィールドで指定したピックアップの記事を1ページ目だけに表示する

General Blogテーマのように、ページ送り機能を使う際に1ページ目だけにカスタムフィールドで指定した記事をピックアップとして表示したい、といった場合があります。テンプレートの詳細は、実際のGeneral Blogテーマでご確認ください。

テンプレート記述例

メインページから抜粋:

  <mt:SetVarBlock name="pickup-entry-list">
    <mt:Entries lastn="5" field:entry_pickup="1">
      <mt:EntriesHeader>
      <div class="group">
        <h2><i class="fa fa-hand-o-right"></i> ピックアップ!</h2>
      </mt:EntriesHeader>
        <div class="entry">
          <a href="<$mt:EntryPermalink$>">
            <img src="<mt:If tag="CustomFieldValue" identifier="main_image_entry"><mt:CustomFieldAsset identifier="main_image_entry"><$mt:AssetThumbnailURL width="320"$></mt:CustomFieldAsset><mt:Else><mt:EntryAssets type="image" sort_order="ascend" limit="1"><$mt:AssetThumbnailURL width="320"$><mt:Else><$mt:BlogRelativeURL$>images/noimage-s.jpg</mt:EntryAssets></mt:If>" alt="<$mt:EntryTitle encode_html="1"$>">
          </a>
          <h3><$mt:EntryTitle encode_html="1"$></h3>
          <p>
            <$mt:EntryDate format="%Y.%m.%d"$><br />
            <$mt:EntryExcerpt$>
          </p>
          <p class="text-right">
            <a href="<$mt:EntryPermalink$>" class="button tiny radius">
              <i class="fa fa-angle-double-right"></i> 続きを見る
            </a>
          </p>
        </div>
      <mt:EntriesFooter>
      </div>
      </mt:EntriesFooter>
    </mt:Entries>
  </mt:SetVarBlock>

  <mt:SetVarBlock name="entry-list">
    <div id="content">
      <h3 class="page-title">記事一覧</h3>
      <div id="entry-list">
        <$mt:Include module="entry-list"$>
      </div>
    </div>
  </mt:SetVarBlock>

  <mt:If name="is_first_page">
    <$mt:Var name="pickup-entry-list"$>
  </mt:If>
  <$mt:Var name="entry-list"$>

まず、mt:Entries lastn="5" field:entry_pickup="1"でentry_pickupのカスタムフィールドでチェックが入っている最新の5件の記事情報を取り出し、mt:SetVarBlock name="pickup-entry-list"で変数として保存します。

次にmt:SetVarBlock name="entry-list"で変数を用意しておき、mt:Include module="entry-list"で読み込まれているentry-listモジュール内の処理が行われます。

entry-listモジュール:

<$mt:SetVar name="is_first_page" value="1"$>
<mt:Entries unique="1" paginate_by="$paginate">
<div class="entry">
  <a href="<$mt:EntryPermalink$>"><img src="<mt:If tag="CustomFieldValue" identifier="main_image_entry"><mt:CustomFieldAsset identifier="main_image_entry"><$mt:AssetThumbnailURL width="240"$></mt:CustomFieldAsset><mt:Else><mt:EntryAssets type="image" sort_order="ascend" limit="1"><$mt:AssetThumbnailURL width="240"$><mt:Else><$mt:BlogRelativeURL$>images/noimage-s.jpg</mt:EntryAssets></mt:If>" alt="<$mt:EntryTitle$>"></a>
  <h3><$mt:EntryTitle$></h3>
  <p><$mt:EntryDate format="%Y.%m.%d"$> <mt:EntryCategories type="primary"><a href="<$mt:CategoryArchiveLink$>" class="category"><$mt:CategoryLabel encode_html="1"$></a></mt:EntryCategories><br /><$mt:EntryExcerpt$></p>
  <p class="text-right"><a href="<$mt:EntryPermalink$>" class="button tiny radius"><i class="fa fa-angle-double-right"></i> 続きを見る</a></p>
</div>

<mt:EntriesFooter>
<nav class="page-navigation">
  <ul class="page-navigation-list">
    <mt:PaginationHasPrevious>
    <li class="page-navigation-list-item page-navigation-prev"><a href="<$mt:PaginationPreviousURL$>" rel="prev">前の<$mt:GetVar name="paginate"$>件</a></li>
    <$mt:SetVar name="is_first_page" value="0"$>
    </mt:PaginationHasPrevious>
    <mt:PaginationHasNext>
    <li class="page-navigation-list-item page-navigation-next"><a href="<$mt:PaginationNextURL$>" rel="next">次の<$mt:GetVar name="paginate"$>件</a></li>
    </mt:PaginationHasNext>
  </ul>
</nav>
</mt:EntriesFooter>
</mt:Entries>

mt:SetVar name="is_first_page" value="1"で1ページ目として1の値を保存しておきます。
その後、ページ送りのmt:PaginationHasPrevious内でmt:SetVar name="is_first_page" value="0"を指定します。
それによりis_first_pageの値が、ページ送りで前のページリンクがない場合1ページ目と判断し1を、ある場合は2ページ目以降として判断し0になります。
これによって、メインページのmt:If name="is_first_page"で変数に保存しておいたpickup-entry-listのピックアップの表示を出し分けることができます。

使用したMTタグはこちら

Movable Type.net は無料トライアルが可能です。
Web制作者の方で、デモや評価利用をご希望の場合は、制作者向け評価ライセンスをご利用ください。

無料トライアル 資料ダウンロード 制作者向け評価ライセンス