Обязательные стили в CMS WordPress

13.11.2013

В CMS WordPress есть классы, которые используются независимо от шаблонов и генерируются самим движком.

Поэтому некоторые стили необходимо прописывать в каждом шаблоне как стандартные.

Первым делом в таблице стилей для шаблона прописывается служебная информация:

  • Название шаблона.
  • Ссылка на страницу шаблона.
  • Описание шаблона.
  • Автор шаблона.
  • Ссылка на автора.
  • Название родительского шаблона.
  • Теги.
  • Версия.
  • Текст лицензии.
/*
Theme Name: Придумайте уникальное имя темы
Theme URI: http://ссылка-на-домашнюю-страницу-темы
Description: Описание темы
Author: Автор темы
Author URI: http://ссылка-на-страницу-автора
Template: название-темы-предка
Tags: теги темы - только из списка предлагаемого wordpress.org
Version: версия
Ну и здесь текст лицензии
*/

Эти стили обычно прописываются для выравнивания изображений, добавленных в запись:

.alignleft {
float: left;
margin:10px 10px 10px 0;
}
.alignright {
float: right;
margin:10px 0 10px 10px;
}
.aligncenter{
display: block;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}

Ниже приведены стили для отображения изображений с подписями, сам я эти стили не использую, потому что для просмотра изображений использую различные плагины — Nggallery, EasyFancybox и другие. Но некоторые заказчики желают, что бы изображения были с подписями, тогда эти стили пригодятся:

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* необязательные параметры, которые сделают скругленные углы в поддерживаемых браузерах*/
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
  margin: 0;
  padding: 0;
  border: 0 none;
  }
.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  padding: 0 4px 5px;
  margin: 0;
  }

Так же я использую большинство из этих стилей, классы которых прописываются к элементам списков в произвольных меню:

.categories {...}
  .cat-item /* Этот класс присваивается всем категориям */}
  .current-cat {/* стиль текущей категории */}
  .current-cat-parent {/* стиль для предка(ов) текущей категории */}
  .page_item {/* любой элемент списка */}
  .current_page_item {/* этот класс присваивается в списке страниц к текущей активной странице */}
  .current_page_parent {/*класс для  родительской страницы по отношению к текущей */}
  .current_page_ancestor {/* любая страница верхних уровней по отношению к данной */}
}

Например, при нахождении на странице Current, в произвольном меню, в котором отображается ссылка на страницу Current, пункт меню — элемент списка будет иметь такие классы:

<li id="menu-item-1020" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-10 current_page_item menu-item-1020">
<a href="#">Current</a>
</li>

Не уходи, пока не прочитаешь:

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