Tìm hiểu cách tạo hoạt ảnh cho bất kỳ khối WordPress nào khi nó cuộn vào chế độ xem. Có rất ít mã và bạn có thể thêm nó vào bất kỳ trang web WordPress nào mà không cần cài đặt plugin mới. Chúng tôi sẽ sử dụng thư viện AOS có sẵn để thực hiện công việc chính cho chúng tôi và chúng tôi sẽ thêm một chút mã vào functions.php để làm cho nó hoạt động. Đó là một cách hay để thêm một chút bling vào trang nhất của trang web.
Nó sẽ hoạt động như thế nào
Chúng tôi sẽ tạo một mã ngắn đơn giản cho phép chúng tôi bọc bất kỳ Khối Gutenberg WordPress nào trong một<div>phần tử. Chúng tôi sẽ cung cấp cho phần tử này một số thuộc tính cụ thể và thư viện AOS sẽ thực hiện phần còn lại cho chúng tôi.
-
Tạo một shortcode có tên là “aos_anim” (trong PHP) và chuyển một số tham số AOS vào nó, như anim = ”…” và thời lượng = ”…”
- Mã ngắn này sẽ lấy một mã ngắn đóng để nó có thể được bao quanh một hoặc nhiều khối.
- Xếp hàng các tài sản AOS.
- Tạo một vài dòng JavaScript để liên kết nó với nhau trong trình duyệt.
Trước khi chúng ta bắt đầu
Trước hết, hãy đảm bảo rằng bạn đang sử dụng một chủ đề con tùy chỉnh để bạn có thể chỉnh sửa functions.php . Trong thư mục chính của chủ đề con tùy chỉnh của bạn, hãy tạo một thư mục con mới có tên “ aos-anim ”. Sau đó tải phiên bản AOS ổn định mới nhất từ GitHub. Tại thời điểm viết bài, phiên bản ổn định là 2.3.4…Tải xuống tệp zip, giải nén và đi vào thư mục “ dist ” (phân phối). Bạn sẽ thấy hai tập tin trong đó, gọi là aos.css và aos.js . Sao chép chúng vào thư mục aos-anim trong chủ đề con tùy chỉnh của bạn.
Trong thư mục chính của chủ đề con tùy chỉnh của bạn, hãy tạo một tệp PHP mới có tên aos-anim.php . Một lần nữa, hãy để trống nó bây giờ, nhưng hãy chắc chắn rằng bạn lưu nó.
Tiếp theo, mở functions.php trong thư mục chính của chủ đề con tùy chỉnh của bạn và thêm vài dòng sau vào đó: Thao tác này sẽ kéo mã mới của chúng tôi vào chủ đề để chúng tôi có thể đăng ký shortcode của mình.
/** * WP Tutorials AOS Anim. */ require_once 'aos-anim.php';
Đó là giàn giáo tại chỗ. Tải lại trang web của bạn và đảm bảo rằng bạn không bị hỏng bất cứ thứ gì.
Hãy viết mã thực tế
Phần mã chính khá đơn giản. Mở aos-anim.php và dán nội dung sau vào đó, sau đó xem qua các nhận xét để xem nó đang làm gì./*
* WP Tutorials :: AOS Anim
*
* https://wp-tutorials.tech/refine-wordpress/animate-any-wordpress-block-on-scroll/
*
* Thanks to: AOS: http://michalsnik.github.io/aos/
*/
// Block direct access.
if (!defined('WPINC')) {
exit('Do NOT access this file directly.');
}
const WPT_AOS_VERSION = '2.3.4';
function wpt_require_aos() {
global $wpt_has_aos_been_required;
if (!is_admin() && is_null($wpt_has_aos_been_required)) {
$base_url = get_stylesheet_directory_uri() . '/' . pathinfo(__FILE__, PATHINFO_FILENAME) . '/';
$version = wp_get_theme()->get('Version');
wp_enqueue_script('aos', $base_url . 'aos.js', null, WPT_AOS_VERSION, true);
wp_enqueue_style('aos', $base_url . 'aos.css', null, WPT_AOS_VERSION);
wp_enqueue_script('wpt-aos', $base_url . 'aos-anim-frontend.js', array('aos'), $version, true);
$wpt_has_aos_been_required = true;
}
}
function do_shortcode_wpt_aos_anim($atts = array(), $content = null) {
$html = '';
if (is_admin()) {
// Don't do anything.
} elseif (wp_doing_ajax()) {
// Don't do anything.
} else {
// Enqueue the assets.
wpt_require_aos();
// Options listed here:
// https://github.com/michalsnik/aos/tree/v2#-advanced-settings
// The "class" option is own own - not one of AOS' options.
// The "anim" option is special, and maps to data-aos=".."
$args = shortcode_atts(
array(
'anim' => 'fade-left',
'offset' => 120,
'delay' => 0,
'duration' => 400,
'easing' => 'ease',
'anchor' => '',
'anchor-placement' => 'top-bottom',
'once' => false,
'class' => '',
),
$atts
);
if (empty($args['anim'])) {
$html .= $content;
} else {
// Open our
$html .= sprintf(' $value) {
if (($key != 'anim') && !empty($value)) {
$html .= sprintf(' data-aos-%s="%s"', $key, esc_attr($value));
}
}
// If we've been passed something in class="..." then add it now.
if (!empty($args['class'])) {
$html .= sprintf(' class="%s"', esc_attr($args['class']));
}
$html .= '>';
// Add the inner content, making sure to process any shortocdes in there.
$html .= do_shortcode($content);
// Close our div... Job done.
$html .= '';
}
}
return $html;
}
add_shortcode('aos_anim', 'do_shortcode_wpt_aos_anim');
Đó là tất cả những gì có đối với PHP. Bây giờ, chúng ta chỉ cần kết hợp mọi thứ lại với nhau trong giao diện người dùng với một chút JavaScript. Tài liệu AOS cho biết tất cả những gì chúng ta cần làm là gọi AOS.init. Chúng tôi sẽ sử dụng đoạn mã jQuery chuẩn để thực hiện việc này sau khi cửa sổ / tài liệu đã tải đầy đủ. Chúng tôi có thể dễ dàng làm điều đó mà không cần sử dụng jQuery, nhưng tôi đã sử dụng nó ở đây để giữ cho mã nhất quán với các hướng dẫn khác trên trang web này.
Mở aos-anim / aos-anim-frontend.js , dán phần sau vào đó và lưu tệp.
(function($) {
'use strict';
$(window).on('load', function() {
if (typeof AOS != 'undefined') {
// Uncomment this to verify that the JS is loading correctly in the browser's JS Console.
// console.log('Initialise AOS');
AOS.init();
}
});
})(jQuery);
Kết thúc & Kiểm tra
Đảm bảo mọi thứ được lưu, sau đó tạo / chỉnh sửa một số nội dung trên trang web của bạn. Mã ngắn sẽ hoạt động mà không có bất kỳ tham số nào hoặc bạn có thể chuyển những thứ nhưanim="zoom-in-left". Chỉ cần chọn từ bất kỳ danh sách các hoạt ảnh AOS có sẵn.
Đừng quên shortcode đóng khi bạn gói các khối của mình.
Đi xa hơn
Bạn sẽ thấy rằng chúng tôi chỉ xếp hàng các nội dung AOS vào lần đầu tiên shortcode của chúng tôi được sử dụng trên một trang. Điều này là để giữ cho trang web của bạn sạch sẽ… giảm bớt CSS / JS không sử dụng trên các trang không có hoạt ảnh. Tuy nhiên, bạn có thể gọiwpt_require_aostừ trình xử lý hành động wp_enqueue_scripts để bạn có thể sử dụng hoạt ảnh ở khắp mọi nơi.
Sau khi gọi wpt_require_aos (), bạn cũng có thể bắt đầu tải những thứ như data-aos="flip-left"vào trang lưu trữ bài đăng của mình. Nó trông khá tuyệt khi được kết hợp với bố cục nề, giống như trên trang web trình tạo văn bản Ipsum của chúng tôi.
Chúc bạn hoạt hình vui vẻ!