サポート » 使い方全般 » 親ページに子ページのタイトルとサムネイル

  • 解決済 133

    (@133-1)


    製品カタログのようなページを作るために、親ページに子ページのタイトル(リンク付)とサムネイル画像を表示する方法を調べています。

    以前、このフォーラムで方法が出ていたものも試してみました。
    http://ja.forums.wordpress.org/topic/2797?replies=6

    そこに記載された内容は次のものでした。

    <?php
    $max_w = 100;
    $max_h = 100;
    if ( $post->post_parent == 0 ) {
    $child_posts = get_posts( ‘numberposts=-1&order=ASC&orderby=post_title&post_type=page&post_parent=’ . $post->ID );
    if ( $child_posts ) {
    foreach ( $child_posts as $child ) {
    $c_postname = $child->post_name ;
    if ( preg_match( ‘/<img[^>]+?>/i’, $child->post_content, $image ) ) {

    preg_match( ‘/width=”([\d]+)”/i’, $image[0], $img_width );
    preg_match( ‘/height=”([\d]+)”/i’, $image[0], $img_height );

    $image[0] = preg_replace( ‘/class=”([^”]*)(alignleft|alignright|aligncenter)([^”]*)”/i’, ‘class=”$1alignnone$3″‘, $image[0] );

    if ( $img_width[1] > $max_w || $img_height[1] > $max_h ) {
    if ( $img_width[1] <= $max_w ) {
    $img_width = ”;
    $img_height = ‘ height=”‘ . $max_h . ‘”‘;
    } elseif ( $img_height[1] <= $max_h ) {
    $img_width = ‘ width=”‘ . $max_w . ‘”‘;
    $img_height = ”;
    } else {
    if ( $img_width[1] * $max_h > $img_height[1] * $max_w ) {
    $img_width = ‘ width=”‘ . $max_w . ‘”‘;
    $img_height = ”;
    } else {
    $img_width = ”;
    $img_height = ‘ height=”‘ . $max_h . ‘”‘;
    }
    }
    $image[0] = preg_replace( ‘/ width=”[\d]+”/i’, $img_width, $image[0] );
    $image[0] = preg_replace( ‘/ height=”[\d]+”/i’, $img_height, $image[0] );
    }
    ?>
    <div class=”child_index”>
    <?php echo apply_filters( ‘the_title’, $child->post_title ); ?>
    <?php echo $image[0]; ?>
    </div>
    <?php
    }
    }
    }
    }
    ?>

    この方法では表示される画像は子ページで表示させている画像サイズのままになりました。

    今作っている子ページでは、画像幅は400~500pxで表示させていますので、そのまま親ページに並ぶと見づらくなってしまいます。

    前述の書き込みのなかでは、「厳密性を重視するのであれば、getimagesizeを用いるべき」と書かれていますが、私の知識ではその方法がわかりません。

    また、子ページタイトルにリンクをつける方法も今一つわかりません。

    もし、よろしければサジェスチョンをいただければと思います。
    よろしくお願いします。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • 未検証。

    <?php
    if ( 0 == $post->post_parent ) :
      $child_posts = get_posts(
        'numberposts=-1&order=ASC&orderby=post_title&post_type=page&post_parent=' . $post->ID
      );
      foreach ( (array)$child_posts as $child ) :
        ?><h2><a href="<?php echo get_permalink( $child->ID ); ?"><?php
        echo apply_filters( 'the_title', $child->post_title );
        ?></a></h2><?php
        $images = get_children( array(
          'post_parent' => $child->ID,
          'post_type' => 'attachment',
          'post_mime_type' => 'image'
        ) );
        if ( $images ) {
          $ids = array_keys( $images );
          $id = $ids[0];
        } else {
        if ( preg_match_all( '@wp-image-([0-9]+)@i', $child->post_content, $matches ) )
          $id = $matches[1][0];
        }
        if ( $id != 0 )
          echo wp_get_attachment_image( $id, array( 123, 123 ) ); // 画像横縦サイズを指定しよう!
      endforeach;
    endif;
    ?>

    マークアップはお好みで◎
    タイポ等々よきにハカラってください。

    すいません。。。あまり知識がないもので、上記のスクリプトをテンプレートに記述したところ、

    HTTP エラー 500(Internal Server Error): An unexpected condition was encountered while the server was attempting to fulfill the request.

    とエラーが出てしまいました。

    マークアップはお好みで◎
    タイポ等々よきにハカラってください。

    とのことですが、どの部分がひっかかってしまっているのかわからず、図々しいかもしれませんがご教示いただけるとありがたいです。

    <a href="<?php echo get_permalink( $child->ID ); ?">

    ここか?(未検証)

    <a href="<?php echo get_permalink( $child->ID ); ?>">

    <a href="<?php echo get_permalink( $child->ID ); ?>">
    にしてみましたが、同じ500エラーになりました。。。

    いま・・・ちょうどページのカスタマイズしてるので、人柱として、上記コードを入れてみましたが、特にエラーでは無いですね。shokun0803さんの修正後です。

    foreach~endforeach;
    の間を、少しずつ削っていってみるとか?

    500エラーなので、どこぞのタイポミスか、コードがUTF-8じゃなくなっちゃったか、とか?

    kzさん、shokun0803さん、kvexさん、レスポンスをありがとうございます。

    今、もう一度全てのコードをクリアして、元のpage.phpに上記のコード(一部修正後)を加えたところ、エラーはでなくなりました。修正しているときに、何かミスをしていたようです。

    子ページのタイトルにリンクも付きましたし、画像も表示されました。
    ただし、画像なんですが、なぜかサイズが 300x225px に揃ってしまっています。
    子ページでのサムネイル表示サイズがそれとは違っていても、です。

    う~ん。。。

    echo wp_get_attachment_image( $id, 'thumbnail' ); // 画像横縦サイズを指定しよう!
    にしたら、サムネイルで指定したサイズになりますよー。

    ならなかったら、
    サムネイルに指定したサイズより小さい画像をアップロードしてるとか
    サムネイルサイズを変更したことがあって、その前にアップロードした画像を表示してるとか
    CSSでサイズ変えてるとか

    ※サムネイルに指定したサイズっていうのは、管理画面の[設定|メディア]で表示される
    「サムネイルのサイズ」の[幅][高さ]欄の事です。

    kzさん、ありがとうございます!
    画像サイズはサムネイル指定のものでできました。
    皆さまのお陰で希望した子ページ情報の表示ができるようになりました。
    以下、今回のコードを載せておきます。

    <?php
    if ( 0 == $post->post_parent ) :
      $child_posts = get_posts(
        'numberposts=-1&order=ASC&orderby=post_title&post_type=page&post_parent=' . $post->ID
      );
      foreach ( (array)$child_posts as $child ) :
        ?><h2><a href="<?php echo get_permalink( $child->ID ); ?>"><?php
        echo apply_filters( 'the_title', $child->post_title );
        ?></a></h2><?php
        $images = get_children( array(
          'post_parent' => $child->ID,
          'post_type' => 'attachment',
          'post_mime_type' => 'image'
        ) );
        if ( $images ) {
          $ids = array_keys( $images );
          $id = $ids[0];
        } else {
        if ( preg_match_all( '@wp-image-([0-9]+)@i', $child->post_content, $matches ) )
          $id = $matches[1][0];
        }
        if ( $id != 0 )
          echo wp_get_attachment_image( $id, 'thumbnail' ); // サムネイル指定したサイズで表示
      endforeach;
    endif;
    ?>
9件の返信を表示中 - 1 - 9件目 (全9件中)
  • トピック「親ページに子ページのタイトルとサムネイル」には新たに返信することはできません。