Основы правильного редактирования шаблонов Wordpress

При создании сайта многие сталкиваются с проблемой оформления, в особенности те, кто ничего не смыслит в коде. Использовать стандартный шаблон не очень хочется, ведь на просторах сети можно наткнуться не на один такой сайт, да и более того, многие из них одноколоночные, невзрачные и некоторые из них имеют вшитые ссылки (попробуйте удалить этот текст – шаблон с большой вероятностью сильно перекосит). Но если есть деньги – можно купить премиум шаблон (будет присутствовать уверенность в качестве исполнения и функциональности).

Но если растрачиваться особо не хочется, то оптимальный выход из ситуации – использование бесплатных сервисов для создания тем WordPress, которым и посвящен наш материал.

А если хочется почувствовать себя профессиональным дизайнером, то в конце статьи мы также рассмотрим платный сервис, при помощи которого можно создавать шаблоны премиум уровня.

Конструктор тем для Вордпресс lubith.com

Первым рассмотрим ресурс для создания шаблонов lubith.com, который среди множества зарубежных испробованных нами, показался наиболее простым и удобным. Более того, он способен формировать несложную структуру шаблона, где все файлы представлены как на ладони. Ну и, конечно же, этот генератор создает темы именно под площадку Вордпресс.

Данный ресурс не кодирует свои ссылки после генерации шаблона и предоставляет доступ к главным файлам стилей, чего не предоставляют многие аналоги, что вообще ни в какие ворота. Итак, переходим на сайт , проходим несложный процесс регистрации, нажимаем на ссылку «Editor» и переходим в редактор, который сам по себе достаточно прост и понятен в использовании. Тут главное хоть немного понимать английский язык.

Функционал генератора дает возможность разгуляться: вы можете установить рамку для любого блока и т.д. Все это можно выполнить, задав нужный размер в пикселях или потянув край блока в сторону при помощи курсора. При необходимости вы сможете удалить все ненужные вам элементы. К примеру, некоторым больше по душе сайты, на которых отсутствует текст описания.

Шаблон изготавливается примерно за 15 минут, а как только решите, что все нужное было сделано, нажмите на кнопку «Download», после чего на ваш диск загрузится архив со всеми нужными файлами. Ну а чтобы поставить эту тему на свой сайт, будет достаточно закачать архив на хостинг. Данный генератор тем для Вордпресс условно бесплатен, поэтому «free версия» не лишена недостатков: вы не сможете повторно подкорректировать шаблон, не сможете отредактировать вид комментариев, не сможете создать более одной темы (т.е. обновить шаблон не получится).

Генератор вставляет свои ссылки, но это некритично, ведь они не закодированы. Просто перейдите в файл footer.php и найдите код, где упоминается слова «Wordpress Theme Generator» или сайт www.lubith.com. Блок, где расположена ссылка – можно удалить полностью или изменить ссылки на свои. Теперь ваш шаблон обретет «девственность», но нужно рассмотреть все немного детальней для возможности править все, что душе угодно (включая текст).

Это нужно, если, к примеру, у вас появилась необходимость в смене ссылок, заголовков и т.д. Для этого в Вордпресс открываем файл style.css. В нем содержатся блоки, которые отвечают за определённую часть :

Wrapper – фоновый блок, содержит все остальные;
Container – блок с главными содержательными площадки;
Header – шапка сайта;
Site-title – блок названия сайта;
Site-description – блок описания сайта;
Access (Menu) – блоки меню, расположенные под шапкой сайта;
Content – блок контентной части ресурса (там, где располагаются посты);
Primary – отвечает за виджет, расположенный справа;
Entry-title – блок с данными о публикации и авторе;
Entry-meta – блок с рубриками поста;
Widgettitile – заголовок одного виджета;
Textwidget – тело виджета.

Дополнительно также есть блоки, которые можно изменить: footer (подвал), link (вид ссылок), comments (вид комментариев и их авторов), home.sticky (вид прикрепленных записей на главной), primary (отвечает за виджет справа), secondary (отвечает за виджет слева), blockquote (оформление цитат). Вот собственно и все.

Плагин «Бесплатный конструктор онлайн шаблонов»

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

