大家好,又到了随机文章的时间,请使用手机打开演示站点,然后像摇妹子一样摇晃手机,你会发现非常牛逼的事情,炫酷吧。该功能已经集成在Oconnor1.8中。本文主要讲解这货的原理。
首先需要下载shake.js,shake.js github地址,我们只需要里面的shake.js,然后引入。
添加“摇一摇”事件监听
window.addEventListener('shake', shakeEventDidOccur, false); //function to call when shake occurs
function shakeEventDidOccur () { //put your own code here etc.
if (confirm("Undo?")) { }
}
取消监听
window.removeEventListener('shake', shakeEventDidOccur, false);
随机文章实现方式
JS代码,当然在这之前需要进入shake.js脚本
window.addEventListener('shake', shakeEventDidOccur, false); //function to call when shake occurs
function shakeEventDidOccur () { jQuery.post(Bigfa.ajaxurl, {
action : 'random_post',
}, function(data) {
window.location.href = data;
});
}
下面的代码扔到functions.php中,如果你已经添加了上一篇随机文章的代码这里就不需要
wp_enqueue_script( 'key', true);
wp_localize_script('key', 'Bigfa', array(
"ajaxurl" => admin_url('admin-ajax.php')
));
add_action( 'wp_ajax_random_post', 'bigfa_random_post' );
add_action( 'wp_ajax_nopriv_random_post', 'bigfa_random_post' );
function bigfa_random_post() {
$posts = get_posts('post_type=post&orderby=rand&numberposts=1');
foreach($posts as $post) {
$link = get_permalink($post);
}
echo $link;
exit;
}
OK。just 摇 it。
浏览器和设备支持情况
iOS Safari 4.2.1 (and above)
Android 4.0.3 (default browser)
Opera Mobile (Android)
BlackBerry PlayBook 2.0
Firefox for Android
FirefoxOS Devices

使用shake.js让你博客支持摇一摇的更多相关文章

  1. 利用Sails.js+MongoDB开发博客系统

    http://yoyoyohamapi.me/categories/利用Sails-js-MongoDB开发博客系统/ 利用Sails.js+MongoDB开发博客系统 Apr 14, 2016 利用 ...

  2. Node.js的开源博客系统Ghost搭建教程

    准备工作 Node.js版本:0.10.x.0.12.x.4.2.x.安装步骤可参考:Node.js环境搭建 Ghost版本:0.7.4:中文集成版(33.6M),中文标准版(3.39M),英文原版( ...

  3. HelloDjango 第 09 篇:让博客支持 Markdown 语法和代码高亮

    作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 为了让博客文章具有良好的排版,显示更加丰富的格式,我们使用 Markdown 语法来书 ...

  4. 使用CSS/JS代码修改博客模板plus

    之前对CSS/JavaScript了解还不深,只是把模板的CSS胡乱修改了几个属性.最近正好也在做一个网站的前端,学习了不少东西,再来改一改~ 上次最后之所以铩羽而归,是因为从CSS里找不到那些#和. ...

  5. 基于Vue+node.js的个人博客

    前言 作为一个年轻的程序员,而且是作为一个未来的前端工程师,怎么能没有一个属于自己的博客呢,于是乎在暑假咸鱼了一个多月后开始了我的博客的编写. 技术栈 前端 vue.js+scss  因为当时没学vu ...

  6. hexo 博客支持PWA和压缩博文

    目标网站 https://blog.rmiao.top/ PWA yarn add hexo-offline 然后在root config.yml里新增 # offline config passed ...

  7. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页+指令(一)

    缘起 书说前两篇文章<十五 ║ Vue前篇:JS对象&字面量&this>和 <十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面向对 ...

  8. github+hexo+node.js搭建个人博客基本过程及遇到的问题

    一,所需工具 1,github账号+Gitclient+配置SSH key 2,安装node.js. 3,安装Hexo. 当中,github pages是我们用来部署我们本地的博客到github上的. ...

  9. Typecho博客支持emoji表情设置

    介绍 大家在typecho博客写文章时,很多人都喜欢使用emoji表情(比如这些图标)但是typecho的数据库类型默认不支持emoji编码,因为Emoji是一种在Unicode位于u1F601-u1 ...

随机推荐

  1. nmap参数思维导图

    链接:https://pan.baidu.com/s/1vD0A6olQbVNmCCirpHBm0w 提取码:o994

  2. linux下如何源码安装expect

    1.作用 自动交互.比如如果用ssh登陆服务器,每次都输入密码,然而你觉得麻烦,那你就可以使用expect来做自动交互,这样的话就不用每次都输入密码 2.依赖 依赖tcl 3.获取源码 wget ht ...

  3. redis.conf 配置 详解 中文 2.8

        # redis version 2.8.19   # 1k => 1000 bytes# 1kb => 1024 bytes# 1m => 1000000 bytes# 1m ...

  4. 【第五章】 springboot + mybatis

    springboot集成了springJDBC与JPA,但是没有集成mybatis,所以想要使用mybatis就要自己去集成.集成方式相当简单. 1.项目结构 2.pom.xml <!-- 与数 ...

  5. Java中线程出现Exception in thread "Thread-0" java.lang.IllegalMonitorStateException异常 解决方法

    代码 package thread; public class TestChongNeng { public static void main(String[] args) { Thread t1 = ...

  6. 51NOD 1046 A^B Mod C

    给出3个正整数A B C,求A^B Mod C. 例如,3 5 8,3^5 Mod 8 = 3. Input 3个正整数A B C,中间用空格分隔.(1 <= A,B,C <= 10^9) ...

  7. json字符窜转对象

    第一种方法: 注意引用:using System.Runtime.Serialization.Json; using System.IO; static void Main(string[] args ...

  8. UVa 11292 勇者斗恶龙

    https://vjudge.net/problem/UVA-11292 题意:有n条任意个头的恶龙,你希望雇一些其实把它杀死.一个能力值为x的骑士可以砍掉恶龙一个直径不超过x的头,且需要支付x个金币 ...

  9. sopt:一个简单的python最优化库

    引言     最近有些朋友总来问我有关遗传算法的东西,我是在大学搞数学建模的时候接触过一些最优化和进化算法方面的东西,以前也写过几篇博客记录过,比如遗传算法的C语言实现(一):以非线性函数求极值为例和 ...

  10. hdu 1269 迷宫城堡 最简单的联通图题 kosaraju缩点算法

    迷宫城堡 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Problem Des ...