フッターに最新記事を表示するティッカーを入れてみた

2011/04/04
CATEGORY : jQuery , Wordpress , 天一以外
このエントリーをはてなブックマークに追加

みなさまこんにちは。ネタがないよ。シブタニエイジです。

このサイトのフッター下部には【今週の一言】っていうのを入れていたんですが、「更新がめんどくせーよ!」「そんな時間あったら天一行くよ!」ってことで、最新記事のリンク付きタイトルを表示するティッカーを入れてみました。

jquery.bxSlider.min.jsをダウンロード

そういえば、私が天一の次に好きなJOJOの25周年サイト[JOJO.com]がオープンしましたね。

で、このサイトにはヘッダー下部にシンプルなティッカーが表示されていて、「これいいなぁ〜〜」ってことで色々と探してみることに。

で↓のサイトさんを参考にさせていただきました。ありがとうございます!

今回はJOJO.comのようなシンプルなものがよかったので、"jquery.bxSlider.min.js"を使用。
ダウンロードはbxSlideから。

ダウンロードしたらヘッダに以下のソースを挿入。
(jsのディレクトリは任意に設定してね!)

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.bxslider2.0.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('ul#※※※※').bxSlider({
controls: false,
speed: 500,
pager: false,
auto: true,
pause: 3500
});
});
</script>

カスタムオプションはbxSlideを参考に。スピードや表示時間など、色々と設定できます。

で、あとはHTMLに<script>で設定した<ul id="※※※※">を記述するだけなのですが、私の場合は、マルトサイト化した子ブログから最新記事を数件表示させているので、こんな感じに。

<ul id="※※※※">
<!--子ブログに切り替える(A-LOGのブログIDは"2")-->
<?php switch_to_blog(2) ?><br />
<!--最新3件のタイトルと投稿日を表示 タイトルに記事へのリンクを貼る-->
   <?php
   global $post;
   $myposts = get_posts('numberposts=3');
   foreach($myposts as $post) :
   setup_postdata($post);
   ?>
<li><a href="<?php the_permalink(); ?>"><?php echo get_the_date(); ?> : <?php the_title(); ?></a></li>
<?php endforeach; ?>
<!--元ブログに戻る-->
<?php restore_current_blog(); ?>
</ul>

これでおしまい。

当初は、twitterのタイムラインを表示させるつもりで【今週の一言】を入れていたんですが、めったにつぶやかないし「あんま意味ねーな〜」ってことで更新情報を表示させることにしましたとさ。

今日の一言

最近、天一食べてない。

コメント
コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© 2013 THE AGE