Когда у меня был старенький ноутбук с диагональю экрана 13 дюймов и разрешение 1366х1080, то писать в текстовом редакторе WordPress статьи было просто и удобно.
Но теперь у меня 27 дюймовый IMAC с 5K разрешением и шрифт в текстовом редакторе микроскопический, можно сломать глаза. На этом сайте я недавно решил проблему и хочу это зафиксировать для себя, может кому пригодится.
Как изменить стили в текстовом редакторе WordPress?
Сегодня сел писать статью на другом своем сайте про самый маленький компьютер на Линукс и та же проблема, шрифт такой мелкий, что глаза напрягаются. Выглядит это сейчас вот так:
Как исправить ситуацию и сделать шрифт побольше, да и вообще изменить цвет ссылок и многое другое в текстовом редакторе?
Для начала нужно в файл function.php темы сайта нужно добавить такой код:
|
1 2 3 4 5 6 |
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 и поместить в него такой примерно код (использую на этом сайте, можете изменить под себя)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
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
И всё делов-то, смотрим на получившийся результат на том сайте:
Вот так уже лучше, не нужно выпучивать глаза на этот маленький шрифт с насечками, чтобы понять, правильно ли и без ошибок ты все написал?
Сталкивались ли вы с такой проблемой и удалось ли вам ее решить?
Поставил сегодня на один сайт плагин Лейка для сбора пожертвований, так он как то умудрился перебить стили текстового редактора сайта и сделать малюсенький шрифт. Пришлось применять совет из этой статьи, спасибо мне за мою же статью ;)
Поставил сегодня на один сайт плагин Лейка для сбора пожертвований, так он как то умудрился перебить стили текстового редактора сайта и сделать малюсенький шрифт. Пришлось применять совет из этой статьи, спасибо мне за мою же статью ;)