WordPress備忘録

デザイン

デザインに関する備忘録

記事表示ここから

個別記事のテンプレート完成

個別記事のテンプレート(single.php)が完成しました。
これで一通りは完成しました。
残すところはお問い合わせのページとなります。

個別記事のテンプレートについてですが、当初各カテゴリ毎で「single-XX.php」というページを作成しようと思ったのですが、増えてきた場合に各ページを変更するのが大変になってくるのと、基本的なテンプレートはほぼ一緒なので条件分岐によって一部の差し替えを行なう事で「single.php」にまとめました。

カテゴリ毎で違うのは以下の2点。

  1. カテゴリ毎でタイトルの画像が違う。
  2. 親カテゴリが無い場合はサブカテゴリの表記を無しにする。

これを踏まえて「single.php」を以下のようにしました。

PHP:
  1. <?php
  2.  
  3. /* 変数の宣言 */
  4. $img = ""; //画像のURL
  5. $vis = "display: block"; //サブカテゴリの表示、非表示を設定するスタイル
  6.  
  7. /* カテゴリデータの取得 */
  8. $cat_now = get_the_category();
  9. $cat_now = $cat_now[0];
  10.  
  11. /*
  12. カテゴリIDの取得
  13. 親カテゴリがある場合は親カテゴリのIDを取得
  14. 親カテゴリがない場合は所属するカテゴリIDを取得
  15. */
  16. $parent_id = $cat_now->category_parent;
  17.  
  18. if($parent_id == 0) {
  19.     //親カテゴリが無い場合は現在のカテゴリIDを取得
  20.     $parent_id = $cat_now->cat_ID;
  21.     //サブカテゴリは非表示にする
  22.     $vis = "display: none;";
  23. }
  24.  
  25. //カテゴリIDによって画像URLを取得
  26. switch($parent_id) {
  27.     case 3:
  28.         $img = "http://www.is-p.cc/wp-content/uploads/2008/04/wordpress01.jpg";
  29.         break;
  30.     case 6:
  31.         $img = "http://www.is-p.cc/wp-content/uploads/2008/05/info01.jpg";
  32.         break;
  33.     default:
  34.         $img = "";
  35. }
  36.  
  37. ?>

これで必要なタイトル画像URLとサブカテゴリの有無による表記の表示・非表示の情報が取得できました。
後は、続けて「single.php」に以下のようにすれば各カテゴリ毎に適切なタイトル画像とサブカテゴリについての表示・非表示が設定できます。

PHP:
  1. <h2><img src="<?php echo $img; ?>" width="600" height="220" /></h2>
  2.  
  3. <div style="<?php echo $vis; ?>">
  4. <h3 class="title"><?php echo $cat_now->cat_name; ?></h3>
  5. <p><?php echo $cat_now->category_description; ?></p>
  6. </div>

記事表示ここまで
リンクここまで

この記事のコメント・トラックバックRSS

トラックバック

  • [WordPress]single.phpでパンくずリスト

    single.phpで、 (prefix) » カテゴリー1 » カテゴリー2 » カテゴリー3 » 件名 というようなパンくずを出したい。 パンくずリスト作成のために、Breadcrumb Navigation XTを使用。 ↓ カ...

    投稿日時: 2008-06-19 00:18:36 投稿者: masaakibの日記
コメント・トラックバック ここまで

トラックバック用URL:

コメントフォーム

コメント入力

コメントフォーム
※管理人にのみ公開されます

記事のリンク先URL:http://www.is-p.cc/wordpress/design/single-temp-finish/74

空白
ページのトップに戻る
空白