未分類

アンテナサイト・キュレーションサイトを作る

前から思ってたんですよね、アンテナサイト・キュレーションサイトと呼ばれるやつです。

調べたらWordPressがあったら意外に簡単に出来てしまうということなのでチャレンジしてみました。

全くのゼロから作る場合

無料ブログでも作れないことは無いそうですが、収益化を考えたときに無料ブログだと制限があります。

いいものができた場合、後々後悔することになります。

後悔するぐらいだったら最初から有料でもレンタルサーバーを借りることにしましょう。

まずはレンタルサーバーの契約とWordPressのインストールまで行います。

レンタルサーバーは有料ですが、上記リンクのXSERVERなら10日間無料で試せます。

また、ロリポップも同じく10日間無料で使えます。
カラフルボックスなどは30日間も無料でお試しできます。

無料で試してみてイマイチだなと思ったら、解約すればお金はかかりませんのでまず取り組んでみるのがいいと思います。

WordPressのインストールまで行ったらWordPressのテーマをインストールしましょう。

Simplicityがおすすめです。インストールが終わったら次へ進みます。

プラグイン「RSSImport」を使ってRSSを取得する

次に、プラグイン「RSSImport」をインストールします。これは他のブログから記事の見出し取得に必要なプラグインです。アンテナサイトのキモになるプラグインですね。

インストールしたら有効化してください。

これでほとんど完了です。

RSSImportの使い方

RSSImportではほぼ手間なくRSSをサイトに表示することができます。

WordPressの投稿ページでいいので新規にページを作成して以下のコードを貼り付ければいいだけです。試しにやってみてください。

<span class="bold"><a href="http://kasegunet.jp/" target="_blank">ホゲホゲ</a></span><
[RSSImport display="5" feedurl="http://hogehoge.jp/feed/" date="true" date_format="n/j H:i" before_date="<date><small>"  after_date="</small></date><br />" target="blank" start_item="" end_item="<hr>"]

feedurlのところに、取り込みたいサイトのRSSのURLをセットしてください。

なお、RSSImportで使用するタグの属性は以下の通りとなってます。

コード部分（因数） 説明
display RSSで取得する記事数
デフォルトだと5
ex) display="5"
feedurl RSSフィードのURL
ex) feedurl="URL"
displaydescriptions 説明文を表示するか True：表示する
False：表示しない
ex) displaydescriptions="true"
before_desc 説明文の前につける文字列
基本的に使わなくてOK
開始タグなどを入れる
after_desc 説明文の後につける文字列
基本的に使わなくてOK
終了タグなどを入れる
html 説明文にHTMLタグを含めるか
基本使わなくてOK
truncatedescchar 説明文の文字数の設定

説明文を表示していないなら使わない
truncatedescstring 説明文の文字数設定を超えた場合の表示

ex) truncatedescstring="続きを読む"
truncatetitlechar タイトルの文字数の設定
truncatetitlestring タイトルの文字数の設定を超えた場合の表示
date 日付を表示するか
before_date 日付の前につける文字列

ex) before_date=""
after_date 日付の後につける文字列

ex) before_date=""
date_format 日付のフォーマットの設定

ex) date_format="n/j H:i"
creator 投稿者名を表示するか
before_creator 投稿者名の前に追加する文字列
after_creator 投稿者名の後に追加する文字列
start_items リスト全体の前に表示する文字列
end_items リスト全体の後ろに表示する文字列
start_item リストの前に表示する文字列
end_item リストの後に表示する文字列
target リンクのターゲット設定。使えるのは

ex) target="blank"

empty:デフォルト
blank：新しいタブで開く
self：そのままのタブで開く
parent：非推奨
top:非推奨

※「_blank」
ではないので注意
rel rel属性の設定
empty：デフォルト
nofollow：リンク先を検索エンジンに辿らせない
follow：リンク先を検索エンジンに辿らせる

 

RSSImportの日付の表示位置設定

デフォルトだと、日付の表示位置がタイトルの後ろになっているので先頭に持ってこようと思います。

WordPressダッシュボード→プラグイン→プラグイン編集→編集するプラグインを選択→WP-RSSImport→「選択」

ここで表記を入れ替えます

$echo .= '<a' . $target . $rel . ' href="' . $href . '" title="' . $atitle . '">' . $title . '</a>';
if ( isset( $pubDate ) && $date && '' !== $pubDate ) {
$echo .= $before_date . $pubDate . $after_date;

↓

if ( isset( $pubDate ) && $date && '' !== $pubDate ) {
$echo .= $before_date . $pubDate . $after_date;
$echo .= '<a' . $target . $rel . ' href="' . $href . '" title="' . $atitle . '">' . $title . '</a>';

 

WordPressのキャッシュ更新頻度の変更

デフォルト設定値だとRSSを即時に取得してもページに反映されるのが12時間毎になってしまいます。それではあまり意味がないので1時間ごとの更新にしたいと思います。

WordPressダッシュボード

→テーマの編集

→テーマのための関数

に以下のコードを貼り付けてください。

add_filter( 'wp_feed_cache_transient_lifetime', create_function( '$a', 'return 3600;' ) );

3600という値が3600秒＝1時間を意味します。

まとめサイトのCSSデザインサンプル

ul{
padding:0px !important;
}

.post-meta{
display:none;
}

#body{
margin:0px !important;
}

.entry-title{
margin-top:0px !important;
}

#main{
padding-top:0px !important;
border:0px !important;
}

.stb {
border-bottom: double #F4A460 3px;
font-size: 1.3em;
position: relative;
padding: 0 .5em 0em 1.3em;
border-bottom: 2px solid #99CCFF;
margin-top:30px;
}

.stb:after {
	position: absolute;
	top: .2em;
	left: .2em;
	z-index: 2;
	content: '';
	width: 16px;
	height: 16px;
	background-color: #99CCFF;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.stb a{
    color:#000000 !important;
    text-decoration:none !important;
}


.stb a:hover{
     color:#cc0033 !important;
    
}

.stb a:visited{
    color:#000000 !important;
}

a:-webkit-any-link {
    text-decoration: none !important;
    color:#4682B4;
    cursor: auto;
}

a:visited{
    text-decoration: none !important;
    color:#808080;
   }

#breadcrumb{
display:none;
}

ul{
line-height:1.1 !important;
margin-top:5px !important;
}

date{
line-height:1.3 !important;
font-size:0.8em !important;
color:#808080 !important;
}

.font1{
line-height: 1em !important;
font-size:xx-small;
}

#site-description {
    font-size: 0.5em !important;
    line-height:0.8em !important;
    }

#main .widgets {
    margin-top: 0px;
    margin-bottom: 0px;
}

このCSSを適用したコードをページ編集画面の「テキスト」の方に貼れば完成。

<div class="stb"><span class="bold"><a href="http://kasegunet.jp/" target="_blank">稼ぐネット</a></span></div>
[RSSImport display="5" feedurl="http://kasegunet.jp/feed/" date="true" date_format="n/j H:i" before_date="<date><small>"  after_date="</small></date><br />" target="blank" start_item="" end_item="<hr>"]

 

-未分類

© 2024 かずのアプリときどきキャンプ飯 Powered by AFFINGER5