标签: WordPress建站

  • 【网站】为网站添加公益404页面

    目前腾讯公益提供了一个可以自动更新内容的JS,可以为404页面自动更新公益内容,代码如下:

    <script src="https://volunteer.cdn-go.cn/404/latest/404.js"></script>

    我们可以直接使用自定义HTML插入到404页面中。

    <style>
      #404DlV {
        width: 100%;
        height: 100%; 
      }
    </style>
    <div id="404DlV"></div>
    <script src="https://volunteer.cdn-go.cn/404/latest/404.js" rendertarget="404DlV"></script>

    点击跳转到腾讯提供的公益404模板页面

  • 【网站】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>

    很棒!

  • 【网站】关于WordPress上传限制大小的解决

    问题:

    WordPress预设一般为2M大小,非常不利于高清图片及音视频的上传,虽然对带宽有一定压力,但还是建议对上传大小进行修改。

    解决方法:

    网上一般都提到是对PHP与Nginx的ini文件进行调整,不过需要注意的是,在配置了SSL的网站中,Nginx只对根目录的ini文件进行调整无法起到效果,需要调整conf.d文件夹下的网站对应配置文件,才能起到效果。

  • 【网站】从ECS服务器到网站

    简易版步骤:

    1、购买ECS服务器,并设置好系统以及基本的软件更新,这将决定后续的命令语法,推荐使用Debian系统,保留root权限。

    2、搭建基础的环境,可以通过ECS配置好的源或者官方软件源、第三方源等,部署Nginx反向代理、MariaDB数据库、PHP、防火墙等网络基础服务。我比较推荐Nginx,因为它的配置文件结构比较清晰。

    (配置防火墙时候别把自己关门外了)

    3、选择适合你自己的建站方式,可以使用Wordpress,也可以从后端到前端自己搭建。

    4、配置Nginx、数据库等,要注意各个软件的语法,尤其是Nginx,修改后要注意测试语法,否则会导致花式的连接拒绝。

    5、一些安全和优化工作,主要是管理端口的隐藏或者修改,密钥的管理等工作,此外别忘了配置SSL,这样你的网站就不会被浏览器花式提醒和拒绝啦,后面就是慢慢填充完善你的网站吧~

    注意事项:

    1、nginx配置注意事项:

    按照Nginx官方说明网页配置,Server_name按照IP填写