投稿記事内の最初の画像をアクセスランキングに表示-MovableType

Thu, 01 May 2014 09:28:29 +0900

投稿記事内の画像を使って、アクセスランキングにサムネイル画像を表示するためにムーバブルタイプでアクセスランク順に人気記事リストを表示する方法とその他のサンプルのソースをかき集めてどうにかできたのでメモ。

MTに画像を登録していればもっと簡単にできるようなのですが、僕はムーバブルタイプで画像を使うとき、IMGタグを直接書いています。どうもMTのアイテムとして画像を登録するやり方が苦手なんです。画像の遅延表示やLightboxとか使うのに、あとでソースを修正することが多く、最初から手打ち登録するほうが気分的に安心なんです。こんな手間をかけなくてもプラグインとかありそうですが…。

<MTIf tag="BlogEntryCount"><br /><MTEntries sort_by="accessed_count" sort_order="descend" limit="5"><br />  <mt:EntriesHeader><br />    <div class="widget-recent-entries widget-archives widget"><br />      <h3 class="widget-header">アクセスランキング</h3><br />      <div class="widget-content"><br />        <ul id="access-lanking"><br />          </mt:EntriesHeader><br />          <$mt:setvar name="rank" value="1" op="++"$><br />            <MTSetVarBlock name="GetImageURL">
              <MTEntryBody regex_replace="/<[^i].*?>|<i[^m]*?>|<iframe.*?>|<input.*?>|<ins.*?>|<isindex.*?>|\s/g","" regex_replace='/(.*?src=")(.*?)(".*)/g','$2' regex_replace='/^[^\.\/h].*/g','none'>
            </MTSetVarBlock><br />              <li><br />                <MTIf name="GetImageURL" like="none"><br />                    <a href="<$MTEntryPermalink$>"><img src="<$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/rainier/img/siteicon-sample.png" width="60" height="60" alt="<$MTEntryTitle$>" /></a><br />                <MTElse><br />                    <a href="<$MTEntryPermalink$>"><img src="<$MTGetVar name="GetImageURL"$>" width="60" height="60" alt="<$MTEntryTitle$>" /></a><br />                </MTIf><br />                <a href="<$MTEntryPermalink$>"><p class="entry-title"><$MTEntryTitle trim_to="43+..."$></p></a><br />              </li><br />            <mt:EntriesFooter><br />        </ul><br />      </div><br />    </div><br />  </mt:EntriesFooter><br /></MTEntries><br /></MTIf>

（ランキング表示にAccess Counterというプラグインを使っていることが前提のソースです。）

まず、正規表現を使ってEntryBody（記事内）のソースからIMGタグのsrcにある画像パスを抜き出してGetImageURLという変数に代入します。もし、画像がなかったらnoneという文字を代入します。

<MTSetVarBlock name="GetImageURL">
   <MTEntryBody regex_replace="/<[^i].*?>|<i[^m]*?>|<iframe.*?>|<input.*?>|<ins.*?>|<isindex.*?>|\s/g","" regex_replace='/(.*?src=")(.*?)(".*)/g','$2' regex_replace='/^[^\.\/h].*/g','none'>
</MTSetVarBlock><br />

アクセスランキング表示の際、画像がなければ代替画像を表示して、あれば GetImageURLに入っている画像パスを使って表示します。

<MTIf name="GetImageURL" like="none"><br />  <a href="<$MTEntryPermalink$>"><img src="<$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/rainier/img/siteicon-sample.png" width="60" height="60" alt="<$MTEntryTitle$>" /></a>
<MTElse><br />  <a href="<$MTEntryPermalink$>"><img src="<$MTGetVar name="GetImageURL"$>" width="60" height="60" alt="<$MTEntryTitle$>" /></a><br /></MTIf>

この方法にMTの画像アイテムがあればそれを優先するようなことも加えたいのですが、とりあえず今回はここまで。

参考ページ

http://akamiru.com/2014/02/mt-accesse-counter.html http://akamiru.com/2014/02/mt-accesse-counter.html

アクセスランキング on qwerty.work

投稿記事内の最初の画像をアクセスランキングに表示-MovableType

参考ページ