Tạo một Thư viện nề đáp ứng

Tìm hiểu cách tạo thư viện nề đáp ứng (với hộp đèn) cho chủ đề WordPress tùy chỉnh của bạn mà không cần cài đặt thêm một trình cắm thêm trên trang web của bạn. Chúng tôi sẽ sử dụng các thư viện có sẵn để xử lý lưới khối xây và hộp đèn (hình ảnh bật lên và thư viện trượt) và kết hợp chúng lại với nhau trong chủ đề WordPress của chúng tôi chỉ với một chút PHP.

Chúng tôi sẽ tạo một lưới bài đăng trong thư viện trông như thế này…

Bạn có thể xem ví dụ làm việc trên trang web Flipsum Ipsum của chúng tôi, nơi chúng tôi sử dụng cùng một thư viện Masonry để bố trí các bài đăng trên trang nhất.

Nó sẽ hoạt động như thế nào

Trước khi bắt đầu viết mã, chúng ta cần hiểu rõ về cách chúng ta thực sự sẽ làm điều đó. Chúng tôi có thể xem xét các loại bài đăng tùy chỉnh hoặc thêm meta bài đăng vào hình ảnh trong thư viện phương tiện. Nhưng những gì tôi muốn là một cái gì đó siêu đơn giản và thanh lịch… vì vậy nếu chúng tôi tắt mã mới của mình, trang web sẽ vẫn hoạt động. Bố cục sẽ không ở trong chế độ xem khối xây.

Cách tiếp cận mà chúng tôi đang áp dụng ở đây là:

  • Tạo một bài đăng Danh mục được gọi là "Phòng trưng bày" với slug, "phòng trưng bày".
  • Tạo danh mục con, đây sẽ là phòng trưng bày trên màn hình của bạn.
  • Nếu bạn muốn một bài đăng hiển thị trong thư viện, chỉ cần thêm nó vào danh mục liên quan.
Cách tiếp cận này sẽ hoạt động tốt đối với các blogger và nhiếp ảnh gia du lịch. Blogger không phải làm thêm bất cứ điều gì hoặc học bất kỳ kỹ năng WordPress mới nào để đăng các mục blog của họ lên trang thư viện.

Trước khi bắt đầu hướng dẫn này, hãy đảm bảo trang web của bạn đang sử dụng chủ đề con tùy chỉnh, vì chúng tôi sẽ sửa đổi tệp function.php của nó.

Đặt nó ra

Chúng tôi sẽ sử dụng một số kiểu PHP, một số JavaScript và CSS, và thay vì chỉ nhét tất cả những thứ này vào thư mục của chủ đề con tùy chỉnh của chúng tôi, hãy giữ mọi thứ sạch sẽ và có cấu trúc tốt.

Tạo một thư mục mới trong chủ đề con tùy chỉnh của bạn có tên là “ hw-gallery ”, sau đó tạo ba tệp văn bản trống trong đó để nó trông giống như sau:

Bây giờ, hãy vào functions.php của chủ đề con tùy chỉnh của bạn và thêm những thứ sau:

// Masonry gallery.
require_once 'hw-gallery/hw-gallery.php';

Kiểm tra để đảm bảo rằng bạn không vô tình làm hỏng bất kỳ thứ gì bằng cách tải lại một trang trên trang web của bạn. Bạn sẽ ổn thôi - có vẻ như chúng tôi chưa làm được gì nhiều.

Tệp hw-gallery.php là nơi chúng tôi sẽ thực hiện hầu hết công việc. Nó sẽ có một số chức năng trong đó và hai trong số này có thể được coi là quan trọng:

  • hwg_is_gallery () Chúng ta có thể gọi điều này từ bất kỳ đâu và nó sẽ trả về true nếu trang hiện tại là trang thư viện. Nếu trang là một trang thư viện thì chúng ta cần bao gồm các tệp JavaScript và CSS, nhưng không cần phải bao gồm chúng trên mọi trang trên trang web. Điều này sẽ giúp giảm bất kỳ tải bổ sung nào mà chúng tôi có thể đặt trên tốc độ tải trang của trang web của chúng tôi.
  • hwg_main_loop () Chúng tôi sẽ gọi đây là thời điểm mà nội dung chính của trang được hiển thị. Đây là một chút khó khăn, bởi vì nó khác nhau cho mọi chủ đề. Nói tóm lại, chúng tôi sẽ tạo một bản sao của tệp archive.php của chủ đề mẹ và đặt bản sao này vào chủ đề con tùy chỉnh của chúng tôi (để nó được sử dụng thay vì phiên bản của chủ đề mẹ) và sau đó thực hiện một số điều chỉnh nhỏ để nó.

