ホームページを作ろう!WordPress編(14)カテゴリー/個別投稿ページを作る

0
    JUGEMテーマ:ホームページ作成
    JUGEMテーマ:wordpress

    カテゴリーページは、同カテゴリーの投稿を4×3のタイル状に表示してみたいと思います。これは今までの技の組み合わせで割と簡単にできます。

    まずはコードから。

    <?php get_header(); ?>
    <h2><?php echo "ブログ::"; single_term_title(); ?></h2>
    <?php
    	$cats = get_the_category();
    	$cat = array_shift($cats);
    	query_posts('post_type=post&category_name='.$cat->slug.'&posts_per_page=12&paged='.$paged);
    ?>
    <ul class = "menu gallery-menu parallel">
    	<?php get_template_part('items'); ?>
    </ul>
    <br/><?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?><br/>
    <?php wp_reset_query(); ?>
    <?php get_footer(); ?> 

    1行目、13行目:ヘッダーとフッターの呼び出しです。

    2行目:single_term_title()というテンプレートタグは、現在のカテゴリー/タクソノミーの名称を取得するタグです。

    3〜7行目:3行目でカテゴリー情報を取得し、4行目で内部の配列を取り出し、5行目でカテゴリーのスラッグ(英語名)を取り出して検索条件を設定しています。

    8〜10行目:テンプレート「items.php」を呼び出して、タイル状に並べます。

    11行目:ページナビゲーションです。

    12行目:検索条件のリセットを忘れずに。

    カスタム投稿タイプの場合もほとんど一緒です。違うのは名前だけで「taxonomy-gallery.php」「taxonomy-download.php」というファイル名にして、3行目のタイトルを変えるのと、6行目のpost_typeを変えてやれば出来上がりです。

    w061

    あまりにも簡単にできてしまったので、続けて個別投稿ページも作っていきたいと思います。

    個別投稿ページのファイル名は「single.php」です。「single-blog.php」「single-gallery.php」「single-download.php」を作るところですが、例によってsingle-blog.phpは作らずに、single.phpを作っておいてこちらに拾わせるようにします。ではコード行きます。

    <?php get_header(); ?>
    <h2>ブログ</h2>
    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    <?php if(have_posts()): while(have_posts()): the_post(); ?>
    <div class="metabox clearfix">
    	<time class="post-date" datetime="<?php echo get_the_date("Y-m-j") ?>"><?php echo get_the_date(); /* 日付 */ ?></time>
    	<div><span>カテゴリー:</span><?php the_category(''); /* カテゴリー */ ?></div>
    </div>
    <div class="image"><?php the_post_thumbnail('large'); ?></div>
    <?php the_content(); ?>
    <?php endwhile; endif; ?>
    <br/>
    <nav class="post-navi">
    	<span id="prev"><?php previous_post_link('%link','≪ %title'); /* 前の記事へ */ ?></span>
    	<span>  <== ページナビゲーション == >  </span>
    	<span id="next"><?php next_post_link('%link','%title ≫'); /* 次の記事へ */ ?></span>
    </nav>
    <?php get_footer(); ?>

    1行目、18行目:ヘッダーとフッターの呼び出しです。

    2行目:<h2>タグで投稿タイプを表示しておきます。

    3行目:投稿のタイトルを<h3>タグでマークアップします。

    4行目〜11行目:メッセージループです。

    5行目〜8行目:投稿日付とカテゴリー名です。投稿タイプトップページで使ったのと同じです。

    9行目:最初に画像を読み込む前にといって設定した「large」サイズで画像を表示します。

    10行目:記事本文を書きだします。

    13行目〜17行目:新しいのはここだけです。これは前後のページへのリンクを表示するページナビゲーション部で、previous_post_link()とnext_post_link()の2つのテンプレートタグを使ってリンクを作っています。CSSも追加になります。こんな感じです。

    .post-navi{
    	clear: both;
    	overflow: hidden;
    	padding-top: 30px;
    	text-align: center;
    	margin-bottom: 30px;
    }

    出来上がりはこんな感じです。

    w062

    コメント欄は後で作るので、少々お待ちください。

    さてブログはまあこれでいいんですが、ギャラリーやダウンロードはこれだけだとなんかちょっと寂しいので、この下に同じカテゴリーの記事のサムネールを並べてみようと思います。並べるのは4枚1段ですが、表示する記事はランダムに選ぶようにしてみましょう。コード行きます。

    <br/>
    <?php
    $terms = get_the_terms($post->ID, 'gallerytype');
    $term = array_shift($terms);
    echo '<br/><h3>カテゴリー:'.get_the_term_list($post->ID, 'gallerytype').'よりピックアップ</h3>';
    ?>
    <ul class="menu gallery-menu parallel">
    	<?php 
    	$single = true;
    	query_posts( array(
    		'post_type'=>'gallery',
    		'taxonomy'=>'gallerytype',
    		'posts_per_page'=>4,
    		'term'=>$term->slug,
    		'orderby'=>'rand'
    		));
    	get_template_part('items');
    	wp_reset_query();
    	?>
    </ul>

    3行目〜5行目:カテゴリー名を取得してタイトルに表示します。

    7〜20行目:サムネールを4枚並べる部分です。

    9行目:記事本文を表示しないオプションを指定しています。

    10〜16行目:ページ検索条件を設定します。15行目のrand指定で、ランダムに4件ピックアップします。

    17行目:items.phpを呼び出します。

    18行目:検索条件のリセットを忘れずに。

    出来上がりはこうなります。

    w063

    これで、過去のギャラリーやダウンロードが埋もれてしまうこともないですよね?

    次回は、個別投稿ページにコメント欄を付けましょう。


    コメント
    コメントする








       

    calendar

    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    << November 2019 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM

    Google Adsense

    楽天ブックス

    楽天