Как изменить шрифт визуального или html-редактора в WordPress
В WordPress новых версий есть функция редакторских стилей, благодаря которой Вы можете создать свое собственное оформление для визуального редактора не затрагивая файлы ядра WordPress.
Всего два простых шага, но вам потребуется подключение по FTP:
1. Откройте файл functions.php вашей темы и добавьте в него строку add_editor_style();
2. Создайте свой файл editor-style.css или скопируйте этот файл из стандартной темы WordPress Twenty Eleven.
Приводим для примера немного измененный файл стилей редактора из темы Twenty Eleven.
В нем мы убрали слегка раздражающее ограничение на по ширине — 584px, и добавили более привычные шрифты.
html .mceContentBody {
width: 100%;
}
* {
color: inherit;
font: 15px Georgia, Times, "Times New Roman", serif;
font-style: inherit;
font-weight: inherit;
line-height: 1.625;
}
body {
color: #333;
font: 15px "Helvetica Neue", Helvetica, Arial, "Nimbus Sans L", sans-serif;
font-weight: 300;
line-height: 1.625;
}/* Headings */
h1,h2,h3,h4,h5,h6 {
clear: both;
}
h1,
h2 {
color: #000;
font-size: 15px;
font-weight: bold;
margin: 0 0 .8125em;
}
h3 {
font-size: 10px;
letter-spacing: 0.1em;
line-height: 2.6em;
text-transform: uppercase;
}
h4, h5, h6 {
font-size: 14px;
margin: 0;
}
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin-bottom: 1.625em;
}
/* Text elements */
p, ul, ol, dl {
font-weight: 300;
}
p {
margin-bottom: 1.625em;
}
ul, ol {
margin: 0 0 1.625em 2.5em;
padding: 0;
}
ul {
list-style: square;
}
ol {
list-style-type: decimal;
}
ol ol {
list-style: upper-alpha;
}
ol ol ol {
list-style: lower-roman;
}
ol ol ol ol {
list-style: lower-alpha;
}
ul ul, ol ol, ul ol, ol ul {
margin-bottom: 0;
}
dl {
margin: 0 1.625em;
}
dt {
font-size: 15px;
font-weight: bold;
}
dd {
margin: 0 0 1.625em;
}
strong {
font-weight: bold;
}
cite, em, i {
font-style: italic;
}
cite {
border: none;
}
big {
font-size: 131.25%;
}
.mceContentBody blockquote,
.mceContentBody blockquote p {
font-family: Georgia, "Bitstream Charter", serif !important;
font-style: italic !important;
font-weight: normal;
margin: 0 3em;
}
.mceContentBody blockquote em,
.mceContentBody blockquote i,
.mceContentBody blockquote cite {
font-style: normal;
}
.mceContentBody blockquote cite {
color: #666;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
text-transform: uppercase;
}
pre {
background: #f4f4f4;
font: 13px "Courier 10 Pitch", Courier, monospace;
line-height: 1.5;
margin-bottom: 1.625em;
padding: 0.75em 1.625em;
}
code, kbd, samp, var {
font: 13px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr, acronym, dfn {
border-bottom: 1px dotted #666;
cursor: help;
}
address {
display: block;
margin: 0 0 1.625em;
}
del {
color: #333;
}
ins {
background: #fff9c0;
border: none;
color: #333;
text-decoration: none;
}
sup,
sub {
font-size: 10px;
height: 0;
line-height: 1;
position: relative;
vertical-align: baseline;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
input[type=text],
textarea {
background: #fafafa;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
border: 1px solid #ddd;
color: #888;
}
input[type=text]:focus,
textarea:focus {
color: #333;
}
textarea {
padding-left: 3px;
width: 98%;
}
input[type=text] {
padding: 3px;
}
/* Links */
a,
a em,
a strong {
color: #1b8be0;
text-decoration: none;
}
a:focus,
a:active,
a:hover {
text-decoration: underline;
}
/* Alignment */
.alignleft {
display: inline;
float: left;
margin-right: 1.625em;
}
.alignright {
display: inline;
float: right;
margin-left: 1.625em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
/* Tables */
table {
border: none !important;
border-bottom: 1px solid #ddd !important;
border-collapse: collapse;
border-spacing: 0;
text-align: left;
margin: 0 0 1.625em;
width: 100%;
}
tr th {
border: none !important;
color: #666;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 2.6em;
text-transform: uppercase;
}
td {
border: none !important;
border-top: 1px solid #ddd !important;
padding: 6px 10px 6px 0;
}
/* Images */
img[class*="wp-image-"] {
height: auto;
max-width: 97.5%;
}
img.size-full {
width: auto; /* Prevent stretching of full-size images in IE8 */
}
img.wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
p img,
.wp-caption {
margin-top: 0.4em;
}
img {
border: 1px solid #ddd;
padding: 6px;
}
img.alignleft,
img.alignright,
img.aligncenter {
margin-bottom: 1.625em;
}
.wp-caption {
background: #eee;
border: none;
margin-bottom: 1.625em;
max-width: 96%;
padding: 9px;
}
.wp-caption img {
display: block;
margin: 5px auto 0 !important;
max-width: 98%;
border-color: #eee;
}
.wp-caption .wp-caption-text,
.wp-caption-dd {
color: #666;
font-family: Georgia, serif !important;
font-size: 12px;
margin: 0 0 0.6em 0 !important;
padding: 0 0 5px 40px;
position: relative;
text-align: left;
}
.wp-caption .wp-caption-text:before {
color: #666;
content: ‘\2014′;
font-size: 14px;
font-style: normal;
font-weight: bold;
margin-right: 5px;
position: absolute;
left: 10px;
top: 7px;
}
a:focus img[class*="wp-image-"],
a:hover img[class*="wp-image-"],
a:active img[class*="wp-image-"] {
background: #eee;
border-color: #bbb;
}
.wp-caption a:focus img,
.wp-caption a:active img,
.wp-caption a:hover img {
background: #fff;
border-color: #ddd;
}
Однако, для тех, кто любит использовать HTML-редактор, тоже есть решение.
Достаточно открыть functions.php вашей темы (можно даже через Внешний вид — Редактор) и добавить этот код.
add_action( ‘admin_head-post.php’, ‘my_fix_html_editor_font’ );
add_action( ‘admin_head-post-new.php’, ‘my_fix_html_editor_font’ );function my_fix_html_editor_font() { ?>
<style type="text/css">#wp-content-editor-container #content, #wp_mce_fullscreen { font-family: Georgia, Times, "Times New Roman", serif; font-size: 15px;}</style>
<?php }
Обратите внимание, что для версий WordPress ниже 3.3 классы стилей немного отличаются. Например, в WordPress 3.2 вместо #wp-content-editor-container используется #editorcontainer.