Languages: English • Español • 日本語 ไทย • 中文(简体) • Русский • (Add your language)
WordPress relies heavily on the presentation styles within CSS. With the use of Themes, you have an almost infinite choice of layout options. WordPress Themes make it easy to change your website look, and open up the field to help you create your own Theme and page layout.
CSS stands for Cascading Style Sheets. It allows you to store style presentation information (like colors and layout) separate from your HTML structure. This allows precision control of your website layout and makes your pages faster and easier to update.
В данной статье кратко описывается использование CSS в WordPress, а также перечислены некоторые ссылки для получения дополнительной информации. Для получения информации о самой CSS см Know Your Sources#CSS.
WordPress Themes use a combination of template files, template tags, and CSS files to generate your WordPress site's look.
Несколько классов для выравнивания изображений и блочных элементов (div, p, table etc.) были введены в WordPress 2.5: aligncenter, alignleft и alignright. Также не стоит забывать про класс alignnone, который добавляется к изображениям, к которым не применялось выравнивание (как правило при оформлении текста в визуальном редакторе (прим.переводчика)), Данный класс позволит оформить подобные картинки особенным способом, если это необходимо.
Одни и те же классы используются для выравнивания изображений, которые имеют заголовок (по состоянию на WordPress 2.6). Три дополнительных класса CSS необходимы для оформления заголовков, а также выравнивание подписей:
/* =Ядро WordPress
-------------------------------------------------------------- */
.alignnone {
margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
.alignright {
float:right;
margin: 5px 0 20px 20px;
}
.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
a img.alignright {
float: right;
margin: 5px 0 20px 20px;
}
a img.alignnone {
margin: 5px 20px 20px 0;
}
a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto
}
.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%; /* Image does not overflow the content area */
padding: 5px 3px 10px;
text-align: center;
}
.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
margin: 5px 0 20px 20px;
}
.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
}
Каждая тема должна иметь эти или подобные стили в файле style.css чтобы иметь возможность отображать изображения и подписи, оформленные через визуальный редактор, должным образом. Точные HTML элементы и значения классов и ID будет зависеть от структуры темы, которую вы используете.
Чтобы помочь вам понять больше о том, как CSS работает при взаимодействии с вашей веб-страницей, вы можете прочитать некоторые из статей, приведенных в этих списках:
If you are having some problems or questions about your WordPress Theme or layout, begin by checking the website of the Theme author to see if there is an upgrade or whether there are answers to your questions. Here are some other resources: