Популярные JS-библиотеки и фреймворки

Пример кода 

Вот универсальный блок кода, который подключает jQuery и другие популярные библиотеки (Bootstrap, Lodash, Axios) в одном месте:

html
<!-- Подключение библиотек -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- Пользовательский код -->
<script>
$(document).ready(() => { $(".ten").on("click", () => $(".six").click());
// Пример использования Lodash
console.log(_.random(1, 100));
// Пример запроса через Axios
axios.get('https://jsonplaceholder.typicode.com/todos/1') .then(response => console.log(response.data)) .catch(error => console.error(error)); });
</script>

 

📌 Популярные JS-библиотеки и фреймворки

🔹 1. jQuery (разные источники)

html
<!-- jQuery с Google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!– jQuery с Microsoft CDN –>
<script src=“https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js”></script><!– jQuery с официального jQuery CDN –>
<script src=“https://code.jquery.com/jquery-3.6.0.min.js”></script>

🔹 2. Bootstrap (CSS + JS + Popper.js)

html
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!– Bootstrap JS (с Popper.js) –>
<script src=“https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js”></script>

🔹 3. Vue.js

html
<!-- Vue 2 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<!– Vue 3 –>
<script src=“https://unpkg.com/vue@3.2.31/dist/vue.global.js”></script>

🔹 4. React + ReactDOM

html
<!-- React -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

🔹 5. Angular

html
<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

🔹 6. Lodash (утилиты для работы с массивами и объектами)

html
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

🔹 7. Axios (работа с HTTP-запросами)

html
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

🔹 8. Moment.js (работа с датами и временем)

html
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

🔹 9. Chart.js (графики и диаграммы)

html
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

🔹 10. D3.js (визуализация данных)

html
<script src="https://d3js.org/d3.v7.min.js"></script>

🔹 11. Three.js (3D-графика)

html
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>

🔹 12. Swiper.js (слайдеры и карусели)

html
<!-- Swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

🔹 13. Slick Carousel (слайдеры и карусели)

html
<!-- Slick CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- Slick JS -->
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

🔹 14. GSAP (анимации)

html
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>

🔹 15. Anime.js (анимации)

html
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

🔹 16. Particles.js (анимация частиц)

html
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>

🔹 17. AOS (Animate On Scroll) (анимации при прокрутке)

html
<!-- AOS CSS -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<!-- AOS JS -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

🔹 18. Font Awesome (иконки)

html
<script src="https://kit.fontawesome.com/ВАШ-КОД.js" crossorigin="anonymous"></script>

🔹 19. Tailwind CSS (утилитарный CSS-фреймворк)

html
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>

🔹 20. SweetAlert2 (красивые модальные окна)

html
<!-- SweetAlert2 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.css">
<!-- SweetAlert2 JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.all.min.js"></script>

🔹 21. Popper.js (используется для всплывающих подсказок)

html
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>

🔹 22. jQuery UI (расширение для jQuery)

html
<!-- jQuery UI CSS -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<!-- jQuery UI JS -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

📌 Дополнительные ресурсы

  • 🔗 CDNJS – большая база библиотек.
  • 🔗 jsDelivr – быстрый CDN для популярных библиотек.
  • 🔗 Unpkg – удобен для NPM-пакетов.

Как все изображения сделать квадратными?

div {
  /* Блок обертки картинки */
  width: 20%;
  /* Тут ширина ваша, высота будет считаться на хаке ниже */
  position: relative;
  /* Это обязательно */

  /* Временные стили*/
  background-color: #eee;
  margin: 30px auto;

}

div:before {
  /* Хак формирования соотношения сторон для квадрата 1:1, исходя из ширины */
  content: "";
  display: block;
  padding-bottom: 100%;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  display: inline-block;
  width: auto;
  min-width: 1px;
  max-width: 100%;
  height: initial;
  min-height: 1px;
  max-height: 100%;
}

Добавить выбор количества в список товаров


// 1. Добавление новой колонки для количества товаров на складе перед столбцом "В наличии"
add_filter('manage_edit-product_columns', 'custom_product_columns');
function custom_product_columns($columns) {
    // Проверяем роль пользователя
    if (!current_user_can('admin_shop') && !current_user_can('administrator')) {
        return $columns; // Возвращаем исходные колонки, если роль не соответствует
    }
    
    // Создаем новый массив с колонками
    $reordered_columns = array();
    
    // Проходимся по всем существующим колонкам
    foreach ($columns as $key => $value) {
        // Перед добавлением колонки 'is_in_stock' (В наличии) добавляем нашу новую колонку
        if ($key == 'is_in_stock') {
            $reordered_columns['stock_quantity'] = __('Количество на складе', 'woocommerce');
        }

        $reordered_columns[$key] = $value;
    }

    return $reordered_columns;
}

// 2. Заполнение колонки данными
add_action('manage_product_posts_custom_column', 'custom_product_column_content', 10, 2);
function custom_product_column_content($column, $post_id) {
    // Проверяем роль пользователя
    if (!current_user_can('admin_shop') && !current_user_can('administrator')) {
        return; // Прекращаем выполнение, если роль не соответствует
    }

    if ($column === 'stock_quantity') {
        $stock = get_post_meta($post_id, '_stock', true);
        echo '
'; echo ''; echo '
'; } } // 3. AJAX обработка изменения количества товаров add_action('wp_ajax_update_stock_quantity', 'update_stock_quantity'); function update_stock_quantity() { // Проверяем роль пользователя if (!current_user_can('admin_shop') && !current_user_can('administrator')) { wp_send_json_error(); // Прекращаем выполнение, если роль не соответствует return; } if (isset($_POST['product_id']) && isset($_POST['quantity'])) { $product_id = intval($_POST['product_id']); $quantity = intval($_POST['quantity']); update_post_meta($product_id, '_stock', $quantity); wp_send_json_success(); } else { wp_send_json_error(); } } // 4. Скрипт для обработки изменения количества товаров в колонке add_action('admin_footer', 'stock_quantity_editable_script'); function stock_quantity_editable_script() { // Проверяем роль пользователя if (!current_user_can('admin_shop') && !current_user_can('administrator')) { return; // Прекращаем выполнение, если роль не соответствует } global $pagenow; if ($pagenow !== 'edit.php' || get_post_type() !== 'product') { return; } ?>

Несколько популярных онлайн-редакторов кода

Вот несколько популярных онлайн-редакторов кода, аналогичных JSFiddle, которые позволяют писать, тестировать и делиться HTML, CSS и JavaScript:

  1. CodePen (https://codepen.io/)
    Один из самых популярных онлайн-редакторов. Позволяет создавать проекты, делиться ими и даже находить вдохновение среди работ других пользователей.
  2. JSBin (https://jsbin.com/)
    Легкий и простой инструмент для быстрого тестирования и отладки кода в браузере. Поддерживает совместную работу и интеграцию с GitHub.
  3. JSFiddle (https://jsfiddle.net/)
    Сам JSFiddle, если вам нужно быстро протестировать фрагменты HTML, CSS и JavaScript, а также делиться кодом с другими.
  4. CodeSandbox (https://codesandbox.io/)
    Мощный онлайн-редактор, предназначенный для разработки приложений на JavaScript и TypeScript, поддерживает React, Vue, Angular и другие фреймворки.
  5. Repl.it (https://replit.com/)
    Универсальная платформа для кодирования, которая поддерживает множество языков программирования. Хорошо подходит для совместной работы и обучения.
  6. Codeply (https://www.codeply.com/)
    Фокусируется на работе с фронтенд-фреймворками, такими как Bootstrap, Foundation, Materialize и др.

Эти инструменты позволяют вам работать с кодом прямо в браузере и видеть результаты в реальном времени. Вы также можете делиться своими проектами с другими пользователями.

Замена футера

Имеем несколько вариантов замены и удаления. Для замены используем код в functions.php:
Здесь мы удалим часть футера

function replace_opstore_footer_credit() {
    remove_action('opstore_footer', 'opstore_bottom_footer', 10);

    add_action('opstore_footer', 'custom_footer_credit', 10);
}

function custom_footer_credit() {
    ?>
    
    
Здесь замена подписи
function modify_opstore_footer_credit($content) {
    // Ищем стандартную подпись по содержимому
     $pattern = '/Copyright 2024 - Opstore Theme By WPoperation<\/a>/';

    // Формируем новую подпись
    $replacement = '© 2024 Ваше Имя или Название Компании. Все права защищены.';

    // Заменяем стандартную подпись на новую
    $content = preg_replace($pattern, $replacement, $content);

    return $content;
}

function start_output_buffer() {
    ob_start('modify_opstore_footer_credit');
}

function end_output_buffer() {
    ob_end_flush();
}

add_action('template_redirect', 'start_output_buffer');
add_action('shutdown', 'end_output_buffer');

или не зная разметки

function modify_opstore_footer_credit($content) {
    // Убираем стандартную подпись
    $content = preg_replace('/Opstore Theme By .*?<\/a>/', '', $content);
    
    // Добавляем свою подпись
    $new_credit = '

© 2024 Ваше Имя или Название Компании. Все права защищены.

'; // Вставляем новую подпись вместо старой return $content . $new_credit; } function start_output_buffer() { ob_start('modify_opstore_footer_credit'); } function end_output_buffer() { ob_end_flush(); } add_action('template_redirect', 'start_output_buffer'); add_action('shutdown', 'end_output_buffer');

или по классам

function modify_opstore_footer_credit($content) {
    // Ищем стандартную подпись
    $pattern = '/
.*?<\/div>/s'; // Формируем новую подпись $replacement = '
© 2024 Ваше Имя или Название Компании. Все права защищены.
'; // Заменяем старую подпись на новую $content = preg_replace($pattern, $replacement, $content); return $content; } function start_output_buffer() { ob_start('modify_opstore_footer_credit'); } function end_output_buffer() { ob_end_flush(); } add_action('template_redirect', 'start_output_buffer'); add_action('shutdown', 'end_output_buffer');

Elementor

Удаляем все целевые элементы перед рендерингом страницы, точное удаление с использованием DOMDocument в PHP:
строку Elementor если в ней присутствует слово Elementor
элементы с классом .edit_with_elementor , с id=elementor-editor, с id=ementor-switch-mode

function hide_elementor_admin_elements() {
    ob_start(function($content) {
        // Загружаем содержимое в DOMDocument
        $dom = new DOMDocument();
        libxml_use_internal_errors(true); // Игнорируем ошибки парсинга HTML
        $dom->loadHTML($content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
        libxml_clear_errors();

        // Удаляем элементы , содержащие "Elementor"
        $spans = $dom->getElementsByTagName('span');
        for ($i = $spans->length - 1; $i >= 0; $i--) {
            $span = $spans->item($i);
            if ($span->hasAttribute('class') && strpos($span->getAttribute('class'), 'post-state') !== false) {
                if (trim($span->nodeValue) === 'Elementor') {
                    $span->parentNode->removeChild($span);
                }
            }
        }

        // Удаляем элементы с классом .edit_with_elementor
        $xpath = new DOMXPath($dom);
        foreach ($xpath->query('//*[@class="edit_with_elementor"]') as $node) {
            $node->parentNode->removeChild($node);
        }

        // Удаляем элемент с id="elementor-editor"
        $editor = $dom->getElementById('elementor-editor');
        if ($editor) {
            $editor->parentNode->removeChild($editor);
        }

        // Удаляем элемент с id="elementor-switch-mode"
        $switch_mode = $dom->getElementById('elementor-switch-mode');
        if ($switch_mode) {
            $switch_mode->parentNode->removeChild($switch_mode);
        }

        // Возвращаем модифицированный контент
        return $dom->saveHTML();
    });
}
add_action('admin_init', 'hide_elementor_admin_elements');

function end_ob_clean() {
    ob_end_flush();
}
add_action('shutdown', 'end_ob_clean');

Import Export

WP All Import
Автор: Soflyy
Ссылка: https:// wordress.org/plugins/wp-all-import/

WooCommerce Product CSV Import Suite
Автор: WooCommerce
Ссылка: https:// woocommerce.com/products/product-csv-import-suite/

Product Import Export for WooCommerce
Автор: WebToffee
Ссылка: https:// wordpress.org/plugins/product-import-export-for-woo/

Woo Import Export
Автор: VJInfotech
Ссылка: https:// codecanyon.net/item/woo-import-export/13694764

CTX Feed – WooCommerce Product Feed Generator
Автор: WebAppick
Ссылка: https:// wordpress.org/plugins/webappick-product-feed-for-woocommerce/

WooCommerce Add-On for WP All Import
Автор: Soflyy
Ссылка: https:// www.wpallimport.com/woocommerce-product-import/

Auto Upload Images
Автор: Ali Irani
Ссылка: https:// wordpress.org/plugins/auto-upload-images/

Изменение товаров в зависимости от роли пользователя

Чтобы ограничить изменение количества товаров в магазине WooCommerce в зависимости от роли пользователя, можно использовать плагин, который позволит вам управлять правами доступа для различных ролей. В WordPress и WooCommerce нет встроенной функции для ограничения изменения количества товаров по ролям пользователей, но можно использовать следующие плагины и подходы:

1. WooCommerce Role-Based Pricing

  • Описание: Этот плагин позволяет управлять ценами и доступом к товарам в WooCommerce на основе ролей пользователей. Он может быть настроен для ограничения возможностей изменения количества товаров.
  • Преимущества: Позволяет настроить разные уровни доступа и цен для различных ролей пользователей.
  • Минусы: Основное внимание уделяется ценам, поэтому дополнительные настройки могут потребоваться для ограничения изменения количества товаров.

2. User Role Editor

  • Описание: Этот плагин позволяет управлять ролями и правами доступа пользователей в WordPress. С его помощью вы можете настроить права на редактирование товаров и их количества в WooCommerce.
  • Преимущества: Полный контроль над правами пользователей и их ролями.
  • Минусы: Не специально предназначен для WooCommerce, поэтому потребуется настройка.

3. Adminimize

  • Описание: Плагин Adminimize позволяет скрывать или ограничивать доступ к различным частям админки WordPress. Вы можете использовать его для скрытия элементов интерфейса, связанных с изменением количества товаров.
  • Преимущества: Высокая степень настройки, возможность скрывать и управлять элементами интерфейса админки.
  • Минусы: Не специфичен для WooCommerce, требует настройки.

4. WooCommerce Admin Custom Order Fields

  • Описание: Этот плагин позволяет добавлять и настраивать поля для заказов в WooCommerce. Вы можете использовать его для создания настраиваемых полей, которые будут зависеть от роли пользователя.
  • Преимущества: Возможность создания индивидуальных полей и ограничений.
  • Минусы: Может потребоваться настройка или программирование для ограничения изменения количества товаров.

5. WooCommerce Advanced Permissions

  • Описание: Плагин WooCommerce Advanced Permissions позволяет настраивать детализированные права доступа для различных ролей в WooCommerce, включая возможность редактирования количества товаров.
  • Преимущества: Специализирован для WooCommerce, удобное управление правами доступа.
  • Минусы: Могут потребоваться платные версии или дополнительные настройки для полного контроля.

Как настроить ограничения:

  1. Установите и активируйте один из вышеупомянутых плагинов.
  2. Перейдите к настройкам плагина и настройте права доступа и ограничения для ролей пользователей.
  3. Проверьте настройки и убедитесь, что пользователи с определенными ролями не могут изменять количество товаров.

Рекомендации:

  • Если вам нужна полная настройка прав доступа, попробуйте User Role Editor или WooCommerce Advanced Permissions.
  • Если вы хотите скрыть элементы интерфейса, которые позволяют изменять количество товаров, рассмотрите Adminimize.

При клике на один элемент кликнуть другой

При клике на элемент с классом .ten
делаем клик на элемент с классом .six

$(".ten").on("click", ()=>$(".six").click());

Пример кода, код, который должен работать как для

<a>, так и для <button>
При необходимости подключить
<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>

 

   <script> document.addEventListener("DOMContentLoaded",function(){
const observer = new MutationObserver(() => {
     // Ищем элемент с классом .menu-item-1788 > a
        const demoFilterShop = document.querySelector(".menu-item-1788 > a");

        if (demoFilterShop) {
            // Добавляем обработчик на body для делегирования событий
            document.body.addEventListener("click", function (event) {
                // Проверяем, был ли клик на элементе .menu-item-1132 > a или button.menu-item-1132
                if (
                    event.target.closest(".menu-item-1132 > a") || // Для <a>
                    event.target.closest("button.menu-item-1132") // Для <button>
                ) {
                    event.preventDefault(); // Отменяем стандартное поведение
                    demoFilterShop.click(); // Передаем клик на .menu-item-1788 > a
                }
            });

            // Останавливаем observer, так как элементы найдены
            observer.disconnect();
        }
    });

    // Начинаем наблюдение за изменениями в DOM
    observer.observe(document.body, { childList: true, subtree: true });
});
</script>