Как создать и настроить WordPress Детская тема

Платформа WordPress является магнитом для тех, кто хочет взять дело в свои руки, кто хочет полный контроль над своими веб-сайтами и хочет быть независимым в управлении ими. WordPress делает это очень легко полностью настроить веб-сайт. Если у вас есть немного знаний htMl, CSS и / или PHP, нет ничего, что вы не можете изменить.

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

Дальнейшее чтение на SmashingMag:

Настройка WordPress: Вы можете делать это неправильно

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

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

В любом случае, ситуация далека от идеала.

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

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

Я знаю! Я так же взволнована, как и ты!

Что такое детские темы и зачем их использовать?

Когда речь идет о детских темах, мы сначала должны говорить о родительских темах. Тема только будет темой родителя когда кто-то строит тему ребенка для ее. До тех пор, это просто тема, такие как те, которые вы найдете в каталоге WordPress. Каждая тема, которая включает в себя все файлы, необходимые для того, чтобы считаться полным может быть родительской темой.

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

Что такое детская тема? Наилучшим образом, от wordPress задней стороны, тема ребенка не ведет себя по-разному. Вы можете найти и активировать его под “Появление” и “Темы”, так же, как вы бы с любой другой темой.

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

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

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

Преимущества детских тем

Есть множество преимуществ, чтобы идти по маршруту темы ребенка:

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

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

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

Когда использовать тему ребенка

Итак, вы всегда должны строить тему ребенка всякий раз, когда вы хотите внести какие-либо изменения на веб-сайте WordPress? Нет, это действительно зависит.

Если вы планируете внести только незначительные изменения,такие как изменение цвета или другой шрифт, то пользовательский плагин CSS может быть все, что вам нужно (другие варианты Jetpack и SiteOrigin CSS). Многие темы в настоящее время также предлагают возможность добавить пользовательский код народине.

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

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

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

Боковая нота: Приведенные ниже шаги могут быть выполнены непосредственно на вашем сервере через клиента FTP. Однако, я рекомендую что вы сперва установило вверх все местно, после этого застегните вашу скоросшиватель темы ребенка и установите ее как нормальная тема через меню «тема». Это сделает все это намного проще.

Создание Folder вwp-content/themes

Как уже упоминалось, детская тема нуждается в трех вещах: своя папка, стиль листа и functions.php файл. Начнем с папки.

Как и любая тема, детские темы расположены wp-content/themes в вашей установке WordPress. Так, перейдите там сейчас и создать новую папку для вашего ребенка тему.

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

Creating a folder for our WordPress child theme
Создание папки для нашей темы WordPress ребенка. (Посмотреть большую версию)

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

Создание листа стиля

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

Создание листа стиля легко: просто создайте новый текстовый файл и позвоните по style.css нему. Договорились! Однако, для того, чтобы он на самом деле работать, мы должны вставить следующий код, так называемый “стиль листа заголовок”, в самом начале файла (код любезно WordPress Codex):

/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
description: >-
  Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/

Вот что означает каждая строка:

  • Тема имя. Это имя которое покажет вверх для вашей темы в задней части WordPress.
  • Тема URI. Это указывает на веб-сайт или демонстрационную страницу темы под рукой. Это или URI автора должны присутствовать для того, чтобы тема будет принята в каталог WordPress.
  • Описание. Это описание вашей темы будет отображаться в меню темы, когда вы нажмете на “Тема Подробности”.
  • Автор. Это имя автора – это вы, в данном случае.
  • Автор URI. Вы можете поставить адрес вашего сайта здесь, если вы хотите.
  • Шаблон. Эта часть имеет решающее значение. Здесь идет имя темы родителя, намереваясь свое имя скоросшивателя. Имейте в виду, что это дело чувствительных, и если вы не положили в нужную информацию, вы получите сообщение об ошибке, так что перепроверить!
  • Версия. Это отображает версию темы вашего ребенка. Как правило, вы начнете с 1.0.
  • Лицензия. Это лицензия вашего ребенка тему. Темы WordPress в каталоге обычно выпускаются под лицензией GPL; вы должны придерживаться той же лицензии, что и ваша родительская тема.
  • Лицензия URI. Это адрес, где ваша тема лицензии объясняется. Опять же, придерживаться того, что ваша родительская тема говорит.
  • Теги. Теги помогают другим найти вашу тему в каталоге WordPress. Таким образом, если вы включаете некоторые, убедитесь, что они имеют отношение.
  • Текстовый домен. Эта часть используется для интернационализации и сделать темы переводимыми. Это должно соответствовать “пуля” вашей темы.

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

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

