- Изучаем файлы шаблона WordPress
- Изучаем файлы шаблона WordPress
- Файл header.php
- Файл header.php — продолжение
- Файл header.php — окончание
- Изучаем файлы шаблона: index.php
- Продолжаем изучать index.php
- Файлы шаблона WordPress: sidebar.php
- Изучаем файлы шаблона: правый сайдбар
- Продолжаем изучать файлы шаблона WordPress
- Файлы шаблона WordPress: комментарии
- Как сделать новый сайдбар с поддержкой виджетов
- Файлы шаблона WordPress: окончание
- Серия статей — изучаем файлы шаблона — в одном PDF файле
- Варианты одиночной страницы single.php
- Как отлючить HTML теги в комментариях
- Как создать дочернюю тему
- WordPress для начинающих: ставим Логотип-картинку
Я знаю почти наверняка, что вряд ли найдется владелец сайта, которому абсолютно все нравится в его шаблоне. Найти идеальный макет по стилю и цветовому дизайну, нужному встроенному функционалу практически невозможно.
О функционале в этой статье я говорить не буду – расскажу о дизайне.
Например: вам в шаблоне не нравиться фон вокруг страницы, не нравится шрифт, цветовые элементы заголовков и мета-тегов (имена рубрик, меток, дата и т.д.).
Вы немного знакомы с CSS и HTML, но вам не хочется трогать основной файл стилей шаблона и перерисовывать картинки в папке /images. Вдруг не получится – придется все заново.
Есть вариант. Можно создать так называемую “дочернюю” тему. От родительской она отличаться может именно в дизайне.
Я не буду вам сегодня очень долго и скучно рассказывать о вариантах смены дизайна. Приведу парочку примеров. Например, смена семейства шрифтов и цвета фона вокруг страницы. И расскажу о основных шагах по созданию дочерней темы. Кто поймет принцип – сможет более глубоко изменить дизайн своего шаблона, не касаясь руками ни одного файла в своей теме.
Итак, для наглядности я возьму старый дефолтный шаблон – default – который был основным в версии WordPress 2. Он как раз очень хорошо подойдет для моего рассказа. Да и наверняка, есть у каждого, кто захочет дочитать эту статью до конца.
Какой инструментарий нам нужен?
Главное – это обычный редактор файлов PHP, CSS, HTML и многих других – Notepad++. Скачать его вы можете например, здесь — https://www.softportal.com/software-5406-notepad.html
Если пользуетесь браузером Мазилла – установите расширение (плагин браузера) по имени Web Developer. Отличный инструмент для анализа файлов сайта, например, того же файла стилей. Как его скачать? Найдите в браузере Мазилла в Меню –> Инструменты –> Дополнения –> Найти. Введите в поиск имя расширения – Web Developer. Последняя версия – 1.1.9. Установите расширение и перегрузите Мазиллу. Теперь у вас это приложение доступно в меню –> инструменты –> web developer.
Теперь активируйте шаблон и откройте его в окне браузера Мазилла (как на скриншоте выше). Запустите Web Developer сочетанием клавиш Ctrl+Enter – Y – ваш курсор превратится в черный крестик. Наведите крестик на серый фон вокруг страницы и кликните по фону – откроется редактор стилей и откроется именно тот контейнер, в котором описаны свойства тега BODY:
В этом контейнере нас интересует два момента:
Фон. В дефолтной теме используется картинка по имени kubrickheader.jpg, которая лежит в папке /images (строка 27 в файле стилей).
Семейство шрифтов. Основной шрифт – Lucida Grande. Если его в компьютере нет – подключается Verdana и так далее (строка 26 в файле стилей).
Допустим, мы решили изменить фон и заменить шрифт на Times. Размер шрифта сейчас – 62,5% от стандартного, Times – мельче чем Verdana, поэтому мы изменим и это свойства (строка 25 файла стилей).
Итак, открываю Photochop, открываю файл kubrickheader.jpg, делаю его в пастельных тонах, сохраняю под именем template.jpg на Рабочем столе:
Теперь открываю редактор Notepad ++, новый файл, сохраняю его как style.css, записываю в него заголовок – описание, затем – Обязательно – такой код:
/* Theme Name: Default Child Theme Theme URI: Description: A child theme for Default Version: 0.1 Author: WP Collection Author URI: <a href="https://www.wpfreethemes.ru/">https://www.wpfreethemes.ru/</a> Template: default The CSS, XHTML and design is released under GPL: <a href="https://www.opensource.org/licenses/gpl-license.php">https://www.opensource.org/licenses/gpl-license.php</a> */ @import url("../default/style.css");
Этот код необходим для того, чтобы переопределить свойства, которые мы сейчас пропишем для дочерней темы Default Child Theme:
body { font-size: 100%; /* Resets 1em to 10px */ font-family: Times, Verdana, Arial, Sans-Serif; background: #efd1b5 url('images/template.jpg'); color: #333; text-align: center; }
Если вы сравните, свойства для тега BODY я поменял так, как хотел выше. Шрифт изменил на Таймс, увеличил его до 100%, изменил цвет фона и картинку для фона. Больше ничего не менял.
Теперь создам папку, назову ее Default Child Theme, создам в этой папке папку /images, положу туда картинку фона template.jpg, а в основную папку – файл стилей CSS. Перенесу папку дочерней темы в папку наших шаблонов, где уже лежит родительская папка Default.
Открою страницу Внешний вид –> Темы в админке и увижу новую тему, правда, без скриншота:
Скриншот можно сделать позже.
Теперь активирую нашу дочернюю тему. Смотрим:
Получилось не красиво, но главное – получилось!
В нашей дочерней теме всего два файла, но она работает также как ее родительская, только в ней изменены всего несколько условий по дизайну.
В ваших руках довести дизайн этой дефолтной темы до совершенства. Главное, знать, какой контейнер за какие свойства шаблона отвечает.
Моя задача в этой статье была не научить вас дизайну и знаниям CSS + HTML, а показать, как можно сделать дочерний шаблон для той темы, в котрой вы хотите что-то изменить, не прибегая к правке файлов родительского шаблона.
Понравилась статья? Напишите свои отзывы в комментариях и напишите, нужны еще подобные статьи или нет.
Хотите следить за новыми публикациями на моем сайте – подпишитесь на RSS ленту.
дизайн кухни 10 кв м
🙁 У меня почему-то в админке не появился дочерний шаблон. Делала для темы Absolute Style, назвала Default Absolute Style. из-за чего он мог не появится?
При просмотре Тем его видно?