プラグインを使わずに固定ページやサイドバーに新着情報を表示させる方法を紹介。他サイトの新着情報もいけます。
これ系の解説記事はたくさんあるので、もっとちゃんとした人の記事を読むことをオススメします(笑)これは自分のメモ用で。
固定ページに新着情報を表示させたい
プラグインを使って新着情報を表示させるのが一番簡単なんですが、何でもかんでもプラグインに頼ってしまうと、気づいたらプラグインが何十個も…ってことになりかねません。現に僕の場合はプラグインまみれです。あかん。
やりたいことはシンプルです。
固定ページやサイドバーに新着情報を表示させるっていう。僕の場合は、自分のサイトだけではなく、他のサイト(RSS対応)も表示させたかったので、そのへんをトライ!
phpファイルを呼び出すショートコードの作成
下準備
まずはfunction.phpに下記を追加します。
1 2 3 4 5 6 7 |
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」で保存してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?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; ?> |
今回は日付・カテゴリー・タイトル・最新の記事には「NEW」のマークを付けるって感じでいきます。リストをクラスで括ってるのは、後から装飾したいためです。不要ならクラスは省いてください。
NEWマークのところも装飾しやすいようにしてます。細かい数字は変更してください。
参考 WordPressで新着記事にNEWマークをつける簡単な方法–FIT BLOG-フィットブログFIT-フィット続いて、CSSの記述です。下記のスタイルはけっこうシンプルなので、自由に変更してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.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ファイルの名前です。
1 |
[call_php file='●●●●●'] |
他サイト編
他サイトの場合は、rssを利用します。記事を取得したいサイトのrssを下記のサイトで調べてください。rssのURLが分かると思います。
参考 フィード(RSS)を取得・検出しますberss.comっていっても、使うのは後なので…どこかにメモっておいてください。
自サイト編と同じようにショートコード化する(これはどっちでもいいです)。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?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; ?> |
記事を5つまで表示させて、最後に記事一覧のURLを入れてます。NEWマーク・リストにクラスはつけてません。つけるなら、全体をボックス系のcssで囲うくらいですかね。
※余談:上記のコードの場合、記事のループが数個ずつではなく、1記事ずつ取得されます。つまり、リストになっていても、1つのリストに記事が数個入っているのではなく、1記事しかないリストが数個取得されてしまいます。なので、リストのCSSを適応させた場合、記事全体で1つのリストCSSが適応されるのではなく、各記事ずつにリストCSSが適応されます。(なんだかなー)
これで準備完了です。下記のショートコードをお好きな固定ページやウィジェットに貼り付けてみてください。「ファイル名」の部分は先程のphpファイルの名前です。
1 |
[call_php file='●●●●●'] |
ちなみに…管理画面編
クライアント用に管理画面(ダッシュボードとか)に新着情報を表示させたい場合は、「include」を使ってphpファイルを呼び出します。
1 2 3 4 |
<?php echo 'メッセージ文'; include 'ファイル名.php'; ?> |
ダッシュボードに表示させるなら下記の通りです。ダッシュボード用にcssを書き込んでみるのもいいかもしれませんね。「index.php」っていうのが、ダッシュボードのあるページのことです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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' ); |
以上です。
おまけ:改行問題
新着情報を表示させる場合、スマホだとタイトルが長くて変な感じになってしまいます。なので、スマホ・タブで見た時だけ日付とカテゴリー<改行>タイトルって感じにします。
参考 PCのみ改行・SPのみ改行をCSSで実装する方法【レスポンシブデザイン】 | カケウェブ|HTML・CSS・jQuery・CMSなどカケウェブ|HTML・CSS・jQuery・CMSなどbrをdivで括って、切り替えるだけですね。シンプル!