【QooQ】関連記事の表示件数を変更する方法【カスタマイズ】

前回、関連記事を中央寄せにしたのですが、関連記事の表示件数が 5 件になったり 6 件になったりしました。そこで、関連記事の表示件数を変更する方法を調べてみました。

関連記事の表示件数の変更方法

QooQテンプレートの下記値(mrpMax)で変更可能でした。関連記事の表示件数の初期値は 6 件です。

<script type='text/javascript'>
    var mrpPosturl=&quot;<data:post.canonicalUrl/>&quot;;
    var mrpMax=6;
    mrp_output();
</script>

なぜ6件にしているのに5件になったりするのか？

QooQのテンプレートを見てみると、どうやら関連記事は同じカテゴリから 10 件取得して、その中からランダムで取得して、もし現在表示している記事が含まれる場合、5件で表示され、含まれない場合は 6 件で表示されるようです。

確かに関連記事に今表示している記事は不要ですもんね。なるほど、だから表示件数が 5 件になったり 6 件になったりするんですね。ってことは、mrpMax の値を 5 にすれば、最大 5 件になるのですが、もし現在表示している記事が含まれる場合、4件の表示になりますね。

関連記事を指定件数できっちり表示する方法

やっぱりきっちり指定した件数分の関連記事を表示したかったので変更してみました。QooQのテンプレートを直接変更しますので、実施前に必ずテンプレートのバックアップ作成をお願いします。

手順

1.Blogger のテンプレート編集画面にて「mrpMax」で検索して以下のにコードを修正してください。例では関連記事を10件表示するように修正しています。

変更前

<b:includable id='mrp' var='post'>
<div id='mrp-content'/>
<b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast == &quot;true&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=mrp_input&amp;max-results=10&quot;' type='text/javascript'/>
    </b:if>
</b:loop>
<script type='text/javascript'>
    var mrpPosturl=&quot;<data:post.canonicalUrl/>&quot;;
    var mrpMax=6;
    mrp_output();
</script>
</b:includable>

変更後

赤字部分が修正するコードです。

max-results は関連記事を表示する件数 + 1 した値を設定します。10 件の場合、11 です。何故 + 1 件するのかというと現在表示している記事が含まれた場合は違う記事を表示するためです。

mrpMax は関連記事を表示する件数を設定します(10 件表示する場合、10 です)

<b:includable id='mrp' var='post'>
<div id='mrp-content'/>
<script type='text/javascript'>
    mrpPosturl=&quot;<data:post.canonicalUrl/>&quot;;
</script>
<b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast == &quot;true&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=mrp_input&amp;max-results=11&quot;' type='text/javascript'/>
    </b:if>
</b:loop>
<script type='text/javascript'>
    // コメントアウト
    // var mrpPosturl=&quot;<data:post.canonicalUrl/>&quot;;
    var mrpMax=10;
    mrp_output();
</script>
</b:includable>

2.Blogger のテンプレート編集画面にて「mrp-v1.04」で検索して以下のコードを修正してください。

変更前

//<![CDATA[
//mrp-v1.04
var relatedAry=new Array;function mrp_input(e){for(var t=0;t<e.feed.entry.length;t++){var r=new Object,n=e.feed.entry[t];r.title=n.title.$t;try{r.thumbnail=n.media$thumbnail.url}catch(e){r.thumbnail="noneImage"}for(var l=0;l<n.link.length;l++)if("alternate"==n.link[l].rel){r.link=n.link[l].href;break}for(var i=0,m=0;m<relatedAry.length;m++)if(r.link==relatedAry[m].link){i=1;break}i||relatedAry.push(r)}}function mrp_output(e){for(var t,r,n,l,a,i=mrpMax<relatedAry.length?mrpMax:relatedAry.length,d=document.getElementById("mrp-content"),m=[],s=0;m.push(s++)<relatedAry.length;);if(m=m.sort(function(){return Math.random()-.5}),relatedAry.length<=1)(a=document.createElement("p")).textContent="関連する記事はありません。",d.appendChild(a);else for(var p=0;p<i;p++)t=relatedAry[m[p]],mrpPosturl!=t.link&&((r=document.createElement("div")).setAttribute("class","mrp-post"),"noneImage"!=t.thumbnail&&((n=document.createElement("img")).setAttribute("src",t.thumbnail),n.setAttribute("class","mrp-post-img"),r.appendChild(n)),(a=document.createElement("p")).setAttribute("class","mrp-post-title"),a.textContent=t.title,r.appendChild(a),(l=document.createElement("a")).setAttribute("href",t.link),l.setAttribute("class","mrp-post-link"),r.appendChild(l),d.appendChild(r))}
//]]>

変更後

赤字部分が修正する修正するコードです。関連記事を取得した時点で、表示している記事と同じ場合は読み飛ばすようにしています。

//<![CDATA[
//mrp-v1.04
var relatedAry=new Array;var mrpPosturl = "";function mrp_input(e){for(var t=0;t<e.feed.entry.length;t++){var r=new Object,n=e.feed.entry[t];r.title=n.title.$t;try{r.thumbnail=n.media$thumbnail.url}catch(e){r.thumbnail="noneImage"}for(var l=0;l<n.link.length;l++)if("alternate"==n.link[l].rel){r.link=n.link[l].href;break}if(mrpPosturl==r.link){continue;}for(var i=0,m=0;m<relatedAry.length;m++)if(r.link==relatedAry[m].link){i=1;break}i||relatedAry.push(r)}}function mrp_output(e){for(var t,r,n,l,a,i=mrpMax<relatedAry.length?mrpMax:relatedAry.length,d=document.getElementById("mrp-content"),m=[],s=0;m.push(s++)<relatedAry.length;);if(m=m.sort(function(){return Math.random()-.5}),relatedAry.length<=1)(a=document.createElement("p")).textContent="関連する記事はありません。",d.appendChild(a);else for(var p=0;p<i;p++)t=relatedAry[m[p]],mrpPosturl!=t.link&&((r=document.createElement("div")).setAttribute("class","mrp-post"),"noneImage"!=t.thumbnail&&((n=document.createElement("img")).setAttribute("src",t.thumbnail),n.setAttribute("class","mrp-post-img"),r.appendChild(n)),(a=document.createElement("p")).setAttribute("class","mrp-post-title"),a.textContent=t.title,r.appendChild(a),(l=document.createElement("a")).setAttribute("href",t.link),l.setAttribute("class","mrp-post-link"),r.appendChild(l),d.appendChild(r))}//]]>

3.テンプレートを保存します。

変更できているか確認

修正後に関連記事が10件表示されていれば変更完了です。

おわりに

もしかすると今後のQooQテンプレートのアップデートで修正されるかもしれませんが、すごく気になったので修正できてよかったです。