自定义(修改)WordPress管理后台界面的字体样式

默认的话,WordPress 后台管理界面的字体样式是“sans-serif”,中文的话直接是宋体了(当然,在Windows的机子上是这样,苹果机可能不同)。不知道是看多了的缘故,总觉得宋体太难看了,想换成微软雅黑。但是苦于WordPress 特殊的文件机制,实现起来并不是加个CSS 样式那么简单(没耐心得直接看折腾三)。

折腾一(fail)

Jeff 在本地测试,通过开发者工具查看WordPress 后台样式文件,结果让我蒙了:比如说,某部分的CSS 竟然是通过PHP 文件来加载CSS 的(讲得不明不白,直接看图片),

看完图,CSS 文件地址是 http://localhost/wp-admin/load-styles.php?c=0&dir=ltr&load=admin-bar,wp-admin,buttons&ver=3.5.1 ,打开这个链接后固然是个CSS样式表;但在load-styles.php 文件中木有直接写的CSS 样式,如果通过PHP 加载倒正常,但是表现出来的url 太奇特了吧?搞得我都不知道在哪里添加CSS 代码了。

折腾二(半fail)

在load-styles.php那里发现有几行代码是加载CSS 的,指向的源地址在 wp-includes\css 下。基本上是后台样式文件了。但是,这个时候如果要实现WordPress管理后台字体为微软雅黑,需要每个CSS 文件都要添加font-family的相关代码——如此一来,费力费时,一旦日后WordPress 更新升级有得从来。所以这个也不是好办法。

折腾三(成功)

想着能否直接通过自定义函数,加载一个CSS文件(或一段CSS 代码),最后的话借助一些网络资料,终于搞定了。

方法:在主题的functions.php文件下加入以下代码:

//更改后台管理界面字体 devework.com function dw_admin_font(){ echo'<style>*{font-family:"Microsoft YaHei" !important;}</style>'; } add_action('admin_head', 'dw_admin_font');

其实核心就是那个*{font-family:"Microsoft YaHei" !important;},所有元素加个font-family属性,并且用!important加强优先级,就这样。

话说,挺耗资源的,用* 又用!important 。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

Arcgis for Js之鼠标经过显示对象名的实现

在浏览地图时,移动鼠标经过某个对象或者POI的时候,能够提示该对象的名称对用户来说是很实用的,本文讲述在Arcgis for Js中,用两种不同的方式来实现该效...

1892
来自专栏前端新视界

如何在已有的 Web 应用中使用 ReactJS

当我们学习一项新技术,可能是一个 JavaScript 框架,也可能是一个 CSS 方法,我们将面对这样的挑战 如何在旧网站上运用这项新技术?。很多教程讲述了如...

850
来自专栏iKcamp

翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者:...

2838
来自专栏施炯的IoT开发专栏

创建分辨率自适应的Windows Phone 8应用程序

1. 引言     Windows Phone 7平台只支持WVGA分辨率(480*800)的设备,这对于应用程序的UI设计来说是有利的,因为设计人员不用考虑多...

2077
来自专栏前端新视界

如何在现有的 Web 应用中使用 ReactJS

原文:How to Sprinkle ReactJS into an Existing Web Application 译者:nzbin ? 当我们学习...

2614
来自专栏DeveWork

将你的网站打造成一个iOS Web App

最近在做一个手机主题,据说借用类似 link href="xx.png" rel="nofollow" rel="nofollow" rel="apple-to...

3636
来自专栏飞雪无情的博客

Android设计应用图标不用愁---Asset Studio Integration来帮你

Android Asset StudioWeb版是一个非常好用的Andrid图标资源设计工具,它是由RomanNurik开发的。现在我们已经在ADT14里支持同...

1155
来自专栏vue学习

小程序 — 实现左滑删除效果①

(1)movable-area这个就是定义了一个移动的区域,跟普通的<view></view>的含义是一样的,不同在于,接着往下看;

5922
来自专栏HTML5学堂

网络字体@font-face 如何处理网页中的特殊字体

HTML5学堂:随着网页的发展,网页中出现了越来越多的字体种类,网页自带的微软雅黑、宋体、黑体已经越来越难以满足设计的需要,那么,如何在网站中使用比较特殊的字体...

5255
来自专栏无原型不设计

【Mockplus教程】创建

新建页面可以使用三种方式来实现: 1 点击右边页面树顶部的“+”按钮; 2 在右边页面面板空白处右击,在弹出菜单中选择“新建页面”; 3 直接使用快捷键...

2916

扫码关注云+社区

领取腾讯云代金券