GG资源网
当前位置：GG资源网 > 建站教程 > WordPress博客添加评论输入特效(WordPress自定义文章类型添加编辑区功能函数：add_post_type_support)
建站教程

WordPress博客添加评论输入特效(WordPress自定义文章类型添加编辑区功能函数：add_post_type_support)

WordPress博客添加评论输入特效

给WordPress博客评论，搜索框添加输入特效，代码来自闲鱼博客，原作者已经不知道是谁了，看到好多人想要，我就分享给大家。

调用代码

  1. <script src=\"JS文件路径\"></script>

  2. <script>

  3. POWERMODE.colorful = true; // make power mode colorful

  4. POWERMODE.shake = false; // turn off shake

  5. document.body.addEventListener(\'input\', POWERMODE);

  6. </script>

JS文件代码

  1. /*??*/

  2. /*??:www.mom1.cn*/

  3. (function webpackUniversalModuleDefinition(root, factory) {

  4. if(typeof exports === \'object\' && typeof module === \'object\')

  5. module.exports = factory();

  6. else if(typeof define === \'function\' && define.amd)

  7. define([], factory);

  8. else if(typeof exports === \'object\')

  9. exports[\"POWERMODE\"] = factory();

  10. else

  11. root[\"POWERMODE\"] = factory();

  12. })(this, function() {

  13. return /******/ (function(modules) { // webpackBootstrap

  14. /******/ // The module cache

  15. /******/ var installedModules = {};

  16. /******/ // The require function

  17. /******/ function __webpack_require__(moduleId) {

  18. /******/ // Check if module is in cache

  19. /******/ if(installedModules[moduleId])

  20. /******/ return installedModules[moduleId].exports;

  21. /******/ // Create a new module (and put it into the cache)

  22. /******/ var module = installedModules[moduleId] = {

  23. /******/ exports: {},

  24. /******/ id: moduleId,

  25. /******/ loaded: false

  26. /******/ };

  27. /******/ // Execute the module function

  28. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

  29. /******/ // Flag the module as loaded

  30. /******/ module.loaded = true;

  31. /******/ // Return the exports of the module

  32. /******/ return module.exports;

  33. /******/ }

  34. /******/ // expose the modules object (__webpack_modules__)

  35. /******/ __webpack_require__.m = modules;

  36. /******/ // expose the module cache

  37. /******/ __webpack_require__.c = installedModules;

  38. /******/ // __webpack_public_path__

  39. /******/ __webpack_require__.p = \"\";

  40. /******/ // Load entry module and return exports

  41. /******/ return __webpack_require__(0);

  42. /******/ })

  43. /************************************************************************/

  44. /******/ ([

  45. /* 0 */

  46. /***/ function(module, exports, __webpack_require__) {

  47. \'use strict\';

  48. var canvas = document.createElement(\'canvas\');

  49. canvas.width = window.innerWidth;

  50. canvas.height = window.innerHeight;

  51. canvas.style.cssText = \'position:fixed;top:0;left:0;pointer-events:none;z-index:999999\';

  52. window.addEventListener(\'resize\', function () {

  53. canvas.width = window.innerWidth;

  54. canvas.height = window.innerHeight;

  55. });

  56. document.body.appendChild(canvas);

  57. var context = canvas.getContext(\'2d\');

  58. var particles = [];

  59. var particlePointer = 0;

  60. POWERMODE.shake = true;

  61. function getRandom(min, max) {

  62. return Math.random() * (max - min) + min;

  63. }

  64. function getColor(el) {

  65. if (POWERMODE.colorful) {

  66. var u = getRandom(0, 360);

  67. return \'hsla(\' + getRandom(u - 10, u + 10) + \', 100%, \' + getRandom(50, 80) + \'%, \' + 1 + \')\';

  68. } else {

  69. return window.getComputedStyle(el).color;

  70. }

  71. }

  72. function getCaret() {

  73. var el = document.activeElement;

  74. var bcr;

  75. if (el.tagName === \'TEXTAREA\' ||

  76. (el.tagName === \'INPUT\' && el.getAttribute(\'type\') === \'text\')) {

  77. var offset = __webpack_require__(1)(el, el.selectionStart);

  78. bcr = el.getBoundingClientRect();

  79. return {

  80. x: offset.left + bcr.left,

  81. y: offset.top + bcr.top,

  82. color: getColor(el)

  83. };

  84. }

  85. var selection = window.getSelection();

  86. if (selection.rangeCount) {

  87. var range = selection.getRangeAt(0);

  88. var startNode = range.startContainer;

  89. if (startNode.nodeType === document.TEXT_NODE) {

  90. startNode = startNode.parentNode;

  91. }

  92. bcr = range.getBoundingClientRect();

  93. return {

  94. x: bcr.left,

  95. y: bcr.top,

  96. color: getColor(startNode)

  97. };

  98. }

  99. return { x: 0, y: 0, color: \'transparent\' };

  100. }

  101. function createParticle(x, y, color) {

  102. return {

  103. x: x,

  104. y: y,

  105. alpha: 1,

  106. color: color,

  107. velocity: {

  108. x: -1 + Math.random() * 2,

  109. y: -3.5 + Math.random() * 2

  110. }

  111. };

  112. }

  113. function POWERMODE() {

  114. { // spawn particles

  115. var caret = getCaret();

  116. var numParticles = 5 + Math.round(Math.random() * 10);

  117. while (numParticles--) {

  118. particles[particlePointer] = createParticle(caret.x, caret.y, caret.color);

  119. particlePointer = (particlePointer + 1) % 500;

  120. }

  121. }

  122. { // shake screen

  123. if (POWERMODE.shake) {

  124. var intensity = 1 + 2 * Math.random();

  125. var x = intensity * (Math.random() > 0.5 ? -1 : 1);

  126. var y = intensity * (Math.random() > 0.5 ? -1 : 1);

  127. document.body.style.marginLeft = x + \'px\';

  128. document.body.style.marginTop = y + \'px\';

  129. setTimeout(function() {

  130. document.body.style.marginLeft = \'\';

  131. document.body.style.marginTop = \'\';

  132. }, 75);

  133. }

  134. }

  135. };

  136. POWERMODE.colorful = false;

  137. function loop() {

  138. requestAnimationFrame(loop);

  139. context.clearRect(0, 0, canvas.width, canvas.height);

  140. for (var i = 0; i < particles.length; ++i) {

  141. var particle = particles[i];

  142. if (particle.alpha <= 0.1) continue;

  143. particle.velocity.y += 0.075;

  144. particle.x += particle.velocity.x;

  145. particle.y += particle.velocity.y;

  146. particle.alpha *= 0.96;

  147. context.globalAlpha = particle.alpha;

  148. context.fillStyle = particle.color;

  149. context.fillRect(

  150. Math.round(particle.x - 1.5),

  151. Math.round(particle.y - 1.5),

  152. 3, 3

  153. );

  154. }

  155. }

  156. requestAnimationFrame(loop);

  157. module.exports = POWERMODE;

  158. /***/ },

  159. /* 1 */

  160. /***/ function(module, exports) {

  161. /* jshint browser: true */

  162. (function () {

  163. // The properties that we copy into a mirrored div.

  164. // Note that some browsers, such as Firefox,

  165. // do not concatenate properties, i.e. padding-top, bottom etc. -> padding,

  166. // so we have to do every single property specifically.

  167. var properties = [

  168. \'direction\', // RTL support

  169. \'boxSizing\',

  170. \'width\', // on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does

  171. \'height\',

  172. \'overflowX\',

  173. \'overflowY\', // copy the scrollbar for IE

  174. \'borderTopWidth\',

  175. \'borderRightWidth\',

  176. \'borderBottomWidth\',

  177. \'borderLeftWidth\',

  178. \'borderStyle\',

  179. \'paddingTop\',

  180. \'paddingRight\',

  181. \'paddingBottom\',

  182. \'paddingLeft\',

  183. // https://developer.mozilla.org/en-US/docs/Web/CSS/font

  184. \'fontStyle\',

  185. \'fontVariant\',

  186. \'fontWeight\',

  187. \'fontStretch\',

  188. \'fontSize\',

  189. \'fontSizeAdjust\',

  190. \'lineHeight\',

  191. \'fontFamily\',

  192. \'textAlign\',

  193. \'textTransform\',

  194. \'textIndent\',

  195. \'textDecoration\', // might not make a difference, but better be safe

  196. \'letterSpacing\',

  197. \'wordSpacing\',

  198. \'tabSize\',

  199. \'MozTabSize\'

  200. ];

  201. var isFirefox = window.mozInnerScreenX != null;

  202. function getCaretCoordinates(element, position, options) {

  203. var debug = options && options.debug || false;

  204. if (debug) {

  205. var el = document.querySelector(\'#input-textarea-caret-position-mirror-div\');

  206. if ( el ) { el.parentNode.removeChild(el); }

  207. }

  208. // mirrored div

  209. var div = document.createElement(\'div\');

  210. div.id = \'input-textarea-caret-position-mirror-div\';

  211. document.body.appendChild(div);

  212. var style = div.style;

  213. var computed = window.getComputedStyle? getComputedStyle(element) : element.currentStyle; // currentStyle for IE < 9

  214. // default textarea styles

  215. style.whiteSpace = \'pre-wrap\';

  216. if (element.nodeName !== \'INPUT\')

  217. style.wordWrap = \'break-word\'; // only for textarea-s

  218. // position off-screen

  219. style.position = \'absolute\'; // required to return coordinates properly

  220. if (!debug)

  221. style.visibility = \'hidden\'; // not \'display: none\' because we want rendering

  222. // transfer the element\'s properties to the div

  223. properties.forEach(function (prop) {

  224. style[prop] = computed[prop];

  225. });

  226. if (isFirefox) {

  227. // Firefox lies about the overflow property for textareas: https://bugzilla.mozilla.org/show_bug.cgi?id=984275

  228. if (element.scrollHeight > parseInt(computed.height))

  229. style.overflowY = \'scroll\';

  230. } else {

  231. style.overflow = \'hidden\'; // for Chrome to not render a scrollbar; IE keeps overflowY = \'scroll\'

  232. }

  233. div.textContent = element.value.substring(0, position);

  234. // the second special handling for input type=\"text\" vs textarea: spaces need to be replaced with non-breaking spaces - http://stackoverflow.com/a/13402035/1269037

  235. if (element.nodeName === \'INPUT\')

  236. div.textContent = div.textContent.replace(/\\s/g, \"\\u00a0\");

  237. var span = document.createElement(\'span\');

  238. // Wrapping must be replicated *exactly*, including when a long word gets

  239. // onto the next line, with whitespace at the end of the line before (#7).

  240. // The *only* reliable way to do that is to copy the *entire* rest of the

  241. // textarea\'s content into the <span> created at the caret position.

  242. // for inputs, just \'.\' would be enough, but why bother?

  243. span.textContent = element.value.substring(position) || \'.\'; // || because a completely empty faux span doesn\'t render at all

  244. div.appendChild(span);

  245. var coordinates = {

  246. top: span.offsetTop + parseInt(computed[\'borderTopWidth\']),

  247. left: span.offsetLeft + parseInt(computed[\'borderLeftWidth\'])

  248. };

  249. if (debug) {

  250. span.style.backgroundColor = \'#aaa\';

  251. } else {

  252. document.body.removeChild(div);

  253. }

  254. return coordinates;

  255. }

  256. if (typeof module != \"undefined\" && typeof module.exports != \"undefined\") {

  257. module.exports = getCaretCoordinates;

  258. } else {

  259. window.getCaretCoordinates = getCaretCoordinates;

  260. }

  261. }());

  262. /***/ }

  263. /******/ ])

  264. });

  265. ;

教程

在根目录新建1个JS文件，然后复制上面的JS文件代码到文件内，或下载JS文件，上传网站根目录，在把调用代码放主题的footer.php文件里的<?php wp_footer(); ?>前面，调用代码里面的路径改为你放JS代码的路径。

根目录路径:网站域名+文件名称

https://www.mom1.cn/mom1.js

JS代码下载

http://cc.mom1.cn/mom1.js

WordPress自定义文章类型添加编辑区功能函数：add_post_type_support

WordPress函数add_post_type_support用于为自定义文章类型编辑区添加功能。

函数参数

$post_type

字符串

自定义文章类型

$feature

字符串或数组

需要添加的功能，例如：title、editor、comments、revisions、trackbacks、author、excerpt、page-attributes、thumbnail、custom-fields、and post-formats

$args

附加参数

函数使用示例

为页面添加摘要功能：

扩展阅读

add_post_type_support()函数位于：wp-includes/post.php

相关函数：

  • post_type_supports()
  • remove_post_type_support()
由于网站搬家，部分链接失效，如无法下载，请联系站长！谢谢支持！
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » WordPress博客添加评论输入特效(WordPress自定义文章类型添加编辑区功能函数：add_post_type_support)
分享到：

相关推荐

发表回复

CAPTCHAis initialing...