分类： WordPress建站笔记

使用wp-scripts自动重构多个块的JS文件（通过block.json）

首先需要在PHP文件中注册多个块

  • 路径后面会自动补全 block.json 文件
  • 路径需要为构建后输出文件的目录
function create_block_code_block_init()
{
    register_block_type(dirname(__FILE__) . '/build/block-one');
    register_block_type(dirname(__FILE__) . '/build/block-two');
}

add_action('init', 'create_block_code_block_init');

在 block.json 文件中的 editorScript 字段中，填入的是构建前的JS文件路径

例如 /src/block-one/block.json 

    ....
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css"

wp-scripts 在自动构建后，在 build/block-one 目录下就有构建好的index.js文件、index.css和style-index.css文件

block-two 也这样填

WordPress 判断页面是否有块然后加载内容

这个方法适用于只想在文章页面加载

add_action('wp_enqueue_scripts','enqueue_if_block_is_present');

function enqueue_if_block_is_present(){
  if(is_singular()){
     $id = get_the_ID();
     if(has_block('my-awesome/block-type',$id)){
        wp_enqueue_script('my-awesome-script',$path_of_script,$needed_scripts,$version_of_script,$load_in_footer);
     }
  }
}

这个方法在所有页面中判断，是否含有块

add_filter('the_content','enqueue_my_awesome_script_if_there_is_block');

function enqueue_my_awesome_script_if_there_is_block($content = ""){
  if(has_block('my-awesome/block-type')){
        wp_enqueue_script('my-awesome-script',$path_of_script,$needed_scripts,$version_of_script,true);
     }
   return $content;
}
  • https://wordpress.stackexchange.com/questions/328536/load-css-javascript-in-frontend-conditionally-if-block-is-used

WordPress去除非拉丁文字体

就很烦，WordPress 2020主题给中文站点加了字体到head，难看死了

在子主题中加入下面代码就好了

class TwentyTwenty_Non_Latin_Languages {
  public static function get_non_latin_css( $type = 'front-end' ) {
    return 0;
  }
}

WordPress 去除jQuery

function my_init() {
	if (!is_admin()) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', false);
	}
}
add_action('init', 'my_init');

WP引入css文件控制优先级

将css文件放在最后一个导入

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style('xiyuyyy',
    plugin_dir_url( __FILE__ ). 'main.css', 
    [], 
    filemtime(plugin_dir_path( __FILE__ ). 'main.css'), 
    'all');
}, 99, 1 );

2021和2020主题移除inline styles

2021主题，添加到funtions.php文件

add_action( 'wp_enqueue_scripts', function() {
	$styles = wp_styles();
	$styles->add_data( 'twenty-twenty-one-style', 'after', array() );
}, 20 );

2020添加：

add_action( 'wp_enqueue_scripts', function() {
	$styles = wp_styles();
	$styles->add_data( 'twentytwenty-style', 'after', array() );
}, 20 );

wordpress文件/目录权限

将所有文件权限设置为644

sudo find . -type f -exec chmod 644 {} +

讲所有目录权限设置为755

sudo find . -type d -exec chmod 755 {} +

WP获取中文摘要

function get_post_excerpt($post, $excerpt_length = 240)
{
  if (!$post) $post = get_post();

  $post_excerpt = $post->post_excerpt;
  if ($post_excerpt == '') {
    $post_content = $post->post_content;
    $post_content = do_shortcode($post_content);
    $post_content = wp_strip_all_tags($post_content);

    $post_excerpt = mb_strimwidth($post_content, 0, $excerpt_length, '…', 'utf-8');
  }

  $post_excerpt = wp_strip_all_tags($post_excerpt);
  $post_excerpt = trim(preg_replace("/[\n\r\t ]+/", ' ', $post_excerpt), ' ');

  return $post_excerpt;
}

Ubuntu WordPress 开启redis 缓存

安装redis

apt-get update
apt-get install redis redis-server php-redis

编辑 /etc/redis/redis.conf 文件，添加

maxmemory 256mb
maxmemory-policy allkeys-lfu

重启服务

systemctl restart redis-server
systemctl restart php7.4-fpm
systemctl restart apache2

编辑wp-config.php文件添加

define( 'WP_CACHE_KEY_SALT', 'zuoridangnian.com' );
define( 'WP_CACHE', true );

安装Redis Object Cache 插件，点击开启缓存即可

下面查看一下效果

WP有个 Query Monitor 插件，可以查看一个页面的查询次数

未开启Redis Object Cache时，我的后台页面和首页查询次数是这样的

分别是68个查询和56个查询

开启后减少为32和25，大约节约一半的查询次数

WordPress 修改已有的块添加设置宽度的功能

主题 functions.php 文件中加入

function myguten_enqueue()
{
  
  wp_enqueue_script(
    'myguten-script',
    get_theme_file_uri() . '/myguten.js'
  );

}

add_action('enqueue_block_editor_assets', 'myguten_enqueue');

然后在 myguten.js 文件中加入

const { addFilter } = wp.hooks;

function filterCoverBlockAlignments(settings, name) {
    if (name === 'loos-hcb/code-block' || name === 'core/code') {
        return lodash.assign({}, settings, {
            supports: lodash.merge(settings.supports, {
                align: true,
            }),
        });
    }
    return settings;
}

addFilter(
    'blocks.registerBlockType',
    'intro-to-filters/cover-block/alignment-settings',
    filterCoverBlockAlignments,
);

上面的代码是为 loos-hcb/code-block 块（这个是我使用的代码高亮插件）和 core/code 块添加对宽度设置的支持

为古腾堡默认code块添加设置宽度功能

参考

https://css-tricks.com/a-crash-course-in-wordpress-block-filters/

没有更多文章了