Искать:

Dashicons — стандартные иконки WordPress и как с ними работать

Dashicons — это набор встроенных иконок WordPress, изначально разработанных для административной панели. Но вы можете использовать их и на публичной части сайта. Они просты в использовании, не требуют установки сторонних библиотек и позволяют добавлять иконки в кнопки, меню, блоки контента и любой HTML.

Подключение Dashicons

На фронтенде WordPress иконки Dashicons не всегда подключены по умолчанию. Чтобы их использовать, нужно подключить CSS:

<?php
function enqueue_dashicons() {
    wp_enqueue_style('dashicons');
}
add_action('wp_enqueue_scripts', 'enqueue_dashicons');
?>

Это подключает файл dashicons.css со всеми необходимыми стилями.

⚡ На админ-панели WordPress подключение не требуется — Dashicons уже загружены.

Использование Dashicons в HTML

Иконки отображаются через CSS-классы. Общий формат:

<span class="dashicons dashicons-имя-иконки"></span>

Например:

<span class="dashicons dashicons-admin-users"></span>
<span class="dashicons dashicons-email"></span>

Иконка выбирается по имени (dashicons-admin-users, dashicons-email и т.д.). Полный список имён можно найти на официальной странице: Dashicons – WordPress Developer Resources.

Примеры использования

  1. В кнопке:
<button class="my-button">
    <span class="dashicons dashicons-plus"></span> Добавить элемент
</button>
  1. В меню:
<li>
    <span class="dashicons dashicons-admin-home"></span>
    Главная
</li>
  1. В шорткодах или блоках Gutenberg:

Если вы пишете шорткод, можно выводить иконку динамически:

echo '<span class="dashicons dashicons-star-filled"></span> Избранное';

Динамическая генерация списка Dashicons

Если вы хотите отобразить все иконки на странице, можно использовать шорткод, который динамически извлекает имена иконок из dashicons.css:

echo do_shortcode('[dashicons_dynamic]');

Это удобно для демонстрации всех доступных иконок или выбора нужной для дизайна.

Советы по работе с Dashicons

  • Используйте только один тег <span> с классами dashicons dashicons-имя, не оборачивайте в лишние контейнеры.
  • Для изменения цвета и размера используйте CSS:
.dashicons {
    font-size: 24px;
    color: #0073aa;
}
  • Dashicons — шрифтовые иконки, поэтому они масштабируются без потери качества.

Заключение

Dashicons — это удобный и быстрый способ добавлять иконки на сайт WordPress. Их легко подключить, они не требуют сторонних библиотек, и благодаря CSS-классам можно управлять цветом, размером и позиционированием.

Используйте их в админке и на фронтенде — и вы получите аккуратные, современные иконки без лишних файлов и скриптов.

Полный перечень иконок Dashicon в Wordpress

[dashicons_all]

Маска вводя номера телефона на javascript

Пример создания маски ввода номера телефона и код для обработки ввода.

Полезные функции при создании темы Wordpress

При создании новой темы в Wordpress пригодятся следующие функции. Их нужно добавить в файл functions.php своей текущей темы.

Скачать заготовку пустой темы Wordpress

Отключение админбара для публичной части сайта

Для отключения админбара в публичной части сайта нужно добавить специальную команду в файл темы fubctions.php

add_filter('show_admin_bar', '__return_false');

Подключение javascript-файла

add_action( 'wp_enqueue_scripts', 'enqueue_custom_scripts_with_jquery' );
function enqueue_custom_scripts_with_jquery() {
    // Регистрируем и подключаем script.js с зависимостью от jQuery
    wp_enqueue_script(
        'main-script', // Уникальный идентификатор скрипта
        get_template_directory_uri() . '/js/script.js', // Путь к script.js
        array('jquery'), // Зависимость от jQuery
        null, // Версия (null для автоматического обновления)
        true // Подключение в footer
    );
}

Регистрация новых размеров изображений

Если на страницах сайта нужен специальный размер для изображений, например, для записей произвольного типа.

function custom_image_sizes() {
    add_image_size('small-image', 500, 300, true);
    add_image_size('vert-image', 500, 800, true);
    add_image_size('gallery-image', 600, 600, true);
    add_image_size('large-image', 1200, 800, true);
}
add_action('after_setup_theme', 'custom_image_sizes');

function add_custom_image_sizes_to_media_library($sizes) {
    return array_merge($sizes, array(
        'small-image' => __('Малое изображение для анкеты (500х300)'),
        'vert-image' => __('Вертикальное изображение для анкеты (500х800)'),
        'gallery-image' => __('Изображения галереи (600х600)'),
        'large-image' => __('Большое изображение для анкеты (1200х800)')
    ));
}
add_filter('image_size_names_choose', 'add_custom_image_sizes_to_media_library');

Регистрация меню для темы Wordpress

Зарегистрировав новое меню в него можно добавить новые пункты через админку и вывести его в шаблоне специальной командой

function register_custom_menus() {
    register_nav_menus( array(
        'main_menu' => 'Основное меню',
    ) );
}
add_action( 'after_setup_theme', 'register_custom_menus' );

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

Для вывода зарегистрированного меню в шаблоне нужно использовать следующий код:

<?php wp_nav_menu( [
    'container_class' => 'menu-header',
    'theme_location'  => 'primary'
] ); ?>

Полезные функции для форматирования номера телефона

Функция при водит номер телефона вида 89137654321 а виду +7 (913) 765-43-21

function format_phone_number($phone) {
    $phone = preg_replace('/\D/', '', $phone);
    if (strlen($phone) === 11 && $phone[0] === '8') {
        $phone = '+7 (' . substr($phone, 1, 3) . ') ' . substr($phone, 4, 3) . '-' . substr($phone, 7, 2) . '-' . substr($phone, 9, 2);
    }
    return $phone;
}

Функция может быть вызвана, например, для форматирования поля плагина ACF, в шаблоне следующим образом:

$phone = format_phone_number(get_field('phone'));

Следующая функция преобразует номер телефона для использования в ссылке и приводит телефон вида 89137654321 а виду +79137654321:

function format_phone_for_link($phone) {
    $phone = preg_replace('/\D/', '', $phone);
    if (strlen($phone) === 11 && $phone[0] === '8') {
        $phone = '+7' . substr($phone, 1);
    }
    return $phone;
}

Вызов функции в файле шаблона:

$phone_link = format_phone_for_link(get_field(‘phone’));

Вывод галереи изображений, созданной плагином ACF

Если создано произвольное поле типа «Фотогалерея», то его можно вывести в шаблоне следующим образом:

$images = get_field('fotogalereya');
<?php if( $images ): ?>
    <?php foreach( $images as $image ): ?>
        <a href="<?php echo esc_url($image['url']); ?>">
            <img src="<?php echo esc_url($image['sizes']['gallery-image']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
        </a>
    <?php endforeach; ?>
<?php endif; ?>

Подключение файла с фрагментом шаблона

В примере подключается файл nav.php из директории template-parts

<?php get_template_part('/template-parts/nav'); ?>

Вывод url до текущей темы

<?php echo get_template_directory_uri(); ?>

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

<?php /* Template Name: Мой шаблон страницы Template Post Type: post, page, product */ // … остальной код шаблона

Вывод текущего года с копирайтом в футере

[crayon-6aca9dcc6d1d9079298543 lang=»html»]

© 2023– Webdp. Все права защищены.

[crayon-6aca9dcc6d1eb923953414]