NOVA

NOVAで人気記事ランキングを設置する

NOVAバージョン1.2で追加された、サイドバーのフリースペース表示する人気記事ランキングです。


人気記事ランキングとは?

そのサイトで閲覧数の多い記事のランキングです。WordPressのプレグインでいえば「WordPress Popular Posts」です。

 

ただ、記事の閲覧数を計測して吐き出せるWordPressと違い、静的サイトのSIRIUSではサイトを生成した状態で表示されるため、閲覧数をリアルタイムで計測させることはできません。

 

一応NOVAの人気記事ランキングでも閲覧数を表示出来るように作られていますが、定期的に人気記事に合わせてランキングを作成し直すのは大変な手間なので、実際は閲覧数を表示しないで作為的な「見て欲しい記事」のランキングを作成することになるかと思います。

設置方法

「サイト全体設定→フリースペースの設定」から「メインメニュー(上段)」か(下段)を選択して以下のコードを貼り付けます。(下段)の場合はページのスクロールに合わせてランキングが追従します。

 

 

<h4>人気の記事</h4>
<noReturn>
<ul class="popular-post">
<li>
<a href="<% pageDepth %>"></a>
<figure class="thumb">サムネイル</figure>
<p>タイトル<span class="views">ビュー</span></p>
</a>
</li>
<li>
<a href="<% pageDepth %>"></a>
<figure class="thumb">サムネイル</figure>
<p>タイトル<span class="views">ビュー</span></p>
</a>
</li>
<li>
<a href="<% pageDepth %>"></a>
<figure class="thumb">サムネイル</figure>
<p>タイトル<span class="views">ビュー</span></p>
</a>
</li>
<li>
<a href="<% pageDepth %>"></a>
<figure class="thumb">サムネイル</figure>
<p>タイトル<span class="views">ビュー</span></p>
</a>
</li>
<li>
<a href="<% pageDepth %>"></a>
<figure class="thumb">サムネイル</figure>
<p>タイトル<span class="views">ビュー</span></p>
</a>
</li>
</ul>
</noReturn>

 

大きな人気ランキングにする場合

 

<ul class="popular-post">

<ul class="popular-post big">

と変更してください。PC表示で大きくなります。タブレットやスマホなど画面幅が小さい端末では大きくなりませんので注意してください。

ランキング記事を作成する

フリースペースに設置してからコードを編集するのはやり辛いため、適当な記事にコードを貼り付けてから編集してフリースペースに設置します。

 

記事ではプレビューで正常に表示されません。必ずフリースペースに貼り付けてからプレビューして確認しましょう。

 

ランキング数を追加する

<li>~</li>が1記事なので、そのまま設置すれば5位まで表示されます。記事数を多くしたい場合は<li>~</li>を追加してください。

 

<li>
<a href="<% pageDepth %>"></a>
<figure class="thumb">サムネイル</figure>
<p>タイトル<span class="views">ビュー</span></p>
</a>
</li>

 

記事へのリンクを作成する

<li>
<a href="<% pageDepth %>"></a>
<figure class="thumb">サムネイル</figure>
<p>タイトル<span class="views">ビュー</span></p>
</a>
</li>

 

記事へのリンクを作成するには「<a href="<% pageDepth %>"></a>」を選択して「リンクの挿入」から「内部ページ」で記事を選択します。

 

 

リンクが作成されたら記事タイトルの後ろの</a>を削除します。

 

 

次に記事タイトルをカットして「タイトル」の位置にペーストします。

 

 

サムネイルを設定する

<li>
<a href="<% pageDepth %>sirius-template-nova.html">
<figure class="thumb">サムネイル</figure>
<p>SIRIUSテンプレート「NOVA」の特徴<span class="views">ビュー</span></p>
</a>
</li>

 

「<figure class="thumb">サムネイル</figure>」の「サムネイル」に画像を設定します。

 

 

閲覧数を設定する

<li>
<a href="<% pageDepth %>sirius-template-nova.html">
<figure class="thumb"><img src="<% pageDepth %>img/nova-template.png" alt="" /></figure>
<p>SIRIUSテンプレート「NOVA」の特徴<span class="views">ビュー</span></p>
</a>
</li>

 

閲覧数を表示するには「ビュー」を「999ビュー」などに変更します。閲覧数を削除するには「ビュー」の文字を削除します。

参考

アイキャッチ画像に表示されているランキングのコードは以下になっています。

 

<h4>人気の記事</h4>
<noReturn>
<ul class="popular-post">
<li>
<a href="<% pageDepth %>">
<figure class="thumb"><img src="<% pageDepth %>img/ogp-top.png" alt="" /></figure>
<p>トップページ<span class="views">314ビュー</span></p>
</a>
</li>
<li>
<a href="<% pageDepth %>sirius-template-nova.html">
<figure class="thumb"><img src="<% pageDepth %>img/nova-template.png" alt="" /></figure>
<p>SIRIUSテンプレート「NOVA」の特徴<span class="views">221ビュー</span></p>
</a>
</li>
<li>
<a href="<% pageDepth %>sirius-cache-clear.html">
<figure class="thumb"><img src="<% pageDepth %>img/sirius-ec.png" alt="" /></figure>
<p>SIRIUSで更新内容がサイトに反映されないときの対処法<span class="views">79ビュー</span></p>
</a>
</li>
<li>
<a href="<% pageDepth %>sirinova-gift.html">
<figure class="thumb"><img src="<% pageDepth %>img/sirinova-gift.png" alt="" /></figure>
<p>当サイトのSIRIUSや他商品の購入特典(すべて無料!)<span class="views">74ビュー</span></p>
</a>
</li>
<li>
<a href="<% pageDepth %>nova-button.html">
<figure class="thumb"><img src="<% pageDepth %>img/nova-button.png" alt="" /></figure>
<p>CSSボタンリンクのデザイン一覧<span class="views">61ビュー</span></p>
</a>
</li>
</ul>
</noReturn>