Редактор темы wordpress. Pinegrow WP — веб-редактор для создания WordPress шаблонов

От автора: приветствую вас. Все, кто имеет сайты на 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-тегам.

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

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

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

Где лежат файлы

Папки с темами можно найти в поддиректории установки WordPress

\wp-content\themes

В каждой папке лежит отдельная тема.
А файл настроек WordPress wp-config.php, он тоже может понадобиться, находится в основной директории.

Структура тем WordPress

При установке новой темы WordPress вы скачиваете архив, состоящий из нескольких десятков файлов, которые отвечают за отображение информации сайта. Эти файлы представляют из себя смесь php команд, html тегов, css форматирования и простого текста. Все они связаны между собой и служат для вывода разных типов страниц. Чтобы показать информацию на отдельно взятой странице WordPress, грубо говоря, берет несколько файлов из этой папки и соединяет их последовательно в один большой файл, который, после всех дополнительных обработок, становится веб-страницей вашего сайта. У каждого типа страницы есть свой основной файл:

• single.php – используется WordPress для вывода записей;
• page.php – вывод страниц;
• archive.php, category.php и т.п. – показывает страницы списков;
• image.php – прикрепленное изображение;
• 404.php – ошибка;

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

/** * The template for displaying all pages * * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages and that * other "pages" on your WordPress site will use a different template. * * @package WordPress * @subpackage Twenty_Fourteen * @since Twenty Fourteen 1.0 */ get_header(); ?>

Некоторые из функций обращаются к другим файлам:

• get_header() – показывает содержимое файла header.php (шапку);
• get_template_part("content", "page") – шаблон с указанным именем;
• comments_template() – комментарии comments.php;
• get_sidebar() – сайдбары с виджетами;
• get_footer() – футер сайта.

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

//get_sidebar();

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

Чем редактировать шаблон

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

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

Специфические функции шаблона

Все функции, имя которых начинается с названия темы, объявлены в специальном файле functions.php. Этот файл работает как плагин, только для тем. Он может подключать другие файлы, которые функционируют точно так же, используемые для удобства разделения разной информации по логическим блокам. Таким образом все функции в шаблонах WordPress можно разделить на два типа: встроенные в само ядро и функции из файла functions.php.

Стили темы

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

A { color: #0033cc; }

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

#my-sidebar { display: none; }

Как найти нужный элемент

Если вы пользуетесь Chrome, то у вас в контекстном меню, всплывающем по клику правой кнопкой на любом элементе страницы, есть пункт “Просмотр кода элемента” . Это меню выводит на экран окно инструментов для разработчика. Здесь очень удобно искать названия классов и id элементов, причем, при наведении мышки на строку с html в окне developer tools элементы подсвечиваются и на самой странице сайта.

Окно инструментов разработчика в Chrome
Зная id элемента, остается прописать для него нужный стиль в файл style.css. Если вы не можете найти нужное место в style.css для переопределения стиля, то, в крайнем случае, можно задать ему наивысший приоритет с помощью оператора!important:

#my-sidebar { display: none !important; }

Теперь точно должно сработать.

Стирать или не стирать

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

//Sample Comment

/* Sample Comment */

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

Обновление тем

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

Дочерний шаблон

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

/* Theme Name: Twenty Fourteen Child Theme URI: //example.com/twenty-fourteen-child/ Description: Twenty Fourteen Child Theme Author: I AM Author URI: //example.com Template: twentyfourteen Version: 1.0.0 Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fourteen-child */

После этого появится возможность выбрать новую тему Twenty Fourteen Child в админке WordPress. В эту папку можно копировать те файлы, в которых планируется производить изменения (кроме functions.php и ему подобных). Так очень удобно редактировать шаблон WordPress, потому что видно именно те файлы, в которых есть изменения.

С более полным и корректным на настоящий момент способом создания дочерней темы можно ознакомиться .

Дорогие читатели, в этой статье мы научимся редактировать шаблон 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 », чтобы с помощью я их исправила.

Шаблон 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++ безошибочно покажет файлы, в которых есть подобные вхождения. А далее выбираете нужный вам файл и вносите в них изменения. Благодаря имеющейся подсветке, работа по редактированию будет проще и удобнее.

Выводы

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

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

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

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

В этом уроке я покажу, как отредактировать шапку для нашего сайта на примере стандартного шаблона «Protostar». Что нам для этого потребуется:

• FTP-клиент , например FileZilla для удобства доступа к файлам на сервере хостинг провайдера (для тех, у кого сайт расположен на хостинге)
• Текстовый редактор (notepad ++, sublime text и т.п.)
• Графический редактор (например, Photoshop)
• Веб браузер (Google chrome, Firefox и т.п.)

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

Учимся работать с файлами стилей в Joomla

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

Для просмотра кода страницы в разных браузерах есть специальные команды, но в большинстве случаев для этих целей служит клавиша F12 . В браузерах подобных Google chrome для просмотра кода определенной части страницы можно ткнуть правой кнопкой мыши по этому элементу и в выпадающем окне выбрать пункт «Посмотреть код»:

После этих действий в нижней (или правой) части страницы браузера мы увидим код страницы и стили оформления всех элементов, а искомый элемент будет подсвечен:

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

, внутри которого находится ссылка с текстом «Дополнительные поля в Joomla».

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

Как определить css файл содержащий стили шаблона

Стили применимые к каждому элементу можно увидеть в правой части браузера, а чуть правее показан css файл, который содержит данный код и строка кода, в которой можно найти данные стили:

В моем случае стили для ссылок содержатся в файле с именем template.css в строке 219, а стили для заголовков

в том же файле в строке 7220 (смотрите на скриншот выше и все станет понятно). Если навести курсор мыши на название файла стилей, то можно увидеть путь до этого файла, у меня данный файл лежит в папке templates/protostar/css/template.css . Если его открыть, то можно в этом убедиться:

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

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

Со стилями разобрались, теперь осталось выяснить, какой файл отвечает за структуру сайта и как с ним работать.

Файл структуры сайта - index.php

В любом шаблоне Joomla за его структуру отвечает определенный файл, в большинстве случаев это файл index.php который расположен в корне папки шаблона. В шаблоне Protostar индексный файл находится в папке templates/protostar/index.php именно он отвечает за расположение тех или иных элементов на страницах сайта.

Данный файл состоит из 220 строк кода написанных на языках PHP и HTML (в некоторых и JavaScript), которые выглядят следующим образом:

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

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

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

Подключение собственных файлов стилей в шаблон Joomla

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

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

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

Создание собственного css файла

Для начала нам необходимо создать новый файл стилей в предназначенной для них папке, обычно это папка под именем «css». Файл создается стандартным способом, его имя не имеет значение, главное чтоб у него было расширение «.css», я свой новый файл назвал «mycss.css».

Добавляем строки кода в файл index.php

Теперь нам необходимо подключить вновь созданный файл, другими словами сказать шаблону, что у нас появился новый файл, и мы будем его использовать. Для этого открываем индексный файл шаблона (index.php), в строке кода под номером 15 находим следующий код:

$user = JFactory::getUser();

Сразу за ним дописываем новую строку:

$doc = JFactory::getDocument();

Должно получиться примерно следующее:

На данном этапе мы только объявили переменную, при помощи которой будем подключать наш новый файл стилей. Теперь нам надо написать еще одну строку кода, которая будет непосредственно отвечать за само подключение CSS файла.

// Add Stylesheets

После него дописываем наш код для подключения css файла:

$doc->addStyleSheetVersion($this->baseurl . "/templates/" . $this->template . "/css/mycss.css");

У меня получилось вот так:

Как проверить подключен ли наш файл стилей

Чтобы убедиться в том, что наш файл стилей действительно подключен, нам снова потребуется открыть код страницы, но на сей раз несколько иначе. Жмем в окне браузера правой кнопкой мыши в любом месте страницы и в выпадающем списке выбираем пункт «Просмотр кода страницы» или нажать сочетание клавиш Ctrl+U .

В открывшемся окне находим строки кода, начинающиеся на

Если в списке его нет, то возможно потребуется перезагрузить страницу с очисткой кэша (комбинация клавиш Ctrl+F5)

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