自サイト他サイトの新着情報を取得して好きなところに表示させてみる

プラグインを使わずに固定ページやサイドバーに新着情報を表示させる方法を紹介。他サイトの新着情報もいけます。

これ系の解説記事はたくさんあるので、もっとちゃんとした人の記事を読むことをオススメします（笑）これは自分のメモ用で。

項目別に読む

固定ページに新着情報を表示させたい
phpファイルを呼び出すショートコードの作成
おまけ：改行問題

固定ページに新着情報を表示させたい

プラグインを使って新着情報を表示させるのが一番簡単なんですが、何でもかんでもプラグインに頼ってしまうと、気づいたらプラグインが何十個も…ってことになりかねません。現に僕の場合はプラグインまみれです。あかん。

やりたいことはシンプルです。

固定ページやサイドバーに新着情報を表示させるっていう。僕の場合は、自分のサイトだけではなく、他のサイト（RSS対応）も表示させたかったので、そのへんをトライ！

phpファイルを呼び出すショートコードの作成

下準備

まずはfunction.phpに下記を追加します。

function my_php_Include($params = array()) {
extract(shortcode_atts(array('file' => 'default'), $params));
ob_start();
include(STYLESHEETPATH . "/$file.php");
return ob_get_clean();
}
add_shortcode('call_php', 'my_php_Include');

function my_php_Include($params = array()) {

extract(shortcode_atts(array('file' => 'default'), $params));

ob_start();

include(STYLESHEETPATH . "/$file.php");

return ob_get_clean();

}

add_shortcode('call_php', 'my_php_Include');

自サイト編

FTPソフトでfunction.phpと同じ階層にphpフォルダを作成します。中身はこんな感じです。「ファイル名.php」で保存してください。

<?php query_posts("post_type=post&posts_per_page=5"); if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php
$cat = get_the_category();
$catname = $cat[0]->cat_name; //カテゴリー名
?>

<ul class="dateList_wrap">
<li class="dateList_item">
<a href="<?php the_permalink(); ?>">
<span class="top-page-blog-time"><?php the_time('Y年m月d日') ?></span>
<span class="top-page-blog-category"><?php echo $catname; ?></span>
<br class="spkaigyou"><span class="top-page-blog-title"><?php the_title(); ?></span>
</a>

<?php
  $days = 1;  // NEWマークを表示する期間
  $now = date_i18n('U');  // 今の時間
  $entry = get_the_time('U');  // 投稿日の時間
  $term = date('U',($now - $entry)) / 86400;
  if( $days > $term ){
      echo '<span class="newMark">NEW</span>';
  }
  ?>

</li>
</ul>
<?php endwhile; ?>
<?php else : ?>
<p>記事が見つかりませんでした</p>
<?php endif; ?>

<?php query_posts("post_type=post&posts_per_page=5"); if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php

$cat = get_the_category();

$catname = $cat[0]->cat_name; //カテゴリー名

<?php the_time('Y年m月d日') ?>

<?php echo $catname; ?>

<?php the_title(); ?>

</a>

<?php

$days = 1; // NEWマークを表示する期間

$now = date_i18n('U'); // 今の時間

$entry = get_the_time('U'); // 投稿日の時間

$term = date('U',($now - $entry)) / 86400;

if( $days > $term ){

echo 'NEW';

}

</li>

</ul>

<?php endwhile; ?>

<?php else : ?>

記事が見つかりませんでした

<?php endif; ?>

今回は日付・カテゴリー・タイトル・最新の記事には「NEW」のマークを付けるって感じでいきます。リストをクラスで括ってるのは、後から装飾したいためです。不要ならクラスは省いてください。

NEWマークのところも装飾しやすいようにしてます。細かい数字は変更してください。

続いて、CSSの記述です。下記のスタイルはけっこうシンプルなので、自由に変更してください。

.dateList_wrap {
    list-style:  none; 
    border-bottom: solid #dcdcdc 1px;
}

.top-page-blog-time {
    margin: 0 0.5em 0 0.3em;
    color: Gray;
}

.top-page-blog-category {
		font-size: 74%;
    padding: 1px 5px;
    margin: 0 1em 0 0.3em;
    color: White;
    background-color: #a9a9a9;
    border-radius: 3px;
}

.newMark {
    padding: 1px 5px;
    color: #ff4500;
    font-weight: bold;
}

.dateList_wrap {

list-style: none;

border-bottom: solid #dcdcdc 1px;

}