/*
 Theme Name:   Twenty Fifteen Child Theme
 description: >-
   A child theme of the Twenty Fifteen default WordPress theme
 Author:       Nick Schäferhoff
 Template:     twentyfifteen
 Version:      1.0.0
*/

Активировать тему ребенка

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

The WordPress child theme header
Заголовок темы ребенка WordPress. (Посмотреть большую версию)

Хорошо, теперь нажмите на кнопку, которая говорит “Активировать”. Молодец! Ваша тема теперь активирована. Однако, если вы посмотрите на ваш сайт, он должен выглядеть примерно так:

WordPress child theme without style sheet
WordPress детская тема без стиля листа. (Посмотреть большую версию)

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

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

Создание функций.php

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

functions.phpФайл позволяет изменять и добавлять функциональные возможности и функции на веб-сайт WordPress. Он может содержать как PHP и родной WordPress функции. Кроме того, вы можете создавать свои собственные функции.

Короче говоря, functions.php содержит код, который коренным образом меняет внешний вид веб-сайта и ведет себя. Есть? Хорошо, я знала, что могу рассчитывать на тебя.

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

<?php
//* Code goes here

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

Теперь, позвольте мне сказать это: Вам не нужно functions.php . Если вы не планируете использовать PHP для изменения вашей темы, то вы можете полностью обойтись без него. Лист айтерик и другие файлы могут быть достаточно для вас.

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

Наследовать родительские стили

Таким образом, вы, вероятно, известно, что ваш сайт по-прежнему в основном текст. Пора изменить это. Как? Я Вам покажу.

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

WordPress default Twenty Fifteen theme
WordPress ‘ по умолчанию Двадцать Пятнадцать тему. (Посмотреть большую версию)

Чтобы попасть сюда, вам нужно будет унаследовать информацию в листе стиля родительской темы. Есть два способа сделать это.

Один из них через CSS и @import правило. Копируя приведенный ниже код в style.css файл, вы говорите своему ребенку, чтобы использовать информацию, содержащуюся в листе стиля родительской темы, чтобы представить содержимое.

@import url("../twentyfifteen/style.css");

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

Если вам нужно импортировать несколько листов стиля (что не является неслыханным), то использование @import заставит их скачать последовательно. Это может замедлить время загрузки страницы на несколько секунд (что, я, вероятно, не придется сказать вам, это не очень хорошая вещь).

Второй, рекомендуемый способ загрузки листа стиля родителей – и причина, почему мы создали ранее – заключается в functions.php использовании wp_enqueue_style() . Эта функция WordPress безопасно добавляет файлы листа стиля к теме WordPress.

В нашем случае соответствующий код выглядит примерно так:

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

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

WordPress child theme successfully activated
Тема ребенка WordPress успешно активирована. (Посмотреть большую версию)

Красиво, да? Поздравляю, вы сделали это! Вы создали свой самый первый WordPress детской темы. Если бы я был там, я бы похлопал тебя по плечу.

Тем не менее, вы можете возразить, справедливо, что он выглядит точно так же, как родительская тема. Итак, какой смысл идти с детской темой?

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

Дополнительные очки: Добавить тема изображения

Если вы хотите получить все фантазии, вы можете добавить изображение темы. Это изображение будет отображаться в меню темы в WordPress.

Все, что вам нужно сделать, это создать файл PNG, screenshot.png названный, и поместить его в папку вашей темы (в нашем случае, twentyfifteen-child ). Убедитесь в том, чтобы положить его в каталог верхнего уровня, а не в субдиректории, такие как images .

Рекомендуемый размер составляет 880 и 660 пикселей, хотя он будет показан как 387 и 290. Большие размеры гарантируют, что изображение будет хорошо отображаться на экранах с высоким разрешением.

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

Настройка Вашего WordPress Детская тема

Если вы сделали все правильно, то ваша тема ребенка должна теперь быть активирована и посмотреть точно как свой родитель. Здесь начинается самое интересное.

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

Внедрение пользовательских стилей

Один из самых простых способов внести изменения в вашу тему через CSS. Это позволяет настроить цвета, размеры, шрифты и другие основные элементы дизайна.

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

На данный момент, все, что вам нужно знать, что, с style.css на месте, вы можете переопределить любые стили в родительской теме, добавив код в стиль листа детской темы.

Важно: Если вы назвали стили родительской темы в style.css файле, то не забудьте добавить любые пользовательские стили ниже @import оператора, как в следующем фрагменте. (Хотя вы знаете, вы должны functions.php использовать, не так ли?)

/*
 Theme Name:   Twenty Fifteen Child Theme
 description: >-
   A child theme of the Twenty Fifteen default WordPress theme
 Author:       Nick Schäferhoff
 Template:     twentyfifteen
 Version:      1.0.0
*/

// Custom styles go here

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

Twenty Fifteen layout
Двадцать Пятнадцать макет. (Посмотреть большую версию)

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

.entry-header {
   padding: 0 10%;
}
.entry-title, .widecolumn h2 {
   font-size: 3.9rem;
   line-height: 1.2308;
   margin-bottom: 1.2308em;
}
.entry-content, .entry-summary {
   padding: 0 10% 10%;
}

Мы хотели бы внести несколько коррективов, которые достигают того, что мы имеем в виду, и скопировать их в style.css файл нашей детской темы.

.entry-header {
   padding: 0 5%;
}
.entry-title, .widecolumn h2 {
   margin-bottom: 0.5em;
}
.entry-content, .entry-summary {
   padding: 0 5% 10%;
}

Вуаля! Вот результат:

WordPress child theme with custom styles
WordPress детская тема с пользовательскими стилями. (Посмотреть большую версию)

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

Преобладающие файлы родительской темы

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

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

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

Например, если мы возьмем content.php папку «Двадцать пятнадцать» и откроем ее редактором, среди прочего, мы найдем следующий код:

<?php
   // Post thumbnail.
   twentyfifteen_post_thumbnail();
?>

<header class="entry-header">
   <?php
   if ( is_single() ) :
      the_title( '<h1 class="entry-title">', '</h1>' );
   else :
      the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
   endif;
   ?>
</header><!-- .entry-header -->

Давайте посмотрим, что произойдет, когда мы отменяем порядок этих двух, как это:

<header class="entry-header">
   <?php
      if ( is_single() ) :
         the_title( '<h1 class="entry-title">', '</h1>' );
      else :
         the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
      endif;
   ?>
</header><!-- .entry-header -->

<?php
   // Post thumbnail.
   twentyfifteen_post_thumbnail();
?>

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

Override parent theme files with the child theme
Переизобить родительские тематические файлы с темой «ребенок». (Посмотреть большую версию)

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

Работа с файлами шаблонов

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

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

Чтобы создать страницу с полной шириной в Twenty Fifteen, нам нужно сделать четыре вещи: создать пользовательский шаблон страницы, пользовательский заголовок и файл колонтитула, а затем добавить некоторые индивидуальные CSS. Начнем с шаблона страницы.

Для нашего пользовательского шаблона страницы мы просто скопируем page.php из родительской темы, переименуем custom-full-width.php ее и помещаем в папку, названную в нашей page-templates детской теме.

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

<?php
/*
 * Template Name: Custom Full Width
 * description: >-
  Page template without sidebar
 */

get_header('custom'); ?>

   <div id="primary" class="content-area">
   <main id="main" class="site-main" role="main">     

   <?php
   // Start the loop.
   while ( have_posts() ) : the_post();

   // Include the page content template.
   get_template_part( 'content', 'page' );

   // If comments are open or we have at least one comment, load up the comment template.
   if ( comments_open() || get_comments_number() ) :
      comments_template();
   endif;

   // End the loop.
   endwhile;
   ?>

   </main><!-- .site-main -->
   </div><!-- .content-area -->

<?php get_footer('custom'); ?>

Единственное, что мы сделали здесь, это ввести заголовок, который говорит WordPress, что это шаблон страницы, и мы изменили get_header и get_footer звонки, так что они будут включать в себя два файла с именем header-custom.php и footer-custom.php .

Давайте перейдем к странице, которую мы хотим видеть в полной ширине, и в соответствии с “Page Attributes” измените шаблон страницы на наш недавно созданный шаблон “Custom Full Width”.

How to activate a WordPress page template
Как активировать шаблон страницы WordPress.

Теперь пришло время для создания наших пользовательских заголовок и колонтитул тематические файлы. Во-первых, перейдите к родительской теме, скопировать и header.php footer.php папку нашей детской темы, и переименовать их header-custom.php в footer-custom.php и, соответственно.

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

<?php
/**
 * The template for displaying the header
 *
 * Displays all of the head element and everything up until the "site-content" div.
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
   <meta charset="<?php bloginfo( 'charset' ); ?>">
   <meta name="viewport" content="width=device-width">
   <link rel="profile" href="http://gmpg.org/xfn/11">
   <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
   <!--[if lt IE 9]>
   <script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
   <![endif]-->
   <?php wp_head(); ?>
</head>

<body class="full-width-body" <?php body_class(); ?>>
<div id="page" class="hfeed site">
   <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyfifteen' ); ?></a>

   <header id="masthead" class="site-header full-width" role="banner">
   <div class="site-branding full-width">
   <?php
      if ( is_front_page() && is_home() ) : ?>
         <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
         <?php else : ?>
         <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
         <?php endif;

      $description = get_bloginfo( 'description', 'display' );
      if ( $description || is_customize_preview() ) : ?>
         <p class="site-description"><?php echo $description; ?></p>
      <?php endif;
   ?>
   <button class="secondary-toggle"><?php _e( 'Menu and widgets', 'twentyfifteen' ); ?></button>
   </div><!-- .site-branding -->
   </header><!-- .site-header -->

   <div id="content" class="site-content full-width">

Мы сделали несколько вещей здесь. Мы дали <body> элемент учтенный тип, названный full-width-body . Мы также добавили full-width site-header класс, site-branding site-content и, так что мы можем назначить их пользовательские CSS.

В качестве последнего шага, мы избавились от всех элементов боковой панели (как sidebar div и призыв к ), get_sidebar потому что мы не хотим, чтобы они на нашей полной ширине страницы.

Единственное изменение, в ное – footer-custom.php добавить full-width класс к footer элементу, так как:

<footer id="colophon" class="site-footer full-width" role="contentinfo">

Все, что осталось сделать, это ввести некоторый код в нашем листе стиля:

.full-width-body::before {
   display: none;
}

.site-content.full-width {
   float: none;
   margin: 0 auto;
}

.site-header.full-width {
   background-color: #fff;
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
   margin: 0;
   padding: 2% 0;
}

.site-branding.full-width {
   margin: 0 auto;
   width: 58.8235%;
}

.site-footer.full-width {
   float: none;
   margin: 0 auto;
}

Та-да! А вот наша страница в полной ширине:

Custom full-width page template for Twenty Fifteen theme
Пользовательский полноширинный шаблон страницы для темы Twenty Fifteen. (Посмотреть большую версию)

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

Использование функций.php

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

Примечание: Файл темы ребенка functions.php загружается в дополнение к одноименному файлу в родительской теме. В самом деле, он выполняется прямо перед родительской темой – в отличие от , function.php который style.css заменяет исходный файл. Следовательно, не копируйте полное содержание файла родительской темы functions.php в файл в теме вашего ребенка. Скорее, используйте последнее для изменения функций в родительской теме.

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

<?php

register_sidebar( array(
   'name'          => 'Footer Widget',
   'id'            => 'footer-widget',
   'before_widget' => '<div class="footer-widget">',
   'after_widget'  => '</div>'
) );

Примечание: Тег открытия <?php — это начало functions.php файла. Не включайте его, если один уже есть!

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

<?php if ( is_active_sidebar( 'footer-widget' ) ) :
      dynamic_sidebar( 'footer-widget' );
   endif;
?>

Еще раз, мы будем копировать footer.php из Двадцать Пятнадцать родительской темы и вставить его в нашей детской теме. На этот раз, однако, мы оставим свое название как есть.

После этого, мы должны добавить вызов к нашему новому виджету колонтитула так, что он выглядит следующим образом:

<?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the "site-content" div and all content after.
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
?>

   </div><!-- .site-content -->

   <footer id="colophon" class="site-footer" role="contentinfo">
      <div class="site-info">
      <?php if ( is_active_sidebar( 'footer-widget' ) ) :
            dynamic_sidebar( 'footer-widget' );
         endif;
      ?>
         <?php
            /**
             * Fires before the Twenty Fifteen footer text for footer customization.
             *
             * @since Twenty Fifteen 1.0
             */
            do_action( 'twentyfifteen_credits' );
         ?>
         <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfifteen' ), 'WordPress' ); ?></a>
      </div><!-- .site-info -->
   </footer><!-- .site-footer -->

</div><!-- .site -->

<?php wp_footer(); ?>

</body>
</html>

Минимальный стиль необходим style.css в:

.footer-widget {
   margin: 2% 0;
}

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

Twenty Fifteen child theme custom footer widget
Двадцать Пятнадцать ребенка тема пользовательских колонтитул виджет. (Посмотреть большую версию)

Не так уж и сложно, не так ли?

Использование тема Крючки

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

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

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

Давайте напишем небольшую функцию:

function custom_footer_widget() {
   if ( is_active_sidebar( 'footer-widget' ) ) :
      dynamic_sidebar( 'footer-widget' );
   endif;
}

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

Преимущество этого заключается в том, что теперь мы можем добавить всю функцию к крючку в основных файлах нашей родительской темы, без необходимости отсваиваться от самого файла. В этом случае мы ориентируемся twentyfifteen_credits в файле родительской темы. Он несет ответственность за колонтитул кредитов (“Гордо питание от WordPress”) в двадцать Пятнадцать тему, и он появляется в footer.php таких:

do_action( 'twentyfifteen_credits' );

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

add_action( 'twentyfifteen_credits', 'custom_footer_widget' );

Бум! Теперь, область виджета будет отображаться в том же месте, где мы имели его раньше, без нашей необходимости копировать или добавлять любой код в файл колонтитула темы. Опрятно, да?

Примечание: Если вы следуете по маршруту и идете functions.php по маршруту, не забудьте удалить измененный footer.php файл из темы вашего ребенка; в противном случае, область виджета будет отображаться дважды.

Гораздо больше можно сделать с крючками в детских тем. Некоторые тематические рамки обеспечивают множество крючков, так что вы можете изменить что-нибудь непосредственно от functions.php .

Однако эта тема выходит за рамки данной статьи. Если вы заинтересованы в получении дополнительной информации, некоторые отличные ресурсы можно найти в Интернете. Хорошей отправной точкой является Даниэль Патаки Быстрый и в глубину Руководство wordPress Крючки.

Суммирование

Как вы надеемся, видели, строительство детской темы в WordPress не очень сложно. Все это занимает папка плюс два файла.

Тем не менее, несмотря на свою простоту, детская тема довольно сильна. Это позволяет нам полностью и безопасно настроить веб-сайт без редактирования каких-либо основных файлов.

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

Кроме того, вы получаете первоклассное образование в создании WordPress темы на стороне. Не так уж плохо, не так ли?

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

Каков ваш опыт в создании детской темы для WordPress? У вас есть что добавить? Что-нибудь, что ты сделаешь по-другому? Пожалуйста, поделитесь им в комментариях.

(мл, dp, al,jb)

Источник: smashingmagazine.com

Великолепный Журнал

Великолепный, сокрушительный, разящий (см. перевод smashing) независимый журнал о веб-разработке. Основан в 2006 году в Германии. Имеет няшный дизайн и кучу крутых авторов, которых читают 2 млн человек в месяц.

Добавить комментарий

%d такие блоггеры, как: