分类： 网站

  • 【网站】WordPress使用Google Analytics代码的简单方法

    写在前面：谷歌分析会被浏览器的反广告和反追踪插件屏蔽，因此搜集到的数据可能有很大缺失。

    方法一：通过页眉+自定义HTML实现

    一般的网站页眉部分是统一的，如果不是的话，可以设置一个统一的空白的页眉，只需要将Google Analytics提供的script代码以HTML区块的方式粘贴到页眉部分即可全站启用，并为全站提供分析代码。

    方法二：通过模板函数实现（更推荐）

    使用类似的代码，插入到主题模板函数中，这样可以直接在Header中进行加载。

    // Function to add Google Analytics
function add_google_analytics() {
    ?>
<!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script> // 替换你的ID
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'GA_TRACKING_ID'); // 替换你的ID
    </script>
    <!-- End Google Analytics -->
    <?php
}
add_action('wp_head', 'add_google_analytics');

  • 【网站】为WordPress添加APlayer播放器

    引入方式类似prism，由于使用概率较大，因此在主题模板函数中进行全局引入：

    // Function to add APlayer.mini.css and APlayer.mini.js to the site
function add_APlayer() {
    
    wp_register_style(
        'APlayerCSS', // handle name for the style 
        get_stylesheet_directory_uri() . '/APlayer.css' // location of the file
    );

    wp_register_script(
        'APlayerJS', // handle name for the script 
        get_stylesheet_directory_uri() . '/APlayer.js' // location of the file
    );

    // Enqueue the registered style and script files
    wp_enqueue_style('APlayerCSS');
    wp_enqueue_script('APlayerJS');
}
add_action('wp_enqueue_scripts', 'add_APlayer');

    然后采用 APlayer官方文档 中描述的方式引入：

    <div id="aplayer">
</div>
<script>
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
        name: '',
        artist: '',
        url: '',
        cover: ''
    }]
});
</script>

  • 【网站美化】如何为WordPress添加Prism JS代码美化脚本？

    推荐使用Prism.js

    具体方法大神们早已经一笔一划的写出来了

    点击跳转！

    其中通过标签来非全局加载Js的方法非常棒！推荐参考学习。

    本网站则是全局加载JS，通过声明不同的CSS来实现美化效果。

    不加载Prism JS：

       <div class="container">
        <div class="diamond"></div> <!-- 第一个菱形 -->
        <div class="diamond"></div> <!-- 第二个菱形 -->
        <div class="diamond"></div> <!-- 第三个菱形 -->
        <div class="diamond"></div> <!-- 第四个菱形 -->
    </div>

    加载Prism JS：

       <div class="container">
        <div class="diamond"></div> <!-- 第一个菱形 -->
        <div class="diamond"></div> <!-- 第二个菱形 -->
        <div class="diamond"></div> <!-- 第三个菱形 -->
        <div class="diamond"></div> <!-- 第四个菱形 -->
    </div>

    很棒！