• A+

如何使文章标题前显示彩色数字

2019-01-08 阅读: 105 次 评论 0 条 百度已收录
知识上的投资总能得到最好的回报。——本杰明.富兰克林
本文共430个字,预计阅读时间需要2分钟。

之前,在浏览其他博客的时候看到有的博客侧边栏的例如随机推荐文章前会显示带彩色背景的数字,感觉很好看。想着也给自己博客弄一个,可在网上搜索许久,都没有找到相关的帖子。在代码方面,自己也不懂PHP,没办法最终只能是不停的修改测试,好在最终给弄成了。

今天,有群友在问这方面的问题,那就写个教程,希望像我一样不懂代码的人可以用到,下面我将介绍下方法。
本人用的是懿古今的NANA主题,里面是不带随机推荐小工具的,所以我就在NANA/inc/functions/下的widgets.php里做了下修改。

1、将下列代码复制,粘贴到widgets.php的最下面,并保存。

  1. // 随机推荐
  2. class random_post extends WP_Widget {
  3.  function __construct(){
  4.  parent::__construct( 'random_post', '主题  随机推荐', 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.  
  15. <div class="investment_con_list"><ul class="tab_post_links">
  16.  <?php query_posts( array ( 'showposts' => $number, 'ignore_sticky_posts' => 1, 'orderby' => 'rand' ) );$i = 1; while ( have_posts() ) : the_post(); ?>
  17.  <li class="hot-title"><span class="li-icon li-icon-<?php echo $i;?>"><?php echo $i;$i++ ?></span>
  18.  <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank"><?php the_title(); ?></a></li>
  19.  <?php endwhile;?> 
  20.  </ul>
  21. </div> 
  22.  
  23. <?php
  24.  echo $after_widget;
  25.  }
  26.  function update( $new_instance, $old_instance ) {
  27.  if (!isset($new_instance['submit'])) {
  28.  return false;
  29.  }
  30.  $instance = $old_instance;
  31.  $instance = array();
  32.  $instance['title'] = strip_tags( $new_instance['title'] );
  33.  $instance['number'] = strip_tags($new_instance['number']);
  34.  return $instance;
  35.  }
  36.  function form($instance) {
  37.  if ( isset( $instance[ 'title' ] ) ) {
  38.  $title = $instance[ 'title' ];
  39.  }
  40.  else {
  41.  $title = '随机推荐';
  42.  }
  43.  global $wpdb;
  44.  $instance = wp_parse_args((array) $instance, array('number' => '5'));
  45.  $number = strip_tags($instance['number']);
  46. ?>
  47.  <p><label for="<?php echo $this->get_field_id( 'title' ); ?>">标题:</label>
  48.  <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>
  49.  <p><label for="<?php echo $this->get_field_id('number'); ?>">显示数量:</label>
  50.  <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>
  51.  <input type="hidden" id="<?php echo $this->get_field_id('submit'); ?>" name="<?php echo $this->get_field_name('submit'); ?>" value="1" />
  52. <?php }
  53. }
  54. add_action( 'widgets_init', create_function( '', 'register_widget( "random_post" );' ) );

2、将下列css样式复制到style.css里。css样式可自行修改。

  1. .tab_post_links li:first-child{padding-top:10px}.tab_post_links li{padding-top:5px}.li-icon{background:#ccc;font-size:12px;color:#fff;line-height:180%;margin:0 5px 0 0;padding:0 5px;border-radius:2px}.li-icon-1{background:#c01e22}.li-icon-2{background:#23b7e5}.li-icon-3{background:#6E8B3D}

3、经过前两步之后,可在后台--外观--小工具中看到‘随机推荐’,之后,直接添加到想要显示的侧边栏中。

后台效果

前端效果

本文地址:https://www.chyiyang.cn/50.html
本文标题:如何使文章标题前显示彩色数字
版权声明:本站所有文章除特别声明外,均采用 署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果,转载请写明出处!
所属分类:WP相关

发表评论


表情