【WordPress feed】マーケティング系のメディア記事の一覧ページを作った

ニュース WordPress

僕は今マーケティングがメインの仕事です。マーケティングは情報が命。有益なメディアは非常にたくさんありますが、有力なメディアがいくつかあります。

その最新記事を一覧で自分のサイトのページで見れるようにしたかったので作りました。
現在は4媒体の最新情報を5件ずつ取得して来るようにしています。

マーケティング関連 メディア最新記事一覧

今回はどうやって作ったかを解説します。

WordPressで外部サイトの記事を取得し表示させる

前提条件

まずはこのサイトの前提条件をお話します。

  • 使用テーマ:Cocoon Child(無料テーマCocoonの子テーマです)
  • 固定ページで作成

利用する固定ページを作成

普通に固定ページを新規作成し、タイトルを入れます。重要なのはURLスラッグをしっかり決めておくことです。(今回は、marketingfeedとしています。)

page-markeingfeed.phpを作成

WordPressのテンプレート階層上、固定ページを司っているpage.phpに優先して適用されるテンプレートが、page-{$slag}.phpなので、この{$slag}部分に決めたURLスラッグの名前を入れたPHPファイルを作成します。

上記であれば、page-marketingfeed.phpをCocoon Childテーマディレクトリの中に作成します。
一番いいやり方は、親テーマであるCocoonテーマディレクトリにあるpage.phpをコピーし、page-marketingfeed.phpにリネームしたファイルをCocoon Childテーマディレクトリの中に移動させることです。

配布されているテーマでは、作成者によってアップデートが発生することがあり、親テーマに修正を加えてしまうとアップデートのタイミングでファイルが上書きされるため修正箇所が消えてしまいます。それを防ぐため、親テーマにオーバーライドする形で子テーマを作成し子テーマに修正箇所のテンプレートを記載していくという方法を取ります。例えば親テーマと子テーマにpage.phpがあった場合は、子テーマのpage.phpが優先されます。これにより、親テーマのアップデートに関わらずWordPressのテンプレートを修正し続けることができます。

page-marketingfeed.phpに追記

今のままだと、page-marketingfeed.phpとpage.phpは同じ内容です。そこでpage-marketingfeed.phpに外部記事を取得・表示させる指示を書くテンプレートファイルを読み込むように指定してあげましょう。

<?php get_template_part( ‘rss’ ); ?>

を追加します。
これは、rss.phpというテンプレートを読み込むように指定しています。
これから、実際に記事を取得するためのrss.phpを作成していきます。

<?php //通常ページとAMPページの切り分け
/**
 * Cocoon WordPress Theme
 * @author: yhira
 * @link: https://wp-cocoon.com/
 * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 */
if ( !defined( 'ABSPATH' ) ) exit;

if (!is_amp()) {
   get_header();
 } else {
   get_template_part('tmp/amp-header');
 }
?>

<?php //固定ページ内容
get_template_part('tmp/page-contents'); ?>

<!-- マーケティング記事フィード取得  -->
    <?php get_template_part( 'rss' ); ?>

<?php get_footer(); ?>

rss.phpを新規作成し、ロジックを書いていく

同じCocoon Childテーマディレクトリの中にrss.phpというファイルを作成し、以下のようにファイルに書き込んでいきます。
これは、書き方のベースは変わらないような気がするのでコピペでも大丈夫です。

※固有名詞や日本語の文章の部分は適時変えてください。
※<img>タグの中の画像指定のパスも適時変更してください。
※後はちょこちょこ色々触ってみてください。

このファイルで各メディアのfeedを読み込み、5件リストにして表示させています。表示は日付、タイトル、記事へのリンクとなっています。

<div class="media-title">
<h2>ウェブ担当者通信</h2>
</div>

<img src="/_wu/2019/09/webtuushin-main.png" alt="">

<p>Webマーケ、SNS、コンテンツマーケティングなど</p>
<?php
    include_once( ABSPATH . WPINC . '/feed.php' );
        $rss = fetch_feed( 'https://webtan-tsushin.com/feed' ); // ここにURLを入力する
    if ( !is_wp_error( $rss ) ) {
        $maxitems = $rss->get_item_quantity( 5 );
        $rss_items = $rss->get_items( 0, $maxitems );
    }
?>
<?php if ( !empty( $maxitems ) ) : ?>
<ul>
    <?php if ($maxitems == 0) echo '<li>RSSデータがありませんでした.</li>';
        else
    foreach ( $rss_items as $item ) : ?>
<li>
        <?php echo $item->get_date('Y.m.d');// 日付 ?>
    <br>
    <a href="<?php echo $item->get_permalink(); ?>">
        <?php echo $item->get_title();// タイトル ?>
    </a>
    <br>
<!--
<span class="desc">
        <?php echo mb_substr(strip_tags($item->get_description()), 0, 50);// 抜粋記事の文字数を指定 ?>
    <a href='<?php echo $item->get_permalink(); ?>' target="_blank">続きを読む</a>
    </span>
-->
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>

<div class="media-title">
<h2>MarkeZine(マーケジン)</h2>
</div>

<img src="/_wu/2019/09/markezine-main.png" alt="">
<p>広告・マーケティング</p>
<?php
    include_once( ABSPATH . WPINC . '/feed.php' );
        $rss = fetch_feed( 'https://markezine.jp/rss/new/20/index.xml' ); // ここにURLを入力する
    if ( !is_wp_error( $rss ) ) {
        $maxitems = $rss->get_item_quantity( 5 );
        $rss_items = $rss->get_items( 0, $maxitems );
    }
?>
<?php if ( !empty( $maxitems ) ) : ?>
<ul>
    <?php if ($maxitems == 0) echo '<li>RSSデータがありませんでした.</li>';
        else
    foreach ( $rss_items as $item ) : ?>
<li>
        <?php echo $item->get_date('Y.m.d');// 日付 ?>
    <br>
    <a href="<?php echo $item->get_permalink(); ?>">
        <?php echo $item->get_title();// タイトル ?>
    </a>
    <br>
<!--
<span class="desc">
        <?php echo mb_substr(strip_tags($item->get_description()), 0, 50);// 抜粋記事の文字数を指定 ?>
    <a href='<?php echo $item->get_permalink(); ?>' target="_blank">続きを読む</a>
    </span>
-->
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>

<div class="media-title">
<h2>マーケターのよりどころ「ferret」|Webマーケティングに強くなる情報メディア</h2>
</div>

<img src="/_wu/2019/09/ferret-one-main.png" alt="">
<p>Webマーケティング全般</p>
<?php
    include_once( ABSPATH . WPINC . '/feed.php' );
        $rss = fetch_feed( 'https://ferret-plus.com/.rss' ); // ここにURLを入力する
    if ( !is_wp_error( $rss ) ) {
        $maxitems = $rss->get_item_quantity( 5 );
        $rss_items = $rss->get_items( 0, $maxitems );
    }
?>
<?php if ( !empty( $maxitems ) ) : ?>
<ul>
    <?php if ($maxitems == 0) echo '<li>RSSデータがありませんでした.</li>';
        else
    foreach ( $rss_items as $item ) : ?>

<li>
        <?php echo $item->get_date('Y.m.d');// 日付 ?>
    <br>
    <a href="<?php echo $item->get_permalink(); ?>">
        <?php echo $item->get_title();// タイトル ?>
    </a>
    <br>
<!--
<span class="desc">
        <?php echo mb_substr(strip_tags($item->get_description()), 0, 50);// 抜粋記事の文字数を指定 ?>
    <a href='<?php echo $item->get_permalink(); ?>' target="_blank">続きを読む</a>
    </span>
-->
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>

<div class="media-title">
<h2>Web担当者Forum</h2>
</div>
<img src="/_wu/2019/09/webtan-main.png" alt="">
<p>Webマーケティング全般</p>
<?php
    include_once( ABSPATH . WPINC . '/feed.php' );
        $rss = fetch_feed( 'https://feeds.feedburner.com/web-tan' ); // ここにURLを入力する
    if ( !is_wp_error( $rss ) ) {
        $maxitems = $rss->get_item_quantity( 5 );
        $rss_items = $rss->get_items( 0, $maxitems );
    }
?>
<?php if ( !empty( $maxitems ) ) : ?>
<ul>
    <?php if ($maxitems == 0) echo '<li>RSSデータがありませんでした.</li>';
        else
    foreach ( $rss_items as $item ) : ?>

<li>
        <?php echo $item->get_date('Y.m.d');// 日付 ?>
    <br>

    <a href="<?php echo $item->get_permalink(); ?>">
        <?php echo $item->get_title();// タイトル ?>
    </a>

    <br>
<!--
<span class="desc">
        <?php echo mb_substr(strip_tags($item->get_description()), 0, 50);// 抜粋記事の文字数を指定 ?>
    <a href='<?php echo $item->get_permalink(); ?>' target="_blank">続きを読む</a>
    </span>
-->
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>

試しに作った固定ページを見てみる

これで外部のフィードから記事を取得して表示できているのが確認できます!

タイトルとURLをコピーしました