以下の記述で投稿記事を新着5件分リスト表示させております。こちらにカテゴリAのみの記事リストを抽出させたい場合の記述方法を教えてください。

また、タブメニューで表現できる方法まで教えていただけるとさらに助かります。[タブ1]→カテゴリA、[タブ2]→カテゴリB。

<table>
<tr>
<?php query_posts('showposts=5'); ?>
<?php while (have_posts()) : the_post(); ?>
<th><?php the_time('Y.m.d') ?><br /><span><?php the_category(',') ?></span></th>
<td><?php echo wp_get_attachment_image(get_post_meta($post->ID,'Outward',true),array(50,50)); ?></td>
<td><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Permanent link to'); ?> <?php the_title(); ?>"><span class="strong"><?php the_title(); ?></span><br /><?php echo post_custom("Address")?></a></td>
</tr>
<?php endwhile;?>
</table>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/02/11 18:11:46
  • 終了:2013/02/18 18:15:03

回答(3件)

id:oil999 No.1

oil999回答回数1728ベストアンサー獲得回数3202013/02/11 18:14:29

ポイント34pt

catには、表示させたいカテゴリIDを指定してください。

<?php query_posts('showposts=5&cat=###'); ?>

http://elearn.jp/wpman/column/c20110121_01.html

id:kaji0245

categoryID=スラッグと勘違いしてました(;^ω^)
ありがとうございました。
タブメニュー化も情報があれば・・・

2013/02/11 18:32:41
id:rouge_2008 No.2

rouge_2008回答回数594ベストアンサー獲得回数3512013/02/15 12:27:08

ポイント33pt

タブメニュー表示は、「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

id:kaji0245

詳細な情報をありがとうございます。
早速、試してみます<(_ _)>

2013/02/15 12:41:40
id:mahosuto No.3

otusoham回答回数789ベストアンサー獲得回数282013/02/18 17:38:22

ポイント33pt

http://alphasis.info/2011/05/jquery-ui-tabs/

こちらが参考になると思います。

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません