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

Question

ワードプレスの記事（テキスト文）を「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>

```

Answer 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の管理者でなく、かつ、どうしても記事のアイキャッチを取得したいのであれば、「スクレイピング」という手法もあります。

Comments

[hizirida]

feedを確認したところ、アイキャッチが出力されてなかったようなので、
アドバイス通り「functions.php」に追記しました。
そして再度feedを確認し、追加されたタグはこんな感じです。

ビフォア
<content:encoded><![CDATA[<p><span style="font-size: 16px;"><strong>最近雨・・・

アフター
<content:encoded><![CDATA[<p><img width="550" height="400" src="http://www.example.com/blog/wp-content/uploads/2019/01/DSC_0068-1-550x400.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /></p><p><span style="font-size: 16px;">
<strong>最近雨・・・

[hizirida]

「functions.php」には、こう追記しました。

//アイキャッチ画像の出力
function rss_post_thumbnail($content) {
global $post;
if(has_post_thumbnail($post->ID)) {
$content = '<p>' . get_the_post_thumbnail($post->ID) . '</p>' . $content;
}
return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail');

[yamanaka-aiz]

おそらくfunctions.phpにその記述を追加しただけで、画像が表示されるようになったのではないでしょうか。

もし出力のHTML構造を変えたいというのであれば、PHP（functions.php）を変更するのが手っ取り早いかと思います。
PHPの話は質問の範囲外ですが、

> $content = '<p>' . get_the_post_thumbnail($post->ID) . '</p>' . $content;

↑これをこう↓することもできます

$content = '<div class="thumb">' . get_the_post_thumbnail($post->ID) . '</div>' . $content;

「.」は文字列結合の演算子です。

[hizirida]

「JavaScript」にはどう追記すればよろしいでしょうか？
多分ここら辺だと思うのですが。

$('#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>');
}
}
}
});

[yamanaka-aiz]

JavaScriptは変更せずとも画像は表示されるはずです。
現状でもまだ画像は表示されないということですか？
最終的にどういう状況になって欲しいかが不明瞭です。
もう少し詳しく書いていただけないでしょうか。

[hizirida]

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

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

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

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

[yamanaka-aiz]

それではサイズは変わりません。
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を触るのが難しいと感じたならこの方法でいいと思います。

[hizirida]

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