１、编辑header.php，在最下边一行添加

<?php require_once TEMPLATEPATH . '/news_ticker/news_ticker.php' ; ?>

２、创建news_ticker.php，内容如下：

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/news_ticker/newsticker_jquery.ticker.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/news_ticker/newsticker_ticker-style.css"></script>

<?php

  $cat_id = '';
  $cat_name = '';
  $cat_link = '';

  $args = array( 'cat' => $cat_id,
                'orderby'=>'ID',
                'order' => 'DESC',
                'posts_per_page' => 5,//控制可以显示最新文章的数目
                'ignore_sticky_posts' => 1
              );
  $the_query = new WP_Query($args);
 ?>
     <div id="ticker-wrapper" class="has-js">
       <b class="news1">
         <a href="<?php echo $cat_link; ?>"><?php
          if (strlen($cat_name) > 10) {
            echo substr($cat_name, 0, 10) . '..';
          } else {
            echo $cat_name;
          } ?>
          </a>
            </b>
       <ul id="js-news" class="js-hidden"> <?php
         while ($the_query->have_posts()) {
           $the_query->the_post();?>
           <li class="news-item"><a href="<?php the_permalink(); ?>"><?php echo the_title(); ?></a></li><?php
         } ?>
       </ul>
     </div>

３、编辑functions.php，加入以下代码：

  function newsticker_custom_theme_scripts() {

     wp_enqueue_script( 'jquery');

    wp_enqueue_script( 'jquery.ticker.min', get_template_directory_uri() . '/news_ticker/newsticker_jquery.ticker.js' );

  }
  function newsticker_print_styles() {
  	    wp_register_style('newsticker_tickerstyle', get_template_directory_uri() . 'news_ticker/newsticker_ticker-style.css');
     wp_enqueue_style('newsticker_tickerstyle');

  }
  function newsticker_myheader() {
 { ?>
					<script type="text/javascript">
						jQuery(function () {
							jQuery('#js-news').ticker({speed: 0.100});
						});
					</script> <?php
				}

}

add_action( 'wp_print_scripts', 'newsticker_custom_theme_scripts');
add_action( 'wp_print_styles', 'newsticker_print_styles');
add_action( 'wp_head', 'newsticker_myheader');

４、编辑style.css，加入以下内容

.has-js {
	background:#fff;
	width:75%;
	padding:0px 0px 6px 0px;
	height:18px;
	margin-bottom:5px;
	float:left;
	border-bottom:1px solid #999;
}
.news1 {
	float: left;
	color:#333;
}
.news1 a {
	color:#333;
}
.news1 em {
	color:#005C91;
	padding:0 0 0 0px;
	font-style:normal;
	font-size:13px;
	position:relative;top:2px;
}

５、创建/news_ticker/newsticker_jquery.ticker.js文件，内容如下：

(function($){
  $.fn.ticker = function(options) {
    // Extend our default options with those provided.
    // Note that the first arg to extend is an empty object -
    // this is to keep from overriding our "defaults" object.
    var opts = $.extend({}, $.fn.ticker.defaults, options);

    /* Get the id of the UL to get our news content from */
    var newsID = '#' + $(this).attr('id');

    /* Get the tag type - we will check this later to makde sure it is a UL tag */
    var tagType = $(this).get(0).tagName;
    return this.each(function() {
      /* Internal vars */
      var settings = {
        position: 0,
        time: 0,
        distance: 0,
        newsArr: {},
        play: true,
        paused: false,
        contentLoaded: false,
        dom: {
          contentID: '#ticker-content',
          titleID: '#ticker-title',
          titleElem: '#ticker-title SPAN',
          tickerID : '#ticker',
          wrapperID: '#ticker-wrapper',
          revealID: '#ticker-swipe',
          revealElem: '#ticker-swipe SPAN',
          controlsID: '#ticker-controls',
          prevID: '#prev',
          nextID: '#next',
          playPauseID: '#play-pause'
        }
      };

      // if we are not using a UL, display an error message and stop any further execution
      if (tagType != 'UL' && opts.htmlFeed === true) {
        debugError('Cannot use <' + tagType.toLowerCase() + '> type of element for this plugin - must of type <ul>');
        return false;
      }

      // lets go...
      initialisePage();
      /* Function to get the size of an Object*/
      function countSize(obj) {
          var size = 0, key;
          for (key in obj) {
              if (obj.hasOwnProperty(key)) size++;
          }
          return size;
      };
      /* Function for handling debug and error messages */
      function debugError(obj) {
        if (opts.debugMode) {
          if (window.console && window.console.log) {
            window.console.log(obj);
          }
          else {
            alert(obj);
          }
        }
      }
      /* Function to setup the page */
      function initialisePage() {
        // add our HTML structure for the ticker to the DOM
        $(settings.dom.wrapperID).append('<div id="' + settings.dom.tickerID.replace('#', '') + '"><div id="' + settings.dom.titleID.replace('#', '') + '"><span style="display: none;"><!-- --></span></div><p id="' + settings.dom.contentID.replace('#', '') + '"></p><div id="' + settings.dom.revealID.replace('#', '') + '"><span style="display: none;"><!-- --></span></div></div>');
        $(settings.dom.wrapperID).removeClass('no-js').addClass('has-js');
        // hide the ticker
        $(settings.dom.tickerElem + ',' + settings.dom.titleElem + ',' + settings.dom.contentID).hide();
        // add the controls to the DOM if required
        if (opts.controls) {
          // add related events - set functions to run on given event
          $(settings.dom.controlsID).live('click mouseover mousedown mouseout mouseup', function (e) {
            var button = e.target.id;
            if (e.type == 'click') {
              switch (button) {
                case settings.dom.prevID.replace('#', ''):
                  // show previous item
                  settings.paused = true;
                  $(settings.dom.playPauseID).addClass('paused');
                  changeContent(button);
                  break;
                case settings.dom.nextID.replace('#', ''):
                  // show next item
                  settings.paused = true;
                  $(settings.dom.playPauseID).addClass('paused');
                  changeContent(button);
                  break;
                case settings.dom.playPauseID.replace('#', ''):
                  // play or pause the ticker
                  if (settings.play == true) {
                    settings.paused = true;
                    $(settings.dom.playPauseID).addClass('paused');
                    pauseTicker();
                  }
                  else {
                    settings.paused = false;
                    $(settings.dom.playPauseID).removeClass('paused');
                    restartTicker();
                  }
                  break;
              }
            }
            else if (e.type == 'mouseover' && $('#' + button).hasClass('controls')) {
              $('#' + button).addClass('over');
            }
            else if (e.type == 'mousedown' && $('#' + button).hasClass('controls')) {
              $('#' + button).addClass('down');
            }
            else if (e.type == 'mouseup' && $('#' + button).hasClass('controls')) {
              $('#' + button).removeClass('down');
            }
            else if (e.type == 'mouseout' && $('#' + button).hasClass('controls')) {
              $('#' + button).removeClass('over');
            }
          });
          // add controls HTML to DOM
          $(settings.dom.wrapperID).append('<ul id="' + settings.dom.controlsID.replace('#', '') + '"><li id="' + settings.dom.playPauseID.replace('#', '') + '"></li><li id="' + settings.dom.prevID.replace('#', '') + '"></li><li id="' + settings.dom.nextID.replace('#', '') + '"></li></ul>');
        }
        // add mouse over on the content
        $(settings.dom.contentID).mouseover(function () {
          if (settings.paused == false) {
            pauseTicker();
          }
        }).mouseout(function () {
          if (settings.paused == false) {
            restartTicker();
          }
        });
        // start the first ticker item
        updateTicker();
      }
      /* Start the ticker */
      function updateTicker() {
        // check to see if we need to load content
        if (settings.contentLoaded == false) {
          // construct content
          if (opts.ajaxFeed) {
            // to do - add ajax options (json, remote url)
            debugError('Code Me!');
          }
          else if (opts.htmlFeed) {
            if($(newsID + ' LI').length > 0) {
              $(newsID + ' LI').each(function (i) {
                // maybe this could be one whole object and not an array of objects?
                settings.newsArr['item-' + i] = { type: opts.titleText, content: $(this).html()};
              });
            }
            else {
              debugError('Couldn\'t find any content for the ticker to use!');
              return false;
            }
          }
          else {
            debugError('Couldn\'t find any content for the ticker to use!');
            return false;
          }
          settings.contentLoaded = true;
        }

        // insert news content into DOM
        $(settings.dom.titleElem).html(settings.newsArr['item-' + settings.position].type);
        $(settings.dom.contentID).html(settings.newsArr['item-' + settings.position].content);

        // set the next content item to be used - loop round if we are at the end of the content
        if (settings.position == (countSize(settings.newsArr) -1)) {
          settings.position = 0;
        }
        else {
          settings.position++;
        }

        // get the values of content and set the time of the reveal (so all reveals have the same speed regardless of content size)
        distance = $(settings.dom.contentID).width();
        time = distance / opts.speed;

        // start the ticker  - have to fade both element here because of IE strangeness - needs further investigation
        $(settings.dom.wrapperID)
          .find(settings.dom.titleID).fadeIn()
            .end().find(settings.dom.titleElem).fadeIn('slow', revealContent);
      }

      //slide back cover
      function revealContent() {
        if(settings.play) {
          // get the width of the title element to offset the content and reveal
          var offset = $(settings.dom.titleElem).width() + 20;
          $(settings.dom.revealID).css('left', offset + 'px');
          // show the reveal element and start  the animation
          $(settings.dom.revealElem).show(0, function () {
            $(settings.dom.contentID).css('left', offset + 'px').show();
            $(settings.dom.revealID).css('margin-left', '0px').delay(20).animate({
              marginLeft: distance + 'px'
            }, time, 'linear', postReveal);
          });
        }
        else {
          return false;
        }
      };

      function postReveal() {
        // here we hide the current content and reset the ticker elements to a default state ready for the next ticker item
        if(settings.play) {
          // we have to separately fade the content out here to get around an IE bug - needs further investigation
          $(settings.dom.contentID).delay(opts.pauseOnItems).fadeOut('slow');
          // deal with the rest of the content, prepare the DOM and trigger the next ticker
          $(settings.dom.revealID).hide(0, function () {
            $(settings.dom.tickerID).delay(opts.pauseOnItems).fadeOut(opts.fadeOutSpeed, function () {
              $(settings.dom.wrapperID)
                .find(settings.dom.titleElem +',' + settings.dom.revealElem + ',' + settings.dom.contentID)
                  .hide()
                .end().find(settings.dom.tickerID + ',' + settings.dom.revealID + ',' + settings.dom.titleID)
                  .show()
                .end().find(settings.dom.tickerID + ',' + settings.dom.revealID + ',' + settings.dom.titleID)
                  .removeAttr('style');
              updateTicker();
            });
          });
        }
        else {
          $(settings.dom.revealElem).hide();
        }
      }

      function pauseTicker() {
        // pause ticker
        settings.play = false;
        // stop animation and show content - must pass true, true to the stop function, or we can get some funky behaviour
        $(settings.dom.tickerID + ',' + settings.dom.revealID + ',' + settings.dom.titleID + ',' + settings.dom.titleElem + ',' + settings.dom.revealElem + ',' + settings.dom.contentID).stop(true, true);
        $(settings.dom.revealID + ',' + settings.dom.revealElem).hide();
        $(settings.dom.wrapperID)
          .find(settings.dom.titleID + ',' + settings.dom.titleElem).show()
            .end().find(settings.dom.contentID).show();
      }

      function restartTicker() {
        // play ticker
        settings.play = true;
        settings.paused = false;
        // start the ticker again
        postReveal();
      }

      function changeContent(direction) {
        pauseTicker();
        switch (direction) {
          case 'prev':
            if (settings.position == 0) {
              settings.position = countSize(settings.newsArr) -2;
            }
            else if (settings.position == 1) {
              settings.position = countSize(settings.newsArr) -1;
            }
            else {
              settings.position = settings.position - 2;
            }
            //console.log(settings.position);
            $(settings.dom.titleElem).html(settings.newsArr['item-' + settings.position].type);
            $(settings.dom.contentID).html(settings.newsArr['item-' + settings.position].content);
            break;
          case 'next':
            $(settings.dom.titleElem).html(settings.newsArr['item-' + settings.position].type);
            $(settings.dom.contentID).html(settings.newsArr['item-' + settings.position].content);
            break;
        }
        // set the next content item to be used - loop round if we are at the end of the content
        if (settings.position == (countSize(settings.newsArr) -1)) {
          settings.position = 0;
        }
        else {
          settings.position++;
        }
      }
    });
  };
  // plugin defaults - added as a property on our plugin function
  $.fn.ticker.defaults = {
    speed: 0.10,
    ajaxFeed: false,
    htmlFeed: true,
    debugMode: true,
    controls: true,
    titleText: '&nbsp;',
    pauseOnItems: 2000,
    fadeInSpeed: 300,
    fadeOutSpeed: 300
  };
})(jQuery);

// get html from ajax call or json object

// make whole thing events based

// background customisation (a la bbc)

// truncate long strings?

６、创建/news_ticker/newsticker_ticker-style.css，内容如下：

<script type="text/javascript">
#ticker-wrapper *{
	margin:0
}
#ticker-wrapper .has-js{
	width:800px;
	height:30px;
	display:block;
	font-family:Arial;
	font-size:.75em;
	margin:0px 0 0 20px
}
#ticker{
	width:500px;
	height:18px;
	display:block;
	float:left;
	position:relative;
	overflow:hidden;
	background-color:#fff;
	padding:0 0 0 0px
}
#ticker-title{
	padding-top:0px;
	float:left;
	color:#900;
	font-weight:700;
	background-color:#fff;
	text-transform:uppercase
}
#ticker-content{
	height:18px;
	padding-top:0px;
	float:left;
	position:absolute;
	color:#1F527B;
	font-weight:700;
	background-color:#fff;
	margin:0
}
#ticker-content A{
	text-decoration:none;
	color:#333;
	font-size:16px;
	font-family: Georgia, "Bitstream Charter", serif;
}
#ticker-content A:hover{
	text-decoration:none;
	color:#005C91;
}
#ticker-swipe{
	padding-top:5px;
	position:absolute;
	top:0;
	left:80px;
	background-color:#fff;
	display:block;
	width:800px;
	height:23px
}
#ticker-swipe SPAN{
	margin-left:1px;
	background-color:#fff;
	border-bottom:1px solid #1F527B;
	height:12px;
	width:7px;
	display:block
}
#ticker-controls{
	list-style-type:none;
	float:right;
	padding:7px 10px 0 0;
}
#ticker-controls LI{
	margin-left:5px;
	float:left;
	cursor:pointer;
	height:16px;
	width:16px;
	display:block;
	padding:0
}
#ticker-controls LI#play-pause{
	background-position:32px 16px
}
#ticker-controls LI#play-pause .over{
	background-position:32px 32px
}
#ticker-controls LI#play-pause .down{
	background-position:32px 0
}
#ticker-controls LI#play-pause .paused{
	background-position:48px 16px
}
#ticker-controls LI#play-pause .paused .over{
	background-position:48px 32px
}
#ticker-controls LI#play-pause .paused .down{
	background-position:48px 0
}
#ticker-controls LI#prev{
	background-position:0 16px
}
#ticker-controls LI#prev .over{
	background-position:0 32px
}
#ticker-controls LI#prev .down{
	background-position:0 0
}
#ticker-controls LI#next{
	background-position:16px 16px
}
#ticker-controls LI#next .over{
	background-position:16px 32px
}
#ticker-controls LI#next .down{
	background-position:16px 0
}
.js-hidden{
	display:none
}
.current-time{
	margin-top:5px;
}
</script>

最后说一下不同的页面载入不同的内容的代码写法

<?php if (is_single()||is_page(guestbook)) { ?>
e.g. code
<?php } ?>

<div class="nearbypost">
  <div class="alignleft"><?php previous_post_link('&larr;上一篇: %link'); ?></div>
  <div class="alignright"><?php next_post_link('下一篇%link &rarr; '); ?></div>
 </div>

larr和rarr是向左和向右的箭头。

&laquo;和&raquo分别是<和>

添加到single.php文件中即可。

Twenty Ten Post Calendar Icon