架构

需要找到wordpress目录下的如下路径（根据当前激活的主题来定）

• 自定义JS

1. 插入如下代码到 /usr/share/nginx/html/wordpress/wp-content/themes/twentytwenty/functions.php

/**
* 加载自定义js
*/
function my_js() {
    wp_enqueue_script('add_background', '/wp-content/user_uploads/my_js.js', array(), '1.0', true);
}
add_action('wp_footer', 'my_js');

常用的一些文件：

• index.php
  • /usr/share/nginx/html/wordpress/wp-content/themes/twentytwenty/template-parts/content.php
• content.php
  • /usr/share/nginx/html/wordpress/wp-content/themes/twentytwenty/template-parts/content.php
• style.php
  • /usr/share/nginx/html/wordpress/wp-content/themes/twentytwenty/style.css
• footer.php
  • /usr/share/nginx/html/wordpress/wp-content/themes/twentytwenty/footer.php

    然后创建js就可以了

• HTML代码内容可以放到content.php中（/usr/share/nginx/html/wordpress/wp-content/themes/twentytwenty/template-parts）
• 如果需要修改代码，则需要找到对应theme下面，例如我要改header，则要去这个主题下面找header.php
• JS代码放到wordpress下的任意一个文件夹中，我这里路径如下

const entryTitle = document.querySelector('.entry-header.has-text-align-center.header-footer-group');
        const content = document.querySelector('#my_content');
        let is_overflow = false; //是否翻到title下面去了 
        content.style.backgroundImage=getComputedStyle(document.querySelector('body')).backgroundImage;
       window.addEventListener('scroll', debounce((e) => {
            if (getScrollOffset().y >= entryTitle.clientHeight && is_overflow==false) {
                console.log("尊重个人独立创作知识产权，转载请标明出处！");
                content.classList.toggle('blur_active');
                is_overflow=true;
            }else if(getScrollOffset().y <= entryTitle.clientHeight&& is_overflow==true){
                content.classList.toggle('blur_active');
                is_overflow=false;
            }

        }, 20));
            function getScrollOffset() {
                if (window.pageXOffset) {
                    return {
                        x: window.pageXOffset,
                        y: window.pageYOffset
                    }
                } else {
                    return {
                        x: document.body.scrollLeft + document.documentElement.scrollLeft,
                        y: document.body.scrollTop + document.documentElement.scrollTop
                    }
                }
            }
            function debounce(fn, wait) {
                let timeout = null;
                return function () {
                    let context = this;
                    let args = arguments;
                    if (timeout) clearTimeout(timeout);
                    let callNow = !timeout;
                    timeout = setTimeout(() => {
                        timeout = null;
                    }, wait);
                    if (callNow) fn.apply(context, args);
                };
            }

• 在functions.php 文件中加入如下代码：

/**
* 加载自定义js
*/

function my_js() {
    wp_enqueue_script('add_background', '/wp-content/user_uploads/my_js.js', array(), '1.0', true);
}
add_action('wp_footer', 'my_js');

将代码放到footer后就能够获取到网页的元素了，不会出现selector找不到元素报null了

• CSS代码放到style.css中

配置

更改上传文件/图片的大小

1. php --ini 定位到php.ini的位置，修改以下几个参数

   upload_max_filesize = 64M
   post_max_size = 64M
   max_execution_time = 300

2. 修改Nginx.conf

   server{
   …
   client_max_body_size 64m;
   }