如何将自定义CSS样式添加到WordPress文章编辑器中

  • A+
所属分类:网站建设

您可以添加编辑器风格,并使用自定义CSS样式更改WordPress帖子编辑器外观,并创建一个舒适的写作体验,适合您的眼睛,让您比以往任何时候都更喜欢写作。比如在编辑器中使用黑色背景配合白色文本,您可以自定义最适合您的外观。

WordPress的帖子编辑器

让我们看看WP的帖子编辑器屏幕默认的CSS样式

没有编辑风格

再来看看使用黑色背景配合白色文本的风格:

添加编辑器样式

你是否喜欢这种黑暗背景、白色文本和链接绿色的风格呢?你可以自己定制你自己的使用习惯的风格!

添加自定义编辑器样式

要开始 - 首先您需要启用WordPress主题中的功能。如果您正在使用新的主题或最近更新的WordPress主题,则此功能最近是获取主题批准的必需功能

首先,您需要 通过在主题functions.php文件中添加以下代码来添加编辑器样式功能。[记住这是一个强大的文件,错误的代码可以让您的网站脱机。始终备份此文件,如果发生错误,它将需要通过FTP进行恢复。

  1. function qot_add_editor_styles() {
  2. add_editor_style( 'custom-editor-style.css' );
  3. }
  4. add_action( 'admin_init', 'qot_add_editor_styles' );

之后,您需要在主题文件夹中添加一个名为custom-editor-style.css的文件。通过或FTP也可以轻松地通过创建没有FTP的新文件来实现。

现在,一旦完成了两个步骤,您将设置为CSS文件添加CSS代码,并且将改变您的WordPress帖子编辑器的外观。这就是我们在custom-editor-style.css中添加的内容。

  1. body#tinymce.wp-editor {
  2. font-familyArialHelveticasans-serif;
  3. margin30px;
  4. color#DDD;
  5. background#333;
  6. }
  7. body#tinymce.wp-editor a {
  8. color#7FFF00;
  9. }

上面的代码使背景变黑,使文本变得浅灰色,并在文本周围添加了一个很好的边框,因此它不会流入边框,提供足够的空格。它也会改变字体和链接颜色为我的喜好。

注意 - 此CSS文件不会在主要博客页面上加载,因此不会影响页面打开的速度。WordPress的帖子编辑器默认情况下会模仿发布内容,因为它将最终发布,但是这种自定义编辑器风格有助于覆盖主要的博客CSS文件,以添加自定义体验到您的写作风格。这将改变Visual编辑器的外观,而不会更改文本编辑器的显示。

实验后编辑风格,我确信使用这个技巧后,你会更能写出更好的文章。

VPS笔记

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: