Nếu chúng tôi duyệt qua Thư mục chủ đề WordPress, phần lớn các chủ đề giới thiệu hình ảnh bìa. Đó là một tính năng trong nhu cầu phổ biến. Xu hướng trang bìa vẫn đúng ngay cả trong chặn thư mục chủ đề cả ảnh chụp màn hình.
Hãy xem xét ví dụ sau đây từ Hai mươi hai mươi (một chủ đề cổ điển) bao gồm một mẫu bìa có thể được sử dụng để hiển thị cả trong một bài đăng và một trang, trong đó hình ảnh nổi bật của bài đăng hiển thị ở đầu trải dài trên màn hình trình duyệt, với tiêu đề bài đăng và các dữ liệu meta mong muốn khác bên dưới. Các mẫu bìa cho phép tạo nội dung nổi bật khỏi các ràng buộc truyền thống của việc hiển thị nội dung.
Việc tạo các mẫu bìa hiện yêu cầu viết mã PHP như được ghi lại ở đây trong Mẫu bìa mặc định của chủ đề Twenty Twenty. Nếu chúng ta nhìn vào template-parts/content-cover.php tệp, nó chứa mã để hiển thị nội dung khi cover-template Được sử dụng.
Do đó, không thể tạo trang bìa tùy chỉnh nếu bạn không có kiến thức sâu về PHP. Đối với nhiều người dùng WordPress thông thường, lựa chọn duy nhất là sử dụng plugin như Giao diện Người dùng Tuỳ chỉnh Giao diện như được mô tả trong video ngắn này.
Bìa các phần trong chủ đề khối
từ WordPress 5.8, các tác giả chủ đề có thể tạo các mẫu tùy chỉnh (như một bài đăng, tác giả, danh mục và những người khác) với phần anh hùng hàng đầu bằng cách sử dụng chỉnh sửa khối khối che và được đóng gói thành các chủ đề của chúng với mã tối thiểu hoặc không.
Trước khi đi sâu vào cách các phần bìa lớn hàng đầu được tạo trong các mẫu chủ đề khối, chúng ta hãy xem xét ngắn gọn hai chủ đề khối Hai mươi hai mươi hai và wabi bởi Rich Tabor (đánh giá đầy đủ tại đây).
Ở hậu trường, Twenty Twenty-Two thực hiện một tiêu đề lớn bằng cách thêm một hình ảnh ẩn được lưu trữ dưới dạng một mẫu trong header-dark-large các bộ phận. Trong khi đó, trong chủ đề Wabi, màu nền tiêu đề lớn trong một bài đăng được triển khai với màu nền nổi bật và khối đệm có chiều cao 50px (dòng: 5-9). Các màu nhấn được quản lý bởi assets/js/accent-colors.js tập tin.
Nhiều người khác đã chọn tạo phần trang bìa trên cùng bằng cách sử dụng khối che, cho phép người dùng thay đổi màu nền và thêm hình ảnh tĩnh từ Thư viện phương tiện hoặc tải lên từ các thiết bị phương tiện - mà không cần viết bất kỳ mã nào. Với cách tiếp cận này, hình ảnh từ đăng khối hình ảnh nổi bật phải được thêm thủ công vào từng bài đăng nếu bạn muốn có hình ảnh nổi bật của bài đăng làm hình nền trong các bài đăng đơn lẻ.
Khối bìa với hình ảnh nổi bật của bài đăng động
WordPress 6.0 đã có sẵn một điều thú vị khác khối bìa hình ảnh nổi bật tính năng này cho phép sử dụng hình ảnh nổi bật của bất kỳ bài đăng hoặc trang nào làm hình nền trong khối bìa.
Trong những điều sau đây đoạn phim ngắn này , Các kỹ sư Automattic thảo luận về việc thêm các hình ảnh nổi bật vào các khối bằng một ví dụ từ Archeo chủ đề:
Khối hình ảnh bao gồm cả khối hình ảnh nổi bật của bài đăng có thể được tùy chỉnh thêm bằng cách sử dụng duotone màu trong theme.json như đã thảo luận trong đoạn ngắn này Nối những chấm lại với nhau Video trên YouTube (Anne McCarthy của Automattic).
Ví dụ trường hợp sử dụng (Wei, Chế độ sáng)
Nếu chúng tôi duyệt qua các hình ảnh thu nhỏ trong chặn thư mục chủ đề, chúng tôi thấy phần lớn trong số chúng bao gồm các phần tiêu đề trang bìa lớn. Nếu chúng tôi tìm hiểu các tệp mẫu của họ, họ sẽ sử dụng các khối bìa với nền hình ảnh tĩnh.
Một số chủ đề được phát triển gần đây đang sử dụng các khối bìa với nền hình ảnh nổi bật của bài đăng động (ví dụ: Archeo, Wei, Frost, Bright Mode, v.v.). Tổng quan ngắn gọn về tính năng mới có sẵn trong video GitHub ngắn này.
Kết hợp màu sắc nổi bật năng động các tính năng của wabi chủ đề với bìa và đăng các khối hình ảnh nổi bật, Rich Tabor tiếp tục mở rộng khả năng sáng tạo của mình trong Wei chủ đề (đánh giá đầy đủ có sẵn tại đây) để hiển thị ảnh bìa động từ một bài đăng.
Trong bài đăng thông báo Wei của anh ấy, Rich Tabor viết: “Hậu trường, single.html mẫu đang sử dụng một khối Bìa thúc đẩy hình ảnh nổi bật của bài đăng. Sau đó, duotone được áp dụng bởi bảng màu được chỉ định cho bài đăng. Bằng cách này, chỉ cần về bất kỳ hình ảnh sẽ trông ổn ”.
Nếu bạn muốn tìm hiểu sâu hơn về khối bìa tiêu đề của chủ đề Wei và tìm hiểu cách tạo của riêng bạn, đây là đoạn phim ngắn này từ Frank Klein (Các khóa học phát triển WP) người giải thích từng bước cách nó được tạo ra.
Tương tự với chủ đề Wei, Brian Gardner cũng sử dụng khối bìa với khối hình ảnh đăng bài nổi bật trong Chế độ sáng chủ đề để hiển thị nội dung nổi bật với màu sắc rực rỡ.
Brian nói với WPTavern: “Anh ấy yêu thích nhất chủ đề là cách Cover Block được sử dụng trang đơn. Nó kéo hình ảnh đặc trưng vào khối Cover và cũng cung cấp các kiểu khối tùy chỉnh cho bóng đổ và các tùy chọn chiều cao đầy đủ. […] Tôi cảm thấy như thể điều này thực sự thể hiện những gì có thể với WordPress hiện đại. ”
Để biết thêm chi tiết, đây là trang giới thiệu và đánh giá đầy đủ về chủ đề Chế độ sáng của Brian.
Thiết kế bố cục phức tạp với trình chỉnh sửa khối
Gần đây, WordPress đã ra mắt một trình chỉnh sửa khối mới được thiết kế trang chủ đích và trang download. Bản thông báo thu hút phản ứng trái chiều từ độc giả của nó, bao gồm từ Matt Mullenweg (Automattic), người đã nhận xét về 33 ngày cần thiết để thiết kế và khởi chạy một “trang đơn giản” như vậy. Bạn có thể tìm các cuộc thảo luận bổ sung đằng sau hiện trường tại đây.
Đáp lại, Jamie Marsland của Pootlepress đã tạo video YouTube này nơi anh ấy tạo lại một trang chủ gần như giống hệt nhau trong gần 20 phút.
Nhận xét về video Marsland, Sarah Gooding của WP Travern viết: “Anh ấy là những gì người ta có thể mô tả như một người sử dụng quyền lực với trình chỉnh sửa khối. Anh ta có thể nhanh chóng xáo trộn các hàng, cột và nhóm xung quanh, điều chỉnh phần đệm và lề khi cần thiết, đồng thời gán cho mỗi phần màu sắc tương ứng cho thiết kế. Tại thời điểm này, đây không phải là điều mà hầu hết người dùng WordPress bình thường có thể làm được. ”
Mặc dù trình chỉnh sửa khối đã trải qua một chặng đường dài, nhưng hầu hết các nhà phát triển chủ đề và người dùng thông thường vẫn đang gặp khó khăn trong việc tạo và thiết kế các bố cục phức tạp với nó.
Thêm tính năng nâng cao cho khối TT2 Gopher
Trong phần này, tôi sẽ hướng dẫn bạn cách tôi thêm các tính năng nâng cao vào Chủ đề TT2 Gopher Blocks mà tôi đã tham khảo trong bài viết trước của tôi. Lấy cảm hứng từ các khối bìa từ các chủ đề mà tôi đã mô tả trước đó, tôi muốn thêm ba mẫu bìa (tác giả, danh mục và bìa đơn) vào chủ đề.
Trong khi duyệt các trang web, chúng tôi nhận thấy hai loại tiêu đề trang bìa. Phần đầu trang được quan sát nhiều nhất là phần trang bìa được pha trộn với phần tiêu đề trang web (tiêu đề trang web và điều hướng trên cùng) thành khối bìa (ví dụ: Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode, v.v.). Chúng tôi cũng tìm thấy phần bìa tiêu đề không được kết hợp với tiêu đề trang web và được đặt ngay bên dưới, chẳng hạn như phần này Tương lai BBC trang mạng. Đối với chủ đề khối TT2 Gopher, tôi đã chọn chủ đề sau.
Tạo các mẫu tiêu đề trang bìa
Đầu tiên, hãy tạo các mẫu tiêu đề trang bìa cho các mẫu tác giả, đơn lẻ và các mẫu khác (danh mục, thẻ) bằng cách sử dụng các khối bìa. Sau đó, chúng tôi sẽ chuyển đổi chúng thành các mẫu (như mô tả ở đây trước đây) và gọi các mẫu bìa tiêu đề tương ứng vào các mẫu.
Nếu bạn quen làm việc với trình chỉnh sửa khối, hãy thiết kế phần tiêu đề của bạn bằng cách sử dụng các khối bìa trong trình chỉnh sửa trang web và sau đó chuyển đổi mã tiêu đề bìa thành các mẫu. Tuy nhiên, nếu bạn không quen với trình chỉnh sửa FSE, thì cách dễ nhất là sao chép các mẫu từ thư mục mẫu trong một bài đăng, hãy thực hiện các sửa đổi cần thiết và chuyển nó thành một mẫu.
Trong tôi bài viết CSS-Tricks trước đó, Tôi đã thảo luận chi tiết về việc tạo và sử dụng các mẫu khối. Dưới đây là tổng quan ngắn gọn về quy trình làm việc mà tôi đang sử dụng để tạo mẫu tiêu đề trang bìa bài đăng duy nhất:
Mẫu tiêu đề trang bìa một bài đăng
Bước 1: Sử dụng giao diện FSE, hãy tạo một tệp trống mới và bắt đầu xây dựng cấu trúc khối như được hiển thị trên bảng điều khiển bên trái.
Ngoài ra, điều này có thể được thực hiện trước tiên trong một bài đăng hoặc trang, sau đó sao chép và dán đánh dấu vào tệp mẫu, sau đó.
Bước 2: Tiếp theo, để che dấu đánh dấu ở trên thành một mẫu, trước tiên chúng ta nên sao chép đánh dấu mã của nó và dán vào /patterns/header-single-cover.php trong trình soạn thảo mã của chúng tôi. Chúng tôi cũng nên thêm đánh dấu tiêu đề tệp mẫu bắt buộc (ví dụ: tiêu đề, slug, danh mục, trình chèn, v.v.).
Đây là toàn bộ mã của /patterns/header-single-cover.php tập tin:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
Bước 3: Đối với bản demo này, tôi đã sử dụng hình ảnh này từ thư mục ảnh làm hình nền phụ và áp dụng Nữa đêm màu duotone. Để sử dụng động đăng hình ảnh nổi bật, chúng ta nên thêm "useFeaturedImage":true trong khối bìa bằng cách thay thế liên kết hình ảnh phụ ở trên ngay trước "dimRatio":50 sao cho dòng 10 sẽ giống như sau:
Ngoài ra, hình ảnh phụ cũng có thể được thay đổi bằng cách nhấp vào Thay thế và chọn Sử dụng hình ảnh nổi bật tùy chọn:
Bây giờ, các mẫu bìa tiêu đề sẽ hiển thị trong bảng điều khiển trình chèn mẫu để sử dụng ở bất kỳ đâu trong các mẫu, bài đăng và trang.
Lưu trữ tiêu đề trang bìa
Lấy cảm hứng từ bài đăng này WP Tavern và hướng dẫn từng bước để tạo tiêu đề mẫu tác giả, tôi cũng muốn tạo tiêu đề trang bìa tương tự và thêm vào chủ đề TT2 Gopher.
Đầu tiên, hãy tạo mẫu tiêu đề trang bìa lưu trữ cho author.html cũng như mẫu, theo quy trình ở trên. Trong trường hợp này, tôi đang tạo điều này trong một trang trống mới, bằng cách thêm các khối (như được hiển thị bên dưới trong chế độ xem danh sách):
Trong nền cho trang bìa, tôi đã sử dụng cùng một hình ảnh được sử dụng trong trang bìa tiêu đề bài đăng.
Vì chúng tôi muốn hiển thị tiểu sử tác giả ngắn trên khối tác giả, nên một tuyên bố tiểu sử cũng phải được thêm vào trang tiểu sử của người dùng, nếu không, một khoảng trống sẽ được hiển thị trong giao diện người dùng.
Sau đây là mã đánh dấu của header-author-cover, mà chúng tôi sẽ sử dụng mẫu, trong bước tiếp theo:
Published by:
Để che dấu đánh dấu thành một header-author-cover , chúng ta nên thêm đánh dấu tiêu đề tệp mẫu bắt buộc như đã mô tả trước đó. Bằng cách chỉnh sửa header-author-cover.php , chúng tôi có thể tạo các bìa tiêu đề tương tự cho thẻ, phân loại và các mẫu tùy chỉnh khác.
Sản phẩm header-category-cover.php khuôn mẫu cho tôi category.html mẫu có sẵn trên GitHub.
Tạo Mẫu với các khối bìa tiêu đề
WordPress 6.0 và gần đây Gutenberg 13.7 các tính năng tạo mẫu mở rộng vào trình chỉnh sửa khối, do đó giúp nhiều người dùng WordPress, không có kiến thức sâu về mã hóa, có thể tạo các mẫu tùy chỉnh của họ.
Để biết thêm thông tin chi tiết và các trường hợp sử dụng, đây là ghi chú tùy chỉnh kỹ lưỡng của Justin Tadlock.
Trình chỉnh sửa khối cho phép tạo nhiều loại mẫu khác nhau, bao gồm cả mẫu bìa. Hãy tổng quan ngắn gọn về cách kết hợp khối che và đăng khối hình ảnh nổi bật với giao diện người dùng mẫu mới giúp dễ dàng tạo nhiều loại mẫu tùy chỉnh bìa khác nhau ngay cả khi không có hoặc không có kỹ năng viết mã.
Việc tạo các mẫu đã trở nên dễ dàng hơn nhiều với Gutenberg 13.7. Cách tạo mẫu khối với mã và trong trình chỉnh sửa trang web được mô tả trong Sổ tay chủ đề và trong bài báo trước của tôi.
Mẫu tác giả với khối bìa
Đánh dấu trên cùng (phần tiêu đề) của author.html mẫu được hiển thị bên dưới (dòng 6):
...
...
...
... Đây là ảnh chụp màn hình của các tiêu đề trang bìa cho author.html và category.html mẫu:
Toàn bộ mã cho cả hai mẫu đều có trên GitHub.
Bài đăng duy nhất có khối bìa
Để hiển thị khối bìa trong bài đăng duy nhất của chúng tôi, chúng tôi phải gọi header-cover-single pattern bên dưới phần tiêu đề (dòng 3):
....
....
....Đây là ảnh chụp màn hình hiển thị giao diện phía trước của một bài đăng với phần bìa tiêu đề:
Toàn bộ single-cover.html mẫu có sẵn trên GitHub.
Bạn có thể tìm thấy các hướng dẫn hướng dẫn từng bước bổ sung về cách tạo phần bài đăng tiêu đề anh hùng và sử dụng các khối bìa nền hình ảnh nổi bật đăng bài on Quán rượu WP và Chỉnh sửa toàn bộ trang web trang web.
Có bạn có nó!
Tài nguyên hữu ích
Khối bìa hình ảnh nổi bật
Bài viết blog
Mặc dù các chủ đề khối, nói chung, là nhận được nhiều phản hồi từ các thành viên cộng đồng WordPress, theo ý kiến của tôi, chúng là tương lai của WordPress, cũng vậy. Với các chủ đề khối, các tác giả chủ đề nghiệp dư, không có kỹ năng viết mã sâu và thông thạo ngôn ngữ PHP và JavaScript, giờ đây có thể tạo các chủ đề với bố cục phức tạp với phần bìa chính như được mô tả trong bài viết này kết hợp với mô hình và biến thể phong cách.
Là một người dùng Gutenberg ban đầu, tôi không thể hào hứng hơn với các công cụ chủ đề mới như tạo chủ đề khối plugin và các plugin khác cho phép các tác giả chủ đề đạt được những điều sau trực tiếp từ giao diện người dùng của trình chỉnh sửa khối mà không cần viết bất kỳ mã nào:
- (I) tạo
- (ii) ghi đè lên các tệp chủ đề và xuất
- (iii) tạo chủ đề trống hoặc chủ đề con, và
- (iv) sửa đổi và lưu biến thể kiểu của chủ đề hiện tại
Ngoài ra, các lần lặp lại gần đây của plugin Gutenberg cho phép bật kiểu chữ chất lỏng và căn chỉnh bố cục và các điều khiển phong cách khác chỉ sử dụng theme.json tệp không có JavaScript và một dòng quy tắc CSS.
Cảm ơn bạn đã đọc và chia sẻ ý kiến và suy nghĩ của bạn bên dưới!