WordPress在5.9版本之后启用的官方Twenty Twenty-Two主题和之前的主题有很大的区别,引入了theme.json的配置文件,其他的大部分php文件也都换成了html文件,让人一下子有些不知所措。
如果你也只喜欢用原生的主题,切换到Twenty Twenty-Two主题的时候,自然要把之前在标签<head>和<foot>当中的一些JS代码引入到新的主题当中。那么你会发现新版主题的所有文件当中你已经找不到项目的标签了:
<head>......</head>
<foot>.....</foot>
然而大部分网站追踪网站,不管是谷歌分析还是百度统计都要求你把代码放到</head>标签之前,但是现在找不到了!!!ITGeeker技术奇客搜索了一番也没找到相关说明,又不想使用插件来添加,那么想到了通过Wordpress的函数wp_head“和” “wp_footer”来实现此功能。
1. 创建Twenty Twenty-Two的子主题(twentytwentytwo-child)
安装惯例,创建Wordpress的继承子主题目录twentytwentytwo-child放到wp-content目录,可以包含:style.css,functions.php和theme.json文件,除了style.css需要有以下内容,其他也都可以是空白:
@charset "UTF-8";
/*
Theme Name: Twenty Twenty-Two (ITGeeker.net)
Author: ITGeeker
Author URI: https://www.itgeeker.net/
Description: Twenty Twenty-Two child by itgeeker
Version: 1.1
Template: twentytwentytwo
*/
@import url("../twentytwentytwo/style.css");
/* !important 命令 这样下面的css代码就会覆盖父级css*/
2. 使用wp_head和wp_footer添加JS或其它内容
在functions.php文件可以加入GA跟踪代码到Head部分,alert部分可以作为测试用。
/* Insert Headers */
function insert_itgeeker_head() {
?>
<!-- <script>
alert('Page is loading by itgeeker.net ...');
</script> -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-你的GA衡量 ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-你的GA衡量 ID');
</script>
<?php
}
add_action('wp_head', 'insert_itgeeker_head');
/* Insert Footers*/
function insert_itgeeker_footer() {
echo '<p style="text-align: center; font-size: x-small;">网站由<a href="https://www.itgeeker.net">ITGeeker技术奇客</a>开发并管理;
隶属于<a href="https://www.geekercloud.com">GeekerCloud奇客罗方智能科技</a></p>
<p style="text-align: center; font-size: x-small;">Site designed and developed by <a href="https://www.itgeeker.net">ITGeeker</a>
which is a sub-website of <a href="https://www.geekercloud.com">GeekerCloud</a></p>
';
}
add_action( 'wp_footer', 'insert_itgeeker_footer', 100 );
这里在页脚添加是一段文字,如果要添加JS的脚本的话,要和header部分一样用?><?php来包括已下,例如添加鼠标特效JS:
function insert_itgeeker_footer() {
?>
<!-- 鼠标特效 -->
<script type="text/javascript">
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("技术奇客", "奇客大师", "自由奇客", "奇客顾问", "奇客罗方", "ITGeeker", "FreeGeeker", "GeekerCloud", "GeekerMaster", "GeekerConsulting");
var $i = $("<span />").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#ff6651"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
<?php
echo '<p style="text-align: center; font-size: x-small;">网站由<a href="https://www.itgeeker.net">ITGeeker技术奇客</a>开发并管理;
隶属于<a href="https://www.geekercloud.com">GeekerCloud奇客罗方智能科技</a></p>
<p style="text-align: center; font-size: x-small;">Site designed and developed by <a href="https://www.itgeeker.net">ITGeeker</a>
which is a sub-website of <a href="https://www.geekercloud.com">GeekerCloud</a></p>';
}
add_action( 'wp_footer', 'insert_itgeeker_footer', 100 );