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

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

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

Иерархия шаблонов 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)
?>

Подключение стилей и скриптов в 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'); ?>

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

thumbnail - дефолтное значение 150px x 150px максимум
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>
    <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 родителя, вывод дочерних

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

Вывод записей из ТЕКУЩЕЙ рубрики / кастомного типа записи - 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(); // сброс

?>

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

admin
25/12/2019 20:28