

Шпаргалка по работе с 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)
?>
Подключение стилей и скриптов в 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-css', get_template_directory_uri() . '/inc/libs.min.css' );
wp_enqueue_style( 'themeName-main-css', get_template_directory_uri() . '/inc/main.css' );
// jQuery in header
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-js', get_template_directory_uri() . '/js/libs.min.js', array(), '', true );
wp_enqueue_script( 'themeName-main-js', get_template_directory_uri() . '/js/scripts.js', array(), '', true );
}
true - подключать в подвале
Подключение своей библиотеки jQuery
Библиотека jQuery в WordPress подключена по умолчанию и выводится в хуке wp_head() вместе с jquery-migrate
Если мы хотим подключить свой jQuery без использования jquery-migrate:
wp_deregister_script('jquery'); // отключаем jQuery и регистрируем свой
wp_register_script( 'jquery', 'https://code.jquery.com/jquery-3.4.1.min.js', array(), '', true);
wp_enqueue_script( 'jquery'); // подключаем jQuery
Вывод информации о сайте - 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__img',
'itemprop' => 'logo',
) );
}
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="logo">
<?php echo $logo_img; ?>
<div class="logo__name">Название_компании</div>
</a>
Вывод меню WordPress - wp_nav_menu()
Для регистрации одного меню используется функция register_nav_menu() а для регистрации нескольких register_nav_menus()
functions.php:
// регистрируем меню для шапки и подвала
function register_my_menu() {
register_nav_menus( array(
'header-menu' => 'Меню в хэдере',
'footer-menu' => 'Меню в футере'
) );
}
add_action( 'init', 'register_my_menu' );
Примеры вывода меню
Вывод меню в шаблон header.php
wp_nav_menu( array(
'theme_location' => 'header-menu',
'container' => false, // без обёртки (можно div, nav)
'container_class' => '', // класс обёртки
'menu_class' => '', // класс у ul
) );
Вывод меню в шаблон footer.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()
Данная функция вернёт полный путь до темы
<?php echo get_template_directory_uri(); ?>
Примеры
Ссылка на изображение
<img src="<?php echo get_template_directory_uri(); ?>/img/crazy-woodpecker.gif" alt="alt">
Фоновое изображение
<div style="background-image:url('<?php echo get_template_directory_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' ) );
Вывод миниатюры в шаблоне
Выведем ссылку на изображение в полном размере 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 максимум
medium_large - дефолтное значение 768px x по высоте не ограничен
large - дефолтное значение 1024px x 1024px максимум
full - полный размер
Вывод миниатюры своего размера
Пример.
$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(); ?>
Вывод названия НУЖНОЙ страницы / записи / рубрики по id - get_cat_name(), get_the_title()
Вывод названия записи или страницы с id равным 5
<?php echo get_the_title(5); ?>
Вывод названия категории с id равным 5
<?php echo get_cat_name(5); ?>
Вывод записей ОПРЕДЕЛЁННОЙ рубрики / кастомного типа записи - WP_Query()
Напишем цикл в отдельном файле, назовём его loop-myposts.php
Пример
// для вывода изображения поста
<?php $tb_url = wp_get_attachment_image_src( get_post_thumbnail_id(), "full" ); ?>
<div class="col-12 col-md-6 col-lg-4">
<div>
<div style="background-image:url('<?php echo $tb_url[0] ?>');"></div>
<div>
<div><?php echo get_the_date('j.n.Y'); ?></div>
<div><?php echo the_title(); ?></div>
<div><?php the_excerpt(); ?></div>
<a href="<?php the_permalink(); ?>"><?php echo ('Далее'); ?></a>
</div>
</div>
</div>
Выводим в цикле
<?php the_excerpt(); ?> - отрывок
<?php the_content(); ?> - полный текст
<?php echo get_the_date('j.n.Y'); ?> - дата
<?php the_permalink(); ?> - ссылка
Файл шаблона может выглядеть следующим образом:
<?php
$mypost_Query = new WP_Query( array(
'post_type' => 'reviews', // тип записи: post, page, custom_post_type
'post_status' => 'publish', // статус записи
'posts_per_page' => -1, // кол-во записей (-1 все)
//'category_name' => 'news', // если рубрика
/*'post__in' => array( // id страниц для включения в цикл
108, 103, 102, 94, 95, 96, 98
)*/
/*'tax_query' => array( // если элемент таксономии
array(
'taxonomy' => '{название_таксономии}', //таксономия
'field' => 'slug',
'terms' => '{термин(элемент)_тфаксономии}' // увидеть можно в адр. строке
)
)*/
) );
if ($mypost_Query->have_posts() ) {
while ( $mypost_Query->have_posts() ) {
$mypost_Query->the_post();
get_template_part('./template-parts/loop-myposts'); // шаблон для отображения каждой записи
}
wp_reset_postdata(); // "сброс данных"
} else { ?>
<p><?php echo('Извините, нет записей ...'); ?></p>
<?php } ?>
Вывод записей из ТЕКУЩЕЙ рубрики / кастомного типа записи - get_posts()
Для вывода записей из текущей рубрики воспользуемся следующим кодом
<?php
$this_cat = get_the_category();
$this_cat = $this_cat[0];
$postslist = get_posts( array(
'numberposts' => -1, // убираем лимит вывода постов
'orderby' => 'title', // сортировка по названию
'category' . $this_cat->cat_ID // выводить из текущей категории (рубрики) по id
) );
foreach( $postslist as $post ){
setup_postdata($post);
get_template_part('loop-tpl');
}
wp_reset_postdata();
?>
Вывод всех записей, кроме ТЕКУЩЕЙ рубрики / кастомного типа записи - get_posts()
Сначала получим ID текущей рубрики / типа записи, а затем исключим его из цикла
<?php
$post_id = get_the_ID(); // получаем текущий ID
$posts = get_posts( array(
'exclude' => array($post_id), // исключаем текущий ID
'post_type' => 'production', // post, custom_type
) );
foreach( $posts as $post ){
setup_postdata($post);
get_template_part('./template-parts/loop-production');
}
wp_reset_postdata(); // сброс
?>
Дополнительные плюшки
- Полезные хуки по работе с WordPress.
- Подборка лучших плагинов для WordPress на 2019 год.
- Как скрыть пункты меню в админке WordPress, изменить их порядок - статья.
- Как установить свой логотип при входе в админку WordPress вместо стандартного.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Статьи из данной категории:
Комментарии
- Комментариев пока нет.