ホームページとwordpressを同一ドメインで運用している場合、wordpressの記事を通常の静的htmlに表示出来たら便利ですよね。しかしwordpressってphpでしょ？普通ホームページってHTMLだからphpが動くように設定が必要だったりで超面倒。
・通常のHTML
・javascript
・css
・wordpressのfunction.phpにコードを追加
これで表示できます！
表示できる項目は
タイトル
サムネイル（アイキャッチ）画像
説明文
まずはjavascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | $.ajax({ url:'ここにRSSフィード', type:'get', dataType:'xml', timeout:5000, success:function(xml,status){ if(status==='success'){ varrow=0; vardata=[]; varnodeName; $(xml).find('item').each(function(){ data[row]={}; $(this).children().each(function(){ nodeName=$(this)[0].nodeName; data[row][nodeName]={}; attributes=$(this)[0].attributes; for(variinattributes){ data[row][nodeName][attributes[i].name]=attributes[i].value; } data[row][nodeName]['text']=$(this).text(); }); row++; }); $('#feed').wrapInner('<ul></ul>'); for(iindata){ varupdate=data[i].pubDate.text; vardate=newDate(update); varupdate=dateFormat(date); $('#feed').find('ul').append('<li><a class="at" href="'+data[i].link.text+'">'+data[i].title.text+'</a><a class="ai" href="'+data[i].link.text+'">'+data[i].description.text+'</a></li>'); } } } }); functiondateFormat(date){ vary=date.getFullYear(); varm=date.getMonth()+1; vard=date.getDate(); varw=date.getDay(); m=('0'+m).slice(-2); d=('0'+d).slice(-2); returny+'年'+m+'月'+d+'日'; } |
上記コードの url: ‘ここにRSSフィード’, にrssフィードを入力。
例えばフィードが https://www.abc/wp/?feed=rss2 の場合
url: ‘https://www.abc/wp/?feed=rss2’, となるわけ。
RSSフィードが分からない場合は、
RSSフィード取得・検出ツール - BeRSS.com
berss.com
にブログのアドレスを入れれば表示できます。
そしてCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | .wrap{ max-width:1000px; margin-left:auto; margin-right:auto; } /*ここからfeed関連*/ #feed ul{ display:-webkit-flex;/* Safari */ display:flex; -webkit-flex-wrap:wrap;/* Safari */ flex-wrap:wrap; margin:0px; padding:0px; } #feed ul li{ list-style:none; width:30%; margin-left:1%; margin-right:1%; margin-bottom:25px; } /*これは最大６記事を表示する設定*/ #feed ul li:nth-child(n+7){ display:none; } #feed ul li a.at{ text-decoration:none; font-size:0.9em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1;/* これは１行のみ表示する設定、２行目以降は・・・になります */ overflow:hidden; color:rgba(62,62,62,1.00); font-weight:bold; text-align:center; } #feed ul li a.ai{ text-decoration:none; font-size:0.9em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1;/* これは１行のみ表示する設定、２行目以降は・・・になります */ overflow:hidden; color:rgba(62,62,62,1.00); } #feed ul li a p{ position:relative; overflow:hidden; padding-top:60%;/* 比率 */ } #feed ul li img{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; object-fit:cover; margin-bottom:0px; } .wp{ font-size:0.9em; text-decoration:none; margin:0px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .day{ font-size:0.8em; margin:0px; padding:0px; } /*ここまでfeed関連*/ body{ margin:0px; padding:0px } .main{ height:400px; background-image:url(lacrosse.jpg); background-repeat:no-repeat; background-size:cover; background-position:centercenter; margin-bottom:54px; display:flex; justify-content:center; align-items:center; } .main p{ color:rgba(255,255,255,1.00); font-size:57px; } @media screen and (max-width:740px){ /*ここからfeed関連*/ #feed ul li{ list-style:none; width:97%; margin-left:1%; margin-right:1%; margin-bottom:50px; } #feed ul{ display:block; margin:0px; padding:0px; } .main p{ color:rgba(255,255,255,1.00); font-size:6vw; font-weight:bold; } /*ここまでfeed関連*/ } |
そしてHTML
1 2 3 | <divclass="wrap"> <divid="feed"></div> </div> |
そして最後はお使いのwordpressのfunction.phpに
1 2 3 4 5 6 7 8 9 | functionrss_post_thumbnail($content){ global$post; if(has_post_thumbnail($post->ID)){ $content='<p>'.get_the_post_thumbnail($post->ID,'full').'</p>'.$content; } return$content; } add_filter('the_excerpt_rss','rss_post_thumbnail'); add_filter('the_content_feed','rss_post_thumbnail'); |
を追加します。子テーマがあるものは子テーマのfunction.phpに書いたほうが、バージョンアップの時に面倒じゃないよ。
これだけ。
ワードプレスはブログだけで利用しているという方、通常のHTMLにニュースなどを表示できるのでぜひ行ってみてください。
