WordPress官方2022主题Twenty Twenty-Two不使用插件如何添加GA或百度统计等网站追踪代码

by itgeeker.net

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 );

《“WordPress官方2022主题Twenty Twenty-Two不使用插件如何添加GA或百度统计等网站追踪代码”》 有 2 条评论

WordPress official 2022 theme Twenty Twenty-Two does not use plugins How to add website tracking codes such as GA or Baidu statistics – FENQ进行回复 取消回复

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

网站由ITGeeker技术奇客开发并管理; 隶属于GeekerCloud奇客罗方智能科技

Site designed and developed by ITGeeker which is a sub-website of GeekerCloud

网站地图 | 沪ICP备2021031434号-4