Trước đây, chúng tôi đã chỉ cho bạn cách thêm thư viện trong WordPress với hiệu ứng hộp đèn. Bài viết chỉ bao gồm bề mặt của chức năng WordPress. Gần đây, chúng tôi có khách hàng muốn chúng tôi tạo ra một bộ sưu tập ảnh được tổ chức bởi các album hàng tháng. Họ muốn người dùng có thể nhấp vào ảnh album để xem tất cả các bài đăng được liệt kê trong album tháng đó. Mỗi bức ảnh phải có trang riêng của cá nhân với thông tin về nhiếp ảnh gia và URL của họ. Thông thường, mọi người sẽ sử dụng các plugin như Thư viện NextGen hoặc một khác để hoàn thành một cái gì đó như thế này. Chúng tôi muốn tránh sử dụng plugin của bên thứ ba do đó chúng tôi quyết định sử dụng chức năng cốt lõi mà WordPress cung cấp để tạo ra một cái gì đó hoạt động. Trong bài này, chúng tôi sẽ chỉ cho bạn cách tạo ra một album ảnh hàng tháng trong WordPress mà không cần plugin.
Lưu ý: Đây là một hướng dẫn tương đối cao giúp mang lại nhiều khái niệm WordPress với nhau. Bạn phải có một sự hiểu biết công bằng về WordPress và HTML / CSS để theo dõi điều này.
Cập nhật: Chúng tôi đã viết một hướng dẫn mới sử dụng một plugin mà chúng tôi đã xây dựng, Envira Gallery, vì vậy nó rất nhanh và dễ sử dụng. Nếu bạn là người mới bắt đầu hoặc đơn giản là không muốn đối phó với mã xem hướng dẫn này.
Những gì chúng tôi đang cố gắng thực hiện:
Trước khi bắt đầu, chúng ta hãy xem xét kết quả cuối cùng sẽ như thế nào:
Khi người dùng nhấp chuột vào trang Album, họ sẽ thấy một kho lưu trữ trong một màn hình lưới nơi mỗi album bắt đầu với bìa phân biệt và tất cả các bức ảnh trong đó. Ý tưởng là phải có một album mỗi tháng.
Nếu người dùng nhấp vào ảnh bìa của anbom, họ sẽ được đưa đến trang chỉ cho album đó, nơi bạn có thể cung cấp cho người dùng một số thông tin cơ bản cũng như liệt kê tất cả các ảnh trong album đó.
Nếu người dùng nhấp chuột vào bức ảnh, họ sẽ được đưa đến trang ảnh duy nhất mà họ sẽ thấy Tiêu đề của Ảnh. Tên nhiếp ảnh và URL của trang web của họ.
Làm thế nào chúng ta sẽ làm cho nó?
Như bạn thấy từ mô tả ở trên, tất cả các tính năng được yêu cầu có thể được thực hiện bằng cách sử dụng chức năng WordPress tích hợp sẵn. Chúng tôi có thể điều trị mỗi album hàng tháng như là một bài đăng, do đó mỗi album có thể có trang riêng của mình với một số thông tin cơ bản vv Mỗi hình ảnh sẽ được coi là một tập tin đính kèm (do đó nhận được nó của trang duy nhất). Chúng tôi sẽ sử dụng hình thu nhỏ có sẵn cho ảnh bìa album. Bạn có thể sử dụng các bài viết mặc định, nếu mục đích của toàn bộ trang web là thư viện album ảnh này, nhưng nếu bạn có một blog, thì điều này cần phải được tạo ra trong một loại bài đăng tùy chỉnh.
Cho phép tạo Album ảnh Album Ảnh
Điều đầu tiên bạn cần làm là tạo một plugin dành riêng cho trang web (hoặc thậm chí một plugin của dự án cụ thể).
Nếu bạn định sử dụng Custom Post Types cho dự án của mình, thì bạn nên tạo mã và dán nó vào plugin cụ thể cho trang web của bạn. Bạn cũng có thể xem video của chúng tôi về cách tạo Custom Post Types.
Điều tiếp theo bạn cần làm là đăng ký thêm kích thước hình ảnh trong WordPress để hiển thị lưới điện.
Ví dụ sẽ là:
add_image_size ('album-grid', 225, 150, đúng);
Sau khi thêm kích thước hình ảnh, hãy thêm một số trường bổ sung vào trình tải lên Media. Điều này sẽ cho phép bạn thêm Tên Nhiếp ảnh và URL của họ khi bạn tải lên mỗi hình ảnh. Đây là lý do tại sao chúng tôi đã viết một bài báo về nó hai ngày trước.
Cách thêm các trường bổ sung vào WordPress Media Uploader
Một khi bạn đã làm điều này, hãy đi trước và thêm một số album (bài đăng). Tải lên tất cả hình ảnh mà bạn muốn đính kèm vào album đó. Sau đó đính kèm ảnh bìa đặc biệt và đặt nó làm hình ảnh nổi bật. Bạn có thể thêm thông tin nền trong khu vực nội dung của bài đăng.
Bây giờ bạn đã có một vài album trong phần phụ trợ, hãy đặt mã để hiển thị nó.
Hãy nói rằng loại bài đăng tùy chỉnh của bạn được gọi là album. Vì vậy, bạn sẽ tạo một tệp mẫu được gọi là archive-albums.php . Dán mã tiêu đề, mã chân trang, thanh bên và các yếu tố thiết kế khác mà bạn muốn. Tạo vòng lặp bài đăng. Trong vòng đăng bài đó, chúng tôi sẽ hiển thị tất cả các tệp đính kèm từ một bài đăng ngoại trừ hình thu nhỏ sẽ liên kết tới trang hình ảnh đơn. Chúng tôi cũng sẽ thêm hình nhỏ đăng bài nổi bật (ảnh bìa album) riêng biệt và liên kết tới trang đăng đơn (trang album).
Chúng tôi quyết định thiết kế các hình ảnh lưới bằng cách sử dụng yếu tố danh sách. Mã sẽ như sau:
post_type == ‘album’ && $ post-> post_status == ‘xuất bản’) {
$ attachments = get_posts (mảng (
‘Post_type’ => ‘tệp đính kèm’,
‘Posts_per_page’ => -1,
‘Post_parent’ => $ post-> ID,
‘Exclude’ => get_post_thumbnail_id ()
));
if ($ attachments) {
foreach ($ tệp đính kèm dưới $ tệp đính kèm) {
$ class = “tập tin đính kèm sau-mime-“. sanitize_title ($ attachment-> post_mime_type);
$ title = wp_get_attachment_link ($ attachment-> ID, ‘album-grid’, đúng);
echo ‘
‘;
}
}
}
?>
Nguồn: Làm thế nào để có được tất cả các đính kèm ngoại trừ hình ảnh nổi bật
Phong cách CSS chủ yếu mà bạn thực sự phải lo lắng là lớp học .blume-grid
.album-grid {width: 225px; chiều cao: 150px; phao: trái; danh sách-phong cách: không có; list-style-type: none; lề: 0 18px 30px 0px;}
Điều này sẽ cho phép mỗi hình ảnh được đặt một cách thích hợp trong lưới, và chúng tôi sẽ có được phong cách như thế nào chúng tôi muốn nó.
Điều tiếp theo bạn cần làm là tạo một mẫu đính kèm đơn. Đây sẽ là trang nơi người dùng sẽ được đưa đến, vì vậy họ có thể xem từng hình ảnh cá nhân. Họ sẽ thấy tiêu đề hình ảnh, tên của nhiếp ảnh gia và nhà nhiếp ảnh ở đây. Bạn có thể làm theo hướng dẫn của chúng tôi về Cách tạo Mẫu Tuỳ chỉnh Đính kèm trong WordPress.
Bạn có thể tự tạo mẫu đơn mà bạn thích.
Bây giờ điều duy nhất còn lại trong danh sách là tạo một trang album cá nhân. Một lần nữa giả định rằng loại bài đăng tùy chỉnh của bạn được gọi là album, bạn sẽ cần phải tạo một single-albums.php tập tin. Sao chép tất cả tiêu đề, chân trang, thanh bên hoặc bất kỳ yếu tố thiết kế nào khác mà bạn muốn.
Trong phần tử vòng lặp về cơ bản làm cùng một điều mà chúng tôi đã làm với mẫu lưu trữ album. Trước khi bạn thêm hình ảnh đặc trưng và khung tệp đính kèm, bạn cần phải thêm tiêu đề album và mô tả. Có thể thực hiện bằng cách thêm mã như sau:
// Chèn mã lưới bên dưới dòng này
Ta da, chúng ta đã làm xong. Chúng tôi vừa tạo ra một album ảnh hàng tháng trong WordPress mà không cần sử dụng bất kỳ plugin nào. Hãy cho chúng tôi biết nếu bạn có bất kỳ câu hỏi.