最近WordPressでより個人的な内容のブログを書き始めまして、
はてなブログ側にもWordPressの更新状況を載せようと思いました。
調べてみると、FeedWindなどがまさにやりたいことを叶えてくれそうでしたが、
有料だったり、無料のものは広告が入ったりするようだったので、
自力で実装することにしました。
具体的な方法は後で詳しく説明しますが、
という流れでアプローチしました。
出来上がりは下のような感じです。
新着一覧の固定ページを作る
WordPressはヘッダー、フッター、サイドバーなど、
様々なパーツからページが構成されます。
そのまま埋め込むとこれらのパーツが邪魔になるので、
新着一覧だけのページを作ります。
固定ページのテンプレートを作る
固定ページにはテンプレートを設定することができ、
このテンプレートからヘッダーなどのパーツを読み込みます。
そこで、新着記事一覧だけを表示するテンプレートを作成します。
テンプレートは使用しているテーマのディレクトリの直下に配置します。
テンプレートのファイル名はとりあえずpage-newlist.phpとしておいて、
[wordpressディレクトリ]/wp-content/themes/[テーマディレクトリ]/page-newlist.php
に以下のようなphpを書いておきます。
※固定ページの中身も無視して本当に記事一覧だけを表示します。
<?php/* Template Name: page-newlist */ ?> <?php wp_head();?> </head> <body <?php body_class(); ?> > <?php $posts = get_posts(array( 'posts_per_page' => 5 )); if($posts): ?> <?php foreach($posts as $post): setup_postdata($post); ?> <div style="clear:left"> <a href="<?php the_permalink(); ?>" target="_top"> <div style="float: left;margin:10px;"> <?php if(the_post_thumbnail(array(100,100))): the_post_thumbnail(); endif;?> </div> <?php the_title();?> </a> </div> <?php endforeach;wp_reset_postdata(); endif; ?> </body>
長くなってしまいましたが、やっていることは単純で、
get_postsで新着記事を拾ってきて、
foreachでサムネとタイトルを順に配置するだけです。
一点注意としては、
リンクのtargetを_topにしておかないと、
iframeの中でページが切り替わってしまいます。
固定ページを作る
固定ページのテンプレートができたので、
そのテンプレートを適用した固定ページを作りましょう。
と言っても、固定ページのタイトルなどは表示されないので、
テンプレートを設定した空のページを作ればOKです。
下の画像のように、
<?php/* Template Name: page-newlist */ ?>で設定した
page-newlistという名前のテンプレートを選択します。
※タイトルも意味はないですが管理者にとって分かりやすいように設定しましょう
この固定ページを埋め込むので、
パーマネントリンクも分かりやすいものにしておきましょう。
ここではURLスラッグをnew_listとしています。
この固定ページを開いてみて、
WordPressとは思えないくらい他に何もないページが表示されればOKです。
はてなブログのサイドバーに埋め込む
WordPress側で新着記事一覧のページができたので、
はてなブログ側でサイドバーにそのページを埋め込みましょう。
デザイン→カスタマイズ→サイドバー→モジュールの追加→HTML
を選択して、以下のコードを貼り付けます。
※作成した固定ページのリンクに合わせてsrcのURLを設定して下さい。
<iframe loading="lazy" src="https://[wordpressのサイト]/new_list" height="500" frameborder="0"></iframe>
これで完成です。
まとめ
WordPressの新着記事一覧をはてなブログに表示する方法を紹介しました。
はてなブログに限らずiframeが使えるのであればどこでも埋め込めるので、
外部のウィジェットサービスが合わない方は試してみてはいかがでしょうか。