.top-page-blog-time {

margin: 0 0.5em 0 0.3em;

color: Gray;

}

.top-page-blog-category {

font-size: 74%;

padding: 1px 5px;

margin: 0 1em 0 0.3em;

color: White;

background-color: #a9a9a9;

border-radius: 3px;

}

.newMark {

padding: 1px 5px;

color: #ff4500;

font-weight: bold;

}

これで準備完了です。下記のショートコードをお好きな固定ページやウィジェットに貼り付けてみてください。「ファイル名」の部分は先程のphpファイルの名前です。

[call_php file='●●●●●']

1	[call_php file='●●●●●']

他サイト編

他サイトの場合は、rssを利用します。記事を取得したいサイトのrssを下記のサイトで調べてください。rssのURLが分かると思います。

参考フィード(RSS)を取得・検出しますberss.com

っていっても、使うのは後なので…どこかにメモっておいてください。

自サイト編と同じようにショートコード化する（これはどっちでもいいです）。

<?php
include_once( ABSPATH . WPINC . '/feed.php' );
$rss = fetch_feed( 'rssのURL' ); // ここに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>
<b><span class="date"><?php echo $item->get_date('Y/m/d');// 日付 ?></b><br>→<a href="<?php echo $item->get_permalink(); ?>" target="_blank" rel="noopener noreferrer">「<?php echo $item->get_title();// タイトル ?>」</a></li><br>

<?php endforeach; ?>
</ul>
<p style="text-align: right;"><a href="他サイトの記事一覧URL" target="_blank" rel="noopener">記事一覧はコチラ＞＞</a></p><br>

<?php endif; ?>

<?php

include_once( ABSPATH . WPINC . '/feed.php' );

$rss = fetch_feed( 'rssのURL' ); // ここに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');// 日付 ?> →<a href="<?php echo $item->get_permalink(); ?>" target="_blank" rel="noopener noreferrer">「<?php echo $item->get_title();// タイトル ?>」</a></li>

<?php endforeach; ?>

</ul>

<a href="他サイトの記事一覧URL" target="_blank" rel="noopener">記事一覧はコチラ＞＞</a>

<?php endif; ?>

記事を5つまで表示させて、最後に記事一覧のURLを入れてます。NEWマーク・リストにクラスはつけてません。つけるなら、全体をボックス系のcssで囲うくらいですかね。

※余談：上記のコードの場合、記事のループが数個ずつではなく、1記事ずつ取得されます。つまり、リストになっていても、1つのリストに記事が数個入っているのではなく、1記事しかないリストが数個取得されてしまいます。なので、リストのCSSを適応させた場合、記事全体で1つのリストCSSが適応されるのではなく、各記事ずつにリストCSSが適応されます。（なんだかなー）

[call_php file='●●●●●']

1	[call_php file='●●●●●']

ちなみに…管理画面編

クライアント用に管理画面（ダッシュボードとか）に新着情報を表示させたい場合は、「include」を使ってphpファイルを呼び出します。

<?php
echo 'メッセージ文';
include 'ファイル名.php';
?>

<?php

echo 'メッセージ文';

include 'ファイル名.php';

ダッシュボードに表示させるなら下記の通りです。ダッシュボード用にcssを書き込んでみるのもいいかもしれませんね。「index.php」っていうのが、ダッシュボードのあるページのことです。

function echo_message() {

global $pagenow;
	if ( $pagenow != 'index.php' ) {
		return;
	}
    echo '
<h2>タイトル</h2>
<p>文章</p>

<style>
/*cssもいけます*/
</style>
';
// 新着情報を読み込む
include 'ファイル名.php';
}
add_action( 'admin_notices','echo_message' );

function echo_message() {

global $pagenow;

if ( $pagenow != 'index.php' ) {

return;

}

echo '

文章

<style>

/*cssもいけます*/

</style>

// 新着情報を読み込む

include 'ファイル名.php';

}

add_action( 'admin_notices','echo_message' );

以上です。

おまけ：改行問題

新着情報を表示させる場合、スマホだとタイトルが長くて変な感じになってしまいます。なので、スマホ・タブで見た時だけ日付とカテゴリー＜改行＞タイトルって感じにします。

参考 PCのみ改行・SPのみ改行をCSSで実装する方法【レスポンシブデザイン】 | カケウェブ｜HTML・CSS・jQuery・CMSなどカケウェブ｜HTML・CSS・jQuery・CMSなど

brをdivで括って、切り替えるだけですね。シンプル！