2013-04-09

レスポンシブテーマをマガジン風テーマにカスタマイズした事例(onimaga.jp)

オニマガ---DIYでインディペンデントに生きる毎日のヒント

どうもこんにちは。
ワタクシ、個人ブログ「オニマガ」というのを、かれこれ13年くらいやってるのですが、
先週ドメインも移転して心機一転完全リニューアルしました。
その時に、Minimal WPのレスポンシブテーマ「Juliet」をベースにカスタマイズして、
WEBマガジン風のデザインにしてみました。

たまに「Webマガジン風のレイアウトのテーマも作ってくれませんか?」
というリクエストもいただくので、
ザックリとこんな感じでカスタマイズすればマガジンっぽくなるよ、
という2つのポイントだけ解説します。

ポイント1)投稿ループを増やす

<?php query_posts(“showposts=12”); ?>
から始まる一連の投稿ループを含む「コンテンツブロック全体」を、
必要なカテゴリー分だけ複製します。

次に、
<?php query_posts(“cat=3&showposts=3”); ?>
みたいな感じで、「cat=カテゴリーID」を追加してカテゴリー指定します。
上の例ではカテゴリーID3の記事を3件表示するという意味になります。

こんな感じで載っけたいカテゴリー分だけコピペして、それぞれにカテゴリー指定をして、
複数のカテゴリーの記事をトップに載せるとWEBマガジンっぽくなります。

ポイント2)抜粋の文字数を制限する

抜粋タグ
<?php the_excerpt(); ?> ⇒ <?php echo mb_substr(get_the_excerpt(), 0, 30); ?>

30文字までに制限してみました。タイトルも同様な感じですね。
高さがバラバラになるとおかしな感じに見えるので、
レイアウトを揃えるために文字数を制限しましたけど、これはお好みで。
抜粋もお好みで有りにしたり無しにしたり。

*例によって、「<」と「>」は全角で載せてるんで、通常は半角に置き換えてくださいね。

 

とまあ、実際やるのはこれだけなんですけど、細かいデザインの部分はお好みになるので、
CSSで調整しつつ、どんどんカスタマイズにチャレンジしてみてはどうでしょうか。
最初はちょっと難しいかもしれませんが、ループの使い方を覚えると、
色々カスタマイズの応用が出来て楽しいと思いますよ。

参考サイト
オニマガ – http://onimaga.jp

*投稿ループのカスタマイズはWordPressの基本ルールの一つなので、
詳しくはWordPress公式のドキュメントで使い方を調べてみてください。
またはGoogle検索でどうぞ!

ホームページからの集客できてますか?

ワードプレステーマ「Minimal WP」
Minimal WPのWordPressテンプレートは、月間45万PV超のブログ運営のノウハウを詰め込んだミニマルデザインテンプレート。HTML不要で初心者でも簡単におしゃれなホームページが作れます!ブログ・自社メディアを始めるなら今がチャンスです!
by
関連記事