Facebook
RSS Feed
Apr 9, 2013

レスポンシブテーマをマガジン風テーマにカスタマイズした事例(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_title(); ?> ⇒ <?php echo mb_substr($post->post_title, 0, 35); ?>

35文字までに制限してみました。

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

30文字までに制限してみました。

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

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

 

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

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

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

Posted in WordPress初心者講座Comments Closed 

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Slauson」
公式サイト/マガジン/ビジネス・企業
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト
WordPressテーマ(スマホ対応レスポンシブデザイン)「Pantomime」
ギャラリー・ポートフォリオ / 公式サイト