Плагин wordpress - вставка произвольного скрипта

Главная » WordPress » Плагин wordpress — вставка произвольного скрипта

Время чтения: 5 мин.

Создание плагина для вставки произвольного скрипта (например, метрики Яндекс.Метрика, Google Analytics или другого) в WordPress — это удобный способ добавить код отслеживания на все страницы сайта без необходимости редактировать файлы темы. Вот пошаговое руководство по созданию такого плагина:

Шаги для создания плагина:

Создайте папку для плагина:
- В директории wp-content/plugins/ создайте папку, например, custom-script-insert.
Создайте основной файл плагина:
- Внутри папки custom-script-insert создайте файл custom-script-insert.php.
Добавьте код плагина:
Вставьте следующий код в файл custom-script-insert.php:

<?php
/*
Plugin Name: Custom Script Insert
Description: Плагин для вставки произвольного скрипта (например, метрики) на все страницы сайта.
Version: 1.0
Author: Ваше имя
*/

// Добавление страницы настроек в админке
function csi_add_settings_page() {
    add_options_page(
        'Настройки Custom Script Insert',
        'Custom Script Insert',
        'manage_options',
        'csi-settings',
        'csi_render_settings_page'
    );
}
add_action('admin_menu', 'csi_add_settings_page');

// Отображение страницы настроек
function csi_render_settings_page() {
    ?>
    <div class="wrap">
        <h1>Настройки Custom Script Insert</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('csi_settings_group');
            do_settings_sections('csi-settings');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

// Санитизация кода скрипта (разрешаем теги <script>)
function csi_sanitize_script($input) {
    // Разрешаем теги <script> и их атрибуты
    $allowed_tags = wp_kses_allowed_html('post');
    $allowed_tags['script'] = array(
        'src' => true,
        'async' => true,
        'defer' => true,
        'type' => true,
        'charset' => true,
    );
    return wp_kses($input, $allowed_tags);
}

// Регистрация настроек
function csi_register_settings() {
    register_setting('csi_settings_group', 'csi_script_code', 'csi_sanitize_script'); // Разрешаем HTML и JS
    add_settings_section('csi_main_section', 'Основные настройки', null, 'csi-settings');
    add_settings_field('csi_script_code', 'Код скрипта', 'csi_script_code_callback', 'csi-settings', 'csi_main_section');
}
add_action('admin_init', 'csi_register_settings');

// Callback для поля ввода кода скрипта
function csi_script_code_callback() {
    $script_code = get_option('csi_script_code', '');
    echo '<textarea name="csi_script_code" rows="10" cols="50">' . esc_textarea($script_code) . '</textarea>';
    echo '<p class="description">Вставьте сюда ваш код (например, Яндекс.Метрика или Google Analytics).</p>';
}

// Вставка скрипта на все страницы сайта
function csi_insert_script() {
    $script_code = get_option('csi_script_code');
    if (!empty($script_code)) {
        echo $script_code;
    }
}
add_action('wp_head', 'csi_insert_script'); // Вставка в <head>
// add_action('wp_footer', 'csi_insert_script'); // Вставка перед закрывающим </body>

Как работает плагин:

Страница настроек:
- Плагин добавляет страницу настроек в админке WordPress, где можно вставить код скрипта.
- Код сохраняется в опции csi_script_code.
Вставка скрипта:
- Плагин вставляет код скрипта на все страницы сайта с помощью хука wp_head (в <head>) или wp_footer (перед закрывающим </body>).
Безопасность:
- Используется функция wp_kses_post для очистки введенного кода, чтобы предотвратить XSS-атаки.

Установка плагина:

Загрузите папку custom-script-insert в директорию wp-content/plugins/.
Перейдите в Панель управления WordPress → Плагины.
Найдите плагин Custom Script Insert и активируйте его.

Использование плагина:

Перейдите в Настройки → Custom Script Insert.
Вставьте код скрипта (например, Яндекс.Метрика или Google Analytics) в текстовое поле.
Сохраните изменения.

Пример кода для вставки:

Яндекс.Метрика:

<!-- Yandex.Metrika counter -->
<script type="text/javascript">
    (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
    m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
    (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

    ym(XXXXXX, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true
    });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/XXXXXX" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->

Google Analytics:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXX');
</script>

Дополнительные улучшения:

Выбор места вставки:
- Добавьте настройку для выбора места вставки скрипта (<head> или перед </body>).
Поддержка нескольких скриптов:
- Расширьте плагин, чтобы можно было добавлять несколько скриптов.
Условия вставки:
- Добавьте возможность вставлять скрипт только на определенные страницы (например, главную страницу, записи, страницы и т.д.).

Пример улучшенного плагина:

Если вы хотите добавить выбор места вставки, используйте следующий код:

// Добавление настройки для выбора места вставки
function csi_register_settings() {
    register_setting('csi_settings_group', 'csi_script_code', 'csi_sanitize_script');
    register_setting('csi_settings_group', 'csi_script_location', 'sanitize_text_field');

    add_settings_section('csi_main_section', 'Основные настройки', null, 'csi-settings');

    add_settings_field('csi_script_code', 'Код скрипта', 'csi_script_code_callback', 'csi-settings', 'csi_main_section');
    add_settings_field('csi_script_location', 'Место вставки', 'csi_script_location_callback', 'csi-settings', 'csi_main_section');
}
add_action('admin_init', 'csi_register_settings');

// Callback для выбора места вставки
function csi_script_location_callback() {
    $location = get_option('csi_script_location', 'head');
    echo '<select name="csi_script_location">';
    echo '<option value="head" ' . selected($location, 'head', false) . '>В <head></option>';
    echo '<option value="footer" ' . selected($location, 'footer', false) . '>Перед </body></option>';
    echo '</select>';
}

// Вставка скрипта в зависимости от выбранного места
function csi_insert_script() {
    $script_code = get_option('csi_script_code');
    $location = get_option('csi_script_location', 'head');

    if (!empty($script_code)) {
        if ($location === 'head') {
            add_action('wp_head', function() use ($script_code) {
                echo $script_code;
            });
        } else {
            add_action('wp_footer', function() use ($script_code) {
                echo $script_code;
            });
        }
    }
}
add_action('init', 'csi_insert_script');

Теперь у вас есть гибкий плагин для вставки произвольного скрипта на ваш сайт WordPress!

Плагин wordpress — вставка произвольного скрипта