CLOSE
CLOSE

[wordpress]ちょっとブログのトップページを変えてみたのでいろいろ紹介する

Wordpress minor customize of top page1 1

ブログの改造に良くも悪くも前向きな@knk_nです。どうもです。
ブログトップページのレイアウトが記事ページのレイアウトと同じだったのでちょっと変化をつけてみました。
せっかくなのでカスタマイズに使ったもろもろを自分への備忘録を兼ねて紹介しておこうかな。

jQuery Masonryで記事を新聞風に並べる

WordPressのトップページを雑誌や新聞のような段組にする方法 | Stocker.jp / diary

jQuery MasonaryというjQueryプラグインを使うことでフツーは縦に並ぶ記事を新聞や雑誌のような段組に並べることができるらしい。

Wordpress minor customize of top page2 Wordpress minor customize of top page3
CSSでfloatとか使えば横並びにはできるんだけど、コレ使うと自然な感じになるみたい。
段組の記事が果たして見やすいのかということは、さておいて(オイ
何事もチャレンジですからね。
@Stocker_jpさんの記事を参考にしています。

1. jquery.​masonry.​min.jsのダウンロード

jQuery Masonry 公式サイトよりjquery.​masonry.​min.jsをダウンロードします。

Wordpress minor customize of top page4

ダウンロードをクリックするとソースコードが表示されるのでページ保存かテキストエディタにコピペして「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 minor customize of top page5

この前まで使っていたコチラの「つづきを読む」付きの抜粋表示だと記事によって文字量がバラバラで、さらに画像が入ってたり入ってなかったりというように、それぞれの記事の大きさがそろわないので、サムネイル+指定文字数の抜粋表示の方法を採ってみることに。

Wordpress minor customize of top page6

サムネイル

ここに書くのも何回目か忘れましたが、私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;
}

これでおk。
そして抜粋表示したいところへ

<?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; ?>

これで内容も被らないし、ムダなものがひとつ減ったかな。

おわりに

ずいぶんマニアックなことも書いてしまったけど、自分用のまとめならこんなもんだろう。
前回の月まとめでもトップページへのアクセス数が増えてきていると感じていたので記事画面とは違ったレイアウトで楽しんでもらってもいいのかなと思ってカスタマイズしてみました。あと少しマイナーなカスタムを施す予定ですが、そちらはまた(あれば)いずれ。
如何かな。おわり

NEW POSTS 最新記事を読む