Dodaj animacje po najechaniu na obrazy produktów w WordPressie
Objaśnienie
Chcesz dodać odrobinę stylu do obrazów produktów WooCommerce? Ten fragment kodu nadaje Twoim obrazom produktów efekt powiększenia, gdy ktoś na nie najedzie. Oto jak to działa:
- Sprawdzenie WooCommerce: Kod najpierw sprawdza, czy WooCommerce jest aktywne na Twojej stronie. Dzięki temu efekt najechania stosuje się tylko wtedy, gdy WooCommerce jest uruchomione.
- Ładowanie niestandardowych stylów: Ładuje niestandardowy plik CSS specjalnie dla efektów najechania. Plik ten powinien znajdować się w folderze CSS Twojego motywu.
- Zastosowanie efektu najechania: CSS w tym fragmencie kodu używa prostego efektu przejścia. Gdy najedziesz kursorem na obraz produktu, płynnie powiększa się o 10% (sprawiając, że wydaje się większy).
Aby to działało, upewnij się, że masz plik CSS o nazwie wp-dudecom-hover-effects.css w katalogu CSS swojego motywu. Kod automatycznie dodaje ten plik, gdy ładowane są strony WooCommerce.
To prosty sposób, aby uczynić obrazy Twoich produktów bardziej interaktywnymi i angażującymi dla odwiedzających. Po prostu skopiuj kod do pliku functions.php swojego motywu, a wszystko będzie gotowe!
Kod
<?php
// Add hover effect to WooCommerce product images
function wp_dudecom_enqueue_hover_effects() {
if (is_woocommerce()) {
wp_enqueue_style('wp-dudecom-hover-effects', get_stylesheet_directory_uri() . '/css/wp-dudecom-hover-effects.css');
}
}
add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_hover_effects');
// Add custom CSS for hover effects
function wp_dudecom_add_hover_effects_css() {
?>
<style>
.woocommerce ul.products li.product img {
transition: transform 0.3s ease-in-out;
}
.woocommerce ul.products li.product:hover img {
transform: scale(1.1);
}
</style>
<?php
}
add_action('wp_head', 'wp_dudecom_add_hover_effects_css');
// Ensure WooCommerce is active
if (in_array('woocommerce/woocommerce.php', apply_filters('active_plugins', get_option('active_plugins')))) {
// Add hover effect to product images
function wp_dudecom_woocommerce_product_image_hover() {
add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_hover_effects');
add_action('wp_head', 'wp_dudecom_add_hover_effects_css');
}
add_action('init', 'wp_dudecom_woocommerce_product_image_hover');
}
?>Instrukcja
Aby dodać animacje najechania do obrazów produktów WooCommerce, wykonaj następujące kroki:
Lokalizacja pliku: functions.php w katalogu aktywnego motywu.
Wymagania wstępne:
- Upewnij się, że WooCommerce jest zainstalowane i aktywowane.
- Utwórz plik CSS o nazwie
wp-dudecom-hover-effects.cssw katalogucssswojego motywu.
Kroki wdrożenia:
- Otwórz panel administracyjny WordPressa.
- Przejdź do Wygląd > Edytor motywu.
- W prawym pasku bocznym znajdź i kliknij na functions.php.
- Skopiuj podany fragment kodu i wklej go na końcu pliku
functions.php. - Zapisz zmiany, klikając przycisk Aktualizuj plik.
- Upewnij się, że plik CSS
wp-dudecom-hover-effects.cssznajduje się w katalogucsstwojego motywu. Jeśli go nie ma, utwórz go. - Odwiedź strony produktów WooCommerce, aby zobaczyć efekt najechania w akcji.
To proste wdrożenie wzbogaci obrazy twoich produktów o efekt powiększenia przy najechaniu, czyniąc je bardziej atrakcyjnymi dla odwiedzających.
Jeśli potrzebujesz dalszej pomocy lub chcesz zbadać bardziej zaawansowane funkcjonalności, rozważ skontaktowanie się z wp-dude.com w celu uzyskania fachowej pomocy w zakresie WordPressa.