WordPress（ワードプレス）の投稿記事をホームページ（html）に自動貼り付け
2019年1月28日
Categories | ホームページ ブログ（WordPress) SEO
WordPress（ワードプレス）の投稿記事を、
ホームページ（html）に自動貼り付ける
外部サイトのこの手のサービスを利用せず、独自にカスタマイズできないものかと、
長きににわたりモヤモヤしてました。
そして、この度やっとこの問題を解決することが出来ました。
小難しい説明は後にし、
WordPressの投稿記事を、自動的にホームページ（HTML）に表示させる方法
を説明します。
その前に、過去にこの手の小技的な構築を行なった例をズラズラッと紹介します。
「Google Feed API」を利用した方法。
「Google Feed API」は2017年1月11日をもって廃止。
実装が超簡単な「FeedWind」でしたが、記述するコードが長すぎ。
しかも、広告表示されるようになり、登録制になる。
「jQuery」を利用した、シンプルなコードで実装可能。
でもサムネイルが表示されないのがネック。
これからが本題です。
WordPressの投稿記事を、自動的にホームページ（HTML）に表示させる方法
「jQuery」を利用します。
超簡単に設置できるよう、サラッと解説します。
1. ワードプレスのRSSfeedのURLを調べる。
簡単な方法は、こちら↓で1発検索できます。
https://berss.com/feed/Find.aspx
2. 2つのファイル（ rss.css ・ rss.js ）を作成。
当サイトからダウンロードして下さい。
↓
rss.zip size 1.05KB
3. rss.jsをテキストエディタ（TeraPadなど）で開き、下記を変更する。
url: ‘http://www.example.com/blog/feed’,
↓ ↓
url: ‘ 1.で調べたURLです。 ’,
4. rss.cssの中身を自分で作成したホームページのスタイルシートにコピペ。
コピペしたらrss.cssは用済みなので削除。
5. 貼り付けたいホームページ（html）のbody内に下記2行を記述。
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script> <script src="js/rss.js"></script>
6. 貼り付けたい場所に下記コードをペースト。
<div id="feed"></div>
※6.までは以前の記事で説明したことと同じです。→（記事参照 2017年1月20日）
記事中のテキスト文だけの貼り付けだったら以上でOK。
7.はサムネイル画像も表示させる説明です。
7. 「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');
8. 更新したファイルを全てアップロードする。
アップロードする際、ファイルを置く場所を間違えると動かないので要注意。
以上でホームページに投稿記事を表示できたと思いますが、
今回の設定を小難しく、注意事項などを含め、私的に備忘録します。
表示が上手くいかなかった時など、参考にして下さい。
概要
WPの投稿記事（最新記事）を「html」に貼り付ける方法とは・・・
そもそも殆どのブログ等には「RSSフィード」が備わっていて、
こやつはブログ記事を簡略したようなページ。そのRSSから記事や画像情報を
「jQuery」を利用して抽出し、「JavaScript」ファイルで書き出す。
「jQuery」は5.の説明です。「JavaScript」は3.の説明です。
WPのデフォルトだと、RSSにはアイキャッチ（サムネイル）画像が含まれない
設定になっています。そこで「functions.php」ファイルに、
「RSSにはサムネイル画像も含む」と、指示文を記述します。
その作業が7.です。
ところで「functions.php」ファイルとは、なんぞや？
WPでは最重要ファイルであり、絶対的な司令塔みたいなファイル。
だから、少しでも誤った記述をすると、ブログが吹っ飛んでしまう。
全く表示されなくなってしまいます。いじるときは細心の注意が必要であり、
バックアップは必須です。
私が今回の設定で誤ったことをあげますと、
htmlに貼り付けた記事のアイキャッチが異常にデカくなってしまった。
原因を追究した結果、「functions.php」にこのような記述を見つけ、
set_post_thumbnail_size(500, 400, true);
↓ サイズ変更をしました。
set_post_thumbnail_size(150, 150, true);
そしたらいいサイズに表示されました。
でも、アイキャッチ（サムネイル）のサイズ設定はダッシュボードにもあるけど。
ダッシュボード＞設定＞メディア設定 サムネイルサイズ幅150、高さ150
では、「set_post_thumbnail_size(150, 150, true);」を削除してみました。
そしたら貼り付けたサムネイルがまたデカくなった。
これらを検証した結果、
「functions.php」にサムネイルサイズの指定をしてない場合、
ダッシュボード内のメディア設定（サムネイルサイズ）が優先される。
そして「7.」で記述した一部を変更すると問題なく表示される。
get_the_post_thumbnail($post->ID)
↓ 記述変更する
get_the_post_thumbnail($post->ID, ‘thumbnail’)
※オリジナル画像ではなく、メディア設定のサムネイルサイズの画像を使うコード。
追伸 2019年1月30日
ホームページ（html）に貼り付けられたサムネイル画像を、
「左側に位置指定したい」との問い合わせがありました。
よって、ダウンロードファイル内もそのように更新しました。
勉強になります。
そのとおりにしてブログ記事が10件表示されたのですが、
5件表示とかに変更できるのでしょうか。
できるとすれば、どこをどう変更すればよいでしょうか。
サムネイルの7番は難しくできませんでした。
piyopiyoさん
表示数の設定は、ワードプレス管理パネルの
設定 ＞ 表示設定 ＞ RSS/Atom フィードで表示する最新の投稿数
ここを 5 項目 にして 変更を保存すると
5件の表示になります。