wordpressのカスタム投稿の新着情報をindex.htmlに表示したい。

前提・実現したいこと

wordpressで作られたページの修正をしていますが、どうにもならないのでお力を貸してください。
カスタム投稿(CPT UI)でブログを作成されていてTOPが静的ページ(index.html)になっています。
index.htmlにカスタム投稿の新着を入れ込みたいと考えていますがうまくいきません。

発生している問題・エラーメッセージ

まったく表示されません。


 <?php require_once('wp/wp-load.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
↑こちらをindex.htmlの一行目に記載。

<ul>
<?php
$myposts = get_posts('numberposts=5&orderby=post_date');
foreach($myposts as $post) :
setup_postdata($post);
?>
<li><?php the_time('Y/m/d') ?>&nbsp;<a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
↑こちらをindex.htmlの表示したい場所に記載

```ここに言語名を入力

試したこと

上のタグを組み込んでます。

行動規範の内容に同意します

回答3件

ベストアンサー

通常 index.html では php を実行できないのでは？
index.php にしてみてはいかがでしょうか。

投稿2018/04/08 07:49

kei344

総合スコア69400

nori-rino

2018/04/08 08:26

kei344様有難うございます。修正だったのでhtmlを生かすべきかと思ったので、色々思案していたのですが…もう少し考えてphpにすべきか検討します。

kei344

2018/04/08 08:44

書き換えないのであれば、JavaScriptでRSSを取得してしまうのも手ですよ。（検索キーワードは「wordpress rss javascript 同一ドメイン」とか）【同じドメインのWordPressのFeedを最初の画像入りで読み込む - DTM、After Effects、web関連のメモクリエイター中山英克】 https://hidekatsu.com/craft/archives/8267

nori-rino

2018/04/09 06:40

有難うございます。 JavaScriptでRSSを取得は頭にありませんでした。一度試してみたいと思います。

行動規範の内容に同意します

原因としてはkei344さんが仰られているように.htmlなのでphpが実行されていないかと思います。

解決方法としては

・.htmlでなはなく.phpとする。
・WordPress側でカスタム投稿の新着を出力する固定ページを作成し、index.html側ではiframeで読み込む
・カスタム投稿の新着情報をRSSまたはRESTAPIをJavascriptで読み込み出力する

などが考えられます。

投稿2018/04/08 10:27

qkm10

総合スコア16

nori-rino

2018/04/09 17:07

助言、有難うございます。昨日は、こちらの作業中にwordpressを飛ばす事件が起こってしまいお礼が出来なかったことをお許しください。 RSSをjavaで読ませるのは使えそうな気がします！一度試してみます。

行動規範の内容に同意します

助言いただいたとおり、HTMLにRSSをjqueryで読み込ませる形で解決致しました。
日付を入れ込みたかった為、function formatDtを追加しております。

jquery
1<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
2<script>
3function formatDt(dt_string) {
4    var dt = new Date(dt_string);
5    var y = dt.getFullYear();
6    var m = ('00' + (dt.getMonth() + 1)).slice(-2);
7    var d = ('00' + dt.getDate()).slice(-2);
8    return y + '.' + m + '.' + d;
9}
10
11
12$.ajax({
13	url: '// RSSのURL',
14	type: 'get',
15	dataType: 'xml',
16	timeout: 5000,
17	success: function(xml, status) {
18		if (status === 'success') {
19			var row = 0;
20			var data = [];
21			var nodeName;
22			 // 取得件数
23            var getCount = 3;
24			$(xml).find('item').each(function() {
25				data[row] = {};
26				$(this).children().each(function() { // 子要素を取得
27				    nodeName = $(this)[0].nodeName; // 要素名
28				    data[row][nodeName] = {}; // 初期化
29				    attributes = $(this)[0].attributes; // 属性を取得
30				    for (var i in attributes) {
31						data[row][nodeName][attributes[i].name] = attributes[i].value; // 属性名 = 値
32				    }
33					data[row][nodeName]['text'] = $(this).text();
34				});
35				row++;
36			});
37			$('#rss').wrapInner('<ul></ul>');
38            var count = 0;
39            for (i in data) {
40            if ( count === 3 ) { break; }
41            $('#rss').find('ul').append('<li><p>' + formatDt(data[i].pubDate.text) +" \t " +'<a href="' + data[i].link.text + '">' + data[i].title.text + '</a></p></li>');
42            count++;
43			$('#rss').css("width","100%");
44            $('#rss').css("font-size","16px");
45            $('#rss').css("font-weight","bold"); 	
46
47            }
48		}
49	}  
50});
51</script>