30分で出来る！WordPress簡単カスタマイズ方法 Part.5（全5回）～RSS表示 / バナー設置編～

公開日
更新日

みなさま、こんにちは。
さくらインターネットの元秘書です。

本連載もいよいよ最終回・・・、ついにこの日がやってきてしまいました。

では、早速「30分で出来る！WordPress簡単カスタマイズ方法 Part.4」
に続きまして、サイドバー（Webサイトの本文とは別に左側や右側に縦長に
表示されている領域のこと）のカスタマイズを方法をご案内致しますので
最後までお付き合い頂けますと幸いです！！


STEP15　お気に入りブログの最新記事へのリンクを自動表示しよう！


ご友人に「ブログに書いたんだけど？」と言われ
「チェック出来てなかった・・・、ごめーん。」ってなったことありませんか？

そんなあなたに朗報です！
他のブログの更新情報を知らせてくれるRSSという機能があります。

自身のブログにアクセスした際に、
友人や知人のブログの最新記事も一緒にチェックしちゃう楽チンな方法をご紹介します。

では、手順のご案内です。

  1. WordPressに管理者権限でログインします。
    [Get Picture]


  2. 左側のメインメニューの「メディア＞新規追加」をクリックします。
    [Get Picture]


  3. お好みの画像ファイルを用意しデータファイルを赤枠内にドロップして、アップロードします。
    （ここでアップロードした画像はお気に入りブログのタイトルの行頭に表示します。）
    アップロード後「編集」を押下し、URLを確認します。
    [Get Picture]


  4. 後ほど利用しますので、「ファイルのURL」をメモしておきましょう。
    [Get Picture]


  5. お気に入りブログのRSSフィードのURLを確認し、控えておきます。
    RSSを自動取得することにより、お気に入りブログへの最新記事へのリンクを自動表示します。
    RSSフィードURLの確認方法は複数ありますが、さくらインターネット研究所のWebサイトのように、ほとんどの場合はRSSフィードボタン（画像赤枠）やリンクが設置されていますので、そのボタンやリンクをクリックして、RSSフィードURLを確認しましょう。
    [Get Picture]


  6. 左側のメインメニューの「外観＞ウィジェット」をクリックします。
    [Get Picture]


  7. 「利用できるウィジェット」より、「メインサイドバー」へ「PHP Code」をドラックし、お好みでタイトルを入力し、以下のソースを転記のうえ「保存」ボタンをクリックします。
    • 6～7行目は、最新記事を取得したいサイト名称とRSSフィードURLに書き換えてください。
      ちなみに、ここで記載するサイト名称は、単なる覚書きですので実際のページには反映されません。
    • 11行目の"1"は、表示したい記事数に書き換えてください。
      サイト数や表示件数を増やし過ぎると、ページ表示までの時間が遅くなりますのでご留意くださいね。
    • 20行目の「http://（省略）.png」は、3で控えた画像のURLに書き変えてください。

    [Get Picture]



 <?php
 include_once(ABSPATH . WPINC . '/rss.php');
 
 // 表示するRSSを設定
 $rss_url_list = array(
     'さくらインターネット研究所' => "http://research.sakura.ad.jp/feed/",
     'WordCamp Tokyo 2013' => "http://2013.tokyo.wordcamp.org/feed/"
     )
 ;
 // 最大表示件数
 $limit = 1;
 
 // 表示ロジック
 foreach ($rss_url_list as $title => $rss_url) {
     $rss = fetch_rss($rss_url);
     $items = array_slice($rss->items, 0, $limit);
     $html = '';
     $site_title = $rss->channel['title'];
     $site_link = $rss->channel['link'];
 
     $html .= "<a href='{$site_link}'><img src=\"http://knowledge.skr.jp/test/wp-content/uploads/2013/08/star.png\"> <sup><b>{$site_title}</b></sup>";
     $html .= "<ul>";
     if($items) {
     //記事がある場合
         foreach ( $items as $item ) {
             $link = $item['link'];
             $title = $item['title'];
             $time = date('Y年m月d日', strtotime($item['pubdate']));
             $html .= "<li><a href='{$link}'>{$title}({$time})</a></li>";
         }
 
     } else {
         $html .= "<li>記事がありません</li>";
     }
     echo $html . '</ul><br>';
 }
 ?>

※本来リンクは誰の許可も得ずに自由に行なうことができるものですが、
　人間関係が悪くなるといけないので、ご紹介した方法でご友人のブログの
　最新記事へのリンクを表示する際には、事前にご許可を得てくださいね（笑）


STEP16　バナーを貼ろう！


最後に、応援しているイベントの
バナー（他のウェブサイトを紹介する画像とリンク）をブログに表示してみましょう！

今回は、9月14日（土）に大田区産業プラザで開催される
WordCamp Tokyo 2013のバナーをはりたいと思います。

  1. 左側のメインメニューの「メディア＞新規追加」をクリックします。
    [Get Picture]


  2. バナー画像（他ウェブサイトを紹介する画像やアイコン）を用意しデータファイルを赤枠内にドロップして、アップロードします。
    アップロード後「編集」を押下し、URLを確認します。
    [Get Picture]


  3. 後ほど利用しますので、「ファイルのURL」をメモしておきましょう。
    [Get Picture]


  4. 左側のメインメニューの「外観＞ウィジェット」をクリックします。
    [Get Picture]


  5. 「利用できるウィジェット」より、「メインサイドバー」へ「テキスト」をドラックし、お好みでタイトルを入力し、以下のソースを転記のうえ「保存」ボタンをクリックします。
    • 4行目の「http://2013.tokyo.wordcamp.org/」は、紹介したいウェブサイトのURLに書き変えてください。
    • 5行目の「http://（省略）.jpg」は、3で控えた画像のURLに書き変えてください。

    [Get Picture] 


<a href="http://2013.tokyo.wordcamp.org/" target="_blank">
<img src="http://knowledge.skr.jp/test/wp-content/uploads/2013/08/wctokyo2013.jpg" alt="WordCamp Tokyo 2013" /></a>

※直リンク禁止のサイトも多くありますので、バナーを貼る際はご留意くださいね。



これで、ひと通り簡単にできるカスタマイズが完了しました！
次回は、子テーマを作成してテンプレートをカスタマイズしたいですねぇ。

最後まで御覧くださいまして、ありがとうございました。
皆様の応援があったからこそ成し得たことだと、心から感謝しています！

では、またお会いできる日まで (´∀｀*)!

特集：30分で出来る！シリーズ（全5回）

WordPress簡単カスタマイズ方法 Part.1 ～整理と準備編～
WordPress簡単カスタマイズ方法 Part.2 ～基本設定 / 問合せフォーム作成編～
WordPress簡単カスタマイズ方法 Part.3 ～カテゴリー登録 / メニューバー設定 / 記事投稿編～
WordPress簡単カスタマイズ方法 Part.4 ～ウィジェット整理 / アクセスカウンター設置編～
WordPress簡単カスタマイズ方法 Part.5 ～RSS表示 / バナー設置編～

おしらせ

banner_ワードプレス