Статьи

СУХАЯ разработка WordPress Theme

Когда вы создаете тему WordPress, стоит потратить некоторое время, чтобы определить, где можно избежать повторения кода. Это дает вам немало преимуществ:

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

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

В этом уроке я покажу вам, как вы можете использовать принцип «Не повторяйся» или «СУХОЙ» при разработке своей темы, делая себя более эффективным и менее подверженным стрессу в процессе.

Что не нравится?

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

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

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

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

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

Надеюсь, вам не нужно, чтобы я говорил вам это — вы ВСЕГДА должны использовать отдельные файлы шаблонов для заголовка ( header.php ), боковой панели ( sidebar.php ) и footer.php колонтитула ( footer.php ). Затем вы вызываете их в каждом из ваших файлов шаблонов, используя следующие теги:

  • get_header()
  • get_sidebar()
  • get_footer()

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

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

Например, допустим, вы хотите использовать другую боковую панель на страницах архива. Вы должны создать файл для этой боковой панели с именем sidebar-archive.php . В файле шаблона archive.php вы бы заменили стандартный get_sidebar() на get_sidebar( 'archive') .

Это дает вам возможность иметь дополнительную боковую панель, которую затем можно использовать в нескольких файлах шаблонов. Например, вы можете использовать его в шаблонах архивов для определенных типов записей. Поэтому, если бы у вас был тип записи с именем button , вы бы создали для него шаблон архива с именем archive-button.php , и в этом вы бы использовали get_sidebar( 'archive' ) .

У этого подхода есть некоторые недостатки: если в sidebar.php и sidebar.php sidebar-archive.php много повторяющегося кода, ваша тема недостаточно точно следует принципу DRY. Если это так, вы можете вместо этого использовать условные теги, о которых я расскажу позже в этом руководстве.

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

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

Для этого вы создаете файл с именем loop.php с кодом для вашего цикла, а затем вызываете его с помощью get_template_part ( 'loop' ) . Это эффективно вытягивает весь код из вашего файла цикла в ваш шаблон.

Вы можете пойти дальше с несколькими циклами. Например, если у вас был немного другой цикл для архивов, вы должны создать файл с именем loop-archive.php и вызывать его с помощью get_template_part( 'loop', 'archive' ) . Просто!

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

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

Вы можете создать отдельный файл sidebar-xxx.php , где xxx — тип вашего сообщения, а затем вызвать его в файле шаблона для вашего типа сообщения. Или вы можете просто использовать один файл боковой панели с условным тегом, чтобы добавить дополнительную область виджета следующим образом:

В вашем файле sidebar.php вы уже зарегистрировали область виджетов, которая может выглядеть примерно так:

1
2
3
4
5
6
7
<?php
if ( is_active_sidebar( ‘sidebar-widget-area’ ) ) { ?>
    <aside class=»sidebar widget-area role=»complementary»>
        <?php dynamic_sidebar( ‘sidebar-widget-area’ );
    </aside>
<?php }
?>

Это отобразит область виджета боковой панели, если она была заполнена виджетами.

Затем вы можете добавить вторую боковую панель, используя условный тег is_singular() :

1
2
3
4
5
if ( is_singular ( ‘xxx’ ) && is_active_sidebar( ‘xxx-sidebar-widget-area’ ) ) { ?>
    <aside class=»sidebar xxx widget-area» role=»complementary»>
        <?php dynamic_sidebar( ‘xxx-sidebar-widget-area’ );
    </aside>
<?php }

Это проверяет, заполняется ли область виджета так же, как в первом примере, но добавляет дополнительную проверку к этому оператору if : is_singular( 'xxx' ) . Это проверяет, отображает ли сайт в настоящее время одну страницу для типа публикации xxx . Если это так и область виджета заполнена, то она будет отображена.

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

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

1
2
3
<section class=»cta»>
    // CTA content goes here
</section>

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

Ваша функция будет выглядеть так:

1
2
3
4
5
function wptp_cta() { ?>
    <section class=»cta»>
    // CTA content goes here
    </section>
<?php }

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

1
wptp_cta();

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

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

Вы создаете ловушку действия с помощью функции do_action() , а затем присоединяете функции к этой ловушке с помощью add_action() .

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

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

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

1
do_action( ‘wptp_sidebar’ );

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

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

1
2
3
4
5
6
7
8
function wptp_sidebar_default() {
    if ( is_active_sidebar( ‘sidebar-widget-area’ ) ) { ?>
    <aside class=»sidebar widget-area» role=»complementary»>
        <?php dynamic_sidebar( ‘sidebar-widget-area’ );
    </aside>
<?php }
}
add_action( ‘wptp_sidebar’, ‘wptp_sidebar_default’ ););

Я использовал add_action() с двумя параметрами: wptp_sidebar , имя хука и wptp_sidebar_default , имя функции.

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

1
2
3
4
5
6
7
8
function wptp_xxx_sidebar() {
    if ( is_singular ( ‘xxx’ ) && is_active_sidebar( ‘xxx-sidebar-widget-area’ ) ) { ?>
    <aside class=»sidebar xxx widget-area» role=»complementary»>
        <?php dynamic_sidebar( ‘xxx-sidebar-widget-area’ );
    </aside>
<?php }
}
add_action( ‘wptp_sidebar’, ‘wptp_xxx_sidebar’, 15 );

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

  • Условный тег идет внутри функции, а не с функцией add_action .
  • Я добавил приоритет 15 для моей второй функции. Поскольку приоритет по умолчанию (который будет назначен моей первой функции) равен 10, это означает, что WordPress запустит эту вторую функцию после этой первой, поэтому боковая панель xxx появится ниже стандартной.

Идеи, которые я рассмотрел выше, не являются исчерпывающим списком методов для принятия принципа DRY при разработке тем WordPress, но они дают представление о некоторых из наиболее эффективных методов, которые вы можете использовать.

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