Редактор тем вордпресс. Учимся работать с файлами стилей в Joomla

Тем, кто только начал знакомство с 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 находим следующий код:

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

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

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

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

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

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

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

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

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

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

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

Особенности шаблонов для WordPress

Шаблоны для любого движка радикально отличаются по своей структуре от стандартных шаблонов, созданных на основе css и html . Шаблоны для WordPress также называют темами. Благодаря им можно легко и быстро поменять внешний вид сайта. Также легко, как человеку сменить рубашку:

В состав темы входит несколько основных групп файлов:

• CSS файлы – как и в обычном шаблоне, несут в себе стилевые описания всех элементов;
• Шаблонные файлы – каждый из них отвечает за вывод информации в определенной части сайта. Данные шаблоны имеют расширение php ;
• functions.php – файл дополнительной функциональности, который реализует интеграцию темы в движок;
• Изображения – рисунки, которые используются в качестве фона.

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

Все установленные темы доступны для просмотра через интерфейс админки сайта. Для этого нужно перейти в раздел бокового меню «Внешний вид » — «Темы». Некоторые параметры внешнего вида шаблона можно установить в пункте «Theme Options »:

• Поменять цвет меню;
• Установить цвет ссылок;
• Выбрать один из вариантов структуры сайта;
• Задать расположение меню;
• Установить цвет фона для контента.

Список параметров, доступных в «Theme Options», может быть разным для каждой из тем.

Для продвинутых пользователей в панели администрирования WordPress имеется встроенный редактор шаблонов. Он также доступен в разделе меню «Внешний вид »:

На диске (или хостинге ) файлы всех установленных тем хранятся в папке wp-content/themes/ . В редакторе тем админки все файлы шаблона перечислены справа. После нажатия на имя файла его содержимое станет доступным для правки в окне редактора:

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

Создаем новую рубашку для своего сайта

Создавать тему будем пошагово:

1) Заходим в директорию wp-content/themes/ и создаем папку theme_test . В ней будут храниться все файлы будущей темы;
2) С помощью любого редактора создаем файл css . Хотя лучше сразу использовать специализированное программное обеспечение. Например, программу Dreamweaver . Внутри комментариев прописываем название темы:

/*Theme Name: Theme_test*/. /************************************************ Defaults ************************************************/

Так мы даем понять WordPress , что это стилевой файл новой темы;

3) Создаем с помощью того же редактора файл index.php . Вставляем в него код:

Сохраняем файл в папке нашей темы. Теперь здесь два файла, предназначенных для создания шаблона WordPress :

На данном этапе новая тема уже видна через админку сайта в списке установленных:

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

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

За структуру подвала отвечает шаблон footer.php.

Так что перед тем, как сделать шаблон для WordPress , нужно все это понимать. Теперь разделим html код файла index.php по шаблонам. Для этого создаем два файла: header.php и footer.php . Затем разнесем по ним код одноименных частей страницы.

Содержимое footer.php :

Содержимое header.php :

Вот таким образом мы создали одностраничный шаблон для блога.

Более легкий способ

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

Приложение доступно в платной и бесплатной версиях. Оно поддерживает создание шаблонов для нескольких популярных CMS . Также можно загрузить уже готовые темы:

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

• yvoschaap.com – этот генератор также страдает англоязычностью. Для начала работы с ним не требуется регистрация. Поддерживается создание шаблонов и их скачивание. Но интерфейс немного трудноват для восприятия и имеет более узкий набор параметров для настройки:

Какой вариант создания шаблона выбрать?

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

От автора: приветствую вас, друзья, в очередной статье по теме 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 или . Ну а я на этом прощаюсь. Удачи и до новых встреч!

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

Для редактирования шаблона я уже подвел основу, теперь я должен взять первый файл в разработку. Я открою файл index.php, так как он работает как скилет в устанавливаемом шаблоне для wordpress: указывает всем другим файлом на порядок и время загрузки в браузер пользователя. Открыв этот файл программой Notepad++ я обращаю внимание на первую строку.
Вижу следующий код

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

В самом начале работы смотрю на количество строк в файлах: в файле index.php 49 строк, но 17 пустых, а в файле header.php – 58 строк, из которых 31 – пустая. Когда я буду завершать работу редактирования шаблона, я удалю все пустые строки, браузер при загрузке страницы будет экономить время при чтении кодов – эта такая минимальная работа по адаптации шаблона для блога.

Перед редактированием файлов index.php и header.php меняю кодировку документов на UTF-8, я рассказывал об этом в предыдущей статье «Редактирование шаблона WordPress»

1 строка – очень важна для верификации документа, она подтверждает, что страница написана на верном языке, руководствуясь принятыми стандартами. Я за эту строку не переживаю – есть и пусть будет. Иду дальше.

Я обращая внимание на строку 2 – браузером

Ниже этого кода идет большой контейнер, в котором размещены 8 строк, с которыми я тоже должен разобраться.

Обращаю внимания на 4 строку,

которую я заменю на строку

Она говорит браузерам и поисковым системам, что страницы данного блога написаны с использованием кодировки UTF-8, только опять же зачем мне лишняя нагрузка.

Продолжаем дальше оптимизировать шаблон – строка 5 или title страницы. Она очень важна для поисковой оптимизации блога. Поэтому я обязан его использовать, но и здесь его заполнение реализовано с помощью PHP – кода. А так этот код работает

А теперь маленькое отступление. Дело в том, что я для поисковой оптимизации блога использую плагин All in One SEO Plugin . С его помощью я прописываю все заглавные title, Description, Keywords для самого блога, и для каждой отдельной страницы. Вот такой код

Первая часть кода

вытягивает из базы данных блога название поста, вторая часть кода

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

В 6 строке идет подключение файла

О нем я недавно написал заметку. Я должен прописать путь к этому файлу, начиная с названия домена.

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

8 строка – должен прописать абсолютный путь к файлу xmlrpc.php.

Он короткий, вроде безобидный, но когда будет генерироваться главная страница блога, он загрузит очень много кода: стили плагина постраничной навигации, плагин капчи, All in One SEO Plugin, wp-syntax, Google Analytics, topsy. У Вас могут загружаться свойства, стили других установленных плагинов. Кроме того, выполняется вывод рабочих скриптов с папки CMS WordPress wp-includes.

Вывод один. Я должен оценить необходимость для блога каждого такого плагина, и решить нужен он или пустить под нож. Как пример, я не могу обойтись без плагина All in One SEO Plugin, очень много потратил времени на поиски плагина wp-syntax. Они грузят мой блог, но и отдача от них велика.

А вот без плагинов Вордпресс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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