• かちびと.net

    WordPressをマガジンサイト風にする為の基本的なカスタマイズ法です。簡単なカスタマイズになります。デモ版のダウンロードも可能です。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

WordPressをマガジンサイト風にする為の基本的なカスタマイズ法

スポンサーリンク

備忘録です。普通のWordPressテーマを
マガジンサイトっぽくする必要があって、
カスタマイズしたのですが、方法を忘れ
そうなのでメモ。大したカスタマイズじゃ
ないです。基本的な内容になりますので
あまり参考にならないと思います。

マガジンサイトと言っても色々形はあるんですが、複数の指定したカテゴリの最新記事~過去記事を何件かまとめてTOPに出したいのと、デザインもカテゴリごとにそれぞれ変えたい、というご要望でした。

もっとスマートな方法があるかもしれないんですけどね・・

WP3.0のデフォルトテーマでやってみる


WP3.0でデフォルトテーマになったtwentytenを使用して書いておきます。通常は上記のように表示されますが、これを以下のように

cssを変えないとアレですけど、

  1. 表示させたいカテゴリ名を表示
  2. 表示させたカテゴリの最新記事とリンク
  3. 表示させたカテゴリの過去記事へのリンク

などを実装するカスタマイズです。

イメージとしては、以下のようなの感じにしたい時に使えるっぽいです。

サムネイルも表示させればよりマガジンサイトっぽくなりますね。カテゴリごとにdivとID名(class名)も与えるのでcssを使って自由にカスタマイズ出来ます。

index.phpのみ変更する

使うファイルはindex.phpのみになります。デフォルトでは以下のようなコード。

変更前

<?php
get_header(); ?>

		<div id="container">
			<div id="content" role="main">

			<?php
			 get_template_part( 'loop', 'index' );
			?>
			</div>
		</div>

分かりにくくなるのでコメントアウトはここでは消してます。

変更を加えたコード

<?php
$cat_id_list = "1,2,3,4,5,6,10,15"; //カテゴリのIDを指定
get_header(); ?>

<div id="container">
<?php
	$intCount = 0;
	$intPostCount = 5; //表示する記事数
	$categories = get_categories("orderby=ID&order=asc&hide_empty=1&hierarchial=0&include=$cat_id_list");
	foreach ($categories as $category)
	{
		query_posts("cat=" . $category->cat_ID . "&showposts=$intPostCount&orderby=date&order=DESC");

		$intCount++;
		$cat_first_post = true;
		while (have_posts())
		{
			the_post(); $do_not_duplicate = $post->ID;
			if ($cat_first_post)
			{
                        ?>
			<div id="<?php echo $category->slug; ?>-content" role="main"><!--カテゴリのスラッグ名-contentというIDを与える-->

                         <h2><?php echo $category->name; ?></h2><!--カテゴリ名-->
                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><!--このカテゴリの最新記事へのリンクを表示-->

						<ul class="<?php echo $category->slug; ?>-list">

                        <?php
				$cat_first_post = false;
				the_post() == $do_not_duplicate;
			} // if ($cat_first_post)
                        ?>
                       <!--このカテゴリの過去記事を新しい順に表示-->
				<li class="example-list">
				<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
 				</li>
                        <?php } // while (have_posts()) ?>
						</ul>
                        </div><!--END <?php echo $category->slug; ?>-content -->

                        <?php } ?>
		</div>

表示させたいカテゴリのIDを「,」で区切りながら「$cat_id_list =」に加えます。例えば「Webデザイン」というカテゴリを表示させたくて、そのカテゴリIDは5なら「5」を加えます。上記の場合は1、2、3、4、5、6、10、15のIDのカテゴリと、そのカテゴリの記事5件が表示されます。

最新記事と過去記事を分けてある(というか表示させて無いだけですけど)ので最新記事だけサムネイルを表示させる事も出来ます。

それぞれの項目のデザインの変更も可能

<?php echo $category->slug; ?>を使って、divやulのid(classの方が良いならclassに変更してください)にスラッグ名を与えているのでcssでカテゴリ別にデザインを変えたり、2カラムにする等できると思います。スラッグ名はローマ字に設定します。

例えば「デザイン」のカテゴリでスラッグ名が「design」なら、そのdivにはid=”design-content”となります。-contentの部分はお好きに変更してください。
※cssまで書いてると長くなるので割愛します。

コピペじゃアレだと思うので試したいという方は以下よりindex.phpをDLして差し替えてご利用ください。

注意点

  1. 差し替える前にバックアップを取るようにしてください
  2. 貴方のサイトのカテゴリIDに合わせて変更してください
  3. カテゴリスラッグはローマ字でないとおかしくなっちゃいます

Download

function.phpを使ったほうがスマートですかね。もっと簡単な方法もありそうですけど、僕のスキルじゃこれが精一杯です。少しでも参考になれば幸いです。

URL :
TRB :

Comments & Trackbacks (3)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services