博文

目前显示的是标签为“Web”的博文

[WP Plugin] Geek Mail Whitelist

图片
WordPress sites administrators often encounter a problem - zombie or fake users register to your site using fake Emails. The emails they use often strictly follow the Email format so it's hard for our program to judge if they are valid or not. Although we can prevent these users from really using our sites by sending activation Email, still they are a waste of database space and make it harder to manage members. As a result, an Email whitelist is needed to filter these annoying registrations. Geek Mail Whitelist is a plugin which can allow users with certain emails to register to your WordPress site by adding whitelist rules. What's more, it supports regular expression rules which makes it more powerful to fit all kinds of situations. And it is COMPLETELY FREE! Github page: https://github.com/gongwan33/geek-mail-whitelist Description - Allow certain kinds of users to register to your WordPress site by adding mail whitelist rules. - Super simple to use...

How to npm install jquery-ui and import it as a ESM?

We can use jquery-ui-bundle: npm install jquery-ui-bundle --save Then import: import 'jquery-ui-bundle'; import 'jquery-ui-bundle/jquery-ui.css';

Use pug with Vue

A usable webpack configuration for pug with Vue: {     test: /\.pug$/,     oneOf: [                   {                       resourceQuery: /^\?vue/,                       use: [                           'pug-plain-loader'                       ]                   },                   {                       use: [                           'raw-loader',                           'pug-plain-loader'   ...

Trap on the way to use a browserified react script - Invariant Violation: Target container is not a DOM element.

When using a script browserified from a react project, I encountered an error said: Invariant Violation: Target container is not a DOM element. It confused me for a while. After I moved the HTML script label from head to the end of the body , the problem was solved. It seems that when the script was executed, the related dom element had not been loaded yet. Then I tried ready function from jQuery, it also works. So when get this kind of error, try to check the position of the script.

Cheat sheet: Ubuntu 16.04 + NodeJS + React + Grunt + Babel + Browserify Configuration

1. Install NodeJS >sudo apt-get install nodejs nodejs-legacy 2. Create a project using npm >npm init 3. Install React >npm install --save react react-dom 4. Install Babel and plugins > npm install --save-dev grunt-babel > npm install babel-preset-env --save-dev > npm install --save-dev babel-plugin-syntax-jsx The last command line is for JSX which is highly recommended by React. 5.Config .babelrc { "plugins": ["syntax-jsx"], "presets": [ ["env", { "targets": { "chrome": 52, "browsers": ["last 2 versions", "safari 7"] } }] ] } 6.Install Grunt and plugins >npm install -g grunt-cli >npm install grunt --save-dev >npm install grunt-contrib-jshint --save-dev 7. Config Grunt file module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.j...

Special effects for html using JS and CSS

This page may not work because the restriction of the Blog theme. Please use your browser to inspect the code. Thank you! Magic Letterfall Mad Rotating Letters Mad Scaling Letters

Symbols in the version field of package.json

You may have seen something like the following code before in package.json and may be puzzled about the symbols like '<>~^'. Code: { "dependencies" : { "foo" : "1.0.0 - 2.9999.9999" , "bar" : ">=1.0.2 <2.1.2" , "baz" : ">1.0.2 <=2.3.4" , "boo" : "2.0.1" , "qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0" , "asd" : "http://asdf.com/asdf.tar.gz" , "til" : "~1.2" , "elf" : "~1.2.3" , "two" : "2.x" , "thr" : "3.3.x" , "lat" : "latest" , "dyl" : "file:../dyl" } } Here are the definitions I found in https://docs.npmjs.com/files/package.json . version  Must match  version  exactly >version  Must be greater than  version >=version  etc <version <=versi...

[WordPress]What the F***! the parent theme is missing?!

There is a very wired problem. I created a child theme named Fatsom Child and I set 'Template: Fatsom' in style.css and the parent theme is Fatsom which had been already installed. It worked perfectly in my local environment. The child theme could be successfully detected by WordPress and activated manually. But, when I uploaded the parent theme and child theme to  my host, a very strange thing happened: In my backend, WordPress threw an error saying "the parent theme 'Fatsom' is missing"! And I could not find 'Fatsom Child' to activate! Why! I was blocked by this problem the whole evening. Finally, I found the solution -- just change 'Template: Fatsom' to 'Template: fatsom' in style.css of the child theme and it works again! I couldn't tell why, but it just happened. If you knows why or encountered the same problem, please comment this blog or email me (wagner@joybin.cn). Have a good day!

[WordPress]Oops, customized query vars make front page missing

There is a very strange thing which may be a bug but not fixed yet in WordPress -- If you add a customized query var, it will make the WordPress lost the static front page and directly point to the post river. (As discussed in https://core.trac.wordpress.org/ticket/25143#comment:36 ) For example, if our static front page is http://www.example.com/ and we add following code to add a query var named 'lang' hoping that we could get 'lang' from the structure of http://www.example.com/%lang% function add_custom_page_variables ( $ public_query_vars ) {         $ public_query_vars [] = ' lang ';         return $ public_query_vars ;     } add_filter ( ' query_vars ', array ( $ this , ' add_custom_page_variables ' ) ) ; It doesn't work. get_query_var will return null and what is worse, the front page will lost if we use http://www.example.com/en. Actually, current parse_query will check $_query after it thinks it is a ho...

[WordPress] About the URL autocompletion function in WordPress

There is an unimpressive URL autocompletion function in WordPress which a lot of the users or developers may not know. This function can find the most similar URL even if the URL input is not exactly right. For example: there is a permalink http://www.example.com/testpost If you mistakenly input http://www.example.com/testp, the WordPress can still help you find the testpost. This sounds nice. But it can cause some problems. For example, I want to add a rewrite rule to make http://www.example.com/en point to http://www.example.com/?lang=en. This autocompletion function will still try to find something similar to 'en' instead of giving me the page of http://www.example.com directly. So we have to turn off this function. Here is the solution: add_action ( ' redirect_canonical ', ' __return_false ' ) ; After adding this action, this autocompletion function will be turned off and the rewrite rules will successfully work.

[WordPress API] About the 'count' field of get_terms function

get_terms is a very common function in WordPress. Here is the definition: get_terms(  array|string   $args  =  array() ,   array   $deprecated  =  ''  ) For example: $res = get_terms(term->taxonomy, array('parent' => term->id, 'hide_empty' => false)); var_dump($res); The WordPress will print something like this: array (size=5) 0 => object ( WP_Term )[ 4319 ] public 'term_id' => int 15 public 'name' => string 'Copenhagen S' (length=12) public 'slug' => string 'copenhagen-s' (length=12) public 'term_group' => int 0 public 'term_taxonomy_id' => int 15 public 'taxonomy' => string 'property_city' (length=13) public 'description' => string '' (length=0) public 'parent' => int 37 public 'count' => int 3 public...