ブログの改造に良くも悪くも前向きな@knk_nです。どうもです。
ブログトップページのレイアウトが記事ページのレイアウトと同じだったのでちょっと変化をつけてみました。
せっかくなのでカスタマイズに使ったもろもろを自分への備忘録を兼ねて紹介しておこうかな。
項目別に読む
jQuery Masonryで記事を新聞風に並べる
| WordPressのトップページを雑誌や新聞のような段組にする方法 | Stocker.jp / diary |
jQuery MasonaryというjQueryプラグインを使うことでフツーは縦に並ぶ記事を新聞や雑誌のような段組に並べることができるらしい。
 |
 |
CSSでfloatとか使えば横並びにはできるんだけど、コレ使うと自然な感じになるみたい。
段組の記事が果たして見やすいのかということは、さておいて（ｵｲ
何事もチャレンジですからね。
@Stocker_jpさんの記事を参考にしています。
1. jquery.masonry.min.jsのダウンロード
jQuery Masonry 公式サイトよりjquery.masonry.min.jsをダウンロードします。
ダウンロードをクリックするとソースコードが表示されるのでページ保存かテキストエディタにコピペして「jquery.masonry.min.js」という名前をつけます。
2. jquery.masonry.min.jsをアップロードする
保存したファイルをサーバにアップロード。どこでもいいのですが私はテーマフォルダの下に「js」というフォルダを作ってその中にアップロードしました。
3. ヘッダにコードを記述する
<head>〜</head>にコードを記述して、さっきアップロードしたファイルを読み込みます。
<script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/js/jquery.masonry.min.js'></script>
<script type="text/javascript">
$('#content_top').masonry({
columnWidth: 330,
itemSelector: '.top_article'
});
</script>
相変わらず私はヘッダのごちゃごちゃがイヤでそっちには書いていないわけですが。まぁ<head>〜</head>に書けば間違いない。
「columnWidth」は記事の横幅の最大値です。
このコードは『「content_top」というidの中にある「top_article」というクラスの要素（ここでは記事）の横幅の最大値を330pxにセットする』という意味だろうと私は理解しているつもり。
合ってるのかな？わからん。
4. スタイルシートにコード追加
スタイルシートに要素（記事）の横幅をセットするコードを追加します。
.top_article {
width: 300px;
}
ここでのwidthの値は上で設定した値（今回は330）以下にセットします。
今回の場合だとどこかに330-300の30px分余白ができるはず。
jQuery Masonryで記事が横に並べたとき、ここで空けた余白分記事と記事の間に間隔が空くことになります。差分がゼロならすき間もゼロです。
あとは表示に合わせてスタイルシートを少しいじれば段組で記事が並ぶようになります。
なかなか新鮮でいいな。
ついでにサイドバーともサイズと間隔をそろえてイイ感じにしてみました。いい感じかどうかは…ｳｰﾑ。
サムネイルと指定文字数の抜粋表示
この前まで使っていたコチラの「つづきを読む」付きの抜粋表示だと記事によって文字量がバラバラで、さらに画像が入ってたり入ってなかったりというように、それぞれの記事の大きさがそろわないので、サムネイル＋指定文字数の抜粋表示の方法を採ってみることに。
サムネイル
ここに書くのも何回目か忘れましたが、私WordPressに用意されているサムネイルというやつを全く使っておりませんもので、条件付きで先頭画像をサムネイルとして表示させています。
方法は昔書いたのでご参照あれ。未だに大活躍中のワープレTIPSでモバイルテーマでも使ってます。
参考: WPtouchカスタマイズ番外編 -サムネイル用画像をコントロールしよう-
指定文字数の抜粋表示
WPtouch時代のいつだったかにモバイルテーマの抜粋表示で使っていたものです。ここで書くのは初めてかもしれない。
以下のコードを、functions.phpに書きます。
function my_excerpt( $length ) {
global $post;
$content = mb_substr( strip_tags( $post -> post_content ), 0, $length );
$content = $content . "...";
return $content;
}
「…」が文末につくのヤダって方は
function my_excerpt( $length ) {
global $post;
$content = mb_substr( strip_tags( $post -> post_content ), 0, $length );
return $content;
}
これでおｋ。
そして抜粋表示したいところへ
<?php the_content(''); ?>
の代わりに、
<?php echo my_excerpt(150); ?>
コレを書けばOK。今回だと先頭から150文字までが抜粋として表示されます。
画像や改行、文字スタイルも取っ払った純粋な文字のみの抜粋になります。
参照はコチラから。@WebDesignRecipeさんのサイトにはいつも勉強させてもらっております。ありがとうございます。
| WordPress のよくあるカスタマイズコード functions.php 多め |
タイトルで多少の差は出ますがこれでほぼ同じ大きさで記事を表示することができるようになりました。
newアイコンと最新記事
newアイコン
ちょうどいい機会だったので以前から気になってたコレを導入してみることに。
| 記事の投稿日を取得して好きな日数だけnewアイコンを表示しておく方法 | ウェビメモ |
@xxmiz0rexxさんの記事使わせてもらうの何回目だろう。。。
今度サイドバーにリンク貼らせてもらえるか頼んでみようかな。
 |
newアイコン – ホームページ作成素材 |
newアイコンは記事内に載ってた商用可能もOKなコチラから。チカチカしてるのが目を引きます。
とりあえず一週間以内の記事にnewアイコンを付けるようにしています。
最新記事
段組表示にしたらスペース的にたくさんの記事を並べることができました。
そうなると「じゃあサイドバーの最新記事要らなくね？」ということになってきます。サイドバーは7件しか表示していないし、内容が被るから要らないや。
サイドバーの最新記事は記事読んでもらうときにはあったほうがいいけどたくさん記事を並べられるようになったトップページではあんまり意味ないんですよね。
というわけでトップページではサイドバーの最新記事を表示しないようにしました。
<?php if(!is_home()): ?> <!-- もしトップページじゃなかったら -->
<!-- 最新記事を表示するコードを書く -->
<?php endif; ?>
これで内容も被らないし、ムダなものがひとつ減ったかな。
おわりに
ずいぶんマニアックなことも書いてしまったけど、自分用のまとめならこんなもんだろう。
前回の月まとめでもトップページへのアクセス数が増えてきていると感じていたので記事画面とは違ったレイアウトで楽しんでもらってもいいのかなと思ってカスタマイズしてみました。あと少しマイナーなカスタムを施す予定ですが、そちらはまた（あれば）いずれ。
如何かな。おわり
