Шпаргалка по работе с 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_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'); ?>

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

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

Передать переменную в 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_title(); ?> - заголовок
<?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 вместо стандартного.

01/09/2021 16:07

admin

» »

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

Поделиться с друзьями:

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

Комментариев пока нет.

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

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

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

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

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

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

Рубрика

Метка

Таксономия

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

Форма поиска

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

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

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

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

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

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

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

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

Удаление атрибута у тегов script и link

Добавление атрибута для тега script

Удаление block-library/style.min.css

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

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

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

Предзагрузка логотипа WordPress

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

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

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

Примеры

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

Вывод url изображения страницы

Вывод alt изображения

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

Примеры

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

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

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

Рубрики - taxonomy=category

Метки - taxonomy=post_tag

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

Передать переменную в get_template_part()

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

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

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

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

Вывод записей из таксономии - get_terms()

Вывод записей из ТЕКУЩЕЙ таксономии - get_term() + WP_Query

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

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

Комментарии

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