Редактирование шаблона WordPress: как изменить тему под себя? Основы правильного редактирования шаблонов Wordpress

Редактирование шаблона WordPress: как изменить тему под себя? Основы правильного редактирования шаблонов Wordpress

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

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

Меню

Для настройки внешнего вида меню редактор шаблонов предоставляет целый ряд инструментов на одноимённой вкладке (рисунок ниже).

Область PresetGroup, инструмент Пресеты . Данный инструмент (рисунок ниже) содержит готовые стили оформления меню.


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

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

  • 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 код, со сверстанными страницами. Решение может активно использоваться для создания и настройки сайтов самых разных тематик.

Чем открыть шаблон WordPress?

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

Как менять шаблоны WordPress?

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

Редактирование шаблона WordPress

  1. Откройте админку WordPress.
  2. Далее выберите Внешний вид-Редактор .
  3. В колонке справа будут все файлы шаблона, которые можно редактировать. Выбираете нужный вам файл, измените его и жмете Обновить .

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

Редактирование файлов используя файловый менеджер хостинга

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

Файлы , которые редактируются, размещены в папке: /wp-content/themes/название_вашего_шаблона/. Открываете ее и ищете необходимый для редактирования файл.

Редактирование темы на ftp

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

  • Запустите свой клиент ftp . Можно использовать Total Commander или же FileZilla для подключения клиента ftp . Проверьте соединение с вашим сайтом и откройте папку вашего шаблона: /wp-content/themes/название_вашго_шаблона/
  • Файл, который планируете редактировать, скопируйте на локальный диск.
  • Откройте данный файл в программе — редакторе кода и можете смело вносить все нужные изменения.

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

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

Выводы

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

Определитесь какой сложности будет проводиться модернизация темы и определите самый удобный способ редактирования. Но, на всякий случай, сделайте резервную копию, чтоб не потерять рабочий шаблон совсем. При неудачном завершении редактирования, вы сможете восстановить все данные и запустить тему в работу в изначальном виде.

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

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

Прежде чем мы приступим к редактированию темы, следует сделать несколько важных замечаний:

речь идет именно о небольших правках, а не о кардинальных изменениях в теме, в последнем случае вам лучше обратиться за помощью к вебмастеру;

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

В качестве примера я возьму стандартную тему Twenty Fifteen, которая идет в комплекте WordPress. С учетом замечания выше о различных способах создания тем, объяснять лучше именно на одной из стандартных тем WordPress. Взглянем на структуру папки с темой.

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

Давайте в качестве примера изменим размер заголовков названий статей. Через инструменты разработчика мы можем найти правила в файле стилей, отвечающие за оформление того или иного элемента.

Откроем файл style.css в редакторе и изменим значение свойства font-size для заголовка статьи с 3.9 на 2.9. Сохраним файл, обновим его на сервере и после обновления страницы мы можем увидеть, что размер заголовка стал меньше. Точно по такой же схеме мы можем изменить оформление и любого другого элемента в дизайне вашей темы.

content.php — файл отвечает за центральную часть сайта, то есть область контента;

footer.php — нижняя часть сайта (подвал или футер);

header.php — верхняя часть сайта (шапка или хедер);

sidebar.php — боковая часть сайта (сайдбар).

Для примера давайте возьмем тот же заголовок статьи и попробуем его немного отредактировать. В теме Twenty Fifteen это заголовок второго уровня (h2). Давайте заменим его, например, заголовком третьего уровня (h3). Для этого откроем шаблон content.php, попробуем найти соответствующий участок кода и внести правки. Вот этот код:

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

обратиться за помощью к вебмастеру, который за соответствующую плату внесет необходимые изменения в тему;

изучить вопрос создания тем самостоятельно, в этом случае для вас не составит никакого труда отредактировать тему WordPress самостоятельно.

Если вы решили выбрать второй вариант, тогда могу порекомендовать для изучения наш бесплатный курс, посвященный созданию тем для 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-кода (можно обновить по своему усмотрению);
  • настройка изображений, вставка картинок в нужное место;
  • настройка слайдера, который будет показан в верхней части ниже шапки (текст слайдера можно изменить на свой).

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



© 2024 beasthackerz.ru - Браузеры. Аудио. Жесткий диск. Программы. Локальная сеть. Windows