Шпаргалка по работе с WordPress

Шпаргалка по работе с WordPress включает в себя: иерархию шаблонов и их создание, подключение стилей и скриптов; вывод логотипа, меню, изображений, а также вывод записей в циклах WordPress, используя WP_Query() и get_posts().

Иерархия шаблонов WordPress

Для каждого файла шаблона осуществляется последовательная проверка на наличие файла, например, front-page.php, home.php, index.php

Главная страница

- front-page.php
- home.php
- index.php

В случае с front-page.php нужно выбрать домашнюю страницу: Внешний вид Настроить Настройка главной страницы На главной странице отображать Статическую страницу front-page.php

Статическая страница (например, услуги, контакты)

- {ваше_название}.php
- page-{ярлык_страницы}.php
- page-{id_страницы}.php
- page.php

{ваше_название}.php - можно выбрать любое название, например, для страницы О нас использовать about.php, при использовании шаблона для страницы

Запись (post-type=post)

- single-post-{ярлык_записи}.php //один файл шаблона записи используется для отображения одной записи
- single-post.php
- single.php

Запись, с типом записи, отличным от post

- single-{post-type}-{ярлык_записи}.php
- single-{post-type}.php
- single.php

Рубрика

- category-{ярлык}.php
- category-{id}.php
- category.php

Метка

- tag-{ярлык}.php
- tag-{id}.php
- tag.php

Таксономия

- taxonomy-{таксономия}-{ярлык_элемента}.php
- taxonomy-{таксономия}.php
- taxonomy.php

Страница поиска (результаты поиска)

- search.php

Форма поиска

- searchform.php

Страница ошибки 404

- 404.php

Создание шаблонов страниц

2 способа создания шаблонов страниц

1 способ

Создание файла с любым названием. Для создания шаблона страницы "Услуги" в начале файла добавим следующий php-код:

<?php
/*
Template Name: Услуги
*/
?>

2 способ

Создание файла с названием page-{ярлык_страницы}.php или page-{id_страницы}.php

Подключение файлов темы

<?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_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-css', get_template_directory_uri() . '/assets/css/libs.min.css' );
    wp_enqueue_style( 'themeName-main-css', get_template_directory_uri() . '/assets/css/main.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-js', get_template_directory_uri() . '/assets/js/libs.min.js', array(), '', true );
    wp_enqueue_script( 'themeName-main-js', get_template_directory_uri() . '/assets/js/scripts.js', array(), '', true );
}

true - подключать в подвале

Подключение стилей в подвале

Для подключения стилей в подвале, воспользуйтесь следующим кодом.

function footer_styles() {
    wp_enqueue_style( 'themeName-footer-css', get_template_directory_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_template_directory_uri() . '/assets/css/contact.css');
}

Больше примеров определения типа страницы можете посмотреть в разделе выше.

Подключение своей библиотеки 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-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 - 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

<?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()
Данная функция вернёт полный путь до темы

<?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'); ?>

Размеры миниатюр:

thumbnail - дефолтное значение 150px x 150px максимум
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); ?>

Вывод записей в цикле

Вывод записей ОПРЕДЕЛЁННОЙ рубрики / кастомного типа записи - WP_Query()

Напишем цикл в отдельном файле, назовём его loop-myposts.php

Пример

<?php // для вывода изображения поста

$tb_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' ); ?>

<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 the_title(); ?></div>
        <div><?php the_excerpt(); ?></div>
        <a href="<?php the_permalink(); ?>">Далее</a>
    </div>
</div>

Выводим в цикле

<?php the_title(); ?> - заголовок
<?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 все)

    
    # '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();

        get_template_part('./template-parts/loop-myposts'); // шаблон для отображения каждой записи


    } wp_reset_postdata(); // "сброс"


} else { echo '<p>Извините, нет записей ...</p>'; } ?>

Вывод записей по тегу - 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(); // "сброс"


}

if (function_exists('wp_pagenavi')) wp_pagenavi(); // функция постраничной навигации

?>

Вывод записей из ТЕКУЩЕЙ рубрики / кастомного типа записи - 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 на 2020 год.
Как скрыть пункты меню в админке WordPress, изменить их порядок - статья.
Как установить свой логотип при входе в админку WordPress вместо стандартного.

admin 05/08/2020 20:58

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Шпаргалка по работе с WordPress

Иерархия шаблонов WordPress

Главная страница

Статическая страница (например, услуги, контакты)

Запись (post-type=post)

Запись, с типом записи, отличным от post

Рубрика

Метка

Таксономия

Страница поиска (результаты поиска)

Форма поиска

Страница ошибки 404

Создание шаблонов страниц

Подключение файлов темы

Проверка типа страницы WordPress

Подключение стилей и скриптов в functions.php - wp_enqueue_scripts

Подключение стилей в подвале

Подключение стилей/скриптов на определённой странице

Подключение своей библиотеки jQuery

Вывод информации о сайте - bloginfo()

Вывод логотипа в WordPress - the_custom_logo()

Вывод текста внутри логотипа

Вывод меню WordPress - wp_nav_menu()

Примеры вывода меню

Вывод изображений из папки темы - get_template_directory_uri()

Примеры

Вывод миниатюры - wp_get_attachment_image_src()

Вывод миниатюры в шаблоне

Примеры

Вывод миниатюры своего размера

Регистрация нового размера миниатюр

Вывод контента страницы / записи - the_content()

Рубрики - taxonomy=category

Метки - taxonomy=post_tag

Вывод названия НУЖНОЙ страницы / записи / рубрики по id - get_cat_name(), get_the_title()

Вывод записей ОПРЕДЕЛЁННОЙ рубрики / кастомного типа записи - WP_Query()

Вывод записей по тегу - WP_Query()

Вывод записей из ТЕКУЩЕЙ рубрики / кастомного типа записи - get_posts()

Вывод всех записей, кроме ТЕКУЩЕЙ рубрики / кастомного типа записи - get_posts()

Дополнительные плюшки

Статьи из данной категории:

Комментарии

Оставить комментарий