WordPress（ワードプレス）の投稿記事をホームページ（html）に貼り付ける方法
2019年1月28日
Categories | ホームページ ブログ（WordPress) SEO
WordPressの投稿記事を自動的にホームページ（HTMLサイト）へ表示させたいと
思ったことはありませんか？ 「ブログはWordPressで運営しているけれど、
別で作っている企業ホームページ（HTML）にも最新記事を表示したい」
「外部サービスに頼らず、自分でカスタマイズして実装したい」
「WordPress側の記事を更新したら、自動で静的サイトにも反映させたい」 そんな
悩みをずっと抱えていましたが、この方法を使えば外部サービスを使わずに、
jQueryだけでWordPressの記事を取得してHTMLサイトに表示することができます。
しかも、実装は意外と簡単です。
この記事では、WordPressの投稿記事をHTMLサイトへ自動表示する方法を、
できるだけ分かりやすく解説します。後半では、サムネイル画像の表示方法や
functions.phpの注意点など、実際にやってみないと気づけないポイントもしっかり紹介します。
過去に試した方法と、その問題点
WordPressの記事をHTMLサイトに表示する方法を長い間探し続け、
いろいろ試してきました。ですが、どれも決定打に欠けていました。
まずはその代表例を紹介します。
Google Feed API を利用する方法（過去の定番）
かつてブログのRSSフィードを扱う方法としてよく使われていたのが、
この「Google Feed API」。しかし残念ながら、2017年1月11日でサービスが廃止され、
現在は使えません。
FeedWindを使う方法（外部サービス）
ウィジェットコードを貼り付けるだけでRSSを読み込んで表示できる便利なサービスでした。
実装も非常に簡単でしたが、 表示されるコードが長くて管理が面倒 広告が表示される
ようになった。 無料で使うには制限がある 登録制になった などの問題があり、
サイトのデザインにも合わず採用を断念。
jQueryでRSSを読み込む方法（軽量）
最終的にこのjQueryを利用した方法が一番シンプルでした。
外部サービスに依存しないカスタマイズしやすい。表示は自由に調整可能。
ただし欠点が一つありました。サムネイル画像が表示できない。
そこで、「サムネイルも含めて表示する方法がないか？」と試行錯誤し、
最終的に完成したのが今回紹介する方法です。
WordPressの投稿記事を自動的にHTMLサイトへ表示する方法
ここからは実際の手順を説明します。
基本的にはjQueryを使ってWordPressのRSSフィードを読み込み、
HTMLに出力する仕組みです。 やることは次の8ステップです。
Step1. WordPressのRSSフィードURLを確認する
WordPressには標準でRSSフィード機能が備わっています。通常は以下のようなURLになります。
https://あなたのサイトURL/feed/もし分からない場合は、以下のサイトですぐに確認できます。
https://berss.com/feed/Find.aspx ↗
Step2. 必要なファイルを用意する（rss.js / rss.css）
以下の2つのファイルを使用します。
- rss.js（RSSを読み込むJavaScript）
- rss.css（表示スタイル用CSS）
こちらからダウンロードできます。 ➡ rss.zip（サイズ：1.05KB）
※ rss.jsは最新版2025.10.11です。
Step3. rss.jsのURLを書き換える
rss.js をテキストエディタ（TeraPad等）で開き、WordPressのRSSフィードURLに書き換えます。
変更前：
url: ‘http://www.example.com/blog/feed’,
変更後（例）：
url: ‘https://あなたのサイトURL/feed/’,
※ ここには「1」で調べたRSSのURLを入れてください。
Step4. rss.cssをサイトのスタイルへコピー
rss.cssの内容を、そのまま自分のHTMLサイトのCSSファイルにコピペします。
コピペが終われば、rss.cssは削除してOKです。
Step5. 読み込み用のスクリプトをHTMLに追加する
WordPressの記事を表示したいHTMLファイルの内に以下を追加します。
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src="js/rss.js"></script>※ rss.js を「js」フォルダに入れている場合の例です。
Step6. 表示したい場所にHTMLタグを設置
記事一覧を表示させたい位置に、次のタグを追加します。
<div id="feed"></div>これでひとまず、RSSの記事（タイトル・本文の一部）がHTMLに表示される状態になります。
※6.までは以前の記事で説明したことと同じです。→（記事参照 2017年1月20日）
記事中のテキスト文だけの貼り付けだったら以上でOK。
ここまでの手順では記事タイトルや本文は表示できますが、
サムネイル画像（アイキャッチ画像）は表示されません。
これは、WordPressのRSSフィードにはデフォルトで画像が含まれない設定になっているためです。
そのため、WordPress側の設定を少しだけ変更します。
Step7. functions.php にコードを追加して画像をRSSに含める
WordPressテーマ内にある functions.php に以下のコードを追記します。
functions.phpの場所はブログテーマ内。
/wp-content/themes/テーマ/functions.php
function rss_post_thumbnail($content) {
global $post;
if(has_post_thumbnail($post->ID)) {
$content = '
<div>' . get_the_post_thumbnail($post->ID) . '</div>
' . $content;
}
return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail')これで、RSSフィードにサムネイル画像も含まれるようになります。
※ functions.php を編集するときは必ずバックアップを取ることをおすすめします。
記述ミスをするとサイトが表示されなくなる場合があります。
Step8. べてのファイルをサーバーへアップロード
ここまでに編集したファイルをアップロードします。
- rss.js（URLを修正したもの）
- CSSファイル（rss.cssの内容を追記したもの）
- functions.php（追記したもの）
- 表示用のHTML
※ アップロードの際はファイルの置き場所を間違えないよう注意してください。
よくあるトラブルと対処法
サムネイル画像が異常に大きくなる
RSSフィードにサムネイル画像を含める設定を行った後、HTMLサイトに貼り付けた画像がやたら大きく表示されることがあります。
原因は、functions.php 内でサムネイルサイズを固定指定している場合です。
set_post_thumbnail_size(500, 400, true);この場合、画像が500×400ピクセルで強制表示されるため、大きく見えてしまいます。
対処法
functions.php の指定を変更して、HTMLサイトに合わせたサイズに調整します。
例：
set_post_thumbnail_size(150, 150, true);ダッシュボードのメディア設定も確認
WordPress管理画面のダッシュボード > 設定 > メディア設定
にあるサムネイルサイズも関係します。
functions.php にサムネイルサイズの指定をしない場合、こちらの設定が優先されます。
HTML側でサムネイルサイズを指定したい場合
functions.php の一部を変更して、メディア設定で決めたサムネイルサイズを使用することも可能です。
例：
get_the_post_thumbnail($post->ID, 'thumbnail')こうすることで、オリジナル画像ではなく、設定したサムネイルサイズで表示されます。
追伸：画像の配置 2019年1月30日
サムネイルを左側に配置したいという要望がある場合は、CSSでfloatを指定することで対応できます。
ダウンロードファイル内のCSSもそのように更新済みです。
まとめ
この記事では、WordPressの投稿記事をHTMLサイトに自動表示させる方法を紹介しました。
ポイントは以下の通りです。
- >WordPressのRSSフィードを利用して記事データを取得する
- jQueryでRSSを読み込み、HTMLに出力する
- サムネイル画像を表示したい場合は、functions.php にコードを追記
- サムネイルサイズはfunctions.php またはダッシュボードのメディア設定で調整
- 実装時はバックアップを必ず取ること、functions.phpの編集ミスに注意
これらの手順を踏めば、外部サービスに依存せずに、WordPressで更新した記事が自動でHTMLサイトに反映されるようになります。
最後に
サムネイルの配置やスタイルはCSSで自由に調整可能です。
HTMLサイトに貼り付けた記事の見た目を、自分のサイトデザインに合わせてカスタマイズしてください。
