Статьи

Создание собственных детских тем Genesis

Существует так много фреймворков для тем WordPress, что может быть сложно выбрать, какой из них подходит именно вам. Как вы узнаете, какая из них является качественной темой, которая поможет продвигать ваш контент, а какая будет сдерживать ее? Одним из самых популярных фреймворков является фреймворк Genesis Theme. Давайте взглянем на Genesis Framework и на то, что вы можете ожидать при создании дочерней темы Genesis.

WordPress и Genesis

Genesis Framework от StudioPress предназначен для использования с дочерними темами. Большинство тем WordPress есть, но Genesis не добавляет и не требует ничего особенного, что нужно импортировать или перенести в свою дочернюю тему.

Файловая структура

Процесс разработки дочерней темы начинается с нового каталога. Перейдите в раздел тем вашей области разработки и создайте новую папку в разделе themes . Если вы используете стандартную тему Genesis или определенную тему, вам нужно выбрать название темы и добавить «-child» к имени папки. Вы можете назвать его как угодно, но если вы работаете с определенной темой, я всегда рекомендую называть ее дочерней по отношению к теме, над которой вы работаете, чтобы избежать путаницы. Вы захотите скопировать style.css и файл functions.php в пустую style.css папку.

стилей

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

  • Название темы: здесь название дочерней темы.
  • Theme URI: это сайт, на котором они могут просмотреть демонстрацию или найти дополнительную информацию о дочерней теме.
  • Описание: Опишите свою детскую тему и ее качества.
  • Автор: Ваше имя, чтобы отдать себе должное.
  • URI автора: Ваш личный адрес веб-сайта находится здесь.
  • Версия: если вы планируете доработать и создать будущие версии. Начните с 1.0.
  • Теги: эти теги являются ключевыми словами, которые помогут людям найти вашу тему. Это могут быть цвета, особенности и т. Д.
  • Шаблон: Имя, соответствующее родительской теме Genesis (с учетом регистра).

Импорт CSS

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

Если вы хотите использовать стиль родительской темы, хороший способ сделать это — включить в файл functions.php следующий скрипт:

 add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' ); function my_child_theme_scripts() { wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/style.css' ); } 

functions.php

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

 <?php //* this will bring in the Genesis Parent files needed: include_once( get_template_directory() . '/lib/init.php' ); //* We tell the name of our child theme define( 'Child_Theme_Name', __( 'Genesis Child', 'genesischild' ) ); //* We tell the web address of our child theme (More info & demo) define( 'Child_Theme_Url', 'http://gsquaredstudios.com' ); //* We tell the version of our child theme define( 'Child_Theme_Version', '1.0' ); //* Add HTML5 markup structure from Genesis add_theme_support( 'html5' ); //* Add HTML5 responsive recognition add_theme_support( 'genesis-responsive-viewport' ); 

Как работает тема ребенка

Если вы попытаетесь активировать дочернюю тему, вы заметите, что, в отличие от других тем, изображение вашей дочерней темы пустое. Это может вас немного напугать, но это легко исправить. Откройте вашу графическую программу. Это может быть Illustrator, Fireworks, Photoshop или даже бесплатное программное обеспечение для редактирования изображений, при условии, что оно может создавать файлы PNG. Создайте документ размером 300 x 225 пикселей и вставьте изображение или графику, которая сообщает пользователю, какая это дочерняя тема. Сохраните его в папке вашей дочерней темы как screenshot.png , и теперь он появится.

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

Добавление в Бытие

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

Крючки и фильтры

Хук — это кусок кода, к которому мы обращаемся в наших функциях. Это фрагмент кода, встроенный в Genesis, в который мы «цепляемся», отсюда и название.

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

 function the_excerpt_length( $length ) { $length = '25'; return $length; } add_filter( 'excerpt_length', 'the_excerpt_length' ); 

Приведенный выше код создает функцию с именем «the_excerpt_length», а значение в скобках устанавливается на указанное вами значение. В коде указывается, что нужно возвращать это как длину слова вашей выдержки. Теперь, когда вы работаете над страницей, такой как index.php или archive.php, вместо_content, вы можете заменить его на_excerpt, сократив количество слов до 25 максимум. Это полезный пример, но мы можем сделать гораздо больше — как мы увидим в следующих статьях.

Вывод

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