WordPress实现中英文数字之间自动加空格排版教程

无界猴

6个月前更新

051264

在WordPress中，为了实现中英文和数字之间自动添加空格的排版效果，你可以按照以下步骤进行操作。这些步骤将帮助你轻松地在WordPress网站上实现这一功能，而无需手动添加空格。

第一步：在html或body标签中加入han-la类

直接修改header.php文件（推荐在测试环境中进行）：
- 使用FTP工具或你的WordPress托管控制面板的文件管理器功能，找到并编辑你的主题目录下的header.php文件。
- 在<html>标签中添加class="han-la"，例如：<html class="han-la" lang="zh-CN">。
动态加载到body标签（如果你不想直接修改header.php文件）：
- 打开你的主题目录下的functions.php文件。
- 添加以下代码以动态将han-la类添加到body标签中：


function lxtx_add_hanla_to_body_class($classes) {  
    $classes[] = 'han-la';  
    return $classes;  
}  
add_filter('body_class', 'lxtx_add_hanla_to_body_class');
function lxtx_add_hanla_to_body_class($classes) {  
    $classes[] = 'han-la';  
    return $classes;  
}  
add_filter('body_class', 'lxtx_add_hanla_to_body_class');
function lxtx_add_hanla_to_body_class($classes) {  
    $classes[] = 'han-la';  
    return $classes;  
}  
add_filter('body_class', 'lxtx_add_hanla_to_body_class');

第二步：引入js文件

下载text-autospace.js：
- 访问GitHub上的text-autospace.js项目页面，下载text-autospace.min.js或text-autospace.js文件。
将js文件上传到你的WordPress主题目录：
- 将下载的js文件上传到你的主题目录下的/includes/js/文件夹（如果文件夹不存在，请创建它）。
在WordPress中注册并加载js文件：
- 打开你的主题目录下的functions.php文件。
- 添加以下代码以注册并加载js文件：


function lxtx_styles_scripts() {  
    wp_enqueue_script('han-la-js', get_template_directory_uri() . '/includes/js/text-autospace.min.js', array('jquery'), '', true);  
}  
add_action('wp_enqueue_scripts', 'lxtx_styles_scripts');
function lxtx_styles_scripts() {  
    wp_enqueue_script('han-la-js', get_template_directory_uri() . '/includes/js/text-autospace.min.js', array('jquery'), '', true);  
}  
add_action('wp_enqueue_scripts', 'lxtx_styles_scripts');
function lxtx_styles_scripts() {  
    wp_enqueue_script('han-la-js', get_template_directory_uri() . '/includes/js/text-autospace.min.js', array('jquery'), '', true);  
}  
add_action('wp_enqueue_scripts', 'lxtx_styles_scripts');

注意：确保文件路径与你的实际文件位置相匹配。

第三步：添加CSS代码

打开你的主题样式表：
- 通常位于你的主题目录下的/style.css文件。
添加以下CSS代码：


/* han-la lxtx */  
body.han-la hanla:after {  
    content: " ";  
    display: inline;  
    font-family: Arial;  
    font-size: 0.89em;  
}  
body.han-la code hanla, body.han-la pre hanla, body.han-la kbd hanla, body.han-la samp hanla {  
    display: none;  
}  
body.han-la ol > hanla, body.han-la ul > hanla {  
    display: none;  
}
/* han-la lxtx */  
body.han-la hanla:after {  
    content: " ";  
    display: inline;  
    font-family: Arial;  
    font-size: 0.89em;  
}  
body.han-la code hanla, body.han-la pre hanla, body.han-la kbd hanla, body.han-la samp hanla {  
    display: none;  
}  
body.han-la ol > hanla, body.han-la ul > hanla {  
    display: none;  
}
/* han-la lxtx */  
body.han-la hanla:after {  
    content: " ";  
    display: inline;  
    font-family: Arial;  
    font-size: 0.89em;  
}  
body.han-la code hanla, body.han-la pre hanla, body.han-la kbd hanla, body.han-la samp hanla {  
    display: none;  
}  
body.han-la ol > hanla, body.han-la ul > hanla {  
    display: none;  
}

如果你在第一步中将han-la类添加到了html标签而不是body标签，请将上述CSS代码中的body替换为html。

注意事项

缓存问题：由于添加了JS和CSS文件，记得清空主题插件缓存、CDN缓存及浏览器缓存以确保更改生效。
备用方法：如果你不想全局应用此功能，可以考虑使用其他方法如Pangu.js来仅在特定区域（如文章正文或评论区）应用自动加空格处理。例如：


<script src="https://cdn.staticfile.org/pangu/4.0.7/pangu.min.js"></script>  
<script>  
    pangu.spacingPage(); // 全局加空格  
    // 或者  
    pangu.spacingElementById('main'); // 仅在id=main的区域加空格  
    // 或者  
    pangu.spacingElementByClassName('comment'); // 仅在class=comment的区域加空格  
    // 或者  
    pangu.spacingElementByTagName('p'); // 仅在<p>标签内加空格  
</script>
<script src="https://cdn.staticfile.org/pangu/4.0.7/pangu.min.js"></script>  
<script>  
    pangu.spacingPage(); // 全局加空格  
    // 或者  
    pangu.spacingElementById('main'); // 仅在id=main的区域加空格  
    // 或者  
    pangu.spacingElementByClassName('comment'); // 仅在class=comment的区域加空格  
    // 或者  
    pangu.spacingElementByTagName('p'); // 仅在<p>标签内加空格  
</script>
<script src="https://cdn.staticfile.org/pangu/4.0.7/pangu.min.js"></script>  
<script>  
    pangu.spacingPage(); // 全局加空格  
    // 或者  
    pangu.spacingElementById('main'); // 仅在id=main的区域加空格  
    // 或者  
    pangu.spacingElementByClassName('comment'); // 仅在class=comment的区域加空格  
    // 或者  
    pangu.spacingElementByTagName('p'); // 仅在<p>标签内加空格  
</script>