纯代码给wordpress添加说说/微博/微语功能

用纯代码的方法给wordpress添加说说、微博、微语功能吧!作为一个独立的个人博客,说说怎么少得了,有时候我们写日志,或者做通告,长不长,短不短的话语总是纠结怎么写成文章,但是为了人性化,像qq空间的说说,emlog的微语以及微博,都是把短语发挥到了极致,无奈wordpress没有这项功能,今天无作为就教大家添加该功能,非常简单,代码也很少。现在博客越来越难做了,基本没又人会看,不过WordPress的功能却是越来越强大,在无聊分享的同时,我们是不是可以单独弄一个说说页面出来,发送一下郁闷的心情呢?

纯代码给wordpress添加说说/微博/微语功能

首先在主题的functions.php里面加入以下代码:

  1. //说说
  2. add_action(‘init’, ‘my_custom_init’); function my_custom_init() { $labels = array( ‘name’ => ‘说说’, ‘singular_name’ => ‘singularname’, ‘add_new’ => ‘发表说说’, ‘add_new_item’ => ‘发表说说’, ‘edit_item’ => ‘编辑说说’, ‘new_item’ => ‘新说说’, ‘view_item’ => ‘查看说说’, ‘search_items’ => ‘搜索说说’, ‘not_found’ => ‘暂无说说’, ‘not_found_in_trash’ => ‘没有已遗弃的说说’, ‘parent_item_colon’ => , ‘menu_name’ => ‘说说’ ); $args = array( ‘labels’ => $labels, ‘public‘ => true, ‘publicly_queryable’ => true, ‘show_ui’ => true, ‘show_in_menu’ => true, ‘query_var’ => true, ‘rewrite’ => true, ‘capability_type’ => ‘post’, ‘has_archive’ => true, ‘hierarchical’ => false, ‘menu_position’ => null, ‘supports’ => array(‘title’,’editor’,’author’) ); register_post_type(‘shuoshuo’,$args); }添加之后创建一个php文档,把以下内容(顺便附上css样式)复制进去:保存该文档,命名为shuoshuo.php,将其放于主题目录下。<?php /*
  3.  Template Name: 说说
  4.  author: 模板下载吧
  5.  url: https://www.mbxzb.cn
  6.  */
  7.  get_header(); ?>
  8. <style type=“text/css”>
  9.  #shuoshuo_content {
  10.  background-color: #fff;
  11.  padding: 10px;
  12.  min-height: 500px;
  13.  }
  14.  /* shuo */
  15.  body.theme-dark .cbp_tmtimeline::before {
  16.  background: RGBA(2552552550.06);
  17.  }
  18.  ul.cbp_tmtimeline {
  19.  padding: 0;
  20.  }
  21.  div class.cdp_tmlabel > li .cbp_tmlabel {
  22.  margin-bottom: 0;
  23.  }
  24.  .cbp_tmtimeline {
  25.  margin: 30px 0 0 0;
  26.  padding: 0;
  27.  list-style: none;
  28.  position: relative;
  29.  }
  30.  /* The line */
  31. .cbp_tmtimeline:before {
  32.  content: ;
  33.  position: absolute;
  34.  top: 0;
  35.  bottom: 0;
  36.  width: 4px;
  37.  background: RGBA(0000.02);
  38.  left: 80px;
  39.  margin-left: 10px;
  40.  }
  41.  /* The date/time */
  42.  .cbp_tmtimeline > li .cbp_tmtime {
  43.  display: block;
  44.  /* width: 29%; */
  45.  /* padding-right: 110px; */
  46.  max-width: 70px;
  47.  position: absolute;
  48.  }
  49.  .cbp_tmtimeline > li .cbp_tmtime span {
  50.  display: block;
  51.  text-align: right;
  52.  }
  53.  .cbp_tmtimeline > li .cbp_tmtime span:first-child {
  54.  font-size: 0.9em;
  55.  color: #bdd0db;
  56.  }
  57.  .cbp_tmtimeline > li .cbp_tmtime span:last-child {
  58.  font-size: 1.2em;
  59.  color: #9BCD9B;
  60.  }
  61.  .cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
  62.  color: RGBA(255125730.75);
  63.  }
  64.  div.cbp_tmlabel > p {
  65.  margin-bottom: 0;
  66.  }
  67.  /* Right content */
  68.  .cbp_tmtimeline > li .cbp_tmlabel {
  69.  margin: 0 0 45px 65px;
  70.  background: #9BCD9B;
  71.  color: #fff;
  72.  padding: .8em 1.2em .4em 1.2em;
  73.  /* font-size: 1.2em; */
  74.  font-weight: 300;
  75.  line-height: 1.4;
  76.  position: relative;
  77.  border-radius: 5px;
  78.  transition: all 0.3s ease 0s;
  79.  box-shadow: 0 1px 2px rgba(0000.15);
  80.  cursor: pointer;
  81.  display: block;
  82.  }
  83.  .cbp_tmlabel:hover {
  84.  /* transform:scale(1.05); */
  85.  transform: translateY(-3px);
  86.  z-index: 1;
  87.  -webkit-box-shadow: 0 15px 32px rgba(0000.15) !important
  88.  }
  89.  .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
  90.  background: RGBA(255125730.75);
  91.  }
  92.  /* The triangle */
  93.  .cbp_tmtimeline > li .cbp_tmlabel:after {
  94.  right: 100%;
  95.  border: solid transparent;
  96.  content: ” “;
  97.  height: 0;
  98.  width: 0;
  99.  position: absolute;
  100.  pointer-events: none;
  101.  border-right-color: #9BCD9B;
  102.  border-width: 10px;
  103.  top: 4px;
  104.  }
  105.  .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
  106.  border-right-color: RGBA(255125730.75);
  107.  }
  108.  p.shuoshuo_time {
  109.  margin-top: 10px;
  110.  border-top: 1px dashed #fff;
  111.  padding-top: 5px;
  112.  }
  113.  /* Media */
  114.  @media screen and (max-width: 65.375em) {
  115.  .cbp_tmtimeline > li .cbp_tmtime span:last-child {
  116.  font-size: 1.2em;
  117.  }
  118.  }
  119.  .shuoshuo_author_img img {
  120.  border: 1px solid #ddd;
  121.  padding: 2px;
  122.  float: left;
  123.  border-radius: 64px;
  124.  transition: all 1.0s;
  125.  }
  126.  .avatar {
  127.  -webkit-border-radius: 100% !important;
  128.  -moz-border-radius: 100% !important;
  129.  box-shadow: inset 0 -1px 0 #3333sf;
  130.  -webkit-box-shadow: inset 0 -1px 0 #3333sf;
  131.  -webkit-transition: 0.4s;
  132.  -webkit-transition: -webkit-transform 0.4s ease-out;
  133.  transition: transform 0.4s ease-out;
  134.  -moz-transition: -moz-transform 0.4s ease-out;
  135.  }
  136.  .zhuan {
  137.  transform: rotateZ(720deg);
  138.  -webkit-transform: rotateZ(720deg);
  139.  -moz-transform: rotateZ(720deg);
  140.  }
  141.  /* end */
  142. </style>
  143. </head>
  144. <body>
  145. <div id=“primary” class=“content-area” style=“”>
  146.  <main id=“main” class=“site-main” role=“main”>
  147.  <div id=“shuoshuo_content”>
  148.  <ul class=“cbp_tmtimeline”>
  149.  <?php query_posts(“post_type=shuoshuo&post_status=publish&posts_per_page=-1”);if (have_posts()) : while (have_posts()) : the_post(); ?>
  150.  <li> <span class=“shuoshuo_author_img”><img src=“http://liuyanzhao.com/wp-content/uploads/2017/01/2017012612411040.png” class=“avatar avatar-48” width=“48” height=“48”></span>
  151.  <a class=“cbp_tmlabel” href=“javascript:void(0)”>
  152.  <p></p>
  153.  <p><?php the_content(); ?></p>
  154.  <p></p>
  155.  <p class=“shuoshuo_time”><i class=“fa fa-clock-o”></i>
  156.  <?php the_time(‘Y年n月j日G:i’); ?>
  157.  </p>
  158.  </a>
  159.  <?php endwhile;endif; ?>
  160.  </li>
  161.  </ul>
  162.  </div>
  163.  </main>
  164.  <!– .site-main –>
  165. </div>
  166. <script type=“text/javascript”>
  167.  $(function () {
  168.  var oldClass = “”;
  169.  var Obj = “”;
  170.  $(“.cbp_tmtimeline li”).hover(function () {
  171.  Obj = $(this).children(“.shuoshuo_author_img”);
  172.  Obj = Obj.children(“img”);
  173.  oldClass = Obj.attr(“class”);
  174.  var newClass = oldClass + ” zhuan”;
  175.  Obj.attr(“class”, newClass);
  176.  }, function () {
  177.  Obj.attr(“class”, oldClass);
  178.  })
  179.  })
  180. </script>
  181. <?php get_sidebar(); ?>
  182. <?php get_footer();?>

接下来就是进入wordpress后台新建页面,标题写“我的说说”,模版选择“说说”,发布,大功告成,之后可通过后台发表说说了。以上不提供样式,请各位自行设置样式,充分发挥自己的想象力。

注:如果不想富媒体说说,单纯地写文字的话,可以把最后一段代码中的<?php the_content(); ?>改成<?php the_title(); ?>,这样以后发表说说只要填写标题就可以了,查找起来也比较方便。如果你用<?php the_content(); ?>,那么你发表说说的时候标题和内容要写成一样,以方便查找,如果你只填写内容,那么你在后台查看说说的时候,显示的列表全是无标题,对于修改比较麻烦。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

所有文章为演示数据,不提供下载地址,版权归原作者所有,仅提供演示效果!

模板下载吧 WP技术 纯代码给wordpress添加说说/微博/微语功能 https://www.mbxzb.cn/blog/file/wordpress/10710.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情

相关文章

评论
暂无评论
点击按钮快速添加回复内容: 支持 高兴 激动 给力 加油 苦寻 生气 回帖 路过 威武 友军 顶贴
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

纯代码给wordpress添加说说/微博/微语功能-海报

分享本文封面