一、准备工作

reVival二次开发概述:WordPress的二次开发主要是PHP、JS、CSS的编辑与开发,如何在 无需修改主题源代码 的前提下,使用 钩子 实现二次开发。

1、自定义Function

  • 在 reVival/pandastudio_plugins 文件夹中新建一个文件夹,名称自拟,如:custom_theme
  • 在 reVival/pandastudio_plugins/custom_theme 文件夹中上传一个 index.php 文件,文件内容为:
<?php
//您可以在这个文件中编写您的自定义function了

2、自定义CSS、JS

  • 在刚才的文件夹中上传一个 sample_custom_css.css 文件和一个 sample_custom_js.js 文件
  • 在刚才的index.php中增加下面的自定义function代码即可引入css和js文件:
add_action( 'get_header', function() {
    //注册脚本
    wp_register_script(
        'sample_custom_js',
        get_stylesheet_directory_uri().'/pandastudio_plugins/custom_theme/sample_custom_js.js',
        array(),
        filemtime(__DIR__.'/sample_custom_js.js')
    );
    //注册样式
    wp_register_style(
        'sample_custom_css',
        get_stylesheet_directory_uri().'/pandastudio_plugins/custom_theme/sample_custom_css.css',
        array(),
        filemtime(__DIR__.'/sample_custom_css.css')
    );
    wp_enqueue_script( 'sample_custom_js' );  
    wp_enqueue_style( 'sample_custom_css' );  
},10);

现在,编辑sample_custom_css.css和sample_custom_js.js即可得到自定义效果

二、页面通知

在reVival/pandastudio_plugins/custom_theme/sample_custom_js.js中添加代码

pandastudio_framework.message('COVID-19 Stay Safe!');
pandastudio_framework.message('中国加油');

三、动态标题栏

JS代码实现浏览器网页标题栏名称动态切换,以略微提高网站粘性,本代码参考自巨佬KRUNK ZHOU BLOG的博客

var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function() {
	if (document.hidden) {
		document.title = '(●—●)喔哟,崩溃啦 | '+ OriginTitile;
		clearTimeout(titleTime);
	} else {
		document.title = '(/≧▽≦/)咦!又好了 | '+ OriginTitile;
		titleTime = setTimeout(function() {
			document.title = OriginTitile;
		}, 2000);
	}
});