讓wordpress留言評論框，增加實用工具及自訂簡碼

點擊數: 2019

文章目錄

  1. 完成後，是這樣子的
  2. 步驟一、在主題的comments.php
  3. 適當的位置貼入以下語法，至於詳細位置，現在很難說了。
  4. 早期主題比較簡單，現在主題比較複雜。
  5. 像我的主題的comments.php裡面是沒有東西，是在另外一個檔案。
  6.  
  7. 步驟二、在主題裡面新增js語法
  8. 步驟三、增加css的語法
  9. 完成後，可以自行刪減修改
完成後，是這樣子的
讓wordpress留言評論框，增加實用工具及自訂簡碼
步驟一、在主題的comments.php
適當的位置貼入以下語法，至於詳細位置，現在很難說了。
早期主題比較簡單，現在主題比較複雜。
像我的主題的comments.php裡面是沒有東西，是在另外一個檔案。
 
 
  1. "editor_tools">
  2. "editor">
  3. class="btn-base small-btn-base round-btn btn-hot-pink" href="javascript:SIMPALED.Editor.strong()">粗體
  4. class="btn-base small-btn-base round-btn btn-pink" href="javascript:SIMPALED.Editor.em()">私密
  5. class="btn-base small-btn-base round-btn btn-blue-1" href="javascript:;" id="font-color">顏色
  6. class="btn-base small-btn-base round-btn btn-blue-2" href="javascript:SIMPALED.Editor.del()">刪除線
  • "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
    3. jQuery(function(){
    4.     jQuery("#fontcolor").hide(500);
    5.     jQuery("#font-color").click(function(){
    6.         jQuery("#fontcolor").toggle(500);
    7.     });
    8. });
    10. jQuery(function(){
    11.     jQuery("#fontcolor").hide();
    12.     jQuery("#comment").click(function(){
    13.     });
    14. });
    15. jQuery(function() {
    16.     function addEditor(a, b, c) {
    17.         if (document.selection) {
    18.             a.focus();
    19.             sel = document.selection.createRange();
    20.             c ? sel.text = b + sel.text + c: sel.text = b;
    21.             a.focus()
    22.         } else if (a.selectionStart || a.selectionStart == '0') {
    23.             var d = a.selectionStart;
    24.             var e = a.selectionEnd;
    25.             var f = e;
    26.             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);
    27.             c ? f += b.length + c.length: f += b.length - e + d;
    28.             if (d == e && c) f -= c.length;
    29.             a.focus();
    30.             a.selectionStart = f;
    31.             a.selectionEnd = f
    32.         } else {
    33.             a.value += b + c;
    34.             a.focus()
    35.         }
    36.     }
    38.     var myDate = new Date();
    39.     var mytime=myDate.toLocaleTimeString()
    41.     var g = document.getElementById('comment') || 0;
    42.     var h = {
    43.         strong: function() {
    44.             addEditor(g, '', '')
    45.         },
    46.         em: function() {
    47.             addEditor(g, '[p]', '[/p]')
    48.         },
    49.         del: function() {
    50.             addEditor(g, '', '')
    51.         },
    52.         sign: function() {
    53.             addEditor(g, '今天簽到啦！時間：' + mytime, '')
    54.         },
    55.         red: function() {
    56.             addEditor(g, '"color: red">', '')
    57.         },
    58.         fuchsia: function() {
    59.             addEditor(g, '"color: fuchsia">', '')
    60.         },
    61.         purple: function() {
    62.         addEditor(g, '"color: purple">', '')
    63.         },
    64.         orange: function() {
    65.             addEditor(g, '"color: orange">', '')
    66.         },
    67.         yellow: function() {
    68.         addEditor(g, '"color: yellow">', '')
    69.         },
    70.         olive: function() {
    71.         addEditor(g, '"color: olive">', '')
    72.         },
    73.         lime: function() {
    74.         addEditor(g, '"color: lime">', '')
    75.         },
    76.         maroon: function() {
    77.         addEditor(g, '"color: maroon">', '')
    78.         },
    79.         aqua: function() {
    80.         addEditor(g, '"color: aqua">', '')
    81.         },
    82.         teal: function() {
    83.           addEditor(g, '"color: teal">', '')
    84.         },
    85.         green: function() {
    86.         addEditor(g, '"color: green">', '')
    87.         },
    88.         blue: function() {
    89.             addEditor(g, '"color: blue">', '')
    90.         },
    91.         navy: function() {
    92.             addEditor(g, '"color: navy">', '')
    93.         },
    94.         gray: function() {
    95.             addEditor(g, '"color: gray">', '')
    96.         },
    97.         deepskyblue: function() {
    98.             addEditor(g, '"color: deepskyblue">', '')
    99.         },
    100.         gold: function() {
    101.             addEditor(g, '"color: gold">', '')
    102.         },      silver: function() {
    103.             addEditor(g, '"color: silver">', '')
    104.         },
    105.         black: function() {
    106.             addEditor(g, '"color: black">', '')
    107.         }
    108.     };
    109.     window['SIMPALED'] = {};
    110.     window['SIMPALED']['Editor'] = h
    111. });
    步驟三、增加css的語法
     
     
    1. /*
    2.     ===========================
    3.     按鈕
    4.     ===========================
    5. */
    6. .btn-base
    7. {
    8.     width: 140px !important;
    9.     height: 49px;
    10.     line-height: 49px;
    11.     display: inline-block !important;
    12.     cursor: pointer;
    13.     border-radius: 5px;
    14.     text-align: center;
    15.     margin: 4px 4px 4px 0;
    16.     color: #fff !important;
    17.     font-size: 14px;
    18.     padding: 0 !important;
    20. }
    21. button:hover, button, .sidebar-nav *, .btn-base, .btn-base:hover, .small-btn-base:hover, a.btn-primary:hover, button:hover, .form-actions a.btn {
    22.     transition: all 200ms linear 0s !important;
    23. }
    25. .btn-base:hover, .small-btn-base:hover {
    26.     background: none repeat scroll 0 0 #262626 !important;
    27.     color: #FFFFFF !important;
    28. }
    29. .btn-hot-pink {
    30.     background-color: #EE2465;
    31. }
    33. .btn-pink {
    34.     background-color: #ec6681;
    35. }
    36. .btn-purple-low {
    37.     background-color: #5e5668;
    38. }
    39. .btn-gray {
    40.     background-color: #9d9ea6;
    41. }
    42. .btn-blue-1 {
    43.     background-color: #278aab;
    44. }
    45. .btn-blue-2 {
    46.     background-color: #199dac;
    47. }
    48. .btn-green {
    49.     background-color: #4c8624;
    50. }
    51. .btn-blue-3 {
    52.     background-color: #7fcdcd;
    53. }
    54. .btn-orange {
    55.     background-color: #e15d44;
    56. }
    57. .btn-red-orange {
    58.     background-color: #dc4123;
    59. }
    60. .btn-yellow {
    61.     background-color: #f9c62d;
    62. }
    63. .btn-blue-4 {
    64.     background-color: #09c0be;
    65. }
    66. div .small-btn-base{
    67.     width: 92px !important;
    68.     text-align: center;
    69.     height: 29px;
    70.     line-height: 29px;
    71.     display: inline-block !important;
    72.     cursor: pointer;
    73.     border-radius: 5px;
    74.     margin: 4px 4px 4px 0;
    75.     color: #fff !important;
    76. }
    77. .round-btn {
    78.     border-radius: 25px !important;
    79.     width: 137px !important;
    80.     height: 40px;
    81.     line-height: 37px;
    82. }
    84. a.btn-primary:hover, button:hover, .form-actions a.btn:hover {
    85.     background: none repeat scroll 0 0 #262626 !important;
    86.     color: #FFFFFF !important;
    87. }
    88. button:hover, button, .sidebar-nav *, .btn-base, .btn-base:hover, .small-btn-base:hover, a.btn-primary:hover, button:hover, .form-actions a.btn {
    89.     transition: all 200ms linear 0s !important;
    90. }
    92. /** 評論工具 **/
    93. #smiley{
    94.     padding-bottom: 10px;
    95. }
    96. #editor_tools{
    98.     height: 35px;
    99.     line-height: 32px;
    102. }
    103. #editor_tools a{
    104.     color: #777;
    105.     display: inline-block;
    106.     padding: 0 8px;
    107.     height: 30px;
    108.     border-right: 1px solid #ddd;
    109. }
    110. #editor_tools a:hover{
    111.     color: #333;
    112.     text-decoration: none;
    113. }
    114. #fontcolor{
    115.     width: 377px;
    116.     height: 16px;
    117.     line-height: 20px;
    118.     border: 2px #e0e0e0 solid;
    119.     z-index: 99999;
    120.     padding: 2px 0px 2px 2px;
    121. }
    122. #fontcolor a{
    123.     display: inline-block;
    124.     height: 16px;
    125.     width: 16px;
    126. }
    完成後，可以自行刪減修改

    評論 (0)

    此處尚未發表評論

    留言

    1. 以遊客身份發表評論。 註冊或登入到您的帳戶。
    背景
    附件 (0 / 3)
    分享您的位置