人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

以下の記述で投稿記事を新着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>

●質問者: kaji0245
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● oil999
●34ポイント

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

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

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


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

2 ● rouge_2008
●33ポイント

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

カテゴリー引数
指定したカテゴリーに分類された投稿を表示する。


※「showposts」は廃止予定で非推奨なので、代替として「posts_per_page」を利用した方がいいです。

ページ送り引数


※「特定の条件の投稿を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


kaji0245さんのコメント
詳細な情報をありがとうございます。 早速、試してみます<(_ _)>

3 ● otusoham
●33ポイント

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

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

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