アクセス数: | 今日: | 昨日:   記事数:996

HOMESITE MAPBOOKMARKTAG CLOUD

【WordPress】Tumblrを表示させる方法

『【WordPress】Tumblrを表示させる方法』をはてなブックマーク

WordPress & TumblrTumblrで投稿した内容を、WordPress上で表示させる事が出来るプラグインがあります。
正確に言えば、RSSで表示させるのでTumblrじゃなくても良いんですが。

『拾いもの画像』をちまちまとサムネイル作ってアップしていましたが、ちょっと面倒になってきたのでTumblrでアップしてそれを取り込もうと言う試みになりました。
なもので、只単に画像をRSSで取り込むだけです。
その方法は以下。

まず、WordPressのプラグインをダウンロードしてインストールします。

WordPress
FeedList

ダウンロードして解凍したファイルをフォルダ毎プラグインフォルダに移動します。
階層的には以下の感じ。
wp-content
 └ plugin
   └ feedlist
     ├ feedlist.php
     └ readme.txt

そのまま管理画面でインストールしても良いんですが、管理画面上で設定などは出来ず、直接ファイルを弄らなければいけません。
『feedlist.php』を開き、以下の箇所に手を入れます。

feedlist.php 変更前 (200行目~)
return array( 'rss_feed_url' => 'http://del.icio.us/rss',
    'num_items' => 15,
    'show_description' => true,
    'random' => false,
    'before' => '<li>',
    'after' => '</li>',
    'description_separator' => ' - ',
    'encoding' => false,
    'sort' => 'none',
    'new_window' => false,
    'ignore_cache' => false,
    'suppress_link' => false,
    'show_date' => false,
    'additional_fields' => '',
    'max_characters' => 0,
    'max_char_wordbreak' => true,
    'file'=>$settings['file'],
    'feedsToShow'=>0,
    'mergeFeeds'=>false,
    'show_date_per_item' => false,
    'show_description_only' => false
  );

表示させる数は1つだけで良いので、『num_items』を『1』に変更。
リスト表示じゃなくボックスにしたいので、『before』と『after』を変更。
セパレータではなく改行表示する為に『description_separator』を変更。
リンクをクリックした時に別ウィンドウにする為に『new_window』を『true』に変更。
で、以下のような感じ。

feedlist.php 変更後 (200行目~)
return array( 'rss_feed_url' => 'サイトアドレス/rss',
    'num_items' => 1,
    'show_description' => true,
    'random' => false,
    'before' => '<div class="tumblr_box">',
    'after' => '</div>',
    'description_separator' => '<br />',
    'encoding' => false,
    'sort' => 'none',
    'new_window' => true,
    'ignore_cache' => false,
    'suppress_link' => false,
    'show_date' => false,
    'additional_fields' => '',
    'max_characters' => 0,
    'max_char_wordbreak' => false,
    'file'=>$settings['file'],
    'feedsToShow'=>0,
    'mergeFeeds'=>false,
    'show_date_per_item' => false,
    'show_description_only' => false
  );

変更が終わったらファイルを保存して、管理画面でインストールします。
表示させたい箇所に以下のコードを入れれば、その場所に表示されるハズです。

sidebar.phpなど
<?php feedList(array('Key' => '', 'Key' => 'Value')); ?>

後はCSSで画像の大きさを整えます。

style.css
.tumblr_box img {
  width: 200px;
}

『200px』は仮なので、自分の表示させたい大きさに変更してください。
横幅さえ変えれば高さは自動で変わります。
IEでの表示は少々画像が荒くなります。

さあどーだ!?
・・・って事で見てみましたが、画像を表示させた場合『タイトル』『画像』『タイトル』と表示されます。
ソースを見ると、以下のような感じ。
(見やすいように改行してます)

ソース
<div class="tumblr_box">
<span class="rssLinkListItemTitle"><a href="http://kome.tumblr.com/post/117856017" rel="external"  title="タイトル">タイトル</a></span><br />
<img src="画像のアドレス"/><br/>
<br/>
タイトル</div>

下のタイトルを消そうとか試みましたが、RSSの段階でこのようになっているので無理っぽいです。
上のタイトルだけならCSSで消せるんですが、リンクも消えてしまうのでうまくない。
ま、いっか。w

ちなみに、上のタイトルはクラスが付いてるので以下のコードで見た目を消す事が出来ます。

style.css
.tumblr_box .rssLinkListItemTitle {
	display: block;
	height: 0px;
	overflow: hidden;
}


以下のサイトを参考にさせてもらいました。
木下茂雄のブログ
WordPressのサイドに自分のはてなブックマークを表示させる

Trackback URL

リンク先が18禁サイトの場合は削除しています。
当ブログにリンクが貼られていない場合は削除しています。
Tag : , ,

コメントを書く

必須です。

必須です。(公開されません)
GRAVATARに登録していると、アイコンが表示されます。

リンク先が18禁サイトの場合は削除しています。

以下のタグが利用出来ます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Additional comments powered by BackType