Основы правильного редактирования шаблонов Wordpress. Более легкий способ. Создание собственного css файла

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

Как отредактировать

Резервная копия.

Самое первое, что Вы должны сделать — это создать резервную копию своего шаблона . Если внесенные правки будут ошибочны — Вы всегда можете вернуться к копии шаблона, которая создана еще до редактирования.
Чтобы создать резервную копию нужно необходимо в Панели Управления сайтом перейти Дизайн — Резервное копирование шаблона

Резервная копия создает копии всех шаблонов Вашего сайта. Мы уже рассматривали ранее что на сайте Ucoz для определенных страниц сайта — определенный шаблон.
Нажмите «Создать резервную копию » для ее создания. Сразу создаться новая резервная копия, которой будет присвоен свой номер из 10 цифр. Цифры Вы конечно не запомните, но по дате создания резервной копии можно сориентироваться. И все же мой совет — не создавайте слишком много копий, а старые, которые уже точно не пригодятся — удаляйте. Тогда будет легче ориентироваться.

Нажмите «Восстановить «, чтобы Ваш сайт принял прежний вид (вид сохраненных ранее шаблонов).

Строение шаблона сайта uCoz

Шаблон любой страницы сайта uCoz состоит из:

  • HTML разметки — HTML теги , определяющие расположение блоков на странице. Собственно каркас шаблона.
  • Системные коды uCoz, которые заключены в $…$. Список системных кодов (с расшифровкой их обозначения), которые можно использовать в конкретном шаблоне находится ниже поля редактирования шаблона. Пользуйтесь этим списком, как шпаргалкой, так как иногда бывает, что в другом шаблоне Вы НЕ можете использоваться какой-то системный код. Таким образом, список системных кодов подходит ТОЛЬКО тому шаблону, под которым он расположен.

На картинке условна обозначила расположение на странице: зеленым цветом — теги HTML; красным цветом — CSS стили; синим цветом — системные коды uCoz.

Редактирование шаблона сайта uCoz

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

Итак, для редактирования шаблона перейдите: Панель Управления — Дизайн — Управление дизайном (шаблоны). Выберите нужный шаблон и нажмите на него.

Есть несколько способов редактирования шаблонов:
1.Визуальный редактор шаблонов. Этот способ подходит для внесения незначительных изменений в шаблон. Изменить цвет и размер шрифта, изменить расположение элементов, добавить текст.
Нажмите кнопку для перехода в визуальный редактор шаблонов.

Теперь можете внести необходимые изменения. Тут Вам не нужно знать HTML и CSS, но перечень системных кодов и их значение знать необходимо. Само редактирование очень похоже на Word или простой визуальный редактор uCoz.
Обязательно нажмите кнопку сохранить для сохранения внесенных изменений.

2. Изменение HTML кода шаблона. Этот способ подходит для внесения любых изменений в шаблон вплоть до полного изменения шаблона, но необходимо иметь хоть какое-то представление о HTML тегах и CSS стилях.
Изменять код можно прямо на странице кода, но лично я предпочитаю делать это в стороннем HTML редакторе. Я уже неоднократно писала, что я предпочитаю Dreamweaver. Поэтому я буду рассказывать на примере этой программы.

В Dreamveaver просто редактировать шаблон, так как с одной стороны ты видишь весь код шаблона, а справа схематический результат:

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

Если Вы хотите первыми узнавать о новых статьях на сайте!!!

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

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

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

В файлах темы находится код HTML, PHP и CSS. По HTML/CSS на сайте есть отдельный справочник, а знаний PHP для формирования дизайна в принципе не требуется.

Итак, в любом шаблоне WordPress есть следующие файлы.

1. index.php . Файл формирует главную страницу сайта и вызывает другие файлы темы оформления.

2. header.php . Создаёт верх, «шапку» сайта - обычно она содержит логотип, название, описание веб-ресурса, а также горизонтальное меню. HTML-контейнер тоже находится в этом файле.

3. footer.php . Содержит код нижней части сайта, его «подвал».

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

Это обязательная основа шаблона WordPress, но обычно файлов темы гораздо больше, и вот встречающиеся чаще всего.

1. single.php - отдельный пост.

2. page.php - страница.

3. sidebar.php - боковая панель/панели.

4. archive.php - архивы статей.

5. search.php - страница поисковой выдачи.

6. comments.php - вывод комментариев.

7. 404.php - страница ошибки с кодом 404 (Файл не найден).

8. function.php - файл, содержащий функции темы оформления. В него вы можете добавить и свои собственные PHP-скрипты.

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

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

Добавить меню

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

Чтобы вставить меню в любое место, добавьте строку:

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

"Меню_1")); ?>

где вместо Меню_1 нужно ввести название вашего меню.

Изменить страницу 404

Если ссылка ведёт на несуществующую страницу или файл, WordPress переводит пользователя на страницу ошибки с кодом 404 (Файл не найден). За неё отвечает файл 404.php , хранящийся в папке активной темы. Зачастую на экран выводится английский текст, и желание владельца русскоязычного сайта перевести его на родной язык вполне понятно.

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

Замените текст в кавычках (не там, где twentyfourteen, а другой) на свой и получите видоизменённую страницу 404.

Прописать копирайт

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

За «ноги» сайта, как мы знаем, отвечает хранящийся в корне активной темы файл footer.php , и искать отвечающий за копирайт код следует именно в нём.

Например, тема flat-white вспомогательную информацию прячет в следующих строках этого файла:

" title=" "> ">

Русифицировать текст

Частенько шаблоны WordPress русифицированы не до конца или не переведены вовсе. Зная файловую структуру темы и то, что показываемый пользователю текст (если это не переменная) в коде всегда взят в кавычки, легко найти и самостоятельно перевести нужный фрагмент, причём не обязательно искать слово вручную - для этого можно воспользоваться автоматическим поиском, который присутствует в каждом редакторе кода.

Например, в шаблоне flat-white сразу хочется русифицировать как минимум две надписи: «READ MORE» и «Leave a Comment», так как их видно на главной странице.

За главную страницу отвечает файл index.php , расположенный в корне каталога темы, следовательно, редактировать надо его. Но текста надписей в нём нет, поэтому необходимо разбираться в коде, чтобы узнать, где они хранятся. В нашем случае за информацию под постами на главной странице отвечает файл template-parts/content.php , подключенный строкой

Если перейти в него и в коде

".__("Leave a Comment", "flat-white")."
"; ?>
" class="read_more">

текст Leave a Comment заменить на

Последний представитель расширений, который нам осталось рассмотреть это шаблоны. Именно шаблон в CMS Joomla 3, да и в любой другой версии определяет внешний вид и облик сайта. Благодаря шаблонам можно кардинально изменить дизайн Вашего сайта, затратив на это минимум времени, все, что потребуется это скачать и установить готовый шаблон, и определиться с местом вывода модулей.

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

Из чего состоит шаблон Joomla 3

Для шаблонов в Joomla отведена специальная папка «templates», в корне которой каждый шаблон имеет свою собственную одноименную папку. Все без исключения шаблоны состоят из файлов, причем количество этих файлов у разных шаблонов может отличаться. Но есть и стандартные файлы, без которых не будет работать ни один шаблон:

  • index.php – индексный файл, он определяет структуру сайта
  • templateDetails.xml – данный файл содержит всю информацию о шаблоне и служит для установки шаблона через панель управления
  • Файлы стилей (.css) – с их помощью определяется оформление страниц

Кроме того шаблоны могут содержать файлы скриптов (.js), изображения, языки и многое другое. На скриншоте ниже представлен набор файлов, из которых состоит стандартный шаблон «Protostar»:

Какие бывают шаблоны

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

  • Шаблоны для сайта – меняют облик и дизайн сайта
  • Шаблоны для панели управления – данный вид шаблонов предназначен именно для панели управления, на сайт они никак не влияют.

Работа с шаблонами Joomla 3

С разновидностями, местом хранения и файлами шаблонов разобрались, теперь поговорим о том, как работать с шаблонами при помощи панели управления. Для начала давайте перейдем в раздел «Шаблоны: Стили (Site)» («Расширения» -> «Шаблоны») и посмотрим, какие шаблоны уже присутствуют в базовой сборке CMS Joomla:

На странице «Шаблоны: Стили (Site)» видно, что в нашем распоряжении имеется два шаблона Beez3 и Protostar , последний установлен по умолчанию для всех страниц сайта, обратите на это внимание ведь в Joomla один и тот же сайт может состоять из нескольких шаблонов. И для различных разделов сайта можно назначить свой собственный шаблон, тем самым сделать сайт более привлекательным.

Давайте откроем один из шаблонов для редактирования и посмотрим, что и как можно отредактировать:

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

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

И последняя вкладка - «Привязка к меню» именно с её помощью можно назначить шаблон для всего сайта или для определенных разделов. Просто отмечаем те пункты меню, для которых будет определен данный шаблон:

Позиции модулей в шаблоне Joomla 3

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

Как узнать или где посмотреть позиции модулей в Joomla 3 ? Для этого в Joomla предусмотрен специальный предварительный просмотр, но по умолчанию он недоступен (выключен) и его необходимо включить в настройках.

Для того чтобы включить отображение позиций модулей в Joomla 3 необходимо на странице «Шаблоны: Стили (Site)» нажать на кнопку «Настройки». После этого мы попадем на страницу «Настройки менеджера шаблонов», на которой выставляем переключатель «Просмотр позиций модулей» в положение «Включено»:

После этого снова переходим на страницу менеджера шаблонов – «Шаблоны: Стили (Site)» и жмем на иконку с изображением глаза расположенную чуть левее названия шаблона:

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

Создание собственных позиций модулей

Просматривать уже существующие позиции модулей мы уже научились, но как быть, если в шаблоне нет именно той позиции, которая нам нужна? В этом случае можно создать собственную позицию для модулей в готовом шаблоне Joomla. Процесс не сложный, но требует редактирования определенных файлов шаблона – index.php и templateDetails.xml .

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

Переходим от слов к делу, для начала открываем файл templateDetails.xml , который находится в корневом каталоге шаблона. Вникать в его суть сейчас нет смысла, нас интересуют только позиции для модулей, они объявлены между строчками <position >имя-позиции-модуляposition > (строки 28-47 шаблона Protostar). По умолчанию их 18 штук:

Для того чтобы объявить свою позицию модулей добавляем дополнительную строку (либо несколько строк) такого вида:

my-module-position

Сохраняем файл, его можно закрыть, главное запомнить имя позиции, под которой вы его объявили.

Теперь открываем файл index.php и добавляем в него новый блок DIV, который будет являться контейнером для новой позиции модулей. Я для примера решил создать новую позицию для модулей в футере сайта. Пишем в футер следующий код:

Div>

Вот и все, позиция создана, можно зайти в раздел «Менеджер шаблонов» и проверить её наличие. Код индексного файла у меня получился таким:

Давайте разберем код, который отвечает за вывод модуля, он начинается со строки:

Type="modules"

Теперь необходимо указать имя позиции модуля, которое мы указали в файле templateDetails.xml:

Name="my-module-position"

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

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

Вот таким образом можно создавать собственные позиции модулей абсолютно в любом шаблоне Joomla 3. Процесс как видите совершенно не сложный.

Расширенные параметры шаблона Joomla 3

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

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

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

О том, как создавать переопределение, подробно написано в статье «Переопределение в Joomla 3 », а на данном этапе нам просто необходимо понимать, где и что редактируется в шаблоне.

На последней вкладке «Описание шаблона» написана небольшая информация по данному шаблону, данная вкладка нам не интересна.

От автора: приветствую Вас уважаемые читатели. Шаблон – важный элемент любого хорошего сайта, так как он формирует структуру и дизайн отображаемых данных. Соответственно в процессе разработки, так или иначе, необходимо вносить множество правок в оформление сайта. Поэтому в данной статье мы с Вами поговорим о том, как редактировать шаблон в Joomla 3.

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

В Joomla шаблоны устанавливаются в систему как обычное расширение, при помощи “Менеджера расширений”, соответственно для изменения дизайна сайта, достаточно установить понравившийся шаблон. Но все не так просто как кажется, так как зачастую очень сложно найти идеально подходящий шаблон для конкретного сайта. То есть Вы можете найти хороший шаблон, который удовлетворяет всем предпочтениям по внешнему виду, но один из его элементов не подходит или не соответствует неким критериям и т.д. В этом случае необходимо либо искать другой, либо установить найденный шаблон в систему и попытаться адаптировать его к нужному дизайну, то есть внести правки.

Для CMS joomla редактирование шаблона можно выполнить двумя способами.

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Поэтому, редактировать шаблон Joomla, Вы можете непосредственно в менеджере шаблонов, на странице конкретного шаблона.

Для этого необходимо перейти в вышеуказанный раздел панели администратора и выбрать интересующий шаблон (кликнуть по его заголовку).

К примеру, в стандартном шаблоне Beez3 предусмотрены настройки, которые Вы видите на рисунке выше.

Второй способ предусматривает внесение правок в файл стилей шаблона, потому как все оформление шаблона, помимо его структуры, сосредоточено там.

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

Узнать непосредственный путь к подключаемым файлам стилей, можно из исходного кода сайта. То есть выбираете необходимый шаблона в качестве шаблона по умолчанию и переходите в пользовательскую часть. Далее просматриваете исходники.

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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



Похожие публикации