Шпаргалка по работе с WordPress
Шпаргалка по работе с WordPress включает в себя: иерархию шаблонов и их создание, подключение стилей и скриптов; вывод логотипа, меню, изображений, а также вывод записей в циклах WordPress, используя WP_Query() и get_posts().
Иерархия шаблонов WordPress
Для каждого файла шаблона осуществляется последовательная проверка на наличие файла, например, front-page.php, home.php, index.php
Главная страница
- home.php
- index.php
В случае с front-page.php нужно выбрать домашнюю страницу: Внешний вид » Настроить » Настройка главной страницы » На главной странице отображать » Статическую страницу » front-page.php
Статическая страница (например, услуги, контакты)
- page-{ярлык_страницы}.php
- page-{id_страницы}.php
- page.php
{ваше_название}.php - можно выбрать любое название, например, для страницы О нас использовать about.php, при использовании шаблона для страницы.
Запись (post-type=post)
- single-post.php
- single.php
Запись, с типом записи, отличным от post
- single-{post-type}.php
- single.php
Рубрика
- category-{id}.php
- category.php
Метка
- tag-{id}.php
- tag.php
Таксономия
- taxonomy-{таксономия}.php
- taxonomy.php
Страница поиска (результаты поиска)
Форма поиска
Страница ошибки 404
Создание шаблонов страниц
2 способа создания шаблонов страниц
1 способ
<?php
/*
Template Name: Услуги
*/
?>
2 способ
Подключение файлов темы
<?php
get_header(); - шапка (header.php)
get_template_part('filename'); - часть шаблона (filename.php)
get_search_form(); - форма поиска (searchform.php)
get_sidebar(); - сайдбар (sidebar.php)
get_footer(); - футер (footer.php)
?>
Проверка типа страницы WordPress
Главная страница
if (is_front_page()) {
}
Страница
if (is_page()) {
}
Страница с ID 3
if (is_page(3)) {
}
Дочерняя страница
global $post; # Если за пределами цикла
if ( is_page() && $post->post_parent ) {
}
Страница записи (пост, вложение, произвольный тип записи)
if (is_singular()) {
}
Страница записи с ID 7
if (is_singular(7)) {
}
Страница, использующая шаблон page-services.php - страница услуг.
if (is_page_template('page-services.php')) {
}
Страница, использующая шаблон single-services.php - страница услуги (типа запись).
if (is_singular('services')) {
}
Страница поиска.
if (is_search()) {
}
Страница 404.
if (is_404()) {
}
Страница категории.
if (is_category()) {
}
Страница архива.
if (is_archive()) {
}
Страница тега (метки).
if (is_tag()) {
}
Страница пользовательской (созданной) таксономии (категории и метки не входят).
if (is_tax()) {
}
Определение типа страницы WooCommerce вы можете посмотреть в данной статье, раздел «Установка и подготовка» в блоке «Проверка типа страницы WooCommerce».
Подключение стилей и скриптов в functions.php - wp_enqueue_scripts
Для вывода стилей и скриптов воспользуемся хуком wp_enqueue_scripts. На этот хук повешаем функции wp_enqueue_style - для подключения стилей и wp_enqueue_script - для подключения скриптов.
Пример
add_action( 'wp_enqueue_scripts', 'themeName_scripts' );
function themeName_scripts() {
// подключение главного файла стилей темы
wp_enqueue_style('themeName-style', get_stylesheet_uri());
// styles
wp_enqueue_style('themeName-libs', get_theme_file_uri('/assets/css/libs.min.css'));
wp_enqueue_style('themeName-header', get_theme_file_uri('/assets/css/header.css'));
// jQuery в шапке
wp_deregister_script('jquery');
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js');
wp_enqueue_script('jquery');
// scripts
wp_enqueue_script('themeName-libs', get_theme_file_uri('/assets/js/libs.min.js'), array(), '', true);
wp_enqueue_script('themeName-app', get_theme_file_uri('/assets/js/app.js'), array(), '', true);
}
true - подключать в подвале
Подключение стилей в подвале
Для подключения стилей в подвале, воспользуйтесь следующим кодом.
function footer_styles() {
wp_enqueue_style( 'themeName-footer-css', get_theme_file_uri('/assets/css/footer.css'));
};
add_action( 'get_footer', 'footer_styles' );
Подключение стилей/скриптов на определённой странице
Чтобы подключить CSS или JavaScript на определённой странице, добавим условие для проверки шаблона, используемого на текущей странице.
if ( is_page_template('page-contact.php') ) {
wp_enqueue_style('themeName-contact-css', get_theme_file_uri('/assets/css/contact.css'));
}
Больше примеров определения типа страницы можете посмотреть в разделе выше.
Подключение стилей и скриптов в админке WordPress
add_action('admin_enqueue_scripts', 'admin_styles_scripts');
function admin_styles_scripts()
{
}
Удаление атрибута у тегов script и link
Удалим type="text/javascript" у тега script, и type="text/css" у тега link.
add_filter('style_loader_tag', 'remove_attr_type', 10, 2);
add_filter('script_loader_tag', 'remove_attr_type', 10, 2);
function remove_attr_type($tag, $handle)
{
return preg_replace("/type=['\"]text\/(javascript|css)['\"]/", '', $tag);
}
Добавление атрибута для тега script
Чтобы добавить тегу script атрибут type со значением module, воспользуйтесь следующим кодом.
add_filter('script_loader_tag', 'add_attr_type', 10, 3);
function add_attr_type($tag, $handle, $src)
{
if ($handle === 'themeName-courses') { // выбор скрипта
return str_replace(' src', ' type="module" src', $tag);
}
return $tag;
}
Удаление block-library/style.min.css
С WordPress версии 5.0 Gutenberg является редактором по умолчанию и добавляет следующий файл css wp-includes/css/dist/block-library/style.min.css.
Для отключения этого css файла, добавьте следующий код в functions.php
function remove_wp_block_library_css()
{
wp_dequeue_style('wp-block-library');
}
add_action('wp_enqueue_scripts', 'remove_wp_block_library_css');
Вывод информации о сайте - bloginfo()
<?php
bloginfo('name'); - название сайта
bloginfo('description'); - описание
bloginfo('charset'); - кодировка UTF-8
bloginfo('language'); - язык ru-RU
bloginfo('admin_email'); - email админа
bloginfo('url'); - аналог homeurl();
?>
Вывод логотипа в WordPress - the_custom_logo()
Включение поддержки логотипа темой, код для functions.php
add_theme_support( 'custom-logo' );
Вывод логотипа в файле темы
<?php echo get_custom_logo(); ?>
Или
<?php the_custom_logo(); ?>
Вывод текста внутри логотипа
Установим свой класс для ссылки и логотипа с добавлением текста внутри.
<?php
$logo_img = '';
if ($custom_logo_id = get_theme_mod('custom_logo')) {
$logo_img = wp_get_attachment_image($custom_logo_id, 'full', false, array(
'class' => 'logo-footer',
'alt' => get_bloginfo('name'),
'itemprop' => 'logo',
));
}
if (is_front_page()) { ?>
<div class="logo">
<?php echo $logo_img; ?>
<div class="logo__name">Название_компании</div>
</div>
<?php } else { ?>
<a href="<?php echo esc_url(home_url('/')); ?>" rel="home" class="logo">
<?php echo $logo_img; ?>
<div class="logo__name">Название_компании</div>
</a>
<?php } ?>
Предзагрузка логотипа WordPress
В теге head сначала получим url логотипа, добавленного в админке, затем полученный url вставим в теге link rel="preload" в атрибут href.
<?php
$logo = get_theme_mod('custom_logo');
$logo_url = wp_get_attachment_image_src($logo, 'full')[0];
?>
<link rel="preload" href="<?php echo $logo_url; ?>" as="image" media="all">
Вывод меню WordPress - wp_nav_menu()
Для регистрации одного меню используется функция register_nav_menu() а для регистрации нескольких register_nav_menus()
functions.php:
// регистрируем меню для шапки и подвала
function register_my_menu() {
register_nav_menus( array(
'header-menu' => esc_html__('Меню в шапке', 'themeName'),
'footer-menu' => esc_html__('Меню в подвале', 'themeName')
) );
}
add_action( 'init', 'register_my_menu' );
Примеры вывода меню
Вывод меню в шаблон header.php
<?php
wp_nav_menu( array(
'theme_location' => 'header-menu',
'container' => false, // без обёртки (можно div, nav)
'container_class' => '', // класс обёртки
'menu_class' => '', // класс у ul
) );
?>
Вывод меню в шаблон footer.php
<?php
wp_nav_menu( array(
'theme_location' => 'footer-menu',
'container' => false, // без обёртки (можно div, nav)
'container_class' => '', // класс обёртки
'menu_class' => '', // класс у ul
) );
?>
Вывод изображений из папки темы - get_template_directory_uri()
Чтобы не писать полный путь от корня сайта, воспользуемся функцией get_template_directory_uri() или get_theme_file_uri() Данные функции вернут полный путь до темы.
get_template_directory_uri()
<?php echo get_template_directory_uri(); ?>
get_theme_file_uri()
<?php echo get_theme_file_uri('path'); ?>
Примеры
Ссылка на изображение
<img src="<?php echo get_template_directory_uri(); ?>/img/crazy-woodpecker.gif" alt="alt">
Фоновое изображение
<div style="background-image:url('<?php echo get_theme_file_uri("picture.jpeg"); ?>');"></div>
Вывод миниатюры - wp_get_attachment_image_src()