конструктор изначально имеет предустановленных 6 тем оформления (их можно обновить), но все-таки лучше создать собственную;
вкладка «Макет» дает возможность (количество колонок, их размещение);
вкладка «Шаблоны» позволяет изменить отображение домашней страницы, страницы записей, отдельной страницы, а также можно менять даты, метки, рубрики, поиск;
вкладка «Шапка» отвечает за отображение верхней части темы (можно изменять текст главной);
вкладка «Настройка контента» позволяет изменить вид ссылки на страницу автора, списки категорий, меток, отображение комментариев, а также иконки соц. сетей;
есть возможность изменить миниатюры комментариев;
настройка «футера» (можно вставить любой текст или код);
настройка шрифтов (текст можно изменять по размеру и цвету);
можно изменить цвета и прозрачность;
дизайн блоков;
правка CSS-кода (можно обновить по своему усмотрению);
настройка изображений, вставка картинок в нужное место;
настройка слайдера, который будет показан в верхней части ниже шапки (текст слайдера можно изменить на свой).

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

» мы продолжили обзор инструментов TemplateToaster и рассмотрели новшества, которые появились в 5-й версии программы по сравнению с 4-й.

Как Вы уже могли понять, для настройки различных элементов шаблона сайта используются аналогичные инструменты и их опции. Например, эффекты, настройки заднего фона и т. д. Повторно рассматривать их для каждой вкладки заново нет смысла. Поэтому на элементы, рассмотренные в предыдущих статьях, буду приводить ссылку один раз, а в дальнейшем по тексту буду просто пропускать такие инструменты.

Инструмент Позиция меню . Данный инструмент позволяет разместить меню под, над или внутри верхнего колонтитула (хэдэра). Также есть возможность вовсе его отключить.

Область Подменю . Настройка «макета» и «реакции» подменю.

Click . Открытие подменю по нажатию на кнопку пункта меню.
Hover . Открытие подменю при наведении курсора мыши на кнопку пункта меню.

Переключаясь между инструментами Мега , Вертикальный и Вы меняете «макет» подменю. На рисунках ниже приведены примеры подменю в зависимости от выбранного инструмента (согласно порядку, в перечне выше).

В зависимости от выбранного инструмента (Мега , Вертикальный и ) будут доступны другие. Например, если выбрать Мега , то можно настроить Область подменю, Пункт меню и Заголовок подменю . Если выбрать Вертикальный или , то только Область подменю и Пункт меню .

Область Подменю, инструмент Область подменю . Можно настроить задний фон (цвет, градиент или изображение), границу (стиль, толщину, радиус скругления или цвет) и тень.

Область Подменю, инструменты и Заголовки подменю . Опции этих инструментов одинаковые (рисунок ниже). Редактор шаблонов сайтов позволяет Вам настроить такие параметры (все они были рассмотрены выше в статье или ранее в других статьях):

Высота.
Ширина.
Задний фон.
Граница.
Граница при наведении курсора.
Тень.
Тень при наведении.
Разделитель.
Отступ. Внешний.
Отступ. Внутренний.
Иконка. Нормальное и наведённое состояние.
Типография. Лучше «типографика» - настройка шрифтов. Нормальное и наведённое состояние.

На вкладке (рисунок ниже) расположены инструменты для настройки боковых колонок шаблона.

Инструмент Позволяет указать, сколько боковых панелей должно быть, и где они должны располагаться (рисунок ниже).

Нет. Без боковых панелей.
Слева боковая панель. Одна боковая панель слева от области (колонки) содержимого.
Справа боковая панель . Одна боковая панель справа от области содержимого.
Слева Слева боковая панель. Две боковые панели слева от области содержимого.
Слева справа боковая панель . Одна боковая панель слева от области содержимого, одна - справа.
Справа Справа боковая панель. Две боковые панели справа от области содержимого.

Все инструменты в областях Задний фон, Макет, Эффекты, были рассмотрены ранее в статьях.

Область Высота. Позволяет задать, какой должна быть высота боковых панелей. Или 100% от высоты основной области страницы (контентной) – опция Высота 100% или боковая колонка должна подстраиваться под высоту содержимого, которое в ней размещается. Опция Эквивалентно содержимому .

На данной вкладке (рисунок ниже) Вы найдёте инструменты, при помощи которых можно настроить внешний вид модулей. Редактор шаблонов TemplateToaster 5 Professional предоставляет Вам для этого ряд инструментов. Обратите внимание, что вкладка появляется только тогда, когда Вы активируете использование одной или двух боковых панелей на вкладке , инструмент .

Причём, инструменты разделены на области, соответствующие областям модулей (рисунок ниже).

Контейнер . Зелёная рамка на рисунке ниже.
Хэдэр . Голубая рамка на рисунке ниже.
. Красная рамка на рисунке ниже.

Область Контейнер, инструмент Свойства контейнера . Вы сможете настроить внешний, внутренний отступы, границы (стиль, толщина, радиус скругления, цвет) и тень. Все эти опции уже рассматривались ранее, также, как и инструмент Задний фон .

Область Хэдэр. Все инструменты данной области, включая Свойства верхнего колонтитула (иконки, внешний и внутренний отступы, тип заголовка), уже рассмотрены в предыдущих статьях.

Область Инструмент Задний фон уже рассматривался. Инструмент (рисунок ниже) помимо рассмотренных ранее настроек позволяет сконфигурировать новые элементы.

Активная ссылка, Наведённая ссылка, Посещённая ссылка. Вы можете задать оформление текста, по аналогии с другими текстовыми объектами (стиль, размер, цвет и так далее), рассмотренными ранее, для трёх различных состояний гиперссылок.
Текст . Для этого элемента добавлена опция Отступ , которая позволяет настроить абзацный отступ (не путать с междустрочным интервалом).
Заголовки . Визуальный редактор шаблонов позволяет задать стиль, размер шрифта (кегль), семейство (гарнитуру), цвет, отступ, эффекты, выравнивание, оформление (подчёркнутый, зачёркнутый). Причём, это можно сделать для заголовка каждого уровня (H1-H6) отдельно.
Нумерованный список . Настройка оформления нумерованного списка. Помимо уже знакомых настроек шрифта можно выбрать стиль. Например: 1, 2, 3; a, b, c и так далее.
Неупорядоченный список. Настройка оформления маркированного списка. Только настройки шрифта.

Инструмент . Содержит набор предварительно установленных вариантов оформления модулей (рисунок ниже).

Для настройки вертикального меню, меню, как правило, располагаемого в боковой панели Вам будут доступны опции аналогичные опциям из вкладок Меню и .

Хочу только привести варианты оформления меню (рисунок ниже), в зависимости от выбранного «типа» расширяемого горизонтально подменю: Мега, Вертикальный, Горизонтальный .

В этой вкладке (рисунок ниже) редактор шаблонов Joomla предоставляет Вам ряд возможностей по настройке внешнего вида самого главного, что есть на любом сайте – содержимого (контента). Большинство инструментов и их настроек уже рассматривались ранее. Не будем их затрагивать, а только остановимся на новых.

Примеры предварительно установленных стилей оформления (прессетов) контента показаны на рисунке ниже.

Область инструмент . Помимо уже знакомых опций позволяет настроить высоту строки в пикселях (аналог междустрочного интервала).

Хочу обратить Ваше внимание, что для контента доступно задание нескольких границ:

Синяя сплошная линия на рисунке ниже. Область , инструмент – Граница .
Чёрная сплошная линия на рисунке ниже. Область Публикация , инструмент Свойства публикации – Внутренняя рамка – Граница .
Красная сплошная линия на рисунке ниже. Область Публикация , инструмент Свойства публикации – Граница контента.
Зелёная пунктирная линия на рисунке ниже. Область Публикация , инструмент Граница.

Область инструмент Списки . В отличие от списков в модуле, для маркированных списков (неупорядоченных) можно указать иконку маркера и её цвет.

Область инструмент Таблица . При помощи настроек данного инструмента (рисунок ниже) редактор шаблонов сайтов позволяет Вам настроить внешний вид таблиц сайта (не путать с CSS-таблицами).

Table background. Фоновый цвет таблицы.
Table Margin. Отступ от верхнего, правого, нижнего, левого края таблицы до окружающих объектов.
Table Padding. Отступ от верхнего, правого, нижнего, левого края ячейки до внутреннего содержимого ячейки.
Table Header. Настройка цвета фона и текста заголовка таблицы.
Тип рамки. Одинарная или двойная обводка.
Граница. Стиль, толщина и цвет границы таблицы.

