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。

  • 相关阅读:
    基于Python的人脸动漫转换
    let 与 var的区别
    【LeetCode】汇总
    【HDU】4632 Palindrome subsequence(回文子串的个数)
    【算法】均匀的生成圆内的随机点
    【LeetCode】725. Split Linked List in Parts
    【LeetCode】445. Add Two Numbers II
    【LeetCode】437. Path Sum III
    【LeetCode】222. Count Complete Tree Nodes
    【LeetCode】124. Binary Tree Maximum Path Sum
  • 原文地址:https://www.cnblogs.com/zqw111/p/11255235.html
Copyright © 2011-2022 走看看