Регистрируем поддержку миниатюр в functions.php (для постов и страниц).
add_theme_support('post-thumbnails');
Добавляем поддержку миниатюр только для постов (тип записи - post)
add_theme_support('post-thumbnails', array('post'));
Добавляем поддержку миниатюр только для страниц (тип записи - page)
add_theme_support('post-thumbnails', array('page'));
Вывод url изображения страницы
Воспользуемся функцией get_the_post_thumbnail_url().
<?= get_the_post_thumbnail_url(get_the_id(), 'medium'); ?>
Вывод alt изображения
Воспользуемся функцией get_post_meta().
<?= get_post_meta(get_post_thumbnail_id(), '_wp_attachment_image_alt', true) ?>
Вывод title картинки:
<?= get_the_title(get_post_thumbnail_id()) ?>
Вывод миниатюры в шаблоне
Выведем ссылку на изображение в полном размере full.
Получаем массив: [0] => url, [1] => width, [2] => height.
// вывод изображения страницы
<?php $tb_url = wp_get_attachment_image_src( get_post_thumbnail_id(), "full" ); ?>
<?php echo $tb_url[0]; ?>
Примеры
Вывод миниатюры в виде background'a.
<?php $tb_url = wp_get_attachment_image_src( get_post_thumbnail_id(), "full" ); ?>
<div style="background-image:url('<?php echo $tb_url[0] ?>');"></div>
Вывод миниатюры в теге img.
<?php $tb_url = wp_get_attachment_image_src( get_post_thumbnail_id(), "full" ); ?>
<img src="<?php echo $tb_url[0] ?>" alt="alt">
<?php // полный размер изображения с атрибутами
the_post_thumbnail( 'full'); ?>
Размеры миниатюр:
medium - дефолтное значение 300px x 300px максимум
large - дефолтное значение 1024px x 1024px максимум
full - полный размер
Вывод миниатюры своего размера
Пример.
<?php $tb_url_thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id(), array(450, 400) ); ?>
Регистрация нового размера миниатюр
Регистрируем свой размер миниатюры. Код для functions.php.
add_image_size( 'thumb-cat', 450, 310, true );
Вывод в теме.
<?php the_post_thumbnail('thumb-cat'); ?>
Вывод контента страницы / записи - the_content()
Для вывода контента ТЕКУЩЕЙ страницы, воспользуемся функцией the_content
<?php while( have_posts() ) : the_post(); the_content(); endwhile; ?>
Вывод контента в цикле
<?php the_content(); ?>
Рубрики - taxonomy=category
Вывод названия рубрики.
<?php single_cat_title(); ?>
А для отображения описания рубрик, записей, меток, архивов автора или элементов таксономий воспользуйтесь кодом ниже.
<?php the_archive_description(); ?>
Метки - taxonomy=post_tag
Вывод названия метки текущей страницы.
<?php single_tag_title(); ?>
Получение ID метки текущей страницы.
<?php get_query_var('tag_id'); ?>
Вывод записей на странице метки - tag.php
<?php
$tag_ID = get_query_var('tag_id'); # получаем ID текущей метки
'tax_query' => array( # элемент таксономии
array(
'taxonomy' => 'post_tag', # метка (тег)
'field' => 'id', # тип поля (slug или id)
'terms' => $tag_ID
)
)
Вывод названия НУЖНОЙ страницы / записи / рубрики по id - get_cat_name(), get_the_title()
Вывод названия записи или страницы с id равным 5
<?php the_title(5); ?>
Вывод названия категории с id равным 5
<?php echo get_cat_name(5); ?>
Передать переменную в get_template_part()
Для такой ситуации можно использовать подключение файла через locate_template. Пример.
<?php include(locate_template('template-parts/loop-project.php')); ?>
Вывод всех записей, кроме ТЕКУЩЕЙ рубрики / кастомного типа записи - get_posts()
Сначала получим ID текущей рубрики / типа записи, а затем исключим его из цикла
<?php
$post_id = get_the_ID(); // получаем текущий ID
$posts = get_posts( array(
'post_type' => 'production', // post, custom post type
'exclude' => array($post_id), // исключаем текущий ID
'posts_per_page' => -1,
) );
foreach( $posts as $post ){
setup_postdata($post); ?>
<?php get_template_part('./template-parts/loop-production'); ?>
<?php }
wp_reset_postdata(); // сброс
?>
Вывод записей ОПРЕДЕЛЁННОЙ рубрики / кастомного типа записи - WP_Query()
Файл шаблона может выглядеть следующим образом:
<?php
$mypost_Query = new WP_Query( array(
'post_type' => 'reviews', // тип записи: post, page, custom_post_type
'post_status' => 'publish', // статус записи
'posts_per_page' => -1, // или get_option('posts_per_page')
# 'post_parent' => '', // id родителя, вывод дочерних (0 - без родителя, верхний уровень)
# 'p' => '', // id необходимого поста ( get_the_ID() - текущий )
# 'category_name' => 'news', // если рубрика
/*'post__in' => array( // id страниц для включения в цикл
108, 103, 102, 94, 95, 96, 98
)*/
/*'tax_query' => array( // если элемент таксономии
array(
'taxonomy' => '{название_таксономии}', // таксономия (категория)
'field' => 'slug', // тип поля slug или id
'terms' => '{элемент(ы)_таксономии}' // ярлык или id
)
)*/
) );
if ( $mypost_Query->have_posts() ) {
while ( $mypost_Query->have_posts() ) { $mypost_Query->the_post(); ?>
<?php get_template_part('./template-parts/loop-mypost'); # шаблон для отображения каждой записи ?>
<?php } wp_reset_postdata(); # "сброс"
} else { echo '<p>Извините, нет записей ...</p>'; } ?>
Для loop-mypost.php можно использовать вывод:
<?php the_excerpt(); ?> - отрывок
<?php the_content(); ?> - полный текст
<?php the_date('j.n.Y'); ?> - дата
<?php the_time(get_option('date_format')); ?> - дата вне цикла
<?php the_permalink(); ?> - ссылка
Вывод записей по тегу - WP_Query()
Для вывода названия текущего тега используйте следующий код.
<?php single_tag_title(); ?>
Выводить записи будем в шаблоне tag.php.
<?php
$current_page = (get_query_var('paged')) ? get_query_var('paged') : 1; // определяем текущую страницу
$tag_ID = get_query_var('tag_id'); # получаем ID текущей метки
$mypost_Query = new WP_Query(array(
'post_type' => 'post',
'post_status' => 'publish', // статус записи
'posts_per_page' => get_option('posts_per_page'), // значение по умолчанию берём из настроек
'paged' => $current_page, // текущая страница
'tax_query' => array( // метка - элемент таксономии
array(
'taxonomy' => 'post_tag', // тег
'field' => 'id', // тип поля slug или id
'terms' => $tag_ID // текущий ID данного тега
)
)
));
if ($mypost_Query->have_posts()) {
while ($mypost_Query->have_posts()) {
$mypost_Query->the_post();
?>
<!-- шаблон -->
<?php
}
wp_reset_postdata(); // "сброс"
} ?>
<?php if (function_exists('wp_pagenavi')) { // функция постраничной навигации
wp_pagenavi(array('query' => $mypost_Query));
} ?>
Вывод записей из ТЕКУЩЕЙ рубрики / кастомного типа записи - get_posts()
Для вывода записей из текущей рубрики воспользуемся следующим кодом
<?php
$this_cat = get_the_category();
$this_cat = $this_cat[0];
$postslist = get_posts(array(
'numberposts' => -1, // убираем лимит вывода постов
'orderby' => 'title', // сортировка по названию
'cat' => $this_cat->cat_ID // выводим из текущей категории (рубрики) по id
));
foreach($postslist as $post){
setup_postdata($post);
get_template_part('loop-tpl');
}
wp_reset_postdata();
?>
Вывод записей из таксономии - get_terms()
Сначала получим все термины таксономии (категории/теги/кастомные), затем для каждого выведем находящиеся в нём записи.
<?php
$tax_name = 'docs_categories'; # название таксономии
$tax_terms = get_terms($tax_name, 'hide_empty=0'); # получаем все термины таксономии
?>
<?php if ($tax_terms) { ?>
<?php foreach ($tax_terms as $term) {
$mypost_Query = new WP_Query(array(
'post_type' => 'docs', # тип записи
'post_status' => 'publish',
'posts_per_page' => -1,
'tax_query' => array(
array(
'taxonomy' => $tax_name,
'field' => 'slug',
'terms' => $term->slug
)
)
));
if ($mypost_Query->have_posts()) {
while ($mypost_Query->have_posts()) {
$mypost_Query->the_post(); ?>
<?php get_template_part(''); ?>
<?php }
wp_reset_postdata(); // "сброс"
} else echo '<p>Нет записей в данном разделе.</p>'; ?>
<?php } ?>
<?php } ?>
Вывод записей из ТЕКУЩЕЙ таксономии - get_term() + WP_Query
Сначала получим текущий термин таксономии с помощью get_term(), затем по id выведем записи текущей таксономии.
<?php
$term_id = get_queried_object_id();
$current_term = get_term($term_id, 'taxonomy_name'); # название таксономии
?>
<?php if ($current_term) { ?>
<ul class="list">
<?php
$mypost_Query = new WP_Query(array(
'post_type' => 'production', # тип записи
'post_status' => 'publish',
'posts_per_page' => -1,
'tax_query' => array(
array(
'taxonomy' => 'taxonomy_name',
'field' => 'id',
'terms' => $current_term->term_id
)
)
));
if ($mypost_Query->have_posts()) {
while ($mypost_Query->have_posts()) {
$mypost_Query->the_post();
?>
<?php get_template_part(''); ?>
<?php }
wp_reset_postdata();
} else echo '<p>Нет продукции в данной категории.</p>'; ?>
<?php
wp_reset_postdata();
?>
</ul>
<?php } ?>
Дополнительные плюшки
- Шпаргалка по работе с WooCommerce.
- Полезные хуки по работе с WordPress.
- Подборка лучших плагинов для WordPress на 2021 год.
- Шпаргалка по работе с ACF.
- Как скрыть пункты меню в админке WordPress, изменить их порядок - статья.
- Как установить свой логотип при входе в админку WordPress вместо стандартного.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии
- Комментариев пока нет.