wordpress Autumn-pro主题添加OwO表情

之前在别人的博客看见评论框可以输入表情,如阿鲁QQ表情等,觉得挺不错就打算移植到自己的博客上,废话不多说说,教程开始

效果如上图

第一步:引入css与js

在主题根目录找到comments.php文件,并在其顶部添加如下代码

<?php

define( 'OwO_alu', get_bloginfo('template_directory').'/OwO/alu' );
define( 'OwO_paopao', get_bloginfo('template_directory').'/OwO/paopao' );
wp_enqueue_script( 'OwO', get_template_directory_uri() . '/static/lib/OwO/OwO.min.js' );
wp_enqueue_style( 'OwO', get_template_directory_uri() . '/static/lib/OwO/OwO.min.css' );
wp_enqueue_script( 'OwO-Script', get_template_directory_uri() . '/static/lib/OwO/index.js' );
wp_localize_script('OwO-Script', 'OwOMeta', array(
    'api' => get_template_directory_uri() . '/static/lib/OwO.min.json',
));
?>

接下来复制文件夹lib到主题static目录中,复制OwO文件夹里面的OwO文件夹到主题根目录,文件下载链接在文章最后

然后再comments.php评论表单区域添加如下代码:
'comment_notes_after' => '<div class="OwO" style="margin-bottom: 10px;"></div>',

 

这个时候我们的评论区应该就有出现一个表情输入按钮了,点击表情按钮就会弹出,但是此时你会发现输入表情过后点击发表并不能把表情显示在评论区中,显示的只有相应的 文字,要解决这个问题,我们需要在主题目录下function.php中添加数组,这个时候就要用到我们之前在comments.php中定义的两个函数:
define(‘OwO_alu’,get_bloginfo(‘template_directory’).’/OwO/alu’ );
define(‘OwO_paopao’,get_bloginfo(‘template_directory’).’/OwO/paopao’ );
接下来我们打开function.php文件,在最后添加如下代码:
添加完成后就能正常的输入表情了。

 

然后我们来美化一下表情框的滑动条,在主题style.css或者OwO.main.css中添加如下代码:
.OwO-items::-webkit-scrollbar-track-piece{background:#eee}.OwO-items::-webkit-scrollbar{width:6px;height:6px}.OwO-items::-webkit-scrollbar-thumb{height:40px;border-radius:4px;background-color:#A5A5A5}.OwO-items::-webkit-scrollbar-thumb:hover{background-color:#bbb}

这样就好看多了,尽情享受吧!

您需要先支付 0.5元 才能下载此资源!立即支付

z1485671578

我是一个boy!!!爱折腾,wp新手司机,折腾blog纯属个人兴趣,分享个人经验,然后嘛,秀恩爱嘻嘻哼哼,其他的还没想好怎么写

相关推荐

2 条评论

  1. z1485671578

    抽烟大爷,近来坐坐吗

发表评论

您的电子邮件地址不会被公开,必填项已用*标注。

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

wordpress Autumn-pro主题添加OwO表情