给wordpress评论处添加表情及工具

wordpress评论框仅仅只有昵称、邮箱、站点和评论内容的话,会不会显得太简单了?当然追求简洁的人来说,可能觉得站点都有点多余,然后,大叔要说的是给wordpress评论处添加实用工具,丰富起我们的评论框吧!

直接给教程吧,comments.php加入按钮

<div id="smiley">   
    <?php 
    include(TEMPLATEPATH . '/smiley.php');      //你主?引用表情的文件 
    /* 如果你使用「Custom Smilies」外?欤???h除上面那行,?K且去除下面?行的注? */ 
    //cs_print_smilies(); 
    ?> 
</div> 
<div id="editor_tools"> 
    <div id="editor"> 
        <a href="javascript:;" id="comment-smiley"><b>表情</b></a> 
        <a href="javascript:SIMPALED.Editor.strong()"><b>粗体</b></a> 
        <a href="javascript:SIMPALED.Editor.em()"><b>斜体</b></a> 
        <a href="javascript:;" id="font-color"><b>颜色</b></a> 
        <a href="javascript:SIMPALED.Editor.quote()"><b>引用</b></a> 
        <a href="javascript:SIMPALED.Editor.ahref()"><b>链接</b></a> 
        <a href="javascript:SIMPALED.Editor.del()"><b>删除线</b></a> 
        <a href="javascript:SIMPALED.Editor.underline()"><b>下划线</b></a> 
        <a href="javascript:SIMPALED.Editor.code()"><b>插代码</b></a> 
        <a href="javascript:SIMPALED.Editor.img()"><b>插图片</b></a> 
    </div> 
</div> 
<div style="padding-top: 10px;"></div> 
<div id="fontcolor">   
    <a href="javascript:SIMPALED.Editor.red()" style="background-color: red"></a> 
    <a href="javascript:SIMPALED.Editor.fuchsia()" style="background-color: fuchsia"></a> 
    <a href="javascript:SIMPALED.Editor.purple()" style="background-color: purple"></a> 
    <a href="javascript:SIMPALED.Editor.orange()" style="background-color: orange"></a> 
    <a href="javascript:SIMPALED.Editor.yellow()" style="background-color: yellow"></a> 
    <a href="javascript:SIMPALED.Editor.gold()" style="background-color: gold"></a> 
    <a href="javascript:SIMPALED.Editor.olive()" style="background-color: olive"></a> 
    <a href="javascript:SIMPALED.Editor.lime()" style="background-color: lime"></a> 
    <a href="javascript:SIMPALED.Editor.aqua()" style="background-color: aqua"></a> 
    <a href="javascript:SIMPALED.Editor.deepskyblue()" style="background-color: deepskyblue"></a> 
    <a href="javascript:SIMPALED.Editor.teal()" style="background-color: teal"></a> 
    <a href="javascript:SIMPALED.Editor.green()" style="background-color: green"></a> 
    <a href="javascript:SIMPALED.Editor.blue()" style="background-color: blue"></a> 
    <a href="javascript:SIMPALED.Editor.maroon()" style="background-color: maroon"></a> 
    <a href="javascript:SIMPALED.Editor.navy()" style="background-color: navy"></a> 
    <a href="javascript:SIMPALED.Editor.gray()" style="background-color: gray"></a> 
    <a href="javascript:SIMPALED.Editor.silver()" style="background-color: silver"></a> 
    <a href="javascript:SIMPALED.Editor.black()" style="background-color: black"></a>   
</div> 
style.css内加入样式表:

/** ??工具 **/ 
#smiley{ 
    padding-bottom: 10px; 

#editor_tools{ 
    width: 600px; 
    height: 26px; 
    line-height: 26px; 
    border: 1px #e0e0e0 solid; 
    border-radius: 2px 2px 0 0; 
    overflow: hidden; 
    z-index: 99999; 

#editor_tools a{ 
    color: #777; 
    display: inline-block; 
    padding: 0 8px; 
    height: 26px; 
    border-right: 1px solid #ddd; 

#editor_tools a:hover{ 
    color: #333; 
    text-decoration: none; 

#fontcolor{ 
    width: 377px; 
    height: 16px; 
    line-height: 20px; 
    border: 2px #e0e0e0 solid; 
    z-index: 99999; 
    padding: 2px 0px 2px 2px; 

#fontcolor a{ 
    display: inline-block; 
    height: 16px; 
    width: 16px; 

增加一个js,例comments.js,期内代码如下:

jQuery(function(){ 
    jQuery("#smiley").hide(500); 
    jQuery("#comment-smiley").click(function(){ 
        jQuery("#smiley").toggle(500); 
    }); 
}); 
jQuery(function(){ 
    jQuery("#fontcolor").hide(500); 
    jQuery("#font-color").click(function(){ 
        jQuery("#fontcolor").toggle(500); 
    }); 
});   
jQuery(function(){ 
    jQuery("#smiley").hide(); 
    jQuery("#comment").click(function(){ 
    }); 
}); 
jQuery(function(){ 
    jQuery("#fontcolor").hide(); 
    jQuery("#comment").click(function(){ 
    }); 
}); 
jQuery(function() { 
    function addEditor(a, b, c) { 
        if (document.selection) { 
            a.focus(); 
            sel = document.selection.createRange(); 
            c ? sel.text = b + sel.text + c: sel.text = b; 
            a.focus() 
        } else if (a.selectionStart || a.selectionStart == '0') { 
            var d = a.selectionStart; 
            var e = a.selectionEnd; 
            var f = e; 
            c ? a.value = a.value.substring(0, d) + b + a.value.substring(d, e) + c + a.value.substring(e, a.value.length) : a.value = a.value.substring(0, d) + b + a.value.substring(e, a.value.length); 
            c ? f += b.length + c.length: f += b.length - e + d; 
            if (d == e && c) f -= c.length; 
            a.focus(); 
            a.selectionStart = f; 
            a.selectionEnd = f 
        } else { 
            a.value += b + c; 
            a.focus() 
        } 
    } 
     
    var myDate = new Date(); 
    var mytime=myDate.toLocaleTimeString() 
     
    var g = document.getElementById('comment') || 0; 
    var h = { 
        strong: function() { 
            addEditor(g, '<b>', '</b>') 
        }, 
        em: function() { 
            addEditor(g, '<i>', '</i>') 
        }, 
        del: function() { 
            addEditor(g, '<del>', '</del>') 
        }, 
        underline: function() { 
            addEditor(g, '<u>', '</u>') 
        }, 
        quote: function() { 
            addEditor(g, '<blockquote>', '</blockquote>') 
        }, 
        ahref: function() { 
            var a = prompt('??入?接地址', 'http://'); 
            var b = prompt('??入?接?热?', ''); 
            if (a) { 
                addEditor(g, '<a href="' + a + '">' + b + '</a>', '') 
            } 
        }, 
        img: function() { 
            var a = prompt('??入?D片地址', 'http://'); 
            if (a) { 
                addEditor(g, '<img src="' + a + '" />', '') 
            } 
        }, 
        sign: function() { 
            addEditor(g, '今天?到啦!?r?:' + mytime, '') 
        }, 
        code: function() { 
            addEditor(g, '<pre>', '</pre>') 
        }, 
        red: function() { 
            addEditor(g, '<span style="color: red">', '</span>') 
        }, 
        fuchsia: function() { 
            addEditor(g, '<span style="color: fuchsia">', '</span>') 
        }, 
        purple: function() { 
        addEditor(g, '<span style="color: purple">', '</span>') 
        }, 
        orange: function() { 
            addEditor(g, '<span style="color: orange">', '</span>') 
        }, 
        yellow: function() { 
        addEditor(g, '<span style="color: yellow">', '</span>') 
        }, 
        olive: function() { 
        addEditor(g, '<span style="color: olive">', '</span>') 
        }, 
        lime: function() { 
        addEditor(g, '<span style="color: lime">', '</span>') 
        }, 
        maroon: function() { 
        addEditor(g, '<span style="color: maroon">', '</span>') 
        }, 
        aqua: function() { 
        addEditor(g, '<span style="color: aqua">', '</span>') 
        }, 
        teal: function() { 
          addEditor(g, '<span style="color: teal">', '</span>') 
        }, 
        green: function() { 
        addEditor(g, '<span style="color: green">', '</span>') 
        }, 
        blue: function() { 
            addEditor(g, '<span style="color: blue">', '</span>') 
        }, 
        navy: function() { 
            addEditor(g, '<span style="color: navy">', '</span>') 
        }, 
        gray: function() { 
            addEditor(g, '<span style="color: gray">', '</span>') 
        }, 
        deepskyblue: function() { 
            addEditor(g, '<span style="color: deepskyblue">', '</span>') 
        }, 
        gold: function() { 
            addEditor(g, '<span style="color: gold">', '</span>') 
        },      silver: function() { 
            addEditor(g, '<span style="color: silver">', '</span>') 
        }, 
        black: function() { 
            addEditor(g, '<span style="color: black">', '</span>') 
        } 
    }; 
    window['SIMPALED'] = {}; 
    window['SIMPALED']['Editor'] = h 
}); 
调用这个JS

<script src="<?php bloginfo('template_directory'); ?>/js/comments.js"></script> 
那么,在去看看你们的评论框吧,是不是碉堡了,恩,可能样式还需要修改修改,才能符合每个人不同的风格

时间: 2024-10-28 16:53:40

给wordpress评论处添加表情及工具的相关文章

WordPress中使主题支持小工具以及添加插件启用函数_php实例

让主题支持小工具WordPress 的小工具(widget)是一大特色,它让用户自由拖动组合内容,而且任何插件和主题都可以添加一个额外的小工具,增加扩展性. 默认情况下,一个主题并不会支持小工具,需要主题开发者启用小工具功能并把小工具在相应的前台位置调用出来,这样用户才能在后台直接拖动生成侧边栏. 本文就来教你如何激活小工具功能,并且添加一个侧边栏,最后在前台显示出来. 注册侧边栏 默认的,后台外观下是没有 "小工具" 这个菜单按钮的,如果想要让他出现,就至少需要注册一个侧边栏,否则即

WordPress教程:TinyMCE编辑器和评论框添加QuickTag

下面就说一下两个简单的方法来开启TinyMCE编辑器和前台平轮框的QuickTag.调用的都是 WordPress 内置的 QuickTag. 使用AddQuicktag 插件增强TinyMCE编辑器 AddQuicktag 是针对WordPress自带的 TinyMCE编辑器的增强插件,主要是让你快速添加自定义按钮.你只需简单添加需要的快捷按钮,就可以了,不用再担心跟换主题造成的不便.支持可视化模式和Html编辑模式.还支持备份和恢复! 1.直接在后台插件安装界面搜索 AddQuicktag

[Eclipse]GEF入门系列(六、添加菜单和工具条)

我发现一旦稍稍体会到GEF的妙处,就会很自然的被它吸引住.不仅是因为用它做出的图 形界面好看,更重要的是,UI中最复杂和细微的问题,在GEF的设计中无不被周到的考虑并以 适当的模式解决,当你了解了这些,完全可以把这些解决方法加以转换,用来解决其他领域 的设计问题.去年黄老大在一个GEF项目结束后,仍然没有放弃对它的继续研究,现在甚至利 用业余时间开发了基于GEF的SWT/JFace增强软件包,Eclipse和GEF的魅力可见一斑.我相信 在未来的两年里,由于RCP/GEF等技术的成熟,Java

WordPress评论列表中获取楼层或序号

我们的评论列表中,偶尔我们希望获得这个评论的序号,如果能够按照一定的规律获得序号,那么就可以为特定的评论添加一些新信息,例如为评论添加楼层,或者在第5条评论后添加一段广告.但可惜的是,wordpress本身是没有提供这个功能的,我们无法在mytheme_comment中拥有一个全局参数来获取每篇文章的评论序号.对于如何构建自己的评论列表如何自己设计wordpress评论列表及评论框一文说的非常干净,如果你已经对构建问题非常清楚,应该就会发现本文所提出来的问题. 我们来实现本文要实现的具体目标吧.

给WordPress评论表单增加字段的方法

问题描述 用 wp 的友友门都知道,wordpress评论表单的字段都只有4个,昵称.邮箱.网址.内容:评论是存在wp_comments表中的,如果要加上其它额外字段就得另寻它法了,例如:tel电话字段. 解决思路 Wp_comments 也有一个与之对应的meta表,叫wp_commentmeta,Posts文章表可以用postmeta存储一些额外的信息,那么comment也可以用commentmeta存储额外的评论字段.如果你装了多说评论插件,那么你再看看wp_commentmeta表,多说

在RichEdit中添加表情图象的类

说明 本文根据VC知识库<在线杂志>的第30期的一篇文章:<类似 MSN 信息发送框的制作>,介绍了一个可以在RichEdit中添加表情图象的类CFaceEdit. 以下是使用这个类的程序截图: 图一 CFaceEdit类的使用 使用方法 我们可以先看一下它的使用方法: //将对话框类成员变量由CRichEditCtrl改为CFaceEdit CFaceEdit m_FaceEdit; //自定义一组表情 CString pSymbol[] = {":)", &

ppt2007怎样添加显示开发者工具

  ppt2007添加显示开发者工具的方法: 打开PPT2007,单击左上角的office图标,在弹出的下拉列表中单击"Powerpoint选项"按钮. 在"PowerPoint选项"对话框中,点击左侧的常用,将"在功能区显示'开发工具选项卡'"勾选,最后点击确定. 最终你会在PPT顶端看到"开发工具"选项卡,如下图.

怎样给WinPE添加文件校验工具

  怎样给WinPE添加文件校验工具           在WinPE下有没有办法快速校验文件的属性呢?答案是有的,下面就为大家说说为pe增加右键属性文件校验功能,方法如下: 首先把HashTab.dll文件拷贝到system32文件夹下. 然后在REGDOC.CMD(也有可能是别的名字,或者没有)中加入如下句子: rem 关联文件校验 regsvr32 /s "%WINDIR%SYSTEM32HashTab.dll" reg add "HKU.DEFAULTSoftware

美拍怎么添加表情文字在哪

  当你在玩美拍时,一定会发现美拍多出了表情加语音或是字幕的新功能!没错!这就是美拍所推荐的新玩法,新增表情文哦!大家可以在自己的照片中添加表情字幕或语音,超级新颖的新玩法,本文将为大家带来教程,让大家轻松玩转.   美拍最新推出一项表情文的功能,这个是在图片上面的新玩法而不是美拍以前的短视频哦,所以说美拍已经不局限于短视频也要涉足图片领域了,你可以在图片上加入文字.表情和语音,就像nice的贴标签一样,然后分享给朋友,感觉给照片赋予了更强大的功能,表达的内容更丰富了,下面就来说说美拍表情文怎么