给wordpress博客加上经典一言语句功能

2017年12月21日20:07:58 1 147

看到有的博客在文章底部设置了经典一言语句功能,非常的有意思,每个一言句子也非常的有哲理,所以我在我的博客文章页面也加上了这个经典一言语句功能,下面来看一下我是怎样设置的吧。

布置一言语句接口

将下面的代码保存为index.php放到新建目录yiyan下,目录名称可以随意起,但是最后不要修改,因为到后面怕引用出错。

  1. <?php
  2. //获取句子文件的绝对路径
  3. //如果你介意别人可能会拖走这个文本,可以把文件名自定义一下,或者通过Nginx禁止拉取也行。
  4. $path = dirname(__FILE__);
  5. $file = file($path."/hitokoto.txt");
  6. //随机读取一行
  7. $arr  = mt_rand( 0, count( $file ) - 1 );
  8. $content  = trim($file[$arr]);
  9. //编码判断,用于输出相应的响应头部编码
  10. if (isset($_GET['charset']) && !empty($_GET['charset'])) {
  11.     $charset = $_GET['charset'];
  12.     if (strcasecmp($charset,"gbk") == 0 ) {
  13.         $content = mb_convert_encoding($content,'gbk', 'utf-8');
  14.     }
  15. else {
  16.     $charset = 'utf-8';
  17. }
  18. header("Content-Type: text/html; charset=$charset");
  19. //格式化判断,输出js或纯文本
  20. if ($_GET['format'] === 'js') {
  21.     echo "function hitokoto(){document.write('" . $content ."');}";
  22. else {
  23.     echo $content;
  24. }

下载一言语句文本

我们需要下载一个几百kb的一言语句文本,将这个文本和index.php全部放进yiyan的文件夹上传到网站根目录。

后台调用一言语句功能

我用的是wordpress,我直接打开后台进入编辑wordpress 文章模板的页面,将下面的代码加入到需要放置一言语句的地方,我是放在了文章底部“点赞和分享”的下面,具体可以根据自己需求。

  1. <script type="text/javascript" src="https://你的域名/hitokoto/?format=js&charset=utf-8"></script>
  2. <div id="hitokoto"><script>hitokoto()</script></div>

css美化一言语句功能

没有css排版的一言语句是这样的:

给wordpress博客加上经典一言语句功能

使用css排版之后的语句是这样的:

给wordpress博客加上经典一言语句功能

是还是好看了好多,css排版都可以自己修改的,下面是css美化的代码:

  1.    #yiyan{
  2.     border-left5px solid #2f889a;
  3.     border-right5px solid #2f889a;
  4.     background-color#ebebeb;
  5.     padding10px;
  6.     text-aligncenter;
  7.     color#095AD4;
  8.     margin5px 0 5px 0;
  9. }

 

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  0   博主  1

    • avatar 猿梦 来自天朝的朋友 谷歌浏览器 Windows 7 Admin

      test