catには、表示させたいカテゴリIDを指定してください。
<?php query_posts('showposts=5&cat=###'); ?>
タブメニュー表示は、「jQuery UI Tabs」を利用してはいかがでしょう。
WordPressに同梱されていますので、jsファイルを用意する必要はありませんが、cssファイルがありませんので、以下のページからダウンロードして使用します。
http://jqueryui.com/
※WordPress3.5.xに付属しているのが1.9.2ですので、同じバージョンをダウンロードするといいです。
※好みのテーマが無い場合は、カスタマイズしてからダウンロードしてください。
1.ダウンロードしたファイルを解凍後、次のどちらかをWordPressのテーマのフォルダ内にアップロードします。
1-1.「jQuery UI Tabs」の動作に必要なcssのみ読み込んで利用する場合は、「jquery-ui-1.9.2.custom/development-bundle/themes」の中のテーマ名のフォルダまたは「base」を開き、minified(コンパイル)されたファイルを利用する場合は「minified」フォルダごと、minifiedされていないファイルを利用する場合は、「minified」フォルダ以外をフォルダごとアップロードします。
※事前に「jquery.ui.base.css」を開いて、「jquery.ui.core.css」と「jquery.ui.tabs.css」のみ読み込む記述に変更しておきます。(minifiedされたファイルを利用する場合は、通常のファイルを参考にしながら「jquery.ui.all.css」と「jquery.ui.base.css」を自分で作成しておきます。)
1-2.「jQuery UI」のすべての機能のcssを読み込んで利用する場合は、「jquery-ui-1.9.2.custom/css/テーマ名」のフォルダごとアップロードします。(※minifiedされたファイルと通常のファイルのどちらか一つがあればいいです。)
2.利用中のテーマの「functions.php」に次の記述を追加します。
function load_use_stylesheet() { if( is_home() || is_front_page() ) { // CSSのパスを環境に合わせて変更します。(※以下はテーマフォルダの「css/ui/base/jquery.ui.all.css」を読み込む場合の記述です。) wp_enqueue_style( 'ui-tabs', get_stylesheet_directory_uri() . '/css/ui/base/jquery.ui.all.css' ); } } add_action('wp_print_styles', 'load_use_stylesheet'); function load_use_scripts() { if( is_home() || is_front_page() ) { wp_enqueue_script( 'jquery-ui-tabs' ); } } add_action('wp_enqueue_scripts', 'load_use_scripts'); function print_use_scripts() { if( is_home() || is_front_page() ) { ?> <script type="text/javascript"> jQuery(function($) { $('#pickup-news').tabs(); // 特定の要素をタブ表示にする命令 }); </script> <?} } add_action('wp_print_footer_scripts', 'print_use_scripts');
※トップページだけで読み込む場合の記述にしてありますので、もし別のページで利用する場合は、条件分岐の記述を変更してください。
3.テンプレートファイルの記述を変更します。
<div id="pickup-news"> <ul> <li><a href="#news-a"><span>カテゴリA</span></a></li> <li><a href="#news-b"><span>カテゴリB</span></a></li> </ul> <div id="news-a"> <!-- ここにカテゴリAを読み込んで表示する記述 --> <div> <div id="news-b"> <!-- ここにカテゴリBを読み込んで表示する記述 --> <div> </div>
※タブ表示する要素は「<div id="pickup-news">」内にすべて配置します。
※各メニューのリンク先が、それぞれ表示する内容(※対応する要素に「id="***"」として指定)になっています。
※「jQuery UI Tabs」の詳細な使い方は同根のデモファイルおよびドキュメントを参考にしてください。
http://api.jqueryui.com/tabs/
※ちなみに、カテゴリーIDだけでなくカテゴリースラッグによる指定も可能です。
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/query_posts#.E3.82.AB.E3.83.86.E3.82.B4.E3.83.AA.E3.83.BC.E5.BC.95.E6.95.B0
カテゴリー引数
指定したカテゴリーに分類された投稿を表示する。
- cat (整数)- カテゴリー ID。
- category_name (文字列)- カテゴリースラッグを指定(カテゴリー名ではない)。
※「showposts」は廃止予定で非推奨なので、代替として「posts_per_page」を利用した方がいいです。
ページ送り引数
- showposts (整数) - number of post to show per page. Deprecated in favor of 'posts_per_page'.
- posts_per_page (整数) - number of post to show per page. Use 'posts_per_page'=>-1 to show all posts. Note if the query is in a feed, wordpress overwrites this parameter with the stored 'posts_per_rss' option. To reimpose the limit, try using the 'post_limits' filter.
※「特定の条件の投稿を5件だけ表示」など、そのページのメインループとは別にWordPressループが必要な場合は、「query_posts()」の代わりに「get_posts()」を利用してみてください。
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/get_posts
http://alphasis.info/2011/05/jquery-ui-tabs/
こちらが参考になると思います。