Как сделать подстраницу вордпресс

Как сделать подстраницу вордпресс
Как сделать подстраницу вордпресс
Как сделать подстраницу вордпресс

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

Создание дочерней темы на WordPress

 

Зачем надо создавать дочернюю тему?

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

Требования

Для того, чтобы вносить какие-либо изменения в шаблон, необходимы базовые знания CSS/HTML, также неплохо было бы знать PHP. Очень понадобятся навыки копирования и вставки кусков кода с других источников.

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

Советую почитать статью — Как установить сайт на локальном сервере MAMP

Начало работы

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

Создание первой дочерней темы

Для начала в папке установки откройте /wp-content/themes/  и создайте новую папку для дочерней темы. Назовите ее так, как хотите. Я, например, назову ее wpbdemo.

Создание новой дочерней темы

Откройте текстовый документ наподобие Блокнота и вставьте туда вот этот код:

Сохраните данный документ в только что созданной папке дочерней темы и назовите его как style.css.

Строки кода здесь само собой разумеющиеся. На что действительно следует обратить внимание, так это на строку Template: twentythirteen.

Она сообщает WordPress, что наша тема является дочерней темой, а папка с родительской темой названа twentythirteen. Обратите внимание, что название родительской папки чувствительно к регистру, т.е. если вы введете «Template: TwentyThirteen» — ничего работать не будет.

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

Это минимальные требования для создания дочерней темы. Теперь можно перейти в меню Внешний вид » Темы, где в качестве дочерней темы вы увидите WPB. Щелкните по кнопке Активировать для того, чтобы начать ее использовать на своем сайте.

Активация дочерней темы

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

Настройка дочерней темы

В директории каждой темы содержится файл со стилями –  style.css. чаще всего он является главным файлом со стилями, где есть CSS. Однако у некоторых тем в этом файле содержится лишь информация о теме. В этом случае, как правило, CSS файлы находятся в отдельном каталоге.

Здесь вам потребуются кое-какие знания и навыки работы с CSS.

Google Chrome и Firefox идут со встроенным инструментом инспектирования, который позволяет просмотреть HTML и CSS многих элементов веб-страницы.

Если вы хотите увидеть CSS навигационного меню, то просто подведите курсор мышки к меню, щелкните ПКМ и выберите «Просмотреть код».

Инспектирование элемента - просмотр кода и стилей у блоков

Как только вы это сделаете, окно браузера будет разделено на две части. В нижней части экрана вы увидите HTML и CSS для страницы.

Здесь можно играться со стилями отдельных блоков дочерней темы

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

Инструмент хрома также в правой части отобразит CSS правила, относящиеся к выбранному элементу.

Вы можете попробовать отредактировать CSS прямо тут, чтобы сразу увидеть, как все будет выглядеть. Давайте поменяем цвет фона .navbar  на #e8e5ce .

Приступаем к редактированию CSS

Фоновый цвет панели навигации изменился. Если он вам нравится, то можете скопировать это CSS правило и вставить дочерний файл темы style.css.

Сохраните изменения в файле style.css и просмотрите сайт.

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

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

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

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

У каждой темы WordPress свой макет. Давайте взглянем на строение темы Twenty Thirteen. Здесь есть: хедер, навигационное меню, контентная часть, зона нижнего виджета, вторая (боковая) зона виджетов, футер.

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

Как правило, эти файлы имеют имя той секции, к которой относятся. Например, футер обслуживается файлом footer.php, хедер и навигационное меню – файлом header.php. Некоторые секции, как например, контентная зона обслуживается несколькими файлами – «content templates».

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

Например, вы хотите удалить с зоны футера надпись «работает на WordPress» и вставить туда информацию об авторском праве. Для этого: скопируйте в дочернюю тему файл footer.php, откройте его в простом текстовом редакторе, как например, Блокнот. Найдите строку, которую вы хотите удалить и замените ее на то, что хотите. Это может выглядеть так:

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

Добавление нового функционала в дочернюю тему

В интернете можно найти много руководств по копированию и вставке кусков кода в файл темы functions.php.

Добавление фрагментов кода в родительский файл functions.php означает, что ваши изменения будут перезаписаны, вне зависимости от того будет ли апдейт родительской темы. Именно поэтому всегда рекомендуется работать в дочерней теме и добавлять все коды в ее файл functions.php.

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

Я уже создал изображение хедера и миниатюру, редактируя стандартное изображение в хедере темы Twenty Thirteen. Следующий шаг – загрузить их в дочернюю тему по адресу inside /images/headers/ folder .

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

functions.php:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<?php

function wpbdemo_custom_header_setup() {

 

add_theme_support( 'custom-header', array( 'default-image' => '%s/images/headers/circle-wpb.png' ) );

 

register_default_headers( array(

    'caramel' => array(

        'url'           => '%2$s/images/headers/circle-wpb.png',

        'thumbnail_url' => '%2$s/images/headers/circle-wpb-thumbnail.png',

        'description'   => __( 'Caramel', 'Caramel header', 'twentythirteen' )

    ),

) );

 

}

add_action( 'after_setup_theme', 'wpbdemo_custom_header_setup' );

?>


Зайдите в консоли админки во Внешний вид » Header, и вы увидите изображение, которое мы задали использовать по умолчанию.

Задаем изображение для header

Вы можете вставить в файл functions.php любой пользовательский код, который только хотите.

Исправление проблем

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

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

Конечный результат

Конечный результат дочерней темы

Загрузка демо темы

Вы можете скачать всю мою дочернюю тему вот здесь.  Помните, что это очень простая дочерняя тема на основе темы Twenty Thirteen.

Другие дочерние темы на основе Twenty Thirteen

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

Holi

holi

Cherry Blossom

cherry blossom

2013 Blue

2013 blue

Flat Portfolio

flat portfolio

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

Если вам понравилась статья, то не забывайте ею делиться. Находите меня в социальных медиа, подписывайтесь на мой канал в YouTube. Всем хорошего дня!

Как сделать подстраницу вордпресс Как сделать подстраницу вордпресс Как сделать подстраницу вордпресс Как сделать подстраницу вордпресс Как сделать подстраницу вордпресс Как сделать подстраницу вордпресс Как сделать подстраницу вордпресс Как сделать подстраницу вордпресс Как сделать подстраницу вордпресс Как сделать подстраницу вордпресс Как сделать подстраницу вордпресс Как сделать подстраницу вордпресс

Тоже читают:



Вязаные сирень крючком схемы

Как сделать зелья из скайрима

Освежитель спрей воздуха своими руками

Лаки для ногтей французкий маникюр

Радиолампа гу-50 схемы однотактных