让wordpress留言评论框,增加实用工具及自订简码

完成后,是这样子的
让wordpress留言评论框,增加实用工具及自订简码
步骤一、在主题的comments.php
适当的位置贴入以下语法,至于详细位置,现在很难说了。
早期主题比较简单,现在主题比较复杂。
像我的主题的comments.php里面是没有东西,是在另外一个档案。
 
  • "padding-top: 10px;">
  • "fontcolor">
  • "javascript:SIMPALED.Editor.red()" style="background-color: red">
  • "javascript:SIMPALED.Editor.fuchsia()" style="background-color: fuchsia">
  • "javascript:SIMPALED.Editor.purple()" style="background-color: purple">
  • "javascript:SIMPALED.Editor.orange()" style="background-color: orange">
  • "javascript:SIMPALED.Editor.yellow()" style="background-color: yellow">
  • "javascript:SIMPALED.Editor.gold()" style="background-color: gold">
  • "javascript:SIMPALED.Editor.olive()" style="background-color: olive">
  • "javascript:SIMPALED.Editor.lime()" style="background-color: lime">
  • "javascript:SIMPALED.Editor.aqua()" style="background-color: aqua">
  • "javascript:SIMPALED.Editor.deepskyblue()" style="background-color: deepskyblue">
  • "javascript:SIMPALED.Editor.teal()" style="background-color: teal">
  • "javascript:SIMPALED.Editor.green()" style="background-color: green">
  • "javascript:SIMPALED.Editor.blue()" style="background-color: blue">
  • "javascript:SIMPALED.Editor.maroon()" style="background-color: maroon">
  • "javascript:SIMPALED.Editor.navy()" style="background-color: navy">
  • "javascript:SIMPALED.Editor.gray()" style="background-color: gray">
  • "javascript:SIMPALED.Editor.silver()" style="background-color: silver">
  • "javascript:SIMPALED.Editor.black()" style="background-color: black">
  •  
    步骤二、在主题里面新增js语法
     
     
    1. //评论的js
    2. jQuery(function(){
    3.     jQuery("#fontcolor").hide(500);
    4.     jQuery("#font-color").click(function(){
    5.         jQuery("#fontcolor").toggle(500);
    6.     });
    7. });
    8. jQuery(function(){
    9.     jQuery("#fontcolor").hide();
    10.     jQuery("#comment").click(function(){
    11.     });
    12. });
    13. jQuery(function() {
    14.     function addEditor(a, b, c) {
    15.         if (document.selection) {
    16.             a.focus();
    17.             sel = document.selection.createRange();
    18.             c ? sel.text = b + sel.text + c: sel.text = b;
    19.             a.focus()
    20.         } else if (a.selectionStart || a.selectionStart == '0') {
    21.             var d = a.selectionStart;
    22.             var e = a.selectionEnd;
    23.             var f = e;
    24.             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);
    25.             c ? f += b.length + c.length: f += b.length - e + d;
    26.             if (d == e && c) f -= c.length;
    27.             a.focus();
    28.             a.selectionStart = f;
    29.             a.selectionEnd = f
    30.         } else {
    31.             a.value += b + c;
    32.             a.focus()
    33.         }
    34.     }
    35.     var myDate = new Date();
    36.     var mytime=myDate.toLocaleTimeString()
    37.     var g = document.getElementById('comment') || 0;
    38.     var h = {
    39.         strong: function() {
    40.             addEditor(g, '', '')
    41.         },
    42.         em: function() {
    43.             addEditor(g, '[p]', '[/p]')
    44.         },
    45.         del: function() {
    46.             addEditor(g, '', '')
    47.         },
    48.         sign: function() {
    49.             addEditor(g, '今天签到啦!时间:' + mytime, '')
    50.         },
    51.         red: function() {
    52.             addEditor(g, '"color: red">', '')
    53.         },
    54.         fuchsia: function() {
    55.             addEditor(g, '"color: fuchsia">', '')
    56.         },
    57.         purple: function() {
    58.         addEditor(g, '"color: purple">', '')
    59.         },
    60.         orange: function() {
    61.             addEditor(g, '"color: orange">', '')
    62.         },
    63.         yellow: function() {
    64.         addEditor(g, '"color: yellow">', '')
    65.         },
    66.         olive: function() {
    67.         addEditor(g, '"color: olive">', '')
    68.         },
    69.         lime: function() {
    70.         addEditor(g, '"color: lime">', '')
    71.         },
    72.         maroon: function() {
    73.         addEditor(g, '"color: maroon">', '')
    74.         },
    75.         aqua: function() {
    76.         addEditor(g, '"color: aqua">', '')
    77.         },
    78.         teal: function() {
    79.           addEditor(g, '"color: teal">', '')
    80.         },
    81.         green: function() {
    82.         addEditor(g, '"color: green">', '')
    83.         },
    84.         blue: function() {
    85.             addEditor(g, '"color: blue">', '')
    86.         },
    87.         navy: function() {
    88.             addEditor(g, '"color: navy">', '')
    89.         },
    90.         gray: function() {
    91.             addEditor(g, '"color: gray">', '')
    92.         },
    93.         deepskyblue: function() {
    94.             addEditor(g, '"color: deepskyblue">', '')
    95.         },
    96.         gold: function() {
    97.             addEditor(g, '"color: gold">', '')
    98.         },      silver: function() {
    99.             addEditor(g, '"color: silver">', '')
    100.         },
    101.         black: function() {
    102.             addEditor(g, '"color: black">', '')
    103.         }
    104.     };
    105.     window['SIMPALED'] = {};
    106.     window['SIMPALED']['Editor'] = h
    107. });
    步骤三、增加css的语法
     
     
    1. /*
    2.     ===========================
    3.     按钮
    4.     ===========================
    5. */
    6. .btn-base
    7. {
    8.     width140px !important;
    9.     height49px;
    10.     line-height49px;
    11.     displayinline-block !important;
    12.     cursorpointer;
    13.     border-radius: 5px;
    14.     text-aligncenter;
    15.     margin4px 4px 4px 0;
    16.     color#fff !important;
    17.     font-size14px;
    18.     padding: 0 !important;
    19. }
    20. button:hover, button, .sidebar-nav *, .btn-base, .btn-base:hover, .small-btn-base:hover, a.btn-primary:hover, button:hover, .form-actions a.btn {
    21.     transition: all 200ms linear 0s !important;
    22. }
    23. .btn-base:hover, .small-btn-base:hover {
    24.     backgroundnone repeat scroll 0 0 #262626 !important;
    25.     color#FFFFFF !important;
    26. }
    27. .btn-hot-pink {
    28.     background-color#EE2465;
    29. }
    30. .btn-pink {
    31.     background-color#ec6681;
    32. }
    33. .btn-purple-low {
    34.     background-color#5e5668;
    35. }
    36. .btn-gray {
    37.     background-color#9d9ea6;
    38. }
    39. .btn-blue-1 {
    40.     background-color#278aab;
    41. }
    42. .btn-blue-2 {
    43.     background-color#199dac;
    44. }
    45. .btn-green {
    46.     background-color#4c8624;
    47. }
    48. .btn-blue-3 {
    49.     background-color#7fcdcd;
    50. }
    51. .btn-orange {
    52.     background-color#e15d44;
    53. }
    54. .btn-red-orange {
    55.     background-color#dc4123;
    56. }
    57. .btn-yellow {
    58.     background-color#f9c62d;
    59. }
    60. .btn-blue-4 {
    61.     background-color#09c0be;
    62. }
    63. div .small-btn-base{
    64.     width92px !important;
    65.     text-aligncenter;
    66.     height29px;
    67.     line-height29px;
    68.     displayinline-block !important;
    69.     cursorpointer;
    70.     border-radius: 5px;
    71.     margin4px 4px 4px 0;
    72.     color#fff !important;
    73. }
    74. .round-btn {
    75.     border-radius: 25px !important;
    76.     width137px !important;
    77.     height40px;
    78.     line-height37px;
    79. }
    80. a.btn-primary:hover, button:hover, .form-actions a.btn:hover {
    81.     backgroundnone repeat scroll 0 0 #262626 !important;
    82.     color#FFFFFF !important;
    83. }
    84. button:hover, button, .sidebar-nav *, .btn-base, .btn-base:hover, .small-btn-base:hover, a.btn-primary:hover, button:hover, .form-actions a.btn {
    85.     transition: all 200ms linear 0s !important;
    86. }
    87. /** 评论工具 **/
    88. #smiley{
    89.     padding-bottom10px;
    90. }
    91. #editor_tools{
    92.     height35px;
    93.     line-height32px;
    94. }
    95. #editor_tools a{
    96.     color#777;
    97.     displayinline-block;
    98.     padding: 0 8px;
    99.     height30px;
    100.     border-right1px solid #ddd;
    101. }
    102. #editor_tools a:hover{
    103.     color#333;
    104.     text-decorationnone;
    105. }
    106. #fontcolor{
    107.     width377px;
    108.     height16px;
    109.     line-height20px;
    110.     border2px #e0e0e0 solid;
    111.     z-index: 99999;
    112.     padding2px 0px 2px 2px;
    113. }
    114. #fontcolor a{
    115.     displayinline-block;
    116.     height16px;
    117.     width16px;
    118. }
    完成后,可以自行删减修改

    评论 (0)

    此处尚未发表评论

    留言

    1. 以游客身份发表评论。注册登入到您的帐户。
    附件 (0/ 3)
    分享您的位置