标签: Twenty Twenty-Two

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

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

    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 );
奇客罗方公众号 奇客罗方小程序 奇客罗方客服 ITGeeker Telegram

网站由ITGeeker技术奇客开发并管理;隶属于GeekerCloud奇客罗方智能科技
Site designed and developed by ITGeekerwhich is a sub-website of GeekerCloud
网站地图 | 沪ICP备2021031434号-4