本教程以 DUX 主题为例进行说明，其它主题请自行修改代码，代码部分来自网络，具体是谁最先写出来的，已经不知道了，详细效果请看下图：
注意：对主题进行修改操作之前请自行备份需要修改的文件，以防误操作引起的网站崩溃！！！
具体步骤:
新建 PHP 文件
创建一个新的 PHP 文件，并在其中插入以下代码。文件名可以自己取。它以 smiley.php 的名字命名。创建完成后，将 smiley.php 文件放入主题根目录，以便以后检索。事实上，你也可以把它放在网站的任何目录中，只是要确保以后检索引用代码时路径是正确的。
javatag新的 JS 文件
创建一个新的 JS 文件，并向其中抛出以下代码。文件名可以自己取。它是以 comments.js 命名的，创建完成后，将 comments.js 文件扔进主题根目录，以便以后检索。事实上，你也可以把它放在网站的任何一个目录下，只是在检索后面的引用代码时要确保路径是正确的。DUX 主题可以完全向 comment.js 文件添加代码。
如果是新建的 comments.js 文件，还需要在 footer.php 文件里调用该 JS，代码放在上面一行就行：
评论调用代码
找到自己主题当中的 comments.php 在里面适当的位置添加下面代码：
的外围。
CSS 样式
以下样式以 DUX 主题为例，把下面的 CSS 样式放倒自己主题当中的 main.css
/* 表情 */
#smiley{
background-color: #EEEEEE;
padding: 3px 5px;
position: relative;
line-height: 0;
}
#smiley img{display: inline-block;padding: 14px;cursor: pointer}
#smiley::after{
position: absolute;
top: -8px;
left: 11px;
width: 0;
height: 0;
vertical-align: top;
border-bottom: 5px solid #1FA3E1;
border-right: 5px solid rgba(0, 0, 0, 0);
border-left: 5px solid rgba(0, 0, 0, 0);
content: "";
}
/* 评论框字体颜色 */
#fontcolor{
background-color: #EEEEEE;
padding: 3px 5px;
line-height:20px;
padding: 5px 0px 2px 10px;
z-index:99999;
}
#fontcolor a{display:inline-block;height:20px;width:21px}
#fontcolor::after{
border-bottom: 5px solid #1FA3E1;
border-left: 5px solid transparent;
content: "";
border-right: 5px solid transparent;
vertical-align: top;
height: 0px;
width: 0px;
left: 88.5px;
top: 109.5px;
position: absolute;
}
/* 评论工具箱 */
.position .fa {
line-height: 40px;
padding: 1px 8px;
}
.position i.fa.fa-edit {
padding: 1px 0 8px 1px;
}
@media only screen and (max-width:640px) {
.position {display: none;}
}
/*机器人验证*/
.pvt {
position: absolute;
right: 100px;
margin: 9px 10px;
font-weight: normal;
}
/*私密评论*/
/*.demo--label {
margin:0px 0px 0px 190px;
display:inline-block
}*/
.demo--radio {
display:none
}
.demo--radioInput {
background-color:#fff;
border:1px solid rgba(0,0,0,.15);
border-radius:100%;
display:inline-block;
height:16px;
margin-right:4px;
margin-top:-3px;
vertical-align:middle;
width:16px;
line-height:1;
}
.demo--radio:checked+.demo--radioInput:after {
background-color:#44a340;
border-radius:100%;
content:"";
display:inline-block;
height:12px;
margin:1px;
width:12px
}
.demo--checkbox.demo--radioInput,.demo--radio:checked+.demo--checkbox.demo--radioInput:after {
border-radius:0
}
禁用 Emoji 表情及恢复图片表情
在主题的 functions.php 添加代码的代码即可：
/**
* Disable the emoji's
*/
function disable_emojis() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
add_action( 'init', 'disable_emojis' );
/**
* Filter function used to remove the tinymce emoji plugin.
*
* @param array $plugins
* @return array Difference betwen the two arrays
*/
function disable_emojis_tinymce( $plugins ) {
return array_diff( $plugins, array( 'wpemoji' ) );
}
/**
* WordPress 4.2 修复图片表情
*
*/
function smilies_reset() {
global $wpsmiliestrans, $wp_smiliessearch;
// don't bother setting up smilies if they are disabled
if ( !get_option( 'use_smilies' ) )
return;
$wpsmiliestrans = array(
':?:' => 'icon_question.gif',
':razz:' => 'icon_razz.gif',
':sad:' => 'icon_sad.gif',
':evil:' => 'icon_evil.gif',
':!:' => 'icon_exclaim.gif',
':smile:' => 'icon_smile.gif',
':oops:' => 'icon_redface.gif',
':grin:' => 'icon_biggrin.gif',
':eek:' => 'icon_surprised.gif',
':shock:' => 'icon_eek.gif',
':???:' => 'icon_confused.gif',
':cool:' => 'icon_cool.gif',
':lol:' => 'icon_lol.gif',
':mad:' => 'icon_mad.gif',
':twisted:' => 'icon_twisted.gif',
':roll:' => 'icon_rolleyes.gif',
':wink:' => 'icon_wink.gif',
':idea:' => 'icon_idea.gif',
':arrow:' => 'icon_arrow.gif',
':neutral:' => 'icon_neutral.gif',
':cry:' => 'icon_cry.gif',
':mrgreen:' => 'icon_mrgreen.gif',
);
}
smilies_reset();
好了，至此全部完成。
转载请注明：汇站网 » 给 WordPress 评论框添加表情、图片、登录等功能
