サポート » テーマ » 「次の記事」「前の記事」のリンクをサムネイル付きで表示させたい

  • 解決済 rintax

    (@rinchan2119)



    単一記事の投稿ページに「次の記事」「前の記事」へのリンクをサムネイル付きで
    表示させたいと思い、参考サイト様の2つのコードを組み合わせた下記コードを
    設置したのですがうまく表示されません。

    <ul>
    <?php
    $prevpost = get_adjacent_post(true, '', true);
    $nextpost = get_adjacent_post(true, '', false);
    
    if ( $prevtpost ) {
    echo '<li class="prev"><a href="' . get_permalink($prevpost->ID) . '">';
    	if( has_post_thumbnail($prevpost->ID) ) {
    	echo get_the_post_thumbnail( $prevpost->ID, 'thumbnail' ) . '</a></li>';
    	}
    	else {
    	echo '<img src="' . get_bloginfo('template_url') . '/images/no-thumb.png" width="150" height="150" alt="" /></a></li>';
    	}
    }
    
    if ( $nextpost ) {
    echo '<li class="next"><a href="' . get_permalink($nextpost->ID) . '">';
    	if( has_post_thumbnail($nextpost->ID) ) {
    	echo get_the_post_thumbnail( $nextpost->ID, 'thumbnail' ) . '</a></li>';
    	}
    	else {
    	echo '<img src="' . get_bloginfo('template_url') . '/images/no-thumb.png" width="150" height="150" alt="" /></a></li>';
    	}
    }
    
    else {
    echo '<li class="prev nopost">前の記事はありません</li>';
    }
    
    ?>
    </ul>

    画像ギャラリーとしてwordpressを使用しているため、
    全ての投稿にサムネイルが1枚ずつ設定してあります。

    私の記述方法が間違っていると思い、いろいろ試行錯誤してみましたが解決できずに困っています。
    ちなみに「サムネイル機能を使ってない場合のサンプルコード」のみの場合はうまく表示できました。

    恐れ入りますが、皆様ご教授よろしくお願いいたします。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • PHPエラー、リンクは機能するが画像が表示されない、など、どのようにうまくいかないのかが分かると具体的にコメントできるのですが…

    全ての投稿にサムネイルが1枚ずつ設定してあります。

    ということは、functions.php に add_theme_support( ‘post-thumbnails’ ); の記述を追加済みで、投稿でアイキャッチの設定を行っているのですよね?

    であれば、if( has_post_thumbnail() ) や 代替画像の記述は必要ないと思うので、もう少しコードをシンプルにして試されてみては?

    一応サンプルです。

    <ul>
    <?php
    $prevpost = get_adjacent_post(true, '', true);
    $nextpost = get_adjacent_post(true, '', false);
    
    if ( $prevtpost ) {
    	echo '<li class="prev"><a href="' . get_permalink($prevpost->ID) . '">' . get_the_post_thumbnail( $prevpost->ID, 'thumbnail' ) . '</a></li>';
    	}
    	else {
    	echo '<li class="prev nopost">前の記事はありません</li>';
    	}
    
    if ( $nextpost ) {
    	echo '<li class="next"><a href="' . get_permalink($nextpost->ID) . '">' . get_the_post_thumbnail( $nextpost->ID, 'thumbnail' ) . '</a></li>';
    	}
    	else {
    	echo '<li class="next nopost">次の記事はありません</li>';
    	}
    ?>
    </ul>

    rintax

    (@rinchan2119)

    LVP8様

    返信ありがとうございます。

    「サムネイル」はWordPressに画像をアップロードする際に作成されるサムネイルのことです。
    言葉足らずで申しわけありません。

    コードを設置すると、設置した部分より下は何も表示されず空白になってしまいます。
    PHPエラー、画像、リンクなども表示されません。

    お手数をお掛けしますが、引き続きご意見お待ちしております。

    アップロードした画像の名前は、投稿と関連性(ポストネームやID)のある名前ですか?
    例)
    投稿の名前と同じ名前:投稿の名前.jpg
    投稿IDを利用 23_aaa.jpg

    また、画像は一つの投稿につき何枚アップロードしてますか?

    rintax

    (@rinchan2119)

    LVP8様

    アップロードした画像の名前は「投稿ID.jpg」にしています。

    サムネイルのサイズを[設定>メディア]で150×225に変更しているので
    サムネイルの名前は「投稿ID-150×225.jpg」になります。

    画像の場所は
    <?php bloginfo('url'); ?>/pc/wp-content/uploads/2010/08/投稿ID.jpg
    です。

    一つの投稿につき1枚アップロードしています。

    よろしくお願いいたします。

    もっと省略できるはずですが、取りあえずこれで動きますかね?

    <ul>
    <?php
    $img_dir = get_bloginfo('url') . '/pc/wp-content/uploads/';
    $prevpost = get_adjacent_post(true, '', true);
    $nextpost = get_adjacent_post(true, '', false);
    
    if ( $prevtpost ) {
    	echo '<li class="prev"><a href="' . get_permalink($prevpost->ID) . '"><img src="' . $img_dir . mysql2date('Y/m/', $prevpost->post_date ) . $prevpost->ID . '-150x225.jpg" width="155" height="225" alt="' . esc_attr($prevpost->post_title) . '" /></a></li>';
    	}
    else {
    	echo '<li class="prev nopost">前の記事はありません</li>';
    	}
    
    if ( $nextpost ) {
    	echo '<li class="next"><a href="' . get_permalink($nextpost->ID) . '"><img src="' . $img_dir . mysql2date('Y/m/', $nextpost->post_date ) . $nextpost->ID . '-150x225.jpg" width="155" height="225" alt="' . esc_attr($nextpost->post_title) . '" /></a></li>';
    	}
    else {
    	echo '<li class="next nopost">次の記事はありません</li>';
    	}
    ?>
    </ul>

    alt が空だったので追加しました。

    rintax

    (@rinchan2119)

    LVP8

    動きました!
    ありがとうございます。

    しかし、どういうわけか「前の記事」は常に「前の記事はありません」になります。
    「次の記事」は画像もリンクもうまくできているのですが…。

    挿入位置を変えても同じです。

    何か改善策はあるのでしょうか?
    何度もすみませんが、よろしくお願いいたします。

    if ( $prevtpost ) { に余分な文字「t」が入ってました。

    正:if ( $prevpost ) {

    rintax

    (@rinchan2119)

    LVP8様

    表示されました!
    何度もありがとうございました。

    また機会があれば宜しくお願い致します。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「「次の記事」「前の記事」のリンクをサムネイル付きで表示させたい」には新たに返信することはできません。