Популярные 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');

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/