サポート » 使い方全般 » タクソノミーのカテゴリ毎にタイトル横にアイコンをつけたい

  • 解決済 aoneissei

    (@aoneissei)


    今晩は。
    WordPress 3.3.2 を使用しております。
    質問があります是非教えてください。

    現在下記のようなカスタム投稿があります。

    add_action( 'init', 'create_post_type' );
    function create_post_type() {
      register_post_type( 'books',
        array(
          'labels' => array(
            'name' => __( '本' ),
            'singular_name' => __( '本' )
          ),
          'public' => true,
          'menu_position' => 5,
    
          'supports' => array('title','editor','thumbnail',
          'custom-fields','excerpt','author','trackbacks',
          'comments','revisions','page-attributes')
    
        )
      );
    
      register_taxonomy(
        'books-cat',
        'books',
        array(
          'hierarchical' => true,
          'update_count_callback' => '_update_post_term_count',
          'label' => '本のカテゴリー',
          'singular_label' => '本のカテゴリー',
          'public' => true,
          'show_ui' => true
        )
      );
    
    }

    このカスタム投稿には「雑誌」「小説」「料理」を含む合計8つのカテゴリを追加しました。

    そこでこのカスタム投稿をサイトのトップページに最新ニュースとして記事のタイトルだけ表示し、タイトルの横にカテゴリ毎に違うアイコンを表示させたいのですがどうしたらよいでしょうか。

    現在、index.phpには下記のような記述をしています。

    <?php $loop = new WP_Query( array( 'post_type' => 'books', 'posts_per_page' => 4 ) ); while ( $loop->have_posts() ) : $loop->the_post(); ?>
    
    	<ul id="new_topics_list">
    
    		<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
    
        </ul>
    
    <?php endwhile; ?>

    上記記述の<?php the_title(); ?>の横にカテゴリ毎のアイコン画像を表示させたいのです。
    是非教えてください。よろしくお願いいたします。

12件の返信を表示中 - 1 - 12件目 (全12件中)
  • モデレーター gatespace

    (@gatespace)

    おはようございます。
    投稿に紐づけられたカスタムタクソノミーを出力したい、ってことでしょうか。

    一番簡単な方法は get_the_term_list() を使うことですが、
    これは通常のカテゴリーをリンクで出すのと同じになりますので、
    「ターム名(カテゴリ名)に対応した画像を使いたい」となると、
    get_the_terms() という関数を使うことになります。
    (リンク先は英語ですが、サンプルコードが参考になります)

    以下のコードを試してみてください。(若干手を加えています)

    <?php
    $loop = new WP_Query( array( 'post_type' => 'books', 'posts_per_page' => 4 ) );
    
    if($loop->have_posts()) : // 該当する投稿がある場合
    ?>
    	<ul id="new_topics_list">
    	<?php while ( $loop->have_posts() ) : $loop->the_post(); // ループ開始 ?>
    		<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
    		<?php // カスタムタクソノミー 'books-cat' の処理
    		$terms = get_the_terms( get_the_ID(), 'books-cat' ); // 投稿に紐づけられた 'books-cat' のタームをすべて取得
    		if ( $terms ) { // タームがあったら
    			foreach ( $terms as $term ) { // ループを回す
    				var_dump($term); // 参考に$termの中身を出力。実際には削除してください。
    				echo '<a href="'.get_term_link($term->slug, 'books-cat').'">'.$term->name.'</a>'; // 各タームのアーカイブへのリンク
    			}
    		}
    		?>
    		</li>
    	<?php endwhile; // ループ終わり ?>
    	</ul>
    <?php else: // 該当する投稿が無い場合 ?>
    	<p>該当する投稿はありません</p>
    <?php endif; ?>

    get_term_link() はタームとタクソノミーからタームのアーカイブへのリンクを作成する関数です。
    get_the_terms() も戻り値はCodexにも書いてありますが、上記のコードでvar_dumpしましたのでの結果を参考に、
    「画像を表示する」部分を考えてみてください。

    gatespace様

    お忙しいところホントにありがとうございます。
    説明が下手くそですいません。

    上手に説明できるかわかりませんがやりたいことはこんな事です。
    現在私のindex.phpには「最新ニュース01」「最新ニュース02」があります。

    下記のように「最新ニュース01」は普通の投稿を使って記事を書いているもので、
    記事のタイトルとカテゴリ毎のアイコンが出力表示されるようになっています。

    <ul id="new_topics_list">
    
    <?php $posts = get_posts('numberposts=5&order=desc'); ?>
    	<?php foreach($posts as $post): ?>
    		<?php
    			$cats = get_the_category($post->id);
    			$cat = $cats[0];
    			$img = '<img src="' . get_bloginfo('template_url'). '/images/category-'
    			  . $cat->category_nicename . '.jpg" alt="' . $cat->cat_name . '" />';
    		?>
    		<li><?php echo $img; ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
    
    <?php endforeach; ?>
    
    	</ul>

    これと同じように、「最新ニュース02」も記事のタイトルとカテゴリ毎のアイコンが出力表示されるようにしたいのですが、「最新ニュース02」はカスタム投稿でつくられているせいなのかカテゴリ毎のアイコン画像が表示されません。
    とっても恥かしいのですが「最新ニュース02」の現状の記述がこれです。

    <ul id="new_topics_list">
    
    <?php $loop = new WP_Query( array( 'post_type' => 'books', 'posts_per_page' => 4 ) ); while ( $loop->have_posts() ) : $loop->the_post(); ?>
    
    		<?php
    			$cats = get_the_category($post->id);
    			$cat = $cats[0];
    			$img = '<img src="' . get_bloginfo('template_url'). '/images/cat-'
    			  . $cat->category_nicename . '.jpg" alt="' . $cat->cat_name . '" />';
    		?>
    		<li><?php echo $img; ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
    
    <?php endwhile; ?>
    
    	</ul>

    上記のように「カテゴリ毎のアイコン」+「記事タイトル」のように出力させたいのです。

    なんて説明すればいいかな。。。わかりますでしょうか。

    gatespace様

    イメージはこんなことですが、何度もすいません。

    「最新ニュース02」

    モデレーター gatespace

    (@gatespace)

    とりあえず、私の書いたコードを実行してみましたか?

    get_the_category は通常のカテゴリーに対する関数で、
    カスタムタクソノミーについては get_the_terms() で処理します。
    先の投稿に書いたとおりです。

    ※やりたいことは分かっていますし、その方法も提示できますが
    一度、先の投稿に記載してあるCodexの関数の説明をよく読んで、自分でコードを組んでみてください。
    そのうえで躓いているところを提示してください。
    (きついことを言うようですが、コードを自分で調べたり書いたりしないで、
    自分のやりたいことだけどポストされているように見えます。)

    gatespaceさん

    申し訳ないです。
    すぐやってみます。

    gatespaceさん

    何度もすいません。
    gatespaceさんから頂いた物をベースにやってみたのですがアイコンが出てくれません。
    下記のように記述したのですが、全然遠いでしょうか。
    教えてください。

    <?php
    $loop = new WP_Query( array( 'post_type' => 'books', 'posts_per_page' => 4 ) );
    
    if($loop->have_posts()) : // 該当する投稿がある場合
    ?>
    	<ul id="new_topics_list">
    	<?php while ( $loop->have_posts() ) : $loop->the_post(); // ループ開始 ?>
    
    		<li>
    
    		<?php // カスタムタクソノミー 'books-cat' の処理
    		$terms = get_the_terms( get_the_ID(), 'books-cat' ); // 投稿に紐づけられた 'books-cat' のタームをすべて取得
    		$term = $terms[0];
    		$img = '<img src="' . get_bloginfo('template_url'). '/images/term-'
    			  . $term->slug . '.jpg" alt="' . $term->term_name . '" />';
    		?>
    		<?php echo $img; ?> <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
    		</li>
    
    	<?php endwhile; // ループ終わり ?>
    	</ul>
    <?php else: // 該当する投稿が無い場合 ?>
    	<p>該当する投稿はありません</p>
    <?php endif; ?>

    どなたか、もう少しだけヒントもらえないでしょうか。
    よろしくお願いします。

    フォーラム等の記事を見ながらどうにか下記のような記述を書いたら
    アイコンがうまく表示されたのですが、

    <?php
    $loop = new WP_Query( array( 'post_type' => 'books', 'posts_per_page' => 4 ) );
    
    if($loop->have_posts()) : // 該当する投稿がある場合
    ?>
    	<ul id="new_topics_list">
    	<?php while ( $loop->have_posts() ) : $loop->the_post(); // ループ開始 ?>
    
    		<li>
    
    		<?php // カスタムタクソノミー 'books-cat' の処理
    		$termbook = array_shift(get_the_terms($post->ID, 'books-cat'));
    		$termbookimg = esc_html($termbook->slug);
    		$img = '<img src="' . get_bloginfo('template_url'). '/images/term-'
    			 . $termbookimg. '.jpg" alt="' . $cat->cat_name . '" />';
    		?>
    
    		<?php echo $img; ?> <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
    
    		</li>
    
    	<?php endwhile; // ループ終わり ?>
    	</ul>
    <?php else: // 該当する投稿が無い場合 ?>
    	<p>該当する投稿はありません</p>
    <?php endif; ?>

    上記記述内の、

    $termbook = array_shift(get_the_terms($post->ID, 'books-cat'));
    この中にある、array_shiftっていうのは何故必要なのでしょうか。

    教えてください。

    モデレーター gatespace

    (@gatespace)

    array_shift はPHPの関数です。(WordPressのではありません。)
    http://www.php.net/manual/ja/function.array-shift.php
    配列の先頭を取り出して返すので要素一つ分だけ短くなり、全ての要素は前にずれます。
    しかし、今回は連想配列で$termbook->slugのような形で参照していますから必要無いのでは?

    自分ならこう書きますよぐらいでコードを載せますので参考にしてみてください。

    <?php
    $loop = new WP_Query( array( 'post_type' => 'books', 'posts_per_page' => 4 ) );
    
    if($loop->have_posts()) : // 該当する投稿がある場合
    ?>
    	<ul id="new_topics_list">
    	<?php while ( $loop->have_posts() ) : $loop->the_post(); // ループ開始 ?>
    		<li>
    		<?php // カスタムタクソノミー 'books-cat' の処理
    		// 投稿に紐づけられた 'books-cat' のタームをすべて取得
    		$termbook = get_the_terms( get_the_ID(), 'books-cat' ); // 戻り値は配列かfalseかwp_errorです。
    		if ( $termbook && ! is_wp_error( $termbook ) ) { // タームが取得できたら
    			foreach ( $terms as $term ) { // 配列で戻ってきているのでループを回す
    				/* あらかじめ対応する画像は使用するテーマの images ディレクトリに
    				 term-スラッグ名.jpgの形式で入れておく
    				get_the_terms の戻り値の例(var_dumpして確認できる)
    				$termbook->slug  スラッグ
    				$termbook->name  名前
    				$termbook->term_id  タームのID
    				*/
    				echo '<img src="' . get_stylesheet_directory_uri(). '/images/term-' . $termbook->slug. '.jpg" alt="' . $termbook->name . '" />';
    			}
    		}
    		// カスタムタクソノミー 'books-cat' の処理終わり
    		?><a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
    		</li>
    	<?php endwhile; // ループ終わり ?>
    	</ul>
    <?php else: // 該当する投稿が無い場合 ?>
    	<p>該当する投稿はありません</p>
    <?php endif; ?>

    コードにはコメント文を足しておきますので、
    ご自分のコードと違うところを勉強してみてください。

    追記:老婆心ながら。
    このフォーラムは有志がボランティアで解答している場です。
    必ずしも望んでいる回答が、しかも短期間で得られるとは限りません。
    (もちろん、さくっとコードのみを掲載される方もいますので、そういう方と比べれば私は意地悪な回答者でしょう)

    焦っているのは分かりますが、フォーラムの質問ルール
    http://ja.forums.wordpress.org/topic/265?replies=1
    にもあるように、まずは、自分で検索をしてみたり、Codexを読んでみてください。
    WordPressのカスタマイズが書かれたブログ、書籍はたくさんありますよ。

    gatespaceさん

    ご回答ありがとうございました。

    昨晩から、上記に頂いた記述を試しているのですがどうしてもアイコンが表示されません。
    現在も色々と自分なりにいじっては試してとやっているのですがどうしてもうまくいきません。
    上記頂いた記述は何か記述を加える必要がありますか?

    それだけでも教えていただけると助かります。
    よろしくお願いします。

    モデレーター gatespace

    (@gatespace)

    上記頂いた記述は何か記述を加える必要がありますか?

    必要無いはずです。

    昨晩から、上記に頂いた記述を試しているのですがどうしてもアイコンが表示されません。
    現在も色々と自分なりにいじっては試してとやっているのですがどうしてもうまくいきません

    「質問ルール」にもあるように

    • 再現方法をなるべく具体的に書いてください
    • エラーが表示された場合、「XX のようなエラー」ではなく、なるべくエラー文をコピーしてそのまま貼り付けてください

    私はエスパーではありません。
    もっと具体的に「何がどう」うまくいかないのか書いてもらわないと解答できません。
    (例えば、imgタグは出力されているが、画像が出ない。PHPでエラーが出ている、など)

    gatespaceさん

    何度もスイマセンでした。
    無事出来ました。ありがとうございます。

12件の返信を表示中 - 1 - 12件目 (全12件中)
  • トピック「タクソノミーのカテゴリ毎にタイトル横にアイコンをつけたい」には新たに返信することはできません。