Создать тему WordPress: краткий обзор наиболее важных функций
Если вы планируете создать свою собственную тему WordPress, вы не сможете сделать это без типичных функций которые выводят контент на странице. Для динамических сайтов идеально подходят функции которые созданные самим WordPress. Какие функции, по моему мнению, являются наиболее важными, и какая функция выполняет ту или иную работу, я описал ниже.
Если вам интересно больше узнать чем отличается динамический сайт от статического, переходите по этой ссылке.
Создать тему WordPress: Основные функции, которые должны быть в каждой теме
Существуют функции, которые обязательно должны быть в каждой теме. И если вы их проигнорируете, тема не сможет правильно работать, или вообще не заработает.
Функции wp_head() и wp_footer()
Функция wp_head() размещается непосредственно над закрывающим </head> в заголовке веб-сайта, функция wp_footer() над закрывающим тегом </body>. Обе функции интегрируют важные сценарии WordPress, и дают плагинам возможность подключать свои собственные скрипты и стили именно в эти места. Если не использовать эти две функции, wp_head и wp_footer, проблемы возникнут не только в WordPress. Плагины которыми вы начнёте в будущем пользоваться, также не будут работать. Без wp_footer(), черная панель администратора в верхней части экрана тоже не появится.
Функция body_class()
При создании темы, функция body_class() не является абсолютно необходимой, но для WordPress она чрезвычайно полезна или даже «почти незаменима». Встраивается эта функция в теге body, и автоматически добавляет свои собственные классы в том же теге body. Каждая страница, пост, категории или что-то еще, получает индивидуальную коллекцию классов. Лично для меня, я думаю и для многих кто знает как создать свою тему и плотно работает с WordPress, это помощь при добавлении нужных стилей CSS. Для примера, можно посмотреть, как сейчас, выглядит тег <body> этого поста:
1 | <body_class="post-template-default single single-post postid-33144 single-format-standard logged-in admin-bar no-customize-support single-comanda theme-myPortfolio woocommerce-no-js post-sozdat-temu-wordpress-kratkij-obzor-naibolee-vazhnyh-funkcij"> |
Как видно добавляются разные классы:
Post-template-default— сообщает что это стандартный шаблон.Single— поскольку это шаблон для одиночной записи, добавляется этот класс.Single-post— поскольку это еще более конкретно о публикации, также устанавливается данный класс (через него вы можете влиять на шаблон для постов через CSS стили).- Поскольку пост имеет
ID 33144, также устанавливается классpostid-33144. - WordPress позволяет использовать различные так называемые «форматы постов». В нашем случае мы используем стандартный формат, поэтому добавлен класс
single-format-standard. - Так как в данный момент я вошел в систему WordPress, добавляется ещё один класс,
logged-in, это класс авторизированного. Ну и логично, если выйти из системы этого класса не будет. Admin-bar— этот класс панели администратора, он добавляется, когда она действительно видна.- Класс
no-customize-supportустановлен WordPress, так как наша тема в настоящее время не предлагает никакой поддержки настройщика. - Класс моей темы, классы которые я установил напрямую в
body, в том числе и тот что отображает ярлык этого поста, его я установил через функцию в файлеfunctions.php
Как добавить функцию body_class () в тег body?
Для этого нужно найти часть темы, в которой есть закрытый тег </head> и открывающий тег <body>. Обычно это файл header.php, иногда также может быть и index.php. Нашли это место? Вставьте следующий короткий код:
1 | <body <?php body_class(); ?>> |
Это функция WordPress, которую можно расширить своими собственными классами. Самый простой способ сделать это:
1 | <body <?php body_class('ваш-класс'); ?>> |
Так же с помощью массива можно вставить несколько классов:
1 | <body <?php body_class(array(' new-class', ' new-class-2', ' new-class-3'));?>> |
Таким образом, вы получаете свои собственные классы, добавленные напрямую через функцию body_class(). Однако в большинстве случаев это не совсем эффективно, поскольку добавив класс таким образом, он будет преследовать вас в каждом шаблоне, в постах, на страницах, в категориях и т.д.
Но что если вам нужно добавить класс к одной определённой статье, чтобы стилизовать что-то там через CSS.
Для этого можно использовать другой подход, а именно отдельную функцию, которая обращается к хуку выше. Конечно, можно реализовать это с помощью простого условия IF в шаблоне header.php, но это не лучший способ, если вы хотите правильно создать тему WordPress.
Добавить классы в теге body через функцию
Самый лучший способ расширить тему, не касаясь основных файлов шаблона (например, header.php), это открыть functions.php и добавить следующий код:
1 2 3 4 5 6 | add_filter('body_class', 'ssh_body_classes'); function ssh_body_classes($classes) { $classes[] = 'ваш-класс'; return $classes; } |
Иногда создавая тему на CMS WordPress, разработчику требуется на разных шаблонах задать определённый класс. Например, на главной странице один, на страннице с постами или категориями, другой класс.
Тогда, в выше написанную функцию ssh_body_classes вставляются условия:
1 2 3 4 5 6 7 8 9 10 11 | function wpcurs_body_class($classes) { if(is_front_page()) { // Если это главная страница $classes[] = "main_class"; } else if(is_single()) { // Если это страница с постом $classes[] = "cooca_class"; } return $classes; } add_filter('body_class', 'wpcurs_body_class'); |
Добавить в body класс с названием поста
Можно ещё расширить эту базовую функцию, чтобы она могла быть ещё более полезной. Например, добавить соответствующий тип поста и ярлык на все страницы.
1 2 3 4 5 6 7 8 9 | add_filter('body_class', 'ssh_body_classes'); function ssh_body_classes($classes) { global $post; if(isset($post)) { $classes[] = $post->post_type .'-'. $post->post_name; } return $classes; } |
Результат в исходном коде поста в блоге будет выглядеть, следующим образом:
1 | <body class="single-post postid-1234 ярлык-вашего-поста"> |
Теперь в CSS я могу создать класс .ярлык-вашего-поста и, таким образом, управлять всеми элементами в body этого шаблона, делать с ними всё что угодно. Например, это может быть другая ширина контейнера для контента, более крупные заголовки h2 или какая-то анимация. Никаких ограничений, всё зависит от вашей фантазии.
Также это очень подходит для создания на вашем сайте отдельного landing page. Если вдруг вы захотите добавить к своему основному сайту одностраничник, и он должен отличаться от стандартного макета вашего сайта.
Добавить несколько классов в body
Чтобы вставить больше классов в body, нужно просто добавить в свой код нужное количество строк в следующем формате:
1 2 | $classes[] = 'ваш-класс2'; $classes[] = 'ваш-класс3'; |
Условия для работы с body
Вы также можете добавить условия IF по своему усмотрению.
1 2 3 4 5 6 7 | if (is_author()) { $autorname = get_the_author(); $classes[] = $autorname . 'класс'; } elseif (is_search()) { $suchbegriff = get_search_query(); $classes[] = 'suche-nach-' . $suchbegriff; } |
Удалить классы с тега body
Так же как добавить, можно и удалить классы из тега body. Сделать это можно так:
1 2 3 | foreach ($classes as $key => $value) { if($value == 'post-template-default') unset($classes[$key]); } |
Если вы хотите научиться качественно создавать темы на Cms WordPress, вам нужно будет уметь обращаться к определенным элементам с помощью вышестоящего класса. Класс в body это то что нужно, если вы хотите какую то определённую страницу сделать не такой, как все.
Основные функция цикла WordPress
Цикл WordPress (The Loop), без которого не обойтись при создании динамической темы. Через этот цикл обрабатывается огромное количество информации, оценивается, «вырывается» из базы данных и подается. Наиболее важные функции цикла, которые являются неотъемлемой частью повседневной жизни разработчиков тем: the_post().
Функция the_post() в основном выполняется очень незаметно сразу после начала цикла while внутри цикла WordPress, а затем больше не наблюдается.
1 2 3 4 5 | <?php while(have_posts()): the_post(); endwhile; ?> |
Задача the_post() — считывать и обрабатывать информацию, подходящую для каждого поста или каждой страницы (в зависимости от того, какую задачу цикл в настоящее время должен выполнять).
Только благодаря этим функциям многие другие функции могут выполнять свою работу. Функция гарантирует, что, с одной стороны, цикл может функционировать и «зацикливаться» правильно, а с другой стороны, так называемый «WP Query» может выполняться внутри этой функции, чтобы собрать всю информацию и сделать ее доступный внутри цикла. Итак, в общем, необходимо.
Функции «the_» и «get_the_»
В цикле WordPress разработчику темы доступны многочисленные функции для вывода только что скомпилированного контента:
1 2 3 4 5 6 7 8 9 10 11 12 | <?php the_permalink(); // Выводит ссылку на текущий пост the_title(); // Выводит заголовок статьи the_content(); // Выводит содержание, основной контент the_excerpt(); // Выдержка из текущего поста the_time(); // Отображает время и дату публикации the_post_thumbnail(); // Выводит изображение поста the_category(); // Выводит назначенные категории the_tags(); // Выводит назначенные теги the_author(); // Выводит имя автора the_ID(); // Выводит ID текущего поста ?> |
Все эти функции сразу выводят контент на странице. Но иногда это может быть не всегда нужно. Часто бывает так, что необходимо обрабатывать информацию с помощью PHP, а не выводить ее. В таком случае перед функциями the_ достаточно поставить префикс get_. Тогда значение не будет сразу выводится, а может быть «присвоено» в переменную для дальнейшей обработки:
1 2 3 4 5 6 7 8 9 10 11 12 | <?php get_the_permalink(); // Получает ссылку на пост get_the_title(); // Возвращает заголовок поста get_the_content(); // Возвращает содержание сообщения get_the_excerpt(); // Возвращает выдержку публикации get_the_time(); // Получает время и дату публикации get_the_post_thumbnail(); // Возвращает изображение поста get_the_category(); // Возвращает присвоенные категории get_the_tags(); // Возвращает присвоенные теги get_the_author(); // Возвращает имя автора get_the_ID(); // Возвращает ID текущего поста ?> |
Создание темы WordPress: важная функция bloginfo()
Чтобы сделать тему и вывести на ней всю необходимую информацию, не обойтись без функции WordPress bloginfo(), которая выводит общую информацию о странице. Такая функция является кросс-страничной и применяется ко всему веб-сайту:
1 2 3 4 5 6 7 | <?php bloginfo('name'); // Выводит название сайта. Задаётся в разделе Настройки > Общие > Название сайта bloginfo('description'); // Выводит текст, указанный в разделе Настройки > Основные > Краткое описание bloginfo('url'); // Выводит URL-адрес, указанный в разделе Настройки > Общие > Адрес WordPress (URL) bloginfo('admin_email'); // Выводит адрес электронной почты администратора, указанный в разделе Настройки > Общие > Административный адрес email bloginfo('language'); // Выводит язык WordPress, выбранный в меню Настройки > Общие > Язык сайта. ?> |
Функции для объединения контента
Никто не хочет хранить километры кода в одном файле. Соответственно, по возможности лучше разделить шаблоны на отдельные блоки. WordPress для этого предлагает несколько интересных функций, которые также стали неотъемлемой частью повседневной жизни разработчиков тем.
get_header (), get_sidebar () и get_footer ()
Две функции используются в шаблонах, либо вверху — get_header(), либо внизу — get_footer(). Вы переносите весь html код для header и footer в соответствующие шаблоны, в файлы header.php и footer.php.
Практичность: общая информация в шапке и подвале сайта хранится отдельно и доступна для быстрого обновления или поправки. Аналогично работает функция get_sidebar(). Она вставляет содержимое sidebar.php в тему.
Функции get_header () и get_footer (), как и функция get_sidebar (), могут быть расширены с помощью терминов в скобках. Например, если вы напишете get_header(«alternativ»), функция в теме будет искать файл header-alternativ.php. Так обычно делают какие-то изменения. Например, в каком то шаблоне вам нужно в шапке другой цвет, добавить подзаголовки, вывести какие-то ссылки, социальные иконки и т.д. То есть где нужно сделать шапку сайта или подвал другим.
get_template_part () — Подключить части шаблона
Функция get_template_part() очень мощная. Она позволяет перенести часть кода темы в отдельный файл и хранить его там. Это правильная практика, а также рекомендованная WordPress. Для этого создаётся папка в теме с названием template-parts / под папки, а в ней уже создаются файлы, например, content-excerpt.php, excerpt-aside.php, content-single.php. В этом примере WordPress сначала пытается выполнить управляемый файл content-post.php в папке / template-parts /.
Чем так удобная эта функция get_template_part () ? Если файл content-post.php не найден, файл content.php автоматически загружается в качестве резервной копии. Таким образом, вы можете без особых усилий управлять запасными частями шаблона. Функцию можно даже сделать динамической, что сделает ее еще более мощной: С помощью этой функции вы теперь можете создать резервный файл navigation.php в template-parts / и создать более конкретный файл шаблона для каждого типа сообщения: navigation-page.php, navigation-post.php и т.д.
Проверка благодаря условным тегам
WordPress имеет множество так называемых условных тегов, благодаря которым можно проводить проверки. Соответственно, они используются в операторах If. Эти функции также незаменимы. Они позволяют выполнять части программы только при определенных условиях:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <?php if( is_front_page() ): echo 'Этот текст отображается только на стартовой странице'; endif; if( is_page() ): echo 'Этот текст выводится только в том случае, если тип - страница, а не пост.'; endif; if( is_page(3) ): echo 'Этот текст отображается только на странице с ID 3'; endif; if( is_page('kontakt') ): echo 'Этот текст выводится только на странице с именем Контакт'; endif; if( is_single() ): echo 'Этот текст отображается только в просмотре статьи.'; endif; if( is_single(17) ): echo 'Этот текст отображается только на странице поста с ID 17.'; endif; if( is_admin() ): echo 'Этот текст увидят только пользователи, которые вошли в систему как администраторы.'; endif; if( is_logged_in() ): echo 'Этот текст отображается только для авторизованных пользователей'; endif; if( has_post_thumbnail() ): echo 'Этот текст выводится только в том случае, если в публикации есть изображение поста.'; endif; if( is_category() ): echo 'Этот текст отображается только на странице категории'; endif; if( is_category(2) ): echo 'Этот текст отображается только на странице категории с ID 2.'; endif; if( is_category('Общее') ): echo 'Этот текст отображается только в представлении архива категории Общие.'; endif; if( is_tag() ): echo 'Этот текст отображается только в архивном представлении тега'; endif; if( is_tax('slug', $name_tax ) ): echo 'Срабатывает на архивной странице произвольной (новой, пользовательской) таксономии'; endif; if( comments_open() ): echo 'Этот текст отображается только в том случае, если для этого сообщения активирована функция комментариев.'; endif; ?> |
Экранирование и защита от спама
В WordPress есть различные функции, готовые для очистки контента перед его выводом через браузер. На техническом жаргоне это называется «экранирование» и очищает, возможно, «плохо» отформатированные данные.
1 2 3 4 5 | <?php esc_url(); // Очищенные URL-адреса. Кавычки также аккуратно конвертируются esc_html(); // Очищает вывод HTML. Кавычки также преобразуются аккуратно. esc_attr(); // Очищает атрибуты HTML ?> |
WordPress даже имеет функцию защиты от спама. Функция antispambot() не используется, чтобы перехитрить особо умных ботов. Эта функция «шифрует» адреса электронной почты как «объекты HTML», чтобы их нельзя было прочитать в исходном коде. Браузеры знают, как это интерпретировать и правильно отображать. Посетитель ничего не замечает, спам — боты ничего не могут сделать с загадочными символами в исходном коде.
1 2 3 4 5 | antispambot('myname@mail.ua'); //Шифрует адреса электронной почты как "объекты HTML" перед их выводом, чтобы защитить их от спама и ботов. |
add_theme_options () — Активирует специальные функции темы
Функция add_theme_options() выполняется в файле functions.php и позволяет активировать различные дополнительные функции:
1 2 3 4 5 6 7 8 9 10 11 | add_theme_support('post-thumbnails'); // Активирует изображения в теме для всех постов add_theme_support('post-thumbnails', array('post', 'movie')); // Включите это только для сообщений и произвольного типа сообщения "movie" add_theme_support('custom-background'); // Индивидуальное фоновое изображение (настраивается с помощью настройщика темы) add_theme_support('custom-header'); // Индивидуальное изображение шапки сайта(настраивается с помощью настройщика темы) add_theme_support('custom-logo'); //Индивидуальный логотип (настраивается через настройщик темы) add_theme_support('title-tag' ); // Позволяет плагинам влиять на тег заголовка (например, как это делает плагин Yoast) |
При создании темы, WordPress имеет различные интересные функции вывода
WordPress имеет множество других очень интересных функций. Перечислить их в этом черновике вышло бы за рамки. Вот небольшой список некоторых интересных функций которыми я часто пользуюсь:
1 2 3 4 5 6 7 8 9 10 | <?php wp_get_archives(); // Выводит хронологический список архива posts_nav_link(); // Возвращает ссылки по постам "назад и вперед" next_post_link(); //Выводит ссылку на следующую в хронологическом порядке более раннюю запись previous_post_link(); // Выводит ссылку на предыдущий пост в хронологическом порядке wp_register(); // Выводит ссылку на страницу регистрации wp_loginout(); // Выводит ссылки входа в систему и выхода из системы language_attributes(); // Выводит информацию о языке, например lang = "ru" get_comments_number(); // Возвращает количество комментариев (в цикле). ?> |
Создание темы WordPress — заключение и дальнейшие ссылки
WordPress — это функциональный рай, где можно найти функцию для любой задачи. Их использование является часто несложным и легким для понимания даже для новичков. Как разработчику тем, у меня всегда под рукой приблизительный обзор разнообразных опций.
Если ты, дорогой гость пытаешься создать тему и WordPress для тебя это только начало пути, я всегда буду рад твоему посещению этого поста. Я надеюсь что каждый сможет подчеркнуть для себя что-то важное и интересное.
Сайты, с которых я черпаю всю нужную информацию когда делаю темы на WordPress:
- Wp-kama — https://wp-kama.ru/handbook/cheatsheet
- ru.wordpress.org — https://ru.wordpress.org/
Категории: WordPress, Мой Блокнот Валерий 06.01.2022