Для тех, кто делает сайты на Джумла предлагаю ознакомиться со статьёй «Обзор Droptables. Создание прайс листа в Joomla », в которой описано расширение позволяющее сделать красивые и функциональные таблицы без знаний программирования.

Область Публикация, инструмент . Здесь (рисунок ниже) собраны настройки по управлению содержимым области контента, которую можно условно разделить на «заголовок», «содержимое» и «метаданные».

На рисунке ниже заголовок обведён синим, содержимое – красным, а метаданные – зелёным.

Настройки, доступные для этих областей (рассмотрим только новые настройки):

Показывать метаданные . Отображает\скрывает метаданные.
Внутренняя рамка . Возможно задать рамку для заголовка и\или метаданных. Можно изменить тип, цвет, ширину и радиус скругления рамки, добавить тень, изменить задний фон и внутренний\внешний отступы.
Поля от контента и Отступ содержания (лучше «Отступ содержимого»). Отступ от контента до границы области содержимого и отступ от границы области содержимого до контента (почти одно и то же).
Изображение публикации. Позволяет добавить изображение к материалу и настроить внешний вид обрамляющей его рамки.
Пост на главной. Это своего рода управление макетом страницы типа «Блог категории» (в Joomla). Пример такой страницы – страница категории с обзорами . Можно выбрать значение «0» – не отображать в верхней части страницы статью во всю ширину (за исключением тех случаев, когда для опции Колонки выбрано «1»), «1» – отображать в верхней части страницы статью во всю ширину.
Колонки. Доступно отображение контента в 1, 2, 3 или 4 колонки. По аналогии с газетными колонками.

Область Публикация, инструмент Типография . Аналогичен рассмотренным ранее одноимённым инструментам, но позволяет изменить свойства шрифтов таких элементов контента как:

Заголовок .
Title Hover . Заголовок, на который наведён курсор мыши.
Метаданные .
Мета-ссылка. Гиперссылка в области метаданных.
Наведённая мета-ссылка. Гиперссылка в области метаданных, на которую наведён курсор мыши.

Область Публикация, инструмент . Редактор шаблонов сайтов позволяет Вам задать иконку для таких элементов:

Заголовок публикации.
Автор.
Дата.
Печать.
эл. Почта.

Эти иконки отображаются над материалом (например, на этом сайте вверху есть иконка печати). Вы можете выбрать одну из доступных иконок в библиотеке TemplateToaster 5 Professional, задав ей цвет, или указать своё собственное изображение.

В следующей статье «Обзор TemplateToaster Professional. Генератор HTML шаблонов » мы рассмотрим позиции модулей, настройки внешнего вида различных элементов управления и футэр (подвал сайта или нижний колонтитул).

От автора: приветствую вас. Все, кто имеет сайты на wordpress, рано или поздно задумываются над вопросом, как редактировать wordpress шаблон. Это достаточно важное умение для любого веб-мастера. Давайте же разберемся.

Самое важное – не бойтесь. Редактировать что-либо обычно всегда проще, чем создавать с нуля. Это справедливо и для wordpress шаблонов. Чтобы разобраться, как его изменять, необходимо для начала определить его структуру. Итак, шаблон или тема состоит, по сути, из двух вещей:

Непосредственно php-файлы, которые и формируют содержимое сайта + css-файл style.css, в котором описаны все стили

Дополнительные папки и файлы. Это могут быть дополнительные css-файлы, шрифты, скрипты и т.д. Все это добавляется по желанию в зависимости от сложности шаблона

PHP-файлы и их редактирование

Чтобы полноценно редактировать php-файлы в wordpress-темах, вы должны владеть хотя бы основами этого языка. То есть хотя бы понимать базовый синтаксис языка, самые простые понятия. Ну или как минимум вы должны уметь пользоваться справочником. Например, по функциям wordpress есть хороший справочник – wp-kama.ru.

Собственно, давайте начнем с более простого – самой структуры шаблона. Его формируют разные php-файлы. Вообще сядьте сейчас и подумайте, что есть на любом сайте (ну или почти на любом)? Во-первых, это шапка. То есть верхняя часть, где обычно располагается логотип, заголовок, описание проекта и прочая информация. Во-вторых, это основная часть для вывода контента. В-третьих – боковая колонка. Или даже несколько колонок. В-четвертых, подвал сайта.

Так вот, если все это понимать, уже становится легче, потому что в wordpress шаблоне все php-файлы тоже разбиты по частям сайта или определенным. То есть:

Это именно структурные части. Ну а что же с контентной? Ну тут нужно понимать, что в основной области может располагаться запись, страница, список записей, результаты поиска и т.д. Соответственно, для каждого есть свой шаблон:

single.php – шаблон для одиночной записи;

page.php – одиночная страница;

archive.php – вывод архивных записей;

index.php – вывод главной страницы сайта.

search.php – вывод результатов поиска.

Ну еще можно сказать о таком необязательном шаблоне, как category.php. Он, как можно догадаться, отвечает за вывод постов в рубриках. Но обычно его не создают, так как с этой задачей справляется и archive.php. Вот скриншот php-файлов в простом шаблоне:

Тут можно выделить еще 2 файла:

404.php – отвечает за вывод страницы с ошибкой 404.

functions.php – этот файл содержит различные функции для шаблона. Например, с его помощью создаются произвольные виджеты, добавляются различные возможности в шаблон. Если вы не разбираетесь в php и wordpress-функциях, то этот файл лучше вообще не трогать. Да и обычно он никак не влияет на внешний вид сайта, а только на работоспособность различных возможностей.

Важное дополнение

Все, что мы рассмотрели, это лишь основные php-файлы, которые создаются при разработке любого wordpress-шаблона. Но никто не мешает разработчику добавить свои шаблоны, и вот они уже могут называться как угодно. Хотя обычно толковый разработчик называет эти файлы так, что по названию примерно понятна задача файла. Например, content-meta.php. По названию можно догадаться, что в файле содержиться мета-информация о контенте. То есть это может быть имя автора, время публикации, кол-во просмотров и комментариев и т.д.

Что-то стало вам понятней? Ну хотя бы то, что если вам нужно изменить что-то в шапке, то лезть нужно в header.php, а если добавить какую-нибудь форму подписки после каждой статьи, то в single.php. Ну и конечно, любые изменения внешнего вида уже существующих и новых элементов производятся через таблицу стилей – style.css. Но для этого нужно хотя бы немного разбираться в css.

Далее, соответственно, открываем нужный файл и смотрим, что в нем есть. Вообще плясать нужно от непосредственно вашей задачи. То есть что вам конкретно нужно изменить в шаблоне. Рассмотрим, что можно сделать.

Изменение внешнего вида уже имеющихся элементов

Например, в шапке у вас заголовок, и вы хотите сделать его синим, а не зеленым, допустим. Что делать? Открываете сайт в браузере Yandex Browser или Google Chrome, далее жмете F12. Перед вами появится отладчик. Раскрываете там структуру сайта. Отладчик подсвечивает вам блок на сайте, к которому относится тот или иной тег.

Приведу пример с главной страницей нашего сайта. Допустим, захочется нам изменить 4-й блок навигации – наши курсы. Как это сделать?

Заходим на главную, жмем F12, появляется отладчик. Начинаем раскрывать нужный тег. Для этого нажимайте на треугольник. Базовые знания html тут вам, конечно, тоже пригодятся. Например, вы должны понимать, что все содержимое сайта лежит в теге body. Короче, вы должны найти искомый элемент.

Все, когда эта информация найдена, вам остается открыть style.css, нажать Ctrl + F для поиска и ввести там название класса. В нашем случае nav4. Конечно, с webformyself это сделать не получится, потому что у вас просто нет доступа к сайту, но вот со своим шаблоном без проблем.

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

Вы можете отключать нужные стили или переписывать их, чтобы видеть, как это влияет на сайт. Отладчик будет показывать все изменения. Конечно, они будут видны только вам, потому что для реального изменения сайта нужно иметь доступ к нему.

Если говорить вкратце, то это то, как выглядит изменение элементов. Теперь давайте рассмотрим другую сторону редактирования шаблона.

Редактирование php-файлов, добавление или удаление элементов

В принципе, что-то удалить обычно проще, чем что-то добавить. До удаления можно додуматься чисто интуитивно. Например, выводиться у вас перед статьей дата публикации, а вы хотите ее перенести под статью. Вы даже чисто интуитивно можете открыть single.php и найти там блок, в котором будут слова вроде date, time и т.д. Выделить его, вырезать и вставить после вывода статьи.

А вот чтобы что-то добавить, вам нужно чуть-чуть лучше знать html и php. Или хотя бы уметь пользоваться справочником по wordpress-функциям и общим справочником по html-тегам.

& lt ; p & gt ; Авторпоста: & lt ; ? php the_author () ; ? & gt ; & lt ; / p & gt ;

Пример я как раз взял из справочника. Вам необязательно знать заранее название функции, вы можете просто ввести в поле поиска в справочнике что-то вроде “выводит имя” и вот уже справочник сам подсказывает нам подходящие функции:

Но это вариант, при котором вы наверняка сможете проделать только незначительные изменения. Друзья, если же вы хотите каким угодно образом изменять шаблоны под себя и даже создавать их с нуля, крайне рекомендую вам пройти наш , где вы с нуля создадите 3 темы. Поверьте, если вы научитесь их создавать, то тем более просто вам будет потом изменять их. Что ж, на этом я буду прощаться с вами. Надеюсь, базовые принципы изменения вы поняли. Напоследок скажу, что крайне рекомендую вам проводить все эксперименты только на локальном сервере, а если и изменять что-то на реальном, то только после резервного копирования шаблонов.

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

Я вижу две основные причины, зачем нам это нужно:

Большинство настроек блога связано с редактированием кода – html или css. Во многих своих статьях я пишу о том, что нужно отредактировать определенный файл темы. Если вы не знаете, как искать эти файлы и какими средствами удобнее их править, эта статья для вас.
При создании блога вы установили на него тему (шаблон) из интернета и хотите что-то в ней изменить, добавить элементы дизайна или функциональные блоки. Но для этого обязательно обладать хотя бы минимальными знаниями HTML и CSS. Независимо, новичок вы или имеете опыт в создании сайтов, для редактирования шаблона WordPress вы должны понимать из чего он состоит и для чего нужна каждая его часть. Поэтому для начала рассмотрим структуру шаблона WordPress.

Структура шаблона WordPress

HTML-код шаблона WordPress разбит на несколько php-файлов. Сделано это для удобства: повторяющиеся на разных страницах куски кода вынесены в отдельные файлы и подключаются к каждой странице с помощью функции include. Шапка, футер и сайдбар находятся в отдельных файлах, а файл каждого типа страниц содержит только центральную область: Наиболее часто редактируемые файлы шаблона WordPress:

index.php – Шаблон начинается с файла index.php, который выводит главную страницу сайта.
header.php - Шапка сайта. В этот файл вынесена повторяющаяся на каждой странице сайта верхняя часть. Он начинается с тега , содержит полностью , в который вставляется большинство скриптов при настройке блога. В нем открывается тег и выводится логотип, слоган, верхнее меню и прочие элементы шапки.
style.css – основной стилевой файл шаблона, в котором задается внешний вид элементов сайта. Чтобы редактировать шаблон WordPress, чаще всего приходится работать именно с этим файлом.

Остальные файлы:

single.php – отвечает за отображение каждой отдельной записи. Т.е. внешний вид страницы, на которой вы сейчас читаете мою статью, настраивается именно в этом файле.
page.php – вывод статической страницы блога. Новые страницы создаются в разделе «страницы» в левом меню, а их вид настраивается в этом файле.
sidebar.php – отвечает за вывод сайдбара (боковой колонки блога), где находятся виджеты. Эта часть шаблона тоже повторяется на каждой странице WordPress сайта, поэтому вынесена в отдельный файл. Обычно не приходится редактировать этот файл, потому что все изменения производятся над . Однако никто не запрещает вписать какой-то код напрямую в файл sidebar.php.
functions.php – файл с php-функциями темы. Все они влияют на внешний вид и работу сайта, определяют события при определенных действиях пользователей.
footer.php – футер (подвал) сайта, его нижняя часть. Это тоже повторяющийся на всех страницах элемент. В него обычно вставляют счетчики посещаемости, копирайт и контактные данные.
category.php – за вывод страницы с перечнем всех записей определенной категории отвечает данный файл.
tag.php – вывод архива записей по соответствующему тегу прописан в этом файле.
archive.php – архив всех записей за определенный месяц (год) настраивается здесь.
search.php – выводит результаты поиска по блогу.
comments.php – отображение комментариев к записям и страницам.
404.php – шаблон ошибки 404 – страница не найдена.

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

Как редактировать файлы шаблона WordPress

Сразу хочу предупредить, что не стоит лезть в код и пытаться самостоятельно его переделать, если вы ничего не понимаете в CSS и HTML. Другое дело, когда в каком-то уроке говорится вставить определенный код в определенное место файла. Обязательно сделайте бэкап файлов и базы данных, прежде чем вносить какие-то изменения! Для редактирования файлов темы WordPress сайта я предлагаю три варианта:

Настройка темы WordPress в админке

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

Зайдите в раздел «Внешний вид» — «Настроить» , откроется окно с основными настройками темы. Здесь можно ввести название и описание сайта, которые отобразятся в шапке сайта после сохранения. Так же вы можете изменить цвет фона или фоновое изображение и другие настройки — разобраться не сложно. Большую часть настроек темы WordPress можно выполнить в разделе «Внешний вид» -> «Имя вашей темы» .
Здесь можно загрузить логотип, фавикон и т.д. Настроек очень много, но честно сказать, я ими никогда не пользуюсь, так как мне проще работать с кодом, чтобы редактировать тему WordPress.

Вот и все! Выбирайте удобный для себя способ для редактирования шаблона WordPress в зависимости от ситуации и никогда не забывайте делать бэкапы. чтобы не пропустить новые полезные статьи.

P.S. Хочу напомнить вам, дорогие читатели, что если вы замечаете в моих статьях ошибки, не поленитесь нажать «Ctrl + Enter », чтобы с помощью я их исправила.

Быстрый старт с CMS Webdirector :

Для определения внешнего вида страниц web сайта создаются страничные шаблоны. Любая страница может быть выведена в любом из имеющихся html шаблонов. При назначении некоторой странице другого шаблона вся страничная информация (тексты, заголовки, картинки) сохранится, но внешний вид страницы изменится в соответствии с новым шаблоном (цвет и размер текста, выравнивание, структура экрана, "шапка" страницы и ряд других элементов).

В большинстве CMS шаблоны представляют собой HTML код с вставками макроязыка придуманного разработчиками конкретной CMS. Для написания такого кода необходимо быть программистом и разобраться в командах конкретной CMS.

В CMS WebDirector так же есть возможность ручного кодирования шаблонов и собственный макроязык, позволяющий вставлять в произвольное место HTML кода шаблона директивы, заменяемые при публикации на автогенерируемые элементы и информационные блоки (различные виды меню, новостные ленты и каталоги, формы и т.п.).

Но! Мы позаботились о начинающих разработчиках и дизанерах-графиках не знакомых с программированием - и создали "Визуальный редактор шаблонов". Визуальный редактор web страниц позволяет задавать дизайн сайта верстая страничные шаблоны полностью в визуальном режиме, не привлекая программистов .

Сначала, при помощи визуального web редактора, разработчик включая и выключая флаги задает из каких информационных зон будет состоять страница на данном страничном шаблоне (всего может быть 9 зон). Затем, для каждой зоны, при помощи визуального html редактора, разработчик выбирает в выпадающем списке информационное наполнение (меню, страничный текст, заголовок - есть много вариантов). Так же есть возможность выбрать пункт "произвольное наполнение", позволяющий вставить в зону произвольный HTML, JS, PHP код или комбинацию из автоматически генерируемых элементов и произвольного кода.

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

Для разработчиков: русский визуальный редактор шаблонов в визуальном режиме с мгновенным отображением изменений создает создает CSS таблицу текущего шаблона, что существенно быстрее ручного прописывания десятков стилей.

Для руководителей дизайн-студий этот инструмент дает возможность существенно сократить время на верстку шаблонов по утвержденному дизайну.

Кроме того, новичок сможет создать простенький, но оригинальный дизайн своему сайту путем визуального изменения одного из бесплатных cms шаблонов , входящих в комплект поставки системы управления сайтом WebDirector.

Для для дизайнеров предусмотрен профессиональный инстурмент генерации корректной палитры по законам цветоведения. Эта палитра будет далее доступна для раскраски шаблона и задания стилей текста.