• A+

让NANA主题侧边栏显示最新说说心情

2019-01-10 阅读: 279 次 评论 0 条 百度已收录
Stay hungry. Stay foolish.——史蒂夫.乔布斯
本文共504个字,预计阅读时间需要2分钟。

当初,在浏览其他博友的站点时,发现侧边栏可以显示最新的说说心情,感觉很漂亮。想着,能不能在自己的博客侧边栏也显示。在自己的多次修改和测试下,终于可以显示了。

博主我使用的是懿古今的NANA主题,因此也是在此主题的基础上进行的修改适配。理论上,也适用其他WP主题,不过需要进行二次修改。
下面我将介绍下,大致的修改步骤及方法。
1、新建shuo.php,并复制下列代码后,上传至/inc/functions/文件夹下。

  1. <?php
  2. //原文地址:www.chyiyang.cn/52.html
  3. function shuo($number){
  4. global $wpdb, $post; 
  5.  $sql = "SELECT *
  6.  FROM $wpdb->posts
  7.  WHERE post_type = 'shuoshuo' AND post_status = 'publish' ORDER BY post_date DESC LIMIT 0 , $number ";
  8.  $posts = $wpdb->get_results($sql);
  9.  $output = ""; 
  10.  foreach ($posts as $post){ 
  11.  $output .= "<li class=\"clr\"><div class=\"time\"><span class=\"r\">".get_the_time('d')."</span>/<span class=\"y\">".get_the_time('m月')."</span></div><div class=\"title\">".$post->post_content."</div></li>";
  12.  }
  13.  echo $output; 
  14. }
  15. ?>

2、复制下列代码,粘贴到/in/functions/widgets.php最下面。

  1. // 心情说说:www.chyiyang.cn/52.html
  2. class shuoshuo_post extends WP_Widget {
  3.  function __construct(){
  4.  parent::__construct( 'shuoshuo_post', '主题&nbsp;&nbsp;心情说说', array('description' => '主题自带的心情说说小工具') );
  5.  }
  6.  function widget($args, $instance) {
  7.  extract($args);
  8.  $title = apply_filters( 'widget_title', $instance['title'] );
  9.  echo $before_widget;
  10.  if ( ! empty( $title ) )
  11.  echo $before_title . $title . $after_title;
  12.  $number = strip_tags($instance['number']) ? absint( $instance['number'] ) : 5;
  13. ?>
  14. <div class="shuo_cat" id="shuo_cat">
  15.  <ul>
  16.  <?php shuo($number);wp_reset_query(); ?>
  17.  </ul>
  18. </div> 
  19. <script>
  20.  $(function () {
  21.  $(".clr").mouseover(function () {
  22.  $(this).addClass('hov');
  23.  }).mouseleave(function () {
  24.  $(this).removeClass('hov');
  25.  });
  26.  
  27.  })
  28.  </script>
  29. <div class="clear"></div>
  30. <?php
  31.  echo $after_widget;
  32.  }
  33.  function update( $new_instance, $old_instance ) {
  34.  if (!isset($new_instance['submit'])) {
  35.  return false;
  36.  }
  37.  $instance = $old_instance;
  38.  $instance = array();
  39.  $instance['title'] = strip_tags( $new_instance['title'] );
  40.  $instance['number'] = strip_tags($new_instance['number']);
  41.  return $instance;
  42.  }
  43.  function form($instance) {
  44.  if ( isset( $instance[ 'title' ] ) ) {
  45.  $title = $instance[ 'title' ];
  46.  }
  47.  else {
  48.  $title = '心情?说说';
  49.  }
  50.  global $wpdb;
  51.  $instance = wp_parse_args((array) $instance, array('number' => '5'));
  52.  $number = strip_tags($instance['number']);
  53. ?>
  54.  <p><label for="<?php echo $this->get_field_id( 'title' ); ?>">标题:</label>
  55.  <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $title; ?>" /></p>
  56.  <p><label for="<?php echo $this->get_field_id('number'); ?>">显示数量:</label>
  57.  <input id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="text" value="<?php echo $number; ?>" size="3" /></p>
  58.  <input type="hidden" id="<?php echo $this->get_field_id('submit'); ?>" name="<?php echo $this->get_field_name('submit'); ?>" value="1" />
  59. <?php }
  60. }
  61. add_action( 'widgets_init', create_function( '', 'register_widget( "shuoshuo_post" );' ) );

3、在NANA主题functions.php下,加入如下代码。

  1. // 说说心情
  2. require get_template_directory() . '/inc/functions/shuo.php';

4、将下列css样式粘贴到主题下的style样式里。

  1. shuo_cat ul{padding:8px 15px 15px}.shuo_cat li{border-bottom:1px dotted #cbcbcb;padding:9pt 0}.shuo_cat li .time{float:left;width:70px;height:36px;line-height:36px;text-align:center;color:#616161;font-size:9pt;background:#f2f2f2;font-family:arial}.shuo_cat li .time span{display:inline-block}.shuo_cat li .time span.r{font-size:22px;width:25px;margin-right:2px;text-align:right}.shuo_cat li .time span.y{font-size:9pt;margin-left:2px;position:relative;bottom:1px}.shuo_cat li .title{height:auto;line-height:18px;overflow:hidden;font-size:14px;color:#3f3f3f;padding-left:6pt;white-space:normal}.shuo_cat li.hov{border-bottom:1px dotted #c01e22}.shuo_cat li.hov .time{background:#c01e22;color:#fff}.shuo_cat li.hov .title{color:#c01e22}

好了,到此就弄完了。

添加此功能,需要站点有说说页面才可实现。

后台效果

前端显示效果

温馨提示

本文为博主原创内容,转载需写明出处。

本文地址:https://www.chyiyang.cn/49.html
本文标题:让NANA主题侧边栏显示最新说说心情
版权声明:本站所有文章除特别声明外,均采用 署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果,转载请写明出处!
所属分类:WP相关

发表评论


表情