0
Please log in or register to do it.
Tautan Galeri WordPress Animasi

[ad_1]

Putar yang biasa Blok galeri WordPress menjadi serangkaian ubin tautan animasi CSS. Ini cara yang menyenangkan untuk menambahkan bling ke situs Anda tanpa memperlambat pemuatan halaman. Kita akan menyiapkannya sehingga yang perlu kita lakukan hanyalah menambahkan kelas “animated-gallery-links” ke setiap blok galeri yang ingin kita animasikan.

Perancah proyek

Satu-satunya aset front-end yang kami inginkan dalam proyek ini adalah file CSS kecil, dan kami hanya akan memasukkannya ke dalam antrean pada halaman yang membutuhkannya. Kami dapat mengantrekan CSS pada setiap pemuatan halaman, tetapi itu akan menjadi malas dan dapat mengganggu kinerja situs. Jadi kita akan membuat sedikit PHP untuk mendeteksi ketika blok galeri dirender, dan jika itu memiliki kelas CSS “animated-gallery-links”, kita akan mengantrekan file CSS kita.

Di tema anak khusus Anda, buat file bernama “wpt-animated-gallery-links.php” dan rekatkan yang berikut ke dalamnya. Tidak ada yang rumit di sini, itu hanya urutan if...then...else cek diikuti dengan panggilan ke wp_enqueue_style() (jika semua cek kembali true).

<?php

/**
 * WP Tutorials Animated Gallery Links (WPTAGL)
 *
 * https://wp-tutorials.tech/refine-wordpress/animated-wordpress-gallery-links/
 *
 */

// Block direct access.
defined('WPINC') || die();

// Add this CSS class to any WP Gallery block you want to animate.
const WPTAGL_CLASS_NAME = 'animated-gallery-links';

/**
 * Detect when a standard WordPress gallery block is rendered with the
 * "animated-gallery-links" CSS class.
 * We don't modify the rendered content here - just enqueue our CSS file.
 */
function wptagl_render_block(string $block_content, array $block) {
	global $wptagl_are_assets_enqueued;

	if (!is_null($wptagl_are_assets_enqueued)) {
		// Our stylesheet has already been enqueued,
		// so we don't need to run any of these checks.
	} elseif (is_admin() || wp_doing_ajax()) {
		// We're not in the front-end. Don't do anything.
	} elseif ($block['blockName'] != 'core/gallery') {
		// This isn't a WP Gallery block.
	} elseif (!array_key_exists('attrs', $block)) {
		// The gallery block has no attributes.
	} elseif (!array_key_exists('className', $block['attrs'])) {
		// The className attribute is not specified.
	} elseif (empty($class_name = $block['attrs']['className'])) {
		// The className attribute is empty.
	} elseif (empty($gallery_classes = array_filter(explode(' ', $class_name)))) {
		// The className attribute is empty.
	} elseif (!in_array(WPTAGL_CLASS_NAME, $gallery_classes)) {
		// "animated-gallery-links" isn't in the list of CSS Classes.
	} else {
		$theme_version = wp_get_theme()->get('Version');
		$base_uri = get_stylesheet_directory_uri();

		wp_enqueue_style(
			'animated-gallery-links',
			$base_uri . '/animated-gallery-links.css',
			null, // No dependencies
			$theme_version
		);

		$wptagl_are_assets_enqueued = true;
	}

	return $block_content;
}
add_filter('render_block', 'wptagl_render_block', 10, 2);

Selanjutnya, kita perlu mengedit tema anak Anda function.php dan tambahkan beberapa baris berikut:

// WP Tutorials : Animated Gallery Links
require_once dirname(__FILE__) . '/wpt-animated-gallery-links.php';

Terakhir, buat file di tema anak Anda bernama “animated-gallery-links.css” dan tambahkan berikut ini, untuk mendapatkan gaya perancah.

/**
 * WP Tutorials Animated Gallery Links (WPTAGL)
 *
 * https://wp-tutorials.tech/refine-wordpress/animated-wordpress-gallery-links/
 *
 */

.animated-gallery-links {
	margin-bottom: 1.5em;
}

.animated-gallery-links .wp-block-image {
	position: relative;
	overflow: hidden;
}

.animated-gallery-links .wp-block-image a {
	position: relative;
	display: block;
}

Buat blok galeri

Sebelum kita dapat menambahkan aturan CSS sebenarnya, buat beberapa konten dan tambahkan blok galeri dengan beberapa gambar di dalamnya.

Pilih blok galeri (bukan salah satu blok gambar) dan setel Kelas CSS ke “tautan-galeri-animasi”, di bawah tab “Lanjutan”.

Untuk setiap gambar di galeri, tambahkan keterangan (untuk bertindak sebagai teks tautan) dan tetapkan URL target saat setiap gambar diklik.

Tautan galeri WordPress animasi
Tambahkan kelas CSS ke galeri Anda
Buat blok galeri dengan keterangan dan tautan
Buat blok galeri dengan keterangan dan tautan gambar

Bangun animasi CSS

Sekarang kita bisa mulai dengan hal-hal menyenangkan – membuat animasi CSS di “animated-gallery-links.css”. Tambahkan yang berikut ini untuk menerapkan gaya pada keterangan gambar, dan menganimasikannya saat gambar di-hover.

/**
 * Configure and animate the image captions when hovered.
 */
.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image figcaption {
	background: transparent;
	font-size: 100%;
	font-weight: 900;

	text-shadow:
		-1px -1px 2px #000,
		1px -1px 2px #000,
		-1px 1px 2px #000,
		1px 1px 2px #000;

	position: absolute;
	text-align: left;
	transition: 0.3s bottom, 0.3s transform;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 1em;
	bottom: 1em;
	pointer-events: none;
	line-height: 1.3em;
	z-index: 20;
}

.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image:hover figcaption {
	bottom: 50%;
	transform: translateY(50%);
}

Yang dilakukan hanyalah mengatur beberapa gaya untuk figcaption elemen, lalu mengubah posisi vertikalnya saat mouse diarahkan ke atas gambar.

Untuk memperbesar/menskalakan gambar saat melayang, tambahkan potongan ini ke file CSS:

/**
 * Zoom in on the image when its hovered hover.
 */
.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image img {
	transition: 0.3s transform;
}

.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image:hover img {
	transform: scale(1.2);
}

Cuplikan berikut menambahkan overlay semi-transparan saat diarahkan.

/**
 * Create a totally transparent overlay for the image, then make it
 * semi-transparent when the image is hovered.
 */
.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image a::before {
	content: ' ';
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 10;
	transition: 0.3s opacity;
	background-color: black;
	opacity: 0.0;
}

.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image:hover a::before {
	opacity: 0.5;
}

Potongan terakhir menambahkan panah yang muncul saat gambar di-hover. Kami telah menggunakan Font Awesome 5 untuk panah, tetapi Anda dapat menggunakan apa pun yang Anda inginkan – atau jangan tambahkan potongan ini jika Anda tidak ingin panah muncul.

/**
 * Create an animated arrow that comes into view when the image is hovered.
 */
.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image a::after {
	font-family: 'Font Awesome 5 Free';
	font-weight: 700;
	content: '\f061';
	position: absolute;
	left: 0;
	bottom: 2em;
	color: #ADF5FF;
	opacity: 0.0;
	transition: 0.3s left, 0.3s opacity, 0.3s transform;
	transform: scale(0.5);
	z-index: 20;
}

.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image:hover a::after {
	bottom: 2em;
	left: 1.2em;
	opacity: 1.0;
	transform: scale(1.5);
}

Dan begitulah – retasan ringan untuk blok galeri WordPress standar ????????

Plugin unggulan

Pil Variasi Produk untuk WooCommerce

Ganti drop-down variasi produk WooCommerce dengan tombol radio/pil yang ramah pengguna dan ramah seluler. Buat halaman produk yang lebih bersih dan tingkatkan pengalaman pengguna di toko Anda!

Tombol radio produk untuk WooCommerce

[ad_2]

Source link

Elementor Pro v.3.15.1

Reactions

0
0
0
0
0
0
Already reacted for this post.

Reactions

Nobody liked ?

Your email address will not be published. Required fields are marked *

GIF