Tìm hiểu cách tạo băng chuyền bài đăng cuộn cho trang web WordPress của bạn. Thân thiện với SEO và nó có thể xử lý các loại bài đăng tùy chỉnh (bất kỳ loại bài đăng nào), bao gồm các sản phẩm WooCommerce. Chúng tôi sẽ sử dụng PHP để tạo HTML, một thư viện JavaScript có sẵn để thực hiện nội dung cuộn cho chúng tôi (sẽ hoạt động tốt trên thiết bị di động) và chúng tôi sẽ kết hợp nó với một chút JavaScript và CSS giao diện người dùng.
Để giữ mọi thứ đơn giản, chúng tôi sẽ tạo một mã ngắn. Các mã ngắn ngày nay hơi lỗi thời (bây giờ chúng ta nên tạo các khối), nhưng điều đó có nghĩa là chúng ta có thể tập trung vào PHP và tích hợp thư viện Glide.js.
Chúng tôi sẽ làm điều này
Thư viện Glide.js thực hiện tất cả công việc khó khăn cho chúng tôi. Chúng tôi chỉ cần tạo một danh sách không có thứ tự trong HTML, tham chiếu các tệp JavaScript và CSS, sau đó chuyển các tùy chọn của chúng tôi đến Glide.js.Điều này là đáp ứng. Thay đổi kích thước trình duyệt của bạn xuống kích thước thiết bị di động và xem số lượng trang trình bày có thể nhìn thấy thay đổi như thế nào để phù hợp hơn.
Bắt đầu - Kế hoạch
Mã PHP chính được chia thành hai hàm:- Xếp hàng các nội dung (tệp JavaScript và CSS) cho Glide.js và các bit-and-bob của riêng chúng tôi.
- Xử lý shortcode và trả về một chuỗi HTML dựa trên các tùy chọn của chúng tôi.
<div>các thẻ được quấn quanh mỗi băng chuyền Glide.js.
Trước khi bắt đầu, hãy đảm bảo rằng trang web của bạn đang sử dụng một chủ đề con tùy chỉnh, vì chúng tôi muốn giữ sạch sẽ functions.php và thư mục chủ đề của chúng tôi.
Hãy viết một số mã
Chúng tôi sẽ thêm một tệp PHP mới vào thư mục chính của chủ đề con tùy chỉnh và chúng tôi sẽ tạo một thư mục trong đó để chứa Glide.js và các tệp CSS / JS của chúng tôi .. Trong thư mục chính của chủ đề con tùy chỉnh của bạn, tạo một tệp mới có tên wpt-carousel.php và dán đoạn mã sau vào đó - đó chỉ là một số mã giàn giáo để giúp chúng tôi bắt đầu mọi thứ:/**
* WP Tutorials Carousel (WPTC)
*/
// Block direct access.
if (!defined('WPINC')) {
exit('Do NOT access this file directly.');
}
/**
* Register CSS and scripts for Glide.js and our own visuals. You can safely
* call this function multiple times - it will only register the assets
* the first time it's called.
*/
function wptc_enqueue_frontend_assets_if_not_already_enqueued() {
global $wpt_carousel_have_assets_been_queued;
if (is_null($wpt_carousel_have_assets_been_queued)) {
// Code will go in here...
// ...
$wpt_carousel_have_assets_been_queued = true;
}
}
/**
* The function that does all the actual work of returning a HTML string to
* define the carousel.
*/
function do_shortcode_wpt_carousel($atts = null) {
// Code will go in here...
// ...
return 'Hello World
';
}
add_shortcode('wpt_carousel', 'do_shortcode_wpt_carousel');
Bây giờ, hãy mở tệp functions.php của chủ đề con tùy chỉnh của bạn và thêm đoạn mã sau vào đó:
/** * WP Tutorials Carousel (WPTC) */ require_once 'wpt-carousel.php';
Lưu hai tệp đó và sau đó tạo một phần nội dung (một trang hoặc một bài đăng) để bạn có thể kiểm tra shortcode mới. Thêm một khối shortcode, lưu nội dung và bạn sẽ thấy dòng chữ “Hello World” được hiển thị trong đầu ra.
Đó là giàn giáo của chúng tôi tại chỗ, vì vậy bây giờ chúng tôi có thể xem xét việc phân loại Glide.js và tài sản của chúng tôi.
Cấu trúc thư mục
Tải xuống thư viện Glide.js
Bạn sẽ cần lấy mã nguồn cho Glide.js (chọn “.zip” nếu bạn không chắc chắn nên sử dụng định dạng nào), giải nén nó và chuyển đến thư mục “dist” (phân phối). Tài liệu cho biết chúng ta chỉ thực sự cần sử dụng tệp CSS “cốt lõi” và tệp JavaScript được rút gọn, vì vậy hãy sao chép “glide.core.min.css” và “glide.min.js” vào thư mục “wpt-carousel”.
Bây giờ, hãy tạo các tệp văn bản trống có tên “ default-slide.php” , “ wptc-frontend.css” và “ wptc-frontend.js “.
| Tập tin | Những gì nó làm |
|---|---|
| default-slide.php | Tệp PHP / HTML mẫu để hiển thị từng trang trình bày. Bạn có thể tạo các mẫu khác nhau cho các băng chuyền khác nhau, như thanh trượt sản phẩm hoặc một mẫu cho “tin tức mới nhất”. |
| glide.core.min.css | Biểu định kiểu cốt lõi cho các phần tử Glide.js. |
| glide.min.js | JavaScript làm cho Glide.js hoạt động. |
| wptc-frontend.css | Phong cách giao diện người dùng của chúng tôi. |
| wptc-frontend.js | Mã JavaScript của chúng tôi để kết nối HTML của chúng tôi với Glide.js. Nó không làm được gì nhiều, nhưng đó là liên kết làm cho nó hoạt động trong trình duyệt. |
Mã băng chuyền bài đăng chính :: Bit PHP
Đây là cốt lõi của mã ngắn của chúng tôi. Thay thế hoàn toàn nội dung của wpt-carousel.php bằng nội dung sau - nó khá phức tạp , nhưng đừng sợ và hãy đi sâu vào:/**
* WP Tutorials Carousel (WPTC)
*
* A scrollable post (any post type) responsive carousel with good SEO.
*
* https://wp-tutorials.tech/add-functionality/responsive-post-product-scrolling-carousel/
*
*/
// Block direct access.
if (!defined('WPINC')) {
exit('Do NOT access this file directly.');
}
const WPTC_GLIDEJS_VERSION = '3.4.1';
const WPTC_DEFAULT_TEMPLATE_NAME = 'default-slide';
/**
* Register the shortcode.
*/
add_shortcode('wpt_carousel', 'do_shortcode_wpt_carousel');
/**
* Register CSS and scripts for glide.js and our own visuals. You can safely
* call this function multiple times - it will only register the assets
* the first time it's called.
*/
function wptc_enqueue_frontend_assets_if_not_already_enqueued() {
global $wpt_carousel_have_assets_been_queued;
if (is_null($wpt_carousel_have_assets_been_queued)) {
$base_url = get_stylesheet_directory_uri() . '/' . pathinfo(__FILE__, PATHINFO_FILENAME) . '/';
$version = wp_get_theme()->get('Version');
// The 'true' at the end lets glidejs be included in the footer.
wp_enqueue_script('glide', $base_url . 'glide.min.js', array(), WPTC_GLIDEJS_VERSION, true);
wp_enqueue_script('wptc-frontend', $base_url . 'wptc-frontend.js', array('jquery', 'glide'), $version, true);
wp_enqueue_style('glide-core', $base_url . 'glide.core.min.css', array(), WPTC_GLIDEJS_VERSION);
wp_enqueue_style('wptc-frontend', $base_url . 'wptc-frontend.css', array('glide-core'), $version);
$wpt_carousel_have_assets_been_queued = true;
}
}
/**
* The function that does all the actual work of returning a HTML string to
* drive the carousel.
*/
function do_shortcode_wpt_carousel($atts = null) {
$html = '';
if (is_admin()) {
// Don't do anything.
} elseif (wp_doing_ajax()) {
// Don't do anything.
} else {
// Check what options have been passed to the shortcode.
$args = shortcode_atts(
array(
'post_type' => 'post',
'count' => 10,
'perview' => 3,
'type' => 'carousel',
'controls' => 'off',
'bullets' => 'off',
'autoplay' => 3000,
'hoverpause' => 'on',
'template' => WPTC_DEFAULT_TEMPLATE_NAME,
),
$atts
);
// Sanity check the shortcode parameters.
$base_dir_name = trailingslashit(dirname(__FILE__));
$template_file_name = 'wpt-carousel/' . $args['template'] . '.php';
$classes = array('wptc-container', 'wptc-' . $args['post_type']);
$classes = apply_filters('wpt_carousel_classes', $classes);
if (($per_view = intval($args['perview'])) <= 0) {
$per_view = 3;
}
if (($autoplay = intval($args['autoplay'])) < 0) {
$autoplay = false;
}
// All options are here: https://glidejs.com/docs/options/
$glide_options = array(
'type' => $args['type'],
'perView' => $per_view,
'autoplay' => $autoplay,
'hoverpause' => filter_var($args['hoverpause'], FILTER_VALIDATE_BOOLEAN),
'breakpoints' => array(
'576' => array(
'perView' => 1,
),
'768' => array(
'perView' => 2,
),
),
);
wptc_enqueue_frontend_assets_if_not_already_enqueued();
$html .= sprintf(
'',
implode(' ', $classes),
esc_attr(json_encode($glide_options))
);
// Create our WP_Query object so we can run a WordPress loop.
$query_args = array(
'post_type' => sanitize_title($args['post_type']),
'posts_per_page' => intval($args['count']),
'post_status' => 'publish',
);
$query = new WP_Query($query_args);
if ($query->have_posts()) {
$html .= '';
// Start the Glide track = which contains the slides.
$html .= '';
$html .= '';
while ($query->have_posts()) {
$query->the_post();
$html .= '- ';
$html .= '';
if (!is_readable($base_dir_name . $template_file_name)) {
$html .= sprintf(
'Template File Error
%s',
$template_file_name
);
} else {
ob_start();
include $template_file_name;
$html .= ob_get_clean();
}
$html .= ''; // .wptc-item
$html .= ' '; // .glide__slide
}
$html .= '
'; // .glide__slides
$html .= ''; // .glide__track
// See the Glide.js documentation for how to create controls and
// bullets. It's pretty easy.
if (filter_var($args['controls'], FILTER_VALIDATE_BOOLEAN)) {
// Render the controls HTML in here...
}
if (filter_var($args['bullets'], FILTER_VALIDATE_BOOLEAN)) {
// Render the bullets HTML in here...
}
$html .= ''; // .glide
// It's very important to call wp_reset_query() after running a
// WordPress loop.
wp_reset_query();
}
$html .= ''; // .wptc-container
}
return $html;
}
Mặc dù đó là một khối mã lớn, nhưng thực sự không có nhiều thứ cho nó… Hàm wptc_enqueue_frontend_assets_if_not_already_enqueued()thực hiện chính xác những gì nó nói và phải đủ dễ đọc.
mẹo Đừng ngại sử dụng các tên dài cho các hàm và biến của bạn. Nếu nó làm cho mã dễ đọc và giảm sự mơ hồ thì đó là một điều tốt.
Logic cốt lõi
Chức năng chính của băng chuyền làdo_shortcode_wpt_carousel()và nó bị phá vỡ như thế này:
- Nếu chúng ta đang ở trong khu vực quản trị hoặc đang chạy một truy vấn AJAX (tức là nếu chúng ta không hiển thị HTML giao diện người dùng) thì đừng làm gì cả.
- Xếp hàng các bảng định kiểu và JavaScript.
-
Phân tích cú pháp các tùy chọn mã ngắn đi qua trong
$attsmảng.- Sử dụng shortcode_atts () để cung cấp các giá trị mặc định hợp lý cho các tham số không xác định.
-
Tạo một mảng được gọi
$glide_options, mà chúng tôi chuyển qua giao diện người dùng trong một thuộc tính dữ liệu tùy chỉnh.- Mã JavaScript của chúng tôi sẽ biến nó thành một đối tượng mà chúng tôi truyền trực tiếp vào hàm tạo Glide ().
-
Dưới đây là các tùy chọn bạn có thể đặt trong
$glide_options: Tùy chọn Glide.js
-
Mở
<div>thẻ chứa của chúng tôi và đặtdata-glide-optionsthuộc tính dữ liệu tùy chỉnh với$glide_optionsmảng của chúng tôi , được tuần tự hóa dưới dạng chuỗi JSON.- Lấy một mảng PHP, biến nó thành một chuỗi JSON và sau đó thoát chuỗi thành một thuộc tính là cách phổ biến để đưa dữ liệu PHP vào JavaScript.
-
Phiên bản nội tuyến:
data-my-thingy="<?php echo esc_attr(json_encode($my_php_array_data)); ?>"
-
Tạo
$query_argsmà chúng tôi sẽ chuyển vào một đối tượng WP_Query để điều khiển vòng lặp WordPress của chúng tôi.- Có rất nhiều tùy chọn bạn có thể đưa vào đây và đó là trọng tâm của việc truy vấn nội dung WordPress.
-
Nếu đối tượng WP_Query có bất kỳ bài đăng nào, hãy nhập vòng lặp ngay bây giờ và hiển thị một danh sách không có thứ tự, trong đó mỗi mục danh sách là một trang trình bày băng chuyền.
-
Chúng tôi bao gồm một tệp mẫu để hiển thị các trang trình bày thực tế. Nếu
$template_file_namekhông thể đọc được, hãy thêm thông báo lỗi vào HTML để giúp dễ dàng khắc phục sự cố.
-
Chúng tôi bao gồm một tệp mẫu để hiển thị các trang trình bày thực tế. Nếu
-
Sau vòng lặp, hãy gọi
wp_reset_query()để WordPress biết rằng chúng ta đã hoàn thành công việc với$postđối tượng toàn cục .
Mẫu Trang trình bày / Mục
Bởi vì chúng tôi đang bao gồm một tệp PHP cho các trang trình bày riêng lẻ, bạn cũng sẽ cần một tệp PHP cho điều đó. Mở wpt-carousel / default-slide.php và dán những thứ sau vào đó:// Block direct access.
if (!defined('WPINC')) {
exit('Do NOT access this file directly.');
}
?>
<?php the_post_thumbnail('medium');?>
<?php the_title();?>
<?php
the_excerpt();
printf(
'%s%s',
esc_url(get_the_permalink()),
esc_attr(get_the_title()),
esc_attr(get_the_title()),
esc_html__('Read More', 'wp-tutorials')
);
?>
Bạn có thể thực hiện vô số tùy chỉnh và tối ưu hóa SEO tại đây. Sử dụng văn bản liên kết như “Đọc thêm” và “Nhấp vào đây” được coi là phương pháp không tốt, vì trình thu thập thông tin trang web không thể lấy bất kỳ ngữ cảnh nào cho URL mục tiêu. Ở đây, chúng tôi đang thiết lập thuộc titletính của <a>phần tử của chúng tôi để cung cấp cho liên kết ngữ cảnh cụ thể. Chúng tôi cũng đang thêm một <span>với gợi ý trình đọc màn hình. Bạn cũng có thể sử dụng aria-labelvà thực hiện tất cả các loại công cụ hỗ trợ tiếp cận trình đọc màn hình.
Thêm một số kiểu
CSS khá đơn giản và bạn có thể điều chỉnh nó theo cách bạn muốn. Dán tệp này vào wpt-carousel / wptc-frontend.css ./**
* WP Tutorials Carousel - Frontend
*/
/** Required to make the carousel work. */
.wptc-container {
padding: 1em;
transition: 0.3s;
}
.wptc-container .glide__slides {
margin-left: 0;
}
.wptc-container .glide__slide {
display: block;
height: inherit;
}
.wptc-container li {
margin-left: 0;
}
.wptc-item {
display: flex;
flex-direction: column;
align-items: stretch;
border-radius: 1em;
overflow: hidden;
justify-content: stretch;
height: 100%;
border: 2px solid #888;
background-color: white;
}
.wptc-item .error {
padding: 1em;
font-weight: bold;
color: red;
}
/** Change these to adjust the styles for your slides. */
.wptc-item .thumbnail {
display: block;
flex: 1;
position: relative;
}
.wptc-item .post-title {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background-color: rgba( 255, 255, 255, 0.80 );
margin: 0;
padding: 1.0rem;
font-size: 18pt;
}
.wptc-item .thumbnail .wp-post-image {
width: 100%;
height: 100%;
height: 17em;
object-fit: cover;
}
.wptc-item .post-excerpt {
background-image: linear-gradient( to bottom right, transparent, #eee);
padding: 1.05rem;
line-height: 1.25em;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.wptc-item .post-excerpt .button {
display: inline-block;
}
Lưu ý cách chúng tôi đặt quá trình chuyển đổi “.wptc-container” thành 0,3 giây - điều này để chúng tôi có thể tải (các) vùng chứa băng chuyền với độ mờ bằng không (hoàn toàn trong suốt) và sau đó làm mờ chúng bằng cách chỉ đặt độ mờ thành 1,0.
Bật băng chuyền trong trình duyệt
Bây giờ chúng ta đã có HTML được hiển thị trong trình duyệt và các nội dung cũng được xếp vào hàng, chúng ta cần một chút JavaScript tùy chỉnh để gắn kết tất cả lại với nhau. Điều đầu tiên chúng ta thực sự nên làm là kiểm tra xem tệp JavaScript của chúng ta đã được tải bởi trình duyệt hay chưa.- Tải lại trang / bài đăng nội dung thử nghiệm của bạn. Nên có một khoảng trống nơi băng chuyền, vì nó vẫn trong suốt.
- Xem nguồn trang.
-
Tìm kiếm “wptc-frontend-js” trong một
<script>phần tử. Nếu tập lệnh đang được tải chính xác, bạn sẽ thấy một cái gì đó như thế này trong nguồn trang:
Chỉnh sửa tệp wpt-carousel / wptc-frontend.js trong chủ đề con tùy chỉnh của bạn và dán nội dung sau vào đó:
/**
* WP Tutorials Carousel - Frontend
*
* https://wp-tutorials.tech/add-functionality/responsive-post-product-scrolling-carousel/
*/
(function($) {
'use strict';
$(window).on('load', function() {
console.log('WP Tutorials Carousel : load');
$('.wptc-container').each(function(index, el) {
var options = $(this).data( 'glide-options');
// console.log( options );
new Glide( $(this).find( '.glide')[0], options ).mount();
});
$('.wptc-container').css( 'opacity', '1.0' );
});
})(jQuery);
Tập lệnh đơn giản này hoạt động như thế này:
-
Khi cửa sổ (trình duyệt) tăng sự kiện “tải”…
- Gửi chuỗi “WP Tutorials Carousel: load” tới bảng điều khiển JavaScript để chúng tôi biết tập lệnh của mình đang chạy.
-
Đối với mỗi phần tử DOM có lớp CSS “wptc-container”…
-
Trích xuất
data-glide-optionsthuộc tính dữ liệu tùy chỉnh. -
Nếu bạn muốn xem nội dung của đối tượng này, hãy bỏ ghi chú dòng gọi
console.log(options) -
Tìm phần tử DOM con đầu tiên có lớp CSS “glide” và sử dụng nó để tạo
Lướt ( )sự vật.
- Điều này được lấy từ tài liệu Glide.js - Thiết lập
-
Trích xuất
-
Đối với mỗi phần tử DOM có lớp CSS “wptc-container”, hãy đặt độ mờ thành 1,0 (100%).
- Vì chúng tôi đặt thời gian chuyển tiếp là 0,3 giây trong định nghĩa lớp CSS “wptc-container”, vùng chứa băng chuyền sẽ mất một phần ba giây để mờ dần.
Kiểm tra nó
Đó phải là nó! Trong trình duyệt của bạn, thực hiện buộc tải lại (bỏ qua bộ nhớ cache) để đảm bảo trình duyệt tải phiên bản mới nhất của tất cả nội dung của bạn - thường là [Ctrl] [Shift] [R], nhưng tùy thuộc vào trình duyệt của bạn.Kiểm tra nó trên thiết bị di động - điện thoại và máy tính bảng. Đảm bảo rằng điều này không chỉ hoạt động trên máy tính xách tay của bạn… mà nó hoạt động tốt cho mọi người.
Xử lý sự cố
Nếu điều gì đó không hoạt động, điều đầu tiên cần kiểm tra là bảng điều khiển JavaScript. Điều này sẽ hiển thị nếu có sự cố khi tải nội dung JS / CSS. Nó cũng sẽ hiển thị nếu có bất kỳ lỗi nào khi gọi thư viện Glide.js.Sử dụng plugin WordPress Query Monitor để giúp bạn phát hiện bất kỳ lỗi PHP nào. Bạn có thể gỡ cài đặt khi đã hoàn tất.
Nếu mọi thứ đang hoạt động, nhưng các phần tử của trang được hiển thị một cách lạ thường, hãy kiểm tra xem HTML của bạn có hợp lệ không - bạn có thể thiếu phần tử đóng hoặc dấu ngoặc kép cho một thuộc tính. Trình xác thực W3C tiêu chuẩn sẽ giúp bạn điều này. Không có lý do gì để có lỗi trong HTML của trang web của bạn và chỉ hy vọng trình duyệt sẽ dọn dẹp mớ hỗn độn của bạn.
Đi xa hơn
Mã này phải dễ dàng mở rộng theo nhiều cách.- Chuyển thuộc tính mẫu vào mã ngắn và thử nghiệm với các mẫu mặt hàng khác nhau.
- Nếu bạn đang điều hành một cửa hàng WooCommerce, hãy đặt loại bài đăng thành “sản phẩm” và thêm tệp mẫu mới. Làm cho cửa hàng WooCommerce của bạn trông khác với mọi người.
- Xem qua các tùy chọn Glide.js và thêm những thứ như nút điều hướng và dấu đầu dòng vào băng chuyền. Tôi đã đặt một số trình giữ chỗ vào wpt-carousel.php để giúp bạn bắt đầu.
- Di chuyển nó ra khỏi chủ đề của bạn và vào một plugin để bạn có thể sử dụng nó trên các dự án khác của mình một cách thực sự dễ dàng.