オプション一覧表ご希望の方はこちらから

WordPressのテーマSangoでウィジェットだけでトップページに人気記事を設置する方法

閑古鳥です。

本日はお家に関する記事ではありませんので、興味のない方はスルーしてください。

SANGOのユーザー向けのTwitterアカウントで「トップページに人気記事を設置する方法」が紹介されていました。

参考

【サルワカ風】トップページに人気記事を設置する方法SANGOカスタマイズガイド

紹介されたカスタマイズ方法はHTMLとCSSがある程度分かる中級者~上級者向けとなっています(解説通りに設定すれば、詳しくない方でもあまり難しくはないと思います)。

「難しいことは分からない」という方向けに、ウィジェットだけを使った「トップページに人気記事を設置する方法」をご紹介したいと思います。

(追記:11/13に【サルワカ風】トップページに人気記事を設置する方法の中でもウィジェットを使った場合のカスタマイズ方法も掲載されていました)

手順

手順は至って簡単です。使用するのは「トップページ記事一覧上」のウィジェットです。

SANGOトップページ記事一覧上ウィジェット

「カスタムHTML」を「トップページ記事一覧上」にドラッグ、下記の例1、例2のようにコードを貼り付けるだけで完成です。

ウィジェット設定に関しては、カスタマイズガイドに詳しく書かれていますのでご覧ください。

参考

ウィジェットの設定をしよう:広告の貼り方も解説 SANGOカスタマイズガイド

例1 カードタイプ

HTML
<div class="widget-menu__title main-bc ct str
ong"><i class="fa fa-hand-o-right"></i> Pick Up</div>
[yoko2 responsive][cell][card id="★記事番号★"][/cell][cell][card id="★記事番号★"][/cell][/yoko2]
<div class="widget-menu__title main-bc ct strong"><i class="fa fa-file-text-o"></i> Recent Posts</div>

PCのみ、スマホのみ、あるはPCとスマホで表示方法を変えたいときには、ショートコード[PC]、を利用すればOKです。その場合のHTMLがこちらです。

HTML
[pc]
<div class="widget-menu__title main-bc ct str
ong"><i class="fa fa-hand-o-right"></i> Pick Up</div>
[yoko2 responsive][cell][card id="★記事番号★"][/cell][cell][card id="★記事番号★"][/cell][/yoko2]
<div class="widget-menu__title main-bc ct strong"><i class="fa fa-file-text-o"></i> Recent Posts</div>
[/pc]

例2 横長タイプ


HTML
<div class="widget-menu__title main-bc ct str
ong"><i class="fa fa-hand-o-right"></i> Pick Up</div>
[yoko2 responsive][cell][kanren id="★記事番号★"][/cell][cell][kanren id="★記事番号★"][/cell][/yoko2]
<div class="widget-menu__title main-bc ct strong"><i class="fa fa-file-text-o"></i> Recent Posts</div>

また上記コードのままだとスマホでは新着記事と同様に1列での表示となります。横2列表示にしたい場合は、の中のresponsiveを消せばOKです。

このカスタマイズのメリットとデメリット

メリット

  1. ショートコード「横並び2列」を使っていますが、「横並び3列」でも表示が可能です。
  2. 表示させる関連記事には「横長」タイプ、「カードタイプ」のいずれも使うことが出来ますので、新着記事のレイアウトに合わせることが可能です。
  3. カスタムHTMLのコードに書いた記事番号を変更するだけで、簡単に注目記事の変更が可能な点です。

デメリット

この方法の欠点としては、並べる記事のタイトルの長さが大きく異なる場合に、高さが不揃いとなってしまう点です。

もう一点、記事一覧の2ページ目以降にも、ページ先頭に注目記事が表示される点です。

最後に

FTPソフトを使う必要がないので、注目記事の入れ替え頻度が高い方は手間がかからなくていいかもしれません。

万が一失敗しても表示が崩れるだけなので、自信のない方はこの方法が無難かもしれませんね。

コメントを残す

メールアドレスが公開されることはありません。

*