Как изменить стили в текстовом редакторе Вордпресс?


Когда у меня был старенький ноутбук с диагональю экрана 13 дюймов и разрешение 1366х1080, то писать в текстовом редакторе WordPress статьи было просто и удобно.

Но теперь у меня 27 дюймовый IMAC с 5K разрешением и шрифт в текстовом редакторе микроскопический, можно сломать глаза. На этом сайте я недавно решил проблему и хочу это зафиксировать для себя, может кому пригодится.

Как изменить стили в текстовом редакторе Вордпресс?

Сегодня сел писать статью на другом своем сайте про самый маленький компьютер на Линукс и та же проблема, шрифт такой мелкий, что глаза напрягаются. Выглядит это сейчас вот так:

Редактировать запись ‹ Просто Линукс — WordPress

Как исправить ситуацию и сделать шрифт побольше, да и вообще изменить цвет ссылок и многое другое в текстовом редакторе?

Для начала нужно в файл function.php темы сайта нужно добавить такой код:

add_theme_support( 'editor-styles' );
add_action('admin_init', 'el_add_editor_styles');

function el_add_editor_styles() {
add_editor_style( 'style-editor.css' );
}

Затем в корне темы нужно создать файл style-editor.css и поместить в него такой примерно код (использую на этом сайте, можете изменить под себя)

Лицензионная Windows 10 на Алиэкспресс всего за 3$

windows 10 aliexpress
body{font:16px/140% 'Open Sans',Tahoma,Verdana,Segoe,sans-serif;color:#222;word-wrap:break-word;}
a{color:#ff6600; text-decoration: none; cursor:pointer;}
a:hover{color:#ff0000;}
p{padding:0 0 1em 0; font-size: 18px;}
p:last-child{padding-bottom:0;}
h1,h2,h3,h4,h5,h6,.wtitle,.title{margin:0;padding:0 0 0.5em;line-height:110%;font-family:'PT Serif',TimesNewRoman,"Times New Roman",Times,Baskerville,Georgia,serif;font-weight:bold;}
h1{font-size:36px;padding:0;}
h2{font-size:30px;}
h3{font-size:24px;}
h4{font-size:20px;}
h5,h6{font-size:18px;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{text-decoration:none;}
blockquote,q{position:relative;padding:10px 10px 10px 50px;margin:10px 0 20px 30px;color:#444;font:normal 1em/120% 'PT Serif',TimesNewRoman,"Times New Roman",Times,Baskerville,Georgia,serif;background:#EFEFEF;border-left:3px solid #936;border-radius:3px;display:block;}
blockquote:after{content:'”';position:absolute;top:10px;left:20px;font-size:4em;line-height:100%;}
table th{background:#ddd;border-right:1px solid #fff;padding:10px 20px;}
table tr th:last-child{border-right:1px solid #ddd;}
table td{padding:5px 20px;border:1px solid #ddd;}
pre{background:#f5f5f5;border:1px solid #ddd;padding:10px;text-shadow:1px 1px rgba(255,255,255,0.4);font-size:15px;line-height:15px;margin:0 0 1em 0}
sup,sub{font-size:75%;height:0;line-height:0;position:relative;vertical-align:baseline}
sup{bottom:1ex}
sub{top:.5ex}
small{font-size:75%}
big{font-size:125%}
input,textarea{padding:10px 10px 10px 0;border-color:#ddd;-webkit-border-radius:5px;border-radius:5px;font:300 16px/140% 'Open Sans',Tahoma,Verdana,Segoe,sans-serif;color:#222;}
textarea{min-height:90px;max-width:100%;box-sizing:border-box;}
textarea,input[type=text],input[type=password],input[type=email],input[type=url],input[type=tel],input[type=date],input[type=datetime],input[type=datetime-local],input[type=time],input[type=month],input[type=week],input[type=number],input[type=search]{padding:9px 10px;border-width:1px;border-style:solid;height:20px;}
input[type=search]{height:40px;}
input[type=color]{padding:0;border:0;background:#fff;}
input:focus,textarea:focus{outline:none;border-color:#936;-webkit-box-shadow:inset 0 0 8px rgba(0,0,0,0.08);box-shadow:inset 0 0 8px rgba(0,0,0,0.08);}
input[type=submit],input[type=button]{padding:10px 20px;height:40px;line-height:20px;border:0;background-color:#936;color:#fff;cursor:pointer;}
input[type=submit]:hover,input[type=button]:hover{opacity:0.9;}
ul{margin:0.5em 0 1em 30px;}
ol{margin:0.5em 0 1em 50px;list-style:decimal;}
ul ul,ul ol,ol ol,ol ul{margin-top:0;margin-bottom:0;}
li{padding-top:5px;}
h1,h2,h3,h4,h5,h6{padding-top:30px;padding-bottom:10px;}
iframe{max-width:100%;}
img{max-width:100%;height:auto;margin-bottom:10px;margin-top:8px;}
.alignleft{float:left;}
.alignright{float:right;}
img.alignleft,img.alignleft,.alignleft img{margin-right:30px;margin-left:0;}
img.alignright,img.alignright,.alignright img{margin-left:30px;margin-right:0;}
.aligncenter,div.aligncenter,img.centered{display:block;margin-left:auto;margin-right:auto;}
.anons img{margin-bottom:15px;margin-top:5px;max-width:100%;height:auto;}
.wp-caption,.attachment img{text-align:center;max-width:100%;}
.wp-caption p.wp-caption-text{font-size:10px;color:#222;margin:0;}
.attachment,.caption{text-align:center;}
.attachment .navigation{height:150px;}
.wp-smiley{margin:0;padding:0;border:0;}

Ну а можете просто скопировать этот файл у меня с этого сайта style-editor.css

И всё делов-то, смотрим на получившийся результат на том сайте:

Как изменить стили в текстовом редакторе wordpress

Вот так уже лучше, не нужно выпучивать глаза на этот маленький шрифт с насечками, чтобы понять, правильно ли и без ошибок ты все написал?

Сталкивались ли вы с такой проблемой и удалось ли вам ее решить?

Ответьте на комментарий