ブログ

WEB制作に関する技術情報やサンプルコードからエクセルや
パワーポイントのお役立ち情報まで幅広くご紹介しています。

WordPress 特定のカテゴリーのタイトルをニュースティッカー表示

ブログのリニューアルに伴い、「これいい!パーツデザイン」の更新履歴をページニュースティッカーで表示することにしました。

見た目がふざけているのは、ご勘弁ください。。。

特定カテゴリーをリスト形式で出力

ニュースティッカーを表示させたい箇所に以下を追記。

<ul id="news_ticker_list">
<?php
	$lastposts = get_posts('numberposts=10&category=11');
	foreach($lastposts as $post) :
	setup_postdata($post);
	?>
	<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>

numberposts=●に表示させたい記事数を入力
category=●に表示させたいカテゴリーのIDを入力

ニュースティッカーとして動作させる

jQuery WebTicker」を使って、動作させます。

<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
j$(document).ready(function() {
	j$("#news_ticker_list").webTicker({
		travelocity: 0.04, //速さ
		direction: 1, //-1で逆に
	})
});
</script>

travelocity:●,に速度値を入力
direction: ●,で動作する方向を設定(「1」は←方向、「-1」は、→方向)

あとは、CSSで整形してください!

ちなみに当ブログでは、

ul.newsticker {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;}

ul.newsticker li {
float: left;
margin: 0;
padding-left: 25px;
margin-left:40px;
padding-bottom:10px;
background: url(walking.gif) no-repeat 0 0;
}
投稿日
2012年10月15日
カテゴリー
WordPress, カスマイズ

コメントを残す

デザイン・ポータルサイト事業デザインオフィス blow→in
〒598-0021 大阪府泉佐野市日根野7001-2
TEL.072-425-7218(代表)
WEB.https://blow-in.net
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
ブランディング・ネットショップ事業かつらぎフルーツ
〒649-7151 和歌山県かつらぎ町東渋田325-4
TEL.0736-26-8277
WEB.https://katsuragi.shop
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
飲食店事業パンケーキカフェ cafeblow
〒598-0021 大阪府泉佐野市日根野3926
TEL.090-5127-9187
WEB.https://cafeblow.com
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
  • line@アカウント
事業別サイト