サポート » 使い方全般 » 新着一覧にサムネイル、タイトル、投稿日時、本文を表示したい

  • 解決済 A T

    (@tokoatsu)


    PHPのわからないwordpress初心者ですが宜しくお願いいたします。
    自作のテーマのトップページ index.php にTOPIX (新着記事)

    ・記事のタイトル
    ・更新日時
    ・本文抜粋
    ・記事内の画像のサムネイル

    を表示したいと考えています。

    下記URLの最新記事部分が理想の形になります。
    http://www.ise-cci.or.jp/josei/

    《 環境 》
    wordpress 3.5.1
    PHP 5.2.17

    過去の事例を抜粋させていただきました。
    http://ja.forums.wordpress.org/topic/4289?replies=9

    色々と試してはみたのですが知識も少なく行き詰まってしまいました。
    ご教授いただけると幸いです。何卒、宜しくお願いいたします。

14件の返信を表示中 - 1 - 14件目 (全14件中)
  • 掲載いただいた「過去の事例」そのままのような気がしますが…どの部分が不明なのでしょうか?

    トピック投稿者 A T

    (@tokoatsu)

    ご返信有難うございます。

    タイトル、投稿日時、説明文は表示されているのですが、サムネイル画像が表示されません。
    過去の事例を参考にサムネイルについて調査したのですが、登録方法が分かりませんでした。

    可能であれば自動で記事に投稿された写真を抜粋してサムネイルになればいいのですが、
    お手数をおかけいたしますが、アドバイスいただけると助かります。

    宜しくお願いいたします。

    モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    tokostsuさんがおっしゃっているサムネイル画像についてはおそらく、WordPressの用語で「アイキャッチ画像」と呼ばれているものになります。
    で、記事を書く画面においてアイキャッチ画像が登録されていないため表示されていないのでしょう。
    まずは手動でアイキャッチ画像を登録してみてください。

    自動で記事内の画像をとってくる方法はいくつかありますが、まずは「アイキャッチ画像」が登録できて正しい表示になるかどうかお試しください。

    トピック投稿者 A T

    (@tokoatsu)

    mypacecreatorさん

    ご返信有難うございます!
    アイキャッチ画像は登録でき正しく表示されました。

    トピック投稿者 A T

    (@tokoatsu)

    しかし、お客様のほうで更新していただくので、より簡単な仕様にしたく、自動で記事内の画像をとってくるようにしたいと考えておりました。

    モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    よかった、アイキャッチは大丈夫でしたね。
    では次のステップへ。

    私個人的によく使っているプラグインがありまして、Auto Post Thumbnailっていうんですが、アイキャッチを手動で登録しなくても、自動で1枚目の画像をアイキャッチ画像として登録してくれます。

    トピック投稿者 A T

    (@tokoatsu)

    mypacecreatorさん

    早速の返信ありがとうございます!非常に助かります。
    なるほど!そちらのプラグイン導入し、結果のほう報告させていただきます。

    わざわざ、有難うございます。

    トピック投稿者 A T

    (@tokoatsu)

    mypacecreatorさん

    早速、導入し、きちんと表示されました!
    ほんとに有難うございます★

    サムネイルのサイズ指定など可能ですか?
    質問ばかりすいません。。

    モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    サムネイルのサイズ指定など可能ですか?

    アイキャッチ機能が有効になっているので、おそらくお使いのテーマのfunctions.phpのどこかに

    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( なんか数字, なんか数字 );

    という部分があると思います。
    ここの数字を変えるとアップ時に生成されるアイキャッチ画像のサイズが変わります。
    例えば
    set_post_thumbnail_size( 300, 9999 );だと幅最大300px、高さ最大9999pxを超えないように縦横比を保ってリサイズ
    set_post_thumbnail_size( 300, 200, true );だと幅300px、高さ200pxにトリミング

    英語ですが説明はこちら
    http://codex.wordpress.org/Function_Reference/set_post_thumbnail_size

    ※ただし既にアップ済みのものはサイズ変更されません。
    アップし直すか、もう既にたくさんアップしてしまったのならRegenerate Thumbnailsプラグインなどを使ってください。

    トピック投稿者 A T

    (@tokoatsu)

    mypacecreatorさん

    返信有難うございます!試した所、アップする写真のサイズによってサムネイルサイズが変わってしまいます。

    function.php内に書かれているもの

    /* アイキャッチ画像 */
    add_theme_support( ‘post-thumbnails’);
    set_post_thumbnail_size( 260, 160, true ); // サムネイルのサイズ

    また、index.phpに書いてある関係しそうな箇所

    <?php query_posts(‘posts_per_page=10’);
    if (have_posts()) : while (have_posts()) : the_post(); ?>
    <dl class=”topix”>
    <dt>“><?php the_time(‘Y.m.d’); ?></dt>
    <dd class=”sam”>“><?php
    if ( has_post_thumbnail() ): // サムネイルを持っているときの処理
    ?><?php the_post_thumbnail( array(260,160), array(‘class’ => ‘imgLeft’) ); ?><?php
    else: // サムネイルを持っていないときの処理
    ?><img src=”<?php bloginfo(‘template_url’) ?>/image/no_image.gif” alt=”noimage” class=”imgLeft” /><?php
    endif; ?>
    </dd>
    <dd class=”tit”>“><?php the_title(); ?>
    <?php the_excerpt(); ?>
    </dd>
    <dd class=”exp”>“><?php the_excerpt(); ?></dd></dl>
    <?php endwhile; endif; wp_reset_query();?>

    どちらもサムネイルサイズを合わしているのですが、上手くいきません。。
    お時間ある時にでも助言いただけると助かります。
    宜しくお願いいたします。

    モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    いろいろつっこみどころがありますが、まず本題と関係無いところで

    1. コードを書く時は”code”ボタンを使って囲ってください。そうでないと今回のようにおかしな表示になります。ひどいと画面全体のレイアウトが崩れることがあります。こんなふうに。。。
    2. index.php内のquery_posts('posts_per_page=10');の部分と、最後のwp_reset_query();の記述不要です。10件表示にしたいなら、ダッシュボードの表示設定から10件に設定すればOKです。

    で、

    どちらもサムネイルサイズを合わしているのですが、上手くいきません。。

    というのは、表示される画像が260px×160pxになってないということでしょうか。
    だとするとどういったサイスで掲載されているのか、元画像のサイズが260px×160pxに満たないということはないか、お調べください。
    (言葉だけから推測してますので、正直あまりイメージできていません。。。)

    トピック投稿者 A T

    (@tokoatsu)

    返信有難うございます。。

    コードを書く時は”code”ボタンを使って囲ってください。そうでないと今回のようにおかしな表示になります。ひどいと画面全体のレイアウトが崩れることがあります。こんなふうに。。。

    なるほど〜無知で申し訳ないです。確かに凄い崩れていますね・・・
    以後、気を付けます!

    index.php内のquery_posts(‘posts_per_page=10’);の部分と、最後のwp_reset_query();の記述不要です。10件表示にしたいなら、ダッシュボードの表示設定から10件に設定すればOKです。

    なるほど!了解いたしました。修正いたします。

    というのは、表示される画像が260px×160pxになってないということでしょうか。
    だとするとどういったサイスで掲載されているのか、元画像のサイズが260px×160pxに満たないということはないか、お調べください。

    いくつか記事をあげた結果です。

    元の画像    サムネイル
    960×720 → 225×170
    680×453 → 300×200  になりました。

    URLを記載するのでみていただけると助かります。

    URL ; http://www.tokoatsu.info/wordpress/

    親身に色々とご教授いただき誠に有難うございます。
    宜しくお願いいたします。

    モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_post_thumbnail

    上記ページを参考に、

    <?php the_post_thumbnail( array(260,160), array('class' => 'imgLeft') ); ?>
    array(260,160)の部分を一旦削除してみてください。

    the_post_thumbnail(); // パラメータなし -> サムネイル
    the_post_thumbnail(‘thumbnail’); // サムネイル
    the_post_thumbnail(‘medium’); // 中サイズ
    the_post_thumbnail(‘large’); // 大サイズ

    上記パラメータを使った場合、ダッシュボードのメディア設定で指定したサイズで表示されます。
    arrayを使って任意の数字を使った場合、システム側でリサイズされた画像ではなく元サイズの画像が使われることがあります。

    set_post_thumbnail_sizeで設定したサイズのまま表示させたい場合は、array(260,160)という風に呼び出し側で数字を明示する必要はありません。

    なお上記Codexには記載されていませんが、
    the_post_thumbnail();
    the_post_thumbnail('post-thumbnail');
    上記は同じ意味で、set_post_thumbnail_sizeで設定したサイズで生成された画像を表示します。

    the_post_thumbnail('thumbnail');
    こちらはダッシュボードのメディア設定で「サムネイル」に指定されたサイズが出ます。
    用語が紛らわしいですが。

    トピック投稿者 A T

    (@tokoatsu)

    mypacecreatorさん

    返信遅くなってしまいまして、申し訳ございません!

    the_post_thumbnail(‘thumbnail’); にしたところ無事表示されました〜。

    色々と親身に対応してくださり誠に有難うございました★
    ほんとに助かりました。

    他の疑問は別スレをたてたほうがいいですよね。
    また機会がございましたら是非お願いいたします。

14件の返信を表示中 - 1 - 14件目 (全14件中)
  • トピック「新着一覧にサムネイル、タイトル、投稿日時、本文を表示したい」には新たに返信することはできません。