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用于为自定义文章类型编辑区添加功能。

add_post_type_support( string $post_type, string|array $feature, mixed $args )

函数参数

$post_type

字符串

自定义文章类型

$feature

字符串或数组

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

$args

附加参数

函数使用示例

为页面添加摘要功能：

<?phpadd_action(\\\'init\\\', \\\'wpdocs_custom_init\\\');function wpdocs_custom_init() {    add_post_type_support( \\\'page\\\', \\\'excerpt\\\' );}?>

扩展阅读

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

相关函数：

• post_type_supports()
• remove_post_type_support()