Tạo một số bài đăng thử nghiệm

Bạn sẽ cần một số bài đăng mẫu trên trang web của mình để chúng tôi có thể kiểm tra phần mềm mới khi chúng tôi tiến hành. Trong trang web giả của mình, tôi đã tạo một số danh mục bài đăng như thế này:

Ý tưởng là mọi danh mục nằm bên dưới danh mục Thư viện sẽ sử dụng thư viện nề đáp ứng của chúng tôi, với các URL như sau:

https://example.org/category/galleries/book-covers/

Sự phụ thuộc bên ngoài

Các thành phần có sẵn mà chúng tôi sẽ sử dụng là:
  • Masonry: Thư viện bố cục lưới xếp tầng
  • FSLightbox: Hộp đèn toàn màn hình
Cả hai đều được phân phối dưới dạng các tệp JavaScript nhỏ, vì vậy chúng tôi có thể thêm một cái gì đó như thế này vào chủ đề của mình…
 
… Mà sẽ tham chiếu đến thư viện Masonry từ một máy chủ bên ngoài. Nhưng chúng tôi sẽ tự phục vụ các kịch bản. Điều này có nghĩa là chúng tôi có thể kiểm soát việc thu nhỏ và bộ nhớ đệm của trình duyệt - đừng lo lắng nếu bạn không biết chúng là gì. Nó có nghĩa là chúng tôi có thể giữ cho trang web của mình thực sự nhanh chóng, thay vì dựa vào các máy chủ bên ngoài mà chúng tôi không kiểm soát được.

Truy cập từng trang web này, tải xuống các phiên bản mới nhất và đặt chúng vào thư mục hw-gallery. Danh sách tệp mới sẽ trông như thế này.

Hãy viết một số mã

OK, vậy là đủ lo lắng rồi. Hãy bắt tay bẩn và viết một số phần mềm. Mở tệp hw-gallery.php và dán khối này vào đó. Đây là toàn bộ tệp PHP đang hoạt động, mặc dù nó sẽ không thực sự hoạt động bình thường cho đến khi chúng tôi điền các tệp JS và CSS.
/**
 * Masonry gllery layout for Category pages.
 *
 * include this file from your custom child them:
 *
 *    require_once 'hw-gallery/hw-gallery.php'
 *
 * Define the root category slug that's the parent of all gallery categories.
 * If you don't define this, we default to looking for a category with the
 * slug 'galleries'.
 *
 *    const HWG_ROOT_GALLERY_CATEGORY_SLUG = 'my-photo-galleries';
 *
 * More settings:
 *
 *    const HWG_GALLERY_IMAGES_PER_PAGE = 50;
 *    const HWG_GALLERY_IMAGE_SIZE = 'medium';
 *    const HWG_IS_LEGEND_ENABLED' = true;
 *
 * There are also some filters in here, if you want to make per-gallery
 * adjustments in your theme.
 *
 */
// Block direct access.
if (!defined('WPINC')) {
   exit('Do NOT access this file directly.');
}
function hwg_enqueue_scripts() {
   if (hwg_is_gallery()) {
      $theme_version = wp_get_theme()->get('Version');
      $theme_base_uri = get_stylesheet_directory_uri();
      $this_dir_name = basename(dirname(__FILE__));
      $base_uri = $theme_base_uri . '/' . $this_dir_name;
      // FSLightbox
      wp_enqueue_script(
         'hwg-fslightbox-js',
         $base_uri . '/fslightbox.js',
         array('jquery'),
         $theme_version,
         true
      );
      // Masonry
      wp_enqueue_script(
         'hwg-masonry-js',
         $base_uri . '/masonry.pkgd.js',
         array('jquery'),
         '4.2.2',
         true
      );
      // Our JS to initialise things after page-load.
      wp_enqueue_script('hwg-js',
         $base_uri . '/hw-gallery.js',
         array('hwg-masonry-js', 'hwg-fslightbox-js'),
         $theme_version,
         true
      );
      // Styles to support the masonry view.
      wp_enqueue_style('hwg-masonry-css',
         $base_uri . '/hw-gallery.css',
         false,
         $theme_version
      );
   }
}
add_action('wp_enqueue_scripts', 'hwg_enqueue_scripts');
function hwg_is_gallery() {
   global $hwg_is_this_a_gallery;
   if (!isset($hwg_is_this_a_gallery)) {
      $hwg_is_this_a_gallery = false;
      $root_gallery_slug = 'galleries';
      if (defined('HWG_ROOT_GALLERY_CATEGORY_SLUG')) {
         $root_gallery_slug = HWG_ROOT_GALLERY_CATEGORY_SLUG;
      }
      $root_gallery_slug = apply_filters(
         'hwg_root_gallery_category_slug',
         $root_gallery_slug
      );
      if (!is_category()) {
         // This isn't a category page, so it can't be a gallery page.
      } elseif (empty($root_gallery_slug)) {
         // We don't have a root gallery slug.
      } elseif (empty($galleries_category = get_category_by_slug($root_gallery_slug))) {
         // Couldn't find the specified root gallery.
      } else {
         $this_category = get_queried_object();
         $hwg_is_this_a_gallery = cat_is_ancestor_of(
            $galleries_category->term_id,
            $this_category->term_id
         ) || is_category($galleries_category->term_id);
      }
      // Allow the setting to be overridden.
      $hwg_is_this_a_gallery = boolval(
         apply_filters(
            'hwg_is_this_a_gallery',
            $hwg_is_this_a_gallery
         )
      );
   }
   return $hwg_is_this_a_gallery;
}
function hwg_pre_get_posts($query) {
   if (hwg_is_gallery()) {
      $posts_per_page = 0;
      if (defined('HWG_GALLERY_IMAGES_PER_PAGE')) {
         $posts_per_page = intval(HWG_GALLERY_IMAGES_PER_PAGE);
      }
      if ($posts_per_page > 0) {
         $query->set('posts_per_page', $posts_per_page);
      }
   }
}
add_action('pre_get_posts', 'hwg_pre_get_posts');
function hwg_main_loop() {
   if (have_posts()) {
      // Set up some properties that will apply to every item in the loop.
      if (!defined('HWG_GALLERY_IMAGE_SIZE')) {
         define('HWG_GALLERY_IMAGE_SIZE', 'medium');
      }
      if (!defined('HWG_IS_LEGEND_ENABLED')) {
         define('HWG_IS_LEGEND_ENABLED', true);
      }
      $classes = apply_filters('hwg_grid_open_classes', array('masonry-grid'));
      // Open the masonry grid.
      printf('
', implode(' ', $classes)); while (have_posts()) { the_post(); hwg_show_post(); } // Close the masonry grid. echo '
'; // .grid } } /** * If you want to render the grid items yourself, just provide your own * hwg_show_post() in your custom child theme's functions.php file. */ if (!function_exists('hwg_show_post')) { function hwg_show_post() { $gallery_name = 'main-gallery'; $main_image_url = get_the_post_thumbnail_url(null, 'full'); $classes = apply_filters('hwg_grid_item_classes', array('grid-item')); $is_legend_enabled = boolval(HWG_IS_LEGEND_ENABLED); // Open the masonry grid item. printf('
', implode(' ', $classes)); printf('', esc_url($main_image_url), esc_attr($gallery_name), esc_attr(get_the_title()), ); the_post_thumbnail(HWG_GALLERY_IMAGE_SIZE); // The overlay caption. if ($is_legend_enabled) { echo '
'; the_title(); echo '
'; //.post-legend } printf('
'); // Close the masonry grid item. echo '
'; //.grid-item } }
Dưới đây là tổng quan về những gì chúng tôi đang thực sự làm:
  1. Chúng tôi thiết lập một trình xử lý cho hook wp_enqueue_scripts, được gọi bởi WordPress khi nó cần biết những tập lệnh và bảng định kiểu nào cần tải.
  2. Nếu hwg_is_gallery () trả về true thì enqueue:
    1. FSLightbox
    2. Nề
    3. Tệp JavaScript của chúng tôi
    4. Biểu định kiểu CSS
Chúng tôi đã xếp hàng các tệp JS và CSS của mình trong phần chân trang của trang web, thay vì phần đầu trang, để giữ tốc độ tải trang tốt.

Sau đó, chúng ta chỉ cần đợi cho đến khi ai đó gọi hàm hwg_mainLoop ().

Gọi Chức năng Vòng lặp Chính từ Mẫu Chủ đề

Đây là một chút khó khăn, vì nó phụ thuộc vào chủ đề chính mà bạn đang sử dụng và bạn có thể gọi nó theo nhiều cách. Chúng tôi sẽ sử dụng một quy trình khá mạnh mẽ - và đó là toàn bộ lý do chúng tôi sử dụng chủ đề con tùy chỉnh ngay từ đầu.

Trong ví dụ này, chúng tôi đang sử dụng chủ đề Astra WordPress làm chủ đề mẹ của chúng tôi, nhưng quy trình phải tương tự với các chủ đề mẹ khác.

Đi tới thư mục chính của chủ đề mẹ của bạn và tìm category.php. Nếu nó không tồn tại thì hãy tìm archive.php để thay thế. Sao chép category.php (hoặc archive.php) vào thư mục chủ đề con tùy chỉnh của bạn. Chúng tôi sẽ giả định rằng category.php KHÔNG tồn tại và archive.php KHÔNG tồn tại, nhưng các bước sau cũng giống như vậy nếu bạn đang sử dụng category.php.

Chỉnh sửa tệp archive.php trong thư mục chủ đề con tùy chỉnh của bạn.

Hãy cẩn thận để không vô tình chỉnh sửa tệp archive.php trong thư mục chủ đề mẹ của bạn do nhầm lẫn.

Hầu hết các tệp archive.php sẽ gọi một hàm xử lý truy vấn WordPress chính trong một vòng lặp. Trong Astra, hàm được gọi là astra_content_loop (). Chúng ta cần tìm điều này và tạo một câu lệnh if-the-else xung quanh nó. Nếu bạn cần trợ giúp để tìm ra điều này cho chủ đề của mình, hãy liên hệ với tôi trong phần bình luận bên dưới.

astra_primary_content_top();
astra_archive_header();
// If this is a gallery page then call hwg_main_loop() to process
// the posts, otherwise let Astra do it normally.
if (function_exists('hwg_is_gallery') && hwg_is_gallery()) {
   hwg_main_loop();
} else {
   astra_content_loop();
}
astra_pagination();
astra_primary_content_bottom(); 

Đó là phần khó nhất của dự án này. Phần còn lại là kế hoạch chèo thuyền.

Kiểm tra nhanh xem trang web của bạn không bị hỏng trước khi thực hiện bước tiếp theo. Các trang danh mục thư viện của bạn sẽ trông kỳ lạ ngay bây giờ, nhưng sẽ không lâu nữa.

Khởi tạo Phòng trưng bày Masonry

Bây giờ chúng ta đã có một trang với HTML phù hợp trong đó, chúng ta cần phải kích hoạt một chút JavaScript trong trình duyệt để khởi chạy Masonry. Hướng dẫn "Bắt đầu với Masonry" cho biết chúng ta có thể thực hiện điều này theo một số cách và chúng ta sẽ làm điều đó với jQuery. Thật hấp dẫn khi làm điều đó trong HTML vì vậy chúng tôi không cần phải bao gồm tệp hw-gallery.js, nhưng việc gỡ lỗi hơi khó khăn. Cách thực hiện của jQuery giúp mọi thứ sạch sẽ hơn và chúng ta có thể làm được nhiều việc hơn với nó trong tương lai nếu muốn.

Chỉnh sửa tệp hw-gallery.js và dán phần sau vào đó.

/*
 * hw-gallery.js
 */
(function($) {
    'use strict';
    $(window).on('load', function() {
        $('.masonry-grid').masonry({
            itemSelector: '.grid-item',
            percentPosition: true
        })
    });
})(jQuery); 

Không nhiều về nó - chúng tôi chỉ đang gọi hàm masonry () trên tất cả các phần tử trong DOM có áp dụng lớp CSS “masonry-grid” cho chúng. Sẽ chỉ có một phần tử có lớp “masonry-grid”, là phần tử <div> bên ngoài bao bọc bộ sưu tập của chúng ta.

Tạo kiểu cho Thư viện nề đáp ứng của chúng tôi

Chỉnh sửa tệp hw-gallery.css và dán những thứ sau vào đó:
 /*
 * hw-gallery.css
 */
.grid-item,
.grid-item--width2 {
    border: 0.5rem solid transparent;
}
.grid-item .wp-post-image {
    width: 100%;
    border-radius: 0.25rem;
    border: 1px dotted grey;
    box-shadow: 0 0 0.5rem grey;
    transition: 0.3s;
}
.grid-item .hwg-item {
   position: relative;
   display:  block;
}
.grid-item .hwg-item:hover .wp-post-image {
    border: 1px dotted black;
    box-shadow: 0 0 0.5rem grey, 0 0 0.5rem grey;
}
.grid-item {
    width: 50%;
}
.grid-item--width2 {
    width: 100%;
}
@media (min-width: 576px) {
    .grid-item {
        width: 25%;
    }
    .grid-item--width2 {
        width: 50%;
    }
}
@media (min-width: 2000px) {
    .grid-item {
        width: 20%;
    }
    .grid-item--width2 {
        width: 100%;
    }
}
.grid-item .post-legend {
   position: absolute;
   bottom:  0;
   border-top:  1px solid rgba( 0, 0, 0, 0.25 );
   background-color:  rgba( 64, 64, 64, 0.50 );
   display:  block;
   width:  100%;
   text-align: center;
   color:  rgba( 255, 255, 255, 0.80 );
   font-weight: bold;
   font-size: 90%;
   letter-spacing: 0.05em;
   text-shadow: 0 0 1px black;
   padding:  0.5em 0 0.5em 0;
   transition: 0.20s;
}
.grid-item .hwg-item:hover .post-legend {
   background-color:  rgba( 32, 32, 32, 0.75 );
   color: white;
}
Điều này chứa đủ kiểu dáng để giúp chúng tôi bắt đầu và vận hành.

cảnh báo Điều quan trọng là bạn không thực hiện thay đổi đối với hw-gallery.css. Nếu bạn muốn tùy chỉnh kiểu thì thay vào đó hãy ghi đè các kiểu trong tệp style.css của chủ đề con tùy chỉnh của bạn. Chúng tôi muốn giữ chung tất cả các tệp trong thư mục hw-gallery của chúng tôi, vì vậy chúng tôi có thể sử dụng chúng trong các dự án WordPress khác trong tương lai.

Các kiểu mà bạn có thể muốn xem nhất là grid-itemgrid-item – width2 . Chúng tôi không thực sự sử dụng grid-item – width2 trong mô-đun của mình, nhưng nó ở đó để bạn có thể mở rộng PHP nếu bạn muốn thêm hình ảnh cột đôi.

Kết thúc

Tất cả sẽ hoạt động ngay bây giờ. Tải lại một trong các trang danh mục thư viện của bạn (bỏ qua bộ nhớ cache của trình duyệt) và xem. Nếu nó không hoạt động, hãy chia vấn đề thành nhiều phần nhỏ và tìm ra nguyên nhân gốc rễ.
  • Nếu có vẻ như mô-đun không hoạt động, hãy kiểm tra xem hwg_is_gallery () có trả về true hay không . Nếu nó trả về false thì có thể có lỗi chính tả trong slug danh mục của bạn?
  • Nếu bạn gặp lỗi JavaScript, hãy bình luận ba tệp JS trong hwg_enqueue_scripts () và xem liệu bạn có thể ghim sự cố vào một tệp cụ thể hay không.
    • Chú ý đến lỗi không tương thích phiên bản jQuery. Hướng dẫn này đã được thử nghiệm với WordPress 5.6, nhưng tôi đã xóa các thư viện jQuery và jQuery Migrate, đồng thời cập nhật WordPress để sử dụng jQuery 3.5.1 tiêu chuẩn.
  • Kiểm tra xem bố cục hoạt động tốt trên các màn hình có kích thước khác nhau và chơi tốt với nó.
Mặc dù điều này sẽ tạo ra một điểm khởi đầu tuyệt vời cho một dự án lớn hơn, nhưng tôi thích rằng nó không lớn lắm. Đó là một phần mềm mỏng manh. Chúng tôi không thực hiện bất kỳ lệnh gọi cơ sở dữ liệu nào và CSS / JS của chúng tôi chỉ được đưa vào các trang thư viện - không phải trên mọi trang của trang web. Đây là một cách nhẹ nhàng, thanh lịch để thêm một tính năng nâng cao UX thực sự tốt đẹp vào bất kỳ trang web WordPress nào. Tất cả những gì bạn cần làm là tìm ra cách gọi hwg_main_loop () từ tệp archive.php (hoặc category.php) của chủ đề.

Hãy cho tôi biết về bất kỳ cách sử dụng thú vị nào mà bạn tìm thấy cho mô-đun nhỏ này.