質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.59%

Wordpress(記事)のアイキャッチをhtmlに貼り付けする方法を教えてください。

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 1,373

score 24

ワードプレスの記事(テキスト文)を「JavaScript」と「jQuery」を利用して、
htmlに貼り付けることは出来たのですが、
アイキャッチ画像(jpg・gif・png)を貼り付ける方法が分かりません。
下記コードにどう追記するすればよいのでしょうか。
ご回答よろしくお願いします。

$.ajax({
    url: 'http://www.example.com/blog/feed',
    type: 'get',
    dataType: 'xml',
    timeout: 5000,
    success: function(xml, status) {
        if (status === 'success') {
            var row = 0;
            var data = [];
            var nodeName;
            $(xml).find('item').each(function() {
                data[row] = {};
                $(this).children().each(function() {
                    nodeName = $(this)[0].nodeName;
                    data[row][nodeName] = {};
                    attributes = $(this)[0].attributes;
                    for (var i in attributes) {
                        data[row][nodeName][attributes[i].name] = attributes[i].value;
                    }
                    data[row][nodeName]['text'] = $(this).text();
                });
                row++;
            });
            $('#feed').wrapInner('<ul></ul>');
            for (i in data) {
                var update = data[i].pubDate.text;
                var date = new Date(update);
                var update = dateFormat(date);

                $('#feed').find('ul').append('<li><p class="wp"><a href="' + data[i].link.text + '" target="_blank" class="wp">' + data[i].title.text + '</a></p><a href="' + data[i].link.text + '" target="_blank">' + data[i].description.text + '</a><p class="day">' + update + '</p></li>');
            }
        }
    }  
});

                function dateFormat(date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                var d = date.getDate();
                var w = date.getDay();

                m = ('0' + m).slice(-2);
                d = ('0' + d).slice(-2);

                return y + '年' + m + '月' + d + '日';
}

cssはこんな感じ。

#feed {
    width: 400px;
    height: 160px;
    margin: 0;
    overflow-y: scroll;
    font-size:12px;
    }
#feed ul li {
    line-height:1.8em;
    margin:0 0 10px -40px;
    padding-bottom:10px;
    list-style: none;
    border-width: 0 0 1px 0;
    border-bottom: dotted;
    border-color: #cccccc;
    }
#feed ul li p.wp {
    font-weight:bold;
    margin-bottom:6px;
    }
#feed ul li p.day {
    text-align:right;
    margin:6px;
    }

htmlに記述したスクリプトコードは、

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src="rss.js"></script>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

記事のタイトルやリンク等が取得できたのであれば同様の記述でアイキャッチ画像URLも取得できるはずです。

もしできないのであれば、そもそもアイキャッチ画像情報の提供がされていないのではないでしょうか。

    url: 'http://www.example.com/blog/feed',

現状行っている処理は、上記のURLに記載されている記事内容の抽出です。
URLの末尾にある通り、このURLはいわゆるfeedというものです。
WordPressではこのfeedが自動生成されるのですが、デフォルトではアイキャッチ画像の情報はfeedに出力されません。
その記事の管理者が特別な処理を行わない限り、WordPressのfeedからアイキャッチ画像を取得することはできません。

http://www.example.com/blog/feedにブラウザでアクセスして表示される文字列の中にアイキャッチ画像の情報が含まれているか探してください。
見つからなければ現状feedからアイキャッチ画像を取得することは不可能です。

もし見つかったら、その目的の画像URLが書いてある付近を抜粋して追記をしてください。(URL、記事内容等はもちろん伏せて構いません)
そうしたら再度お答えできるかと思います。

以下補足です

もしあなたがhttp://www.example.com/blogの管理者であれば、まずfeedにアイキャッチ画像の情報を追加する処理を行ってください。
「WordPress feed アイキャッチ 追加」等で調べればたくさん出てくでしょう。
そうすればjQueryでの取得もできるはずです。


もしあなたがhttp://www.example.com/blogの管理者でなく、かつ、どうしても記事のアイキャッチを取得したいのであれば、「スクレイピング」という手法もあります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/27 18:35

    JavaScriptはいじらなくても表示されました。
    ありがとうございます。
    ただですね、表示された画像が大きいのですが、
    functions.phpにこう記述してます。

    add_theme_support('post-thumbnails');
    set_post_thumbnail_size(550, 400, true);

    これを削除し、
    WPダッシュボード>設定>メディア設定 の
    サムネイルサイズ 幅150 高さ150

    だけでもサイズ変更は可能でしょうか。

    キャンセル

  • 2019/01/27 18:56 編集

    それではサイズは変わりません。
    function.phpの中に
    get_the_post_thumbnail($post->ID)
    という記述があります。

    ここでアイキャッチ画像を取得しているのですが、このままだとフルサイズの画像を取得してしまいます。
    以下のように引数を追加すればそれぞれの大きさの画像が表示されます。
    get_the_post_thumbnail($post->ID, 'thumbnail')
    get_the_post_thumbnail($post->ID, 'medium')
    get_the_post_thumbnail($post->ID, 'large')

    この関数のリファレンスは以下です。
    https://wpdocs.osdn.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/get_the_post_thumbnail

    -------

    もっとも、画像容量を気にしないのであればCSSだけでもサイズ調整はできます。
    #feed .attachment-post-thumbnail {
    width: 150px;
    height: auto;
    }
    というCSSを加えれば画像のサイズは整うはずです。
    PHPを触るのが難しいと感じたならこの方法でいいと思います。

    キャンセル

  • 2019/01/28 15:08

    解決できました。
    色々とありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る