見出し画像

WordPressでnoteの記事を取得して表示する方法

デジタルマーケティング大学校では、コンテンツマーケティングをnoteで行っていますが、本体サイトは独自ドメイン+WordPressで作成しています。

そこで生まれた要望が、本体サイトの方でnoteの最新記事を拾えないかということ。

コピペで貼るとかではなく、あくまで自動で取得してくれるものが理想です。

こういう時は、大体先駆者がいらっしゃるので、素直にその恩恵にあずかりたいと思います。

やろうと思えばここまでできるみたいです。

が、これは本職のエンジニアでないと難しそうなので。。。もうちょっと簡単なやり方を探します。

例えば、検索で見つけたこちらの記事

これによると、WordPressのfunctions.phpを変更し、該当noteのrssを取得すれば良いことが書いてありますね。

(上記参考記事ではfunction.phpとありますが、functions.php、「s」月が正しいです)

早速やってみたいと思います。

1. WordPressのfunctions.phpを編集する

WordPressのfunctions.phpは管理画面上の「外観>テーマエディター」から編集することができます。

20200429テーマの編集 ‹ デジタルマーケティング大学校 — WordPress

すでにいっぱい記述があると思いますので、スクロールして一番下まで行き、おそらく一番下の行に書いてある

?>

の上に下記コードをコピペします。

//RSSの読み込み
function my_feed_display($feedURL, $num){
   if(!$feedURL){return false;}
   if(!$num){$num = 5;}
   include_once( ABSPATH . WPINC . '/feed.php' );
   $rss = fetch_feed( $feedURL );
   if ( !is_wp_error( $rss ) ) {
       $maxitems = $rss->get_item_quantity($num);
       $rss_items = $rss->get_items( 0, $maxitems );
   }
   if ( !empty( $maxitems ) ) {
       if ($maxitems == 0){
           echo '<!-- RSSデータがありませんでした -->';
       }else{
           echo '<div class="box_blog">';
           foreach ( $rss_items as $item ){
               echo '<div class="blogbox clear_fix">';
               echo '<a href="'.$item->get_permalink().'">';
               $first_img = '';
               if (preg_match('/<img.+?src=[\'"]([^\'"]+?)[\'"].*?>/msi',$item->get_content(), $matches )) { $first_img = $matches[1]; }
               if (!empty($first_img)){
                   echo '<p class="thumb"><img src="'.esc_attr($first_img).'"  alt="'.$item->get_title().'" /></p>';
               }
               echo '<div class="txtarea_topic">';
               echo '<p class="date_blog">'.$item->get_date('Y/m/d').'</p>';
               echo '<p class="name_blog">'.$item->get_title().'</p></a>';
               echo '</div>';
           }
           echo '</div>';
       }
   }
}

慣れていない方はコピペ場所を間違わないように気をつけてください。

2. noteのRSSを取得する

次に読み込みたいnoteのRSSを取得します。

20200429クニサワヒサノリ@デジタルマーケティング大学校|note

マイページを表示して、プロフィール欄にあるTwitterマークの横のアンテナみたいなアイコンをクリックしますと、リンクで別ページが開きます。

このアドレス(URL)こそが取得したいものです。

スクリーンショット 2020-04-29 12.25.45

こちらRSSさえあれば、noteの内容を読み込めますので、たとえば特定の「マガジン」の内容を読み込むということもできます。

20200430デジタルマーケティング戦略論|クニサワヒサノリ@デジタルマーケティング大学校|no

マガジンのページにもアンテナアイコンがあるのがわかりますか?

このマガジンの内容を読み込みたいのであれば、こちらをクリックした時のURLを取得すれば良いわけです。

3. WordPress上に表示させる

WordPressの表示させたい箇所(テンプレート上です、投稿とかページの中ではないです)に次のコード

  <?php my_feed_display('xxxxxx','6');?>

を入れます。

XXXXXXの部分には、先ほど取得したURLを入れてください。

「'」を誤って消さないように注意です。

そして「6」とあるところが、読み込みたい記事数になりますので、こちらは適宜調整してください。

例えば、サイドバーに入れてみようと思った場合は、sidebar.phpを編集ですね。

20200429テーマの編集 ‹ デジタルマーケティング大学校 — WordPress

こうして入れてみると

20200430デジタルマーケティング大学校|日本にもっとデジタル人材を増やしたい!

確かに表示されました!

あとは、デザインを整える必要がありますね。

とりあえず読み込めることはわかったので、もうちょっと調整していきたいと思います。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
note.user.nickname || note.user.urlname

この度は私のnoteをご覧いただきありがとうございます。 もしもサポート頂ける場合は、お礼にデジタルマーケティングに関するお悩みにお答えいたします! 追ってお礼メッセージとともにご連絡させていただきます。

スキありがとうございます、嬉しいです😊
1
学校長ですが、自身は浅く広く、デジタルマーケティングにおける総合診療医のようなポジションを志しています。各領域の専門性は低いですが、総合的に見れるという点から、概念的な話をしたいと思います。https://digital-marketing.university/

こちらでもピックアップされています

WEBサイトデザイン・更新・運用論
WEBサイトデザイン・更新・運用論
  • 17本

WEBサイトのデザイン・更新・運用などについての記事をまとめました。SEOやEC関連の情報も含みます。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。