「ツマミグイ」をリニューアル!TOPを流行りのタイル状に。人気記事と関連記事も搭載

「ツマミグイ」をリニューアル!TOPを流行りのタイル状に。人気記事と関連記事も搭載してます。
トップページをタイル形式にして、人気記事ランキングと関連記事を追加しましたのでその方法について簡単にご紹介します。

以前のこのようなトップでした。

screenshot.323

リニューアルによりこのようになりました。
今、流行りのタイル状です。一覧性があってこちらの方がみやすいですね。

ツマミグイ。  ハック記事満載!Webの美味しいトコをつまみぐい。明日のネタ話題作りにお役立ち。grade.upper.jp

関連記事も追加しています。

Image

今回、新たに搭載した機能は以下の3つです。

1.タイル状トップ
2.人気記事(アクセスランキング)
3.関連記事

簡単ではありますが、1つずつ説明していきます。

1.タイル状トップについて

正直、この点はjQueryのマソンリーが思い通りに動いてくれず、とても苦労しました。
簡単に手順をまとめるとこのようになります。

home.phpを編集します。
マソンリーを記述します。
親はどのクラスで子はどのクラスか指定します。

スタイルシートを調整します。
イメージは、はてぶを参考しています。
ポイントは、サイズが1024より(横幅)大きい場合にスタイルが適用されるようにしています。
mediaクエリーでmin-widthを1024にしています。

以上で完了です。

2.人気記事(アクセスランキング)

Googleアナリティクスデータを使った、人気アクセスランキングの掲載は、Google Analytis Popular Postsを使います。APIでランキングを取得します。

Image

プラグインを直接編集して、
・タイトル
・リンク
・コンテンツ抜粋
・サムネイル
・訪問数
を表示するようにします。

プラグインを直接編集して、カスタムPHPが扱いやすい形式に出力されるようにします。
スタイルシートでカスタムPHPを調整してタイル状にして、トップページに埋め込んでいます。

3.関連記事

similar-postsプラグインを使用しています。

Image

オプションの「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くらいして上に戻しています。

参考までにお試しください。
需要があるようでしたら、細かく追加で細かく説明していきます。

あなたにオススメ(Amazon)

あなたにオススメ(楽天)