【PHP】既存のHPに外部のWordPressの記事を埋め込むコード

とりとん

外部のWordPressも取得できる？

前回は、ドメイン直下のルートディレクトリにWordPressをインストールした場合の取得・表示方法を紹介しました。

今回は別のドメイン下にある、外部のWordPressの記事情報を取得する方法を紹介していきたいと思います！

ただ、外部のWordPressの場合は「【WordPressのURL】/feed/」⇦このfeedから情報を取得するので、サムネイルの情報は取得できず、本文中にある画像を取得のみ可能です。

※この記事で紹介するのは、外部サーバーにインストールしてあるWordPressから記事情報を取得・表示する方法です。

ドメイン直下のルートディレクトリにWordPressをインストールできる場合はこちらを参考にしてください⬇️

サンプルとして、

◆ 新着記事3件の表示＆記事一覧ページへのリンクボタン

◆ 投稿日・カテゴリー・タイトル・の3項目を表示

という感じのスタイルで表示させてみました⬇️

DEMO

2021.10.22

CMS

【BASE】トップページから商品一覧を非表示・削除する方法

2021.10.6

HTML/CSS

【CSS】不透明度をカラーコードで指定する便利な方法

2021.10.1

※slider

#19 ブログ運営日記｜ASPまで手が回ってないブログ運営者によるGoogleアドセンスの設定【19ヶ月目のPV数･収支公開】

記事一覧

とりとん

早速コードを確認してみよう！

この記事の内容は・・

コード
取得できる情報まとめ

コード

PHP

<?php
    include_once(ABSPATH . WPINC . '/feed.php');
    $rss = fetch_feed('https://toriton.link/feed'); 

    if (!is_wp_error( $rss ) ) {
    	$maxitems = $rss->get_item_quantity(3); //3件表示の場合
    	$rss_items = $rss->get_items(0, $maxitems); 
    }
?>

<ul>
    <?php
        $cnt = 0;
        if ($maxitems == 0){
            echo '<li>nothing..</li>';
        } else {
            date_default_timezone_set('Asia/Tokyo');
        foreach ( $rss_items as $item ) { 
            $cnt++;
    ?>
    <a href=<?php echo $item->get_link(); ?>>
        <li class="news_list">
            <div class="whatsnews">
                <p class="date"><?php echo $item->get_date('Y.n.j'); ?></p>
                <p class="categories"><?php echo $item->get_category()->get_label(); ?></p>
            </div>
            <div class="title">
                <?php echo $item->get_title(); ?>
            </div>
        </li>
    </a>
    <?php }} ?>
</ul>

<div class="button">
    <a href="#">記事一覧</a>
</div>

CSS

.news_list {
    list-style: none;
    margin: 10px 0;
    box-shadow: 0 0px 0.6vw rgba(0, 0, 0, 0.1);
}

a{
    text-decoration: none;
}

.whatsnews {
    display: flex;
}

.date{
    color: #808080;
    padding: 5px 10px;
}

.categories {
    color: #fff;
    background: pink;
    border-radius: 10px;
    padding: 0 10px;
    margin: 5px 0;
}

.title {
    color: #000;
    padding: 5px 10px;
}

.button {
  overflow: hidden;
  border-radius: 10px;
}
  
.button a {
  display: block;
  position: relative;
  text-align: center;
  color: #808080;
  background: #fff3b8;
  padding: 2.5px 0;
}
  
.button a::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  width: 0;
  height: 0;
  margin-top: -6px;
  border: 6px solid transparent;
  border-left: 8px solid #fff;
}

取得できる情報まとめ

WordPressの関数を使えないので、feedから取得できる情報のまとめです。

出力するときに記述方法もWordPressの関数とは異なるのでご注意ください！

取得情報	出力記述
投稿日	<?php echo $item->get_date(‘Y.n.j’); ?>
タイトル	<?php echo $item->get_title(); ?>
本文	<?php echo $item->get_content(); ?>
リンク	<?php echo $item->get_link(); ?>
カテゴリー	<?php echo $item->get_category()->get_label(); ?>
抜粋文	<?php echo $item->get_description(); ?>
投稿ID	<?php echo $item->get_ID(); ?>