「ツマミグイ」をリニューアル！TOPを流行りのタイル状に。人気記事と関連記事も搭載してます。
トップページをタイル形式にして、人気記事ランキングと関連記事を追加しましたのでその方法について簡単にご紹介します。
以前のこのようなトップでした。
リニューアルによりこのようになりました。
今、流行りのタイル状です。一覧性があってこちらの方がみやすいですね。
関連記事も追加しています。
今回、新たに搭載した機能は以下の３つです。
１．タイル状トップ
２．人気記事（アクセスランキング）
３．関連記事
簡単ではありますが、１つずつ説明していきます。
１．タイル状トップについて
正直、この点はjQueryのマソンリーが思い通りに動いてくれず、とても苦労しました。
簡単に手順をまとめるとこのようになります。
home.phpを編集します。
マソンリーを記述します。
親はどのクラスで子はどのクラスか指定します。
スタイルシートを調整します。
イメージは、はてぶを参考しています。
ポイントは、サイズが1024より（横幅）大きい場合にスタイルが適用されるようにしています。
mediaクエリーでmin-widthを1024にしています。
以上で完了です。
２．人気記事（アクセスランキング）
Googleアナリティクスデータを使った、人気アクセスランキングの掲載は、Google Analytis Popular Postsを使います。APIでランキングを取得します。
プラグインを直接編集して、
・タイトル
・リンク
・コンテンツ抜粋
・サムネイル
・訪問数
を表示するようにします。
プラグインを直接編集して、カスタムPHPが扱いやすい形式に出力されるようにします。
スタイルシートでカスタムPHPを調整してタイル状にして、トップページに埋め込んでいます。
３．関連記事
similar-postsプラグインを使用しています。
オプションの「Output template:」をカスタマイズして、フッター位置に搭載します。
私は以下のようにカスタマイズしています。
<div class="similar-posts">
<p class="similar-title"><a href="{url}" title="{title}">{title}</a></p>
<div class="similar-img"><a href="{url}">{php: echo get_the_post_thumbnail( {postid},thumbnail ); }</a></div>
</div>
あとは、体裁をスタイルシートで整えて完成です。
細かいテクニックになりますが、サムネイルがない記事については、ダミー画像をおいています。これは、ボックスに画像を設置しています。
加えて、Aタグを縦に拡大して、クリック範囲をボックス全体に広げています。
同時にサムネイル画像が下にずれてしまうので、marginをマイナス160pxくらいして上に戻しています。
参考までにお試しください。
需要があるようでしたら、細かく追加で細かく説明していきます。