zoukankan      html  css  js  c++  java
  • WordPress实现中英文数字之间自动加空格排版

      通常来说中文与英文、中文和数字之间加上空格的排版会更加好看,但是如果让我们在编辑文章的时候人工添加,感觉非常繁琐和让人厌烦,所以今天龙笑天下就来跟大家介绍一下WordPress如何实现中英文数字之间自动加空格的排版技巧。(PS:其实很早就想加上这个功能了,但奈何懒癌发作…)

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

      在html标签中添加class=”han-la”(一般在header.php文件中)。但是并不是硬性规定,现在很多博客都是通过功能函数动态加载class类,那么同样的,你也可以将这个han-la类动态加载到body中去。将类加载到html标签中的方法就不说了,这里说下怎么加载到body标签中,当然在这里,你的主题应该是使用了body_class()这个标准函数的。
      /**

      *WordPress实现中英文数字之间自动加空格排版-龙笑天下

      *https://www.jkys120.com/article/95496/

      *在body标签中加入han-la类

      */

      function lxtx_add_hanla_to_body_class($classes){

      $classes[]='han-la';

      return$classes;

      }

      add_filter('body_class','lxtx_add_hanla_to_body_class');

      另外,值得一提的是该函数也会暴露一个问题,具体见下文:

      (全网独家)如何正确的避免你的WordPress管理员登录用户名被暴露

      第二步:引入js文件

      在jquery文件后面引入text-autospace.min.js或text-autospace.js,下载地址为:https://github.com/mastermay/text-autospace.js

      /**

      *WordPress实现中英文数字之间自动加空格排版-龙笑天下

      *https://www.jkys120.com/article/95496/

      *加入text-autospace.min.js文件

      */

      function lxtx_styles_scripts(){

      //全局加载js脚本

      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');

      注意修改代码中第8行的文件引用路径哦~

      最后一步:添加CSS代码

      将以下代码加入你的style.css文件中。

      /*han-la xtx*/

      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类class加到html标签中的话,在这一步中你需要将以上CSS代码中的body全改为html。

  • 相关阅读:
    [转]Git忽略规则及.gitignore规则不生效的解决办法
    动漫(杂)
    《计算机图形学》2.5 ~ 2.7 学习笔记
    《计算机图形学》2.4 输入设备 学习笔记
    《计算机图形学》2.2.2 光栅扫描显示处理器
    Android 使用版本控制工具时添加忽略文件方式
    devexpress表格控件gridcontrol设置隔行变色、焦点行颜色、设置(改变)显示值、固定列不移动(附源码)
    详解shape标签
    以向VS 程序打包集成自动写入注册表功能为例,介绍如何实现自由控制安装过程
    C#组件系列——又一款Excel处理神器Spire.XLS,你值得拥有
  • 原文地址:https://www.cnblogs.com/zqw111/p/11255235.html
Copyright © 2011-2022 走看看