提高 WordPress 后台加载速度

屏蔽自动更新及不需要的查询,将下面的代码粘贴到当前主题目录下的函数文件 functions.php 中

//去除后台没必要的功能
function disable_dashboard_widgets() { 
	remove_meta_box('dashboard_recent_comments', 'dashboard', 'normal');//近期评论 
	remove_meta_box('dashboard_recent_drafts', 'dashboard', 'normal');//近期草稿
	remove_meta_box('dashboard_primary', 'dashboard', 'core');//wordpress博客 
	remove_meta_box('dashboard_secondary', 'dashboard', 'core');//wordpress其它新闻 
	remove_meta_box('dashboard_right_now', 'dashboard', 'core');//wordpress概况 
	remove_meta_box('dashboard_incoming_links', 'dashboard', 'core');//wordresss链入链接 
	remove_meta_box('dashboard_plugins', 'dashboard', 'core');//wordpress链入插件 
	remove_meta_box('dashboard_quick_press', 'dashboard', 'core');//wordpress快速发布 
} 
add_action('admin_menu', 'disable_dashboard_widgets');
//移除 WordPress 加载的JS和CSS链接中的版本号
function wpdaxue_remove_cssjs_ver( $src ) {
	if( strpos( $src, 'ver=' ) )
	$src = remove_query_arg( 'ver', $src );
	return $src;
}
add_filter( 'style_loader_src', 'wpdaxue_remove_cssjs_ver', 999 );
add_filter( 'script_loader_src', 'wpdaxue_remove_cssjs_ver', 999 );
//移除自动保存
wp_deregister_script('autosave');
//移除修订版本
remove_action('post_updated','wp_save_post_revision' );
//后台禁用Google Open Sans字体,加速网站
add_filter( 'gettext_with_context', 'wpdx_disable_open_sans', 888, 4 );
function wpdx_disable_open_sans( $translations, $text, $context, $domain ) {
	if ( 'Open Sans font: on or off' == $context && 'on' == $text ) {
	$translations = 'off';
	}return $translations;
}

Chrome crx Could not establish connection

Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

Chrome 扩展 sendResponse 返回 undefined (时而返回 undefined 时而返回 成功)

chrome.runtime.onMessage.addListener(function (res, sender, sendResponse) {
    sendResponse('done');
    return true
});

多次尝试发现仅 manifest.json 中 content_scripts 设定的域名可以接受通信,非设定的域名无法通信。

另网页加载过程中通信也会造成返回失败,可以判断 tab 的 status 是否等于 complete,再进行通信

一道题

一个二维数组,如何循环遍历将第一个数组作为下一级数组的父级,然后生成一个树型结构

<?php
$a = [['a'],['b'],['c'],['d'],['e']];
function getTree($list) {
    static $tree = array();
    static $i=0;
    $i++;
    $len = count($list);
    foreach($list as $k => $row) {
        if($i+$k == $len) {
            $tmp[] = $row[0];
            $tmp['child'] = isset($tree[count($tree)-1])?$tree[count($tree)-1]:$tree;
            $tree[] = $tmp;
            getTree($list);
        }
    }
    return end($tree);
}
$c  = getTree($a);
var_export($c);

结果

array (
  0 => 'a',
  'child' => 
  array (
    0 => 'b',
    'child' => 
    array (
      0 => 'c',
      'child' => 
      array (
        0 => 'd',
        'child' => 
        array (
          0 => 'e',
          'child' => 
          array (
          ),
        ),
      ),
    ),
  ),
)

PHP 使用 BerryChat 倍洽

$postUrl = 'https://hook.bearychat.com/=bwGFg/incoming/70e24a628680e77277fa35be7a11017x';
$curlPost = array("text" => json_encode($branch_data, JSON_UNESCAPED_UNICODE));

$curlPost = json_encode($curlPost);
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $postUrl);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);

curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $curlPost);
curl_setopt($curl, CURLOPT_HEADER, 0);
curl_setopt($curl, CURLOPT_HTTPHEADER, array(
	'Content-Type: application/json; charset=utf-8',
	'Content-Length:' . strlen($curlPost),
	'Cache-Control: no-cache',
	'Pragma: no-cache'
));
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_exec($curl);
curl_close($curl);

iOS 微信浏览器 input 输入框BUG

iOS 微信浏览器 调起收起键盘 input 输入框失去焦点后无法点击的BUG

解决如下

$("input").blur(function () {
	setTimeout(() => {
		const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
		window.scrollTo(0, Math.max(scrollHeight - 1, 0));
	}, 100);
})

还有可能是 有些 display none 里面的元素有占位,特别是使用了 全屏 fixed 元素后,全屏无法点击

CSS 长文本跑马灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>game1</title>
</head>
<body>
    <div id="marquee_left" class="marquee">
        <div id="marquee_left1" class="content">
测试文本1测试文本2测试文本3测试文本4测试文本5测试文本6测试文本7测试文本8测试文本9测试文本8测试文本7测试文本6测试文本5测试文本4测试文本3测试文本2
        </div>
    </div>
</body>
<script type="text/javascript">
    function run_marquee() {
        var speed = 30;
        //速度数值越大速度越慢
        var marquee_left1 = document.getElementById("marquee_left1");
        var marquee_left = document.getElementById("marquee_left");
        marquee_left1.innerHTML = marquee_left1.innerHTML  + '';
        function Marquee3() {
            if(!marquee_left1.innerHTML){
                return ;
            }
            if (marquee_left1.offsetWidth - marquee_left.offsetWidth <= marquee_left.scrollLeft) {
                if(marquee_left1.offsetWidth<5000){
                    marquee_left1.innerHTML = marquee_left1.innerHTML + ' ' + marquee_left1.innerHTML;
                }else{
                    marquee_left.scrollLeft -= marquee_left1.offsetWidth //scrollWidth 是对象的实际内容的宽,不包边线宽度
                }
            } else {
                marquee_left.scrollLeft++;
            }
        }
        setInterval(Marquee3, speed);
    }
    run_marquee();
</script>
<style>
  .marquee {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 35px;
	line-height: 35px;
	background: rgba(0, 0, 0, 0.3);
	color: #FFF;
	display: block;
	margin: 0 auto;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: clip;
	z-index: 23;
  }
  .marquee .content {
	display: inline-block;
	position: relative;
	padding-right: 0px;
	/*white-space: nowrap;*/
	/*animation: kf-marque-animation 2s infinite linear;*/
  }
</style>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>game1</title>
</head>   
<div class="marquee">
	<span class="content">
	测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本11111111
	测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本12222223
	测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本11111133
	测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本11111433
	<span class="content-space"></span>
  </span>
</div>	
	<style>
		/*滚动播放*/
        @keyframes kf-marque-animation {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-33.3%);
            }
        }
        .marquee {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 35px;
            line-height: 35px;
            background: rgba(0, 0, 0, 0.3);
            color: #FFF;
            display: block;
            margin: 0 auto;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: clip;
            z-index: 23;
        }
        .marquee .content {
            display: inline-block;
            position: relative;
            padding-right: 0px;
            white-space: nowrap;
            animation: kf-marque-animation 2s infinite linear;
        }
        .marquee .content-space {
            display: inline-block;
            width: 5em;
        }
    </style>
	<script>
    //滚动
    function run_marquee() {
        var speed = 50; // 速度 -- px每秒
        var $marquee = document.querySelector('.marquee');
        var $marqueeContent = $marquee.querySelector('.content');
        // 内容复制3份好有连续性
        $marqueeContent.innerHTML = $marqueeContent.innerHTML + $marqueeContent.innerHTML + $marqueeContent.innerHTML
        var contentWidth = $marqueeContent.getBoundingClientRect().width;
        if (contentWidth <= 0) {
            return;
        }
        // 内容复制了3份,宽度也要除以3
        contentWidth = contentWidth / 3;
        // 计算一次动画应该要花费多少时间
        var onceTime = contentWidth / speed * 1000; //ms
        $marqueeContent.style.animationDuration = onceTime + "ms";
    }
	run_marquee();
</script>

保存 Chrome 插件扩展 Crx 文件

保存 Chrome 插件扩展 Crx 文件,并手动添加未登录的 Chrome 浏览器中

首先 下载扩展 GET CRX

Get CRX

https://chrome.google.com/webstore/detail/get-crx/dijpllakibenlejkbajahncialkbdkjc?hl=zh-CN

然后打开你想保存成文件的插件页面,点击右键,会出现 Get CRX of this extension,点击即可保存

然后打开浏览器扩展页 chrome://extensions 打开开发者模式,然后将扩展拖到改页面,即可安装

安装完成可以将开发者模式关闭掉

CSS3 长文字跑马灯效果

<div class="marquee">
  <span class="content">
    raw js + css3 transition 跑马灯测试。跑马灯测试。跑马灯测试。 <span class="content-space"></span>
  </span>
</div>
<style>
    @keyframes kf-marque-animation {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-33.3%);
        }
    }
    .marquee {
        width: 100%;
        height: 44px;
        line-height: 44px;
        background: #e9eaea;
        display: block;
        margin: 0 auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: clip;
        position: relative;
    }
    .marquee .content {
        display: inline-block;
        position: relative;
        padding-right: 0px;
        white-space: nowrap;
        animation: kf-marque-animation 12s infinite linear;
    }
    .marquee .content-space {
        display: inline-block;
        width: 5em;
    }
</style>
<script>
    //滚动
    (function () {
        var speed = 50; // 速度 -- px每秒
        var $marquee = document.querySelector('.marquee');
        var $marqueeContent = $marquee.querySelector('.content');
        // 内容复制3份好有连续性
        $marqueeContent.innerHTML = $marqueeContent.innerHTML + $marqueeContent.innerHTML + $marqueeContent.innerHTML
        var contentWidth = $marqueeContent.getBoundingClientRect().width;
        if (contentWidth <= 0) { // 没有内容搞什么动画
            return;
        }
        // 内容复制了3份,宽度也要除以3
        contentWidth = contentWidth / 3
        // 计算一次动画应该要花费多少时间
        var onceTime = contentWidth / speed * 1000; //ms
        $marqueeContent.style.animationDuration = onceTime + "ms"
    })()
</script>

小程序可用 CSS3 animation 实现的跑马灯

https://segmentfault.com/a/1190000009571886

预览地址

https://jsfiddle.net/650spwen/