Có gì mới trong WordPress 5.7 (Lazy-Loading, HTTPS, Cập nhật giao diện người dùng, API mới và hơn thế nữa)

Chúng ta đã quen với việc nhìn thấy những thay đổi nhỏ và không quá nhỏ cũng như các tính năng mới được thêm vào WordPress Core mỗi khi phiên bản mới được phát hành. WordPress 5.7 không phải là ngoại lệ và thật tuyệt khi thấy mỗi bản phát hành mới đưa chúng ta đến gần hơn một chút với Bức tranh lớn.

Với một số phiên bản của Trình chỉnh sửa khối được hợp nhất thành Core, bản phát hành mới cải thiện trải nghiệm chỉnh sửa tổng thể và cho phép các nhà phát triển xây dựng các khối nâng cao hơn và thêm các tùy chỉnh mạnh mẽ hơn vào trình chỉnh sửa khối.

Ngoài trình chỉnh sửa, WordPress 5.7 cũng giới thiệu rất nhiều thay đổi và các tính năng tuyệt vời, bao gồm iframe tải chậm, cập nhật giao diện đăng nhập và đăng ký, đặt lại liên kết mật khẩu, một số lượng lớn các bản sửa lỗi và hơn thế nữa.

Chúng tôi đã chạy thử nghiệm của mình trên DevKinsta và chúng tôi sẵn sàng chia sẻ với bạn các tính năng và thay đổi yêu thích của chúng tôi sắp có trong WordPress 5.7 — tất nhiên, hoàn chỉnh với hàng tấn ảnh chụp màn hình và đoạn mã.

Nếu bạn muốn tìm hiểu sâu hơn về bản phát hành chính đầu tiên của năm 2021, hãy xem Chu kỳ phát triển WordPress 5.7, Lập kế hoạch tổng hợp và Hướng dẫn hiện trường.

Vì vậy, trong khi chúng ta tiếp tục chờ đợi Chỉnh sửa toàn bộ trang web (trong Core by WordPress 5.8), hãy thoải mái và tận hưởng những gì mới trong WordPress 5.7!

Có gì mới trong trình chỉnh sửa khối

WordPress 5.7 mang đến nhiều phiên bản của plugin Gutenberg cho Core. Sẽ không thể đề cập đến tất cả những bổ sung đó ở đây ngoài nhiều thay đổi và sửa lỗi được thêm vào trình chỉnh sửa, nhưng bạn có thể truy cập các liên kết sau để tìm hiểu sâu hơn về từng phiên bản: 9.3, 9.4, 9.5, 9.6, 9.7, 9.8 9,9.

Các bản sửa lỗi và cải tiến hiệu suất từ Gutenberg 10.0 và 10.1 cũng là một phần của WordPress 5.7.

Điều đó nói rằng, chúng ta hãy xem qua danh sách được chọn lọc thủ công của chúng tôi về các tính năng và thay đổi thú vị nhất được thêm vào trình chỉnh sửa khối với WordPress 5.7:

Chặn các tính năng, cải tiến và API của các biến thể

Được giới thiệu với WordPress 5.4, các biến thể khối cung cấp một cách để người dùng chọn một phiên bản khác của cùng một khối.

Tính năng này hoạt động song song với API biến thể khối, một công cụ mạnh mẽ cho phép các nhà phát triển thêm, quản lý hoặc xóa các biến thể của khối.

WordPress 5.7 giới thiệu một số cải tiến, tính năng và API mới cho các biến thể khối, cung cấp giao diện người dùng tốt hơn và các công cụ mạnh mẽ hơn cho các nhà phát triển. Hãy đi sâu vào.

Biến đổi biến thể khối

Được giới thiệu lần đầu với Gutenberg 9.4 và hiện đã được thêm vào WordPress 5.7, một trình chuyển đổi Chuyển đổi thành biến thể xuất hiện bên dưới thẻ khối dành cho các khối hỗ trợ tính năng này.

Khi đăng ký một biến thể khối mới, nhà phát triển khối có thể thêm trình chuyển đổi biến thể vào trình kiểm tra khối bằng cách thêm tùy chọn transform mới vào trường scope biến thể khối, như được minh họa trong ví dụ sau (chỉ với mã JS):

wp.blocks.registerBlockVariation( 'core/heading', { name: 'green-text', title: 'Green Text', description: 'This block has green text. It overrides the default description.', attributes: { content: 'Green Text', textColor: 'vivid-green-cyan' }, icon: 'palmtree', scope: [ 'inserter', 'transform' ] } );

Trong ví dụ này, một biến thể khối xuất hiện trong hai khu vực của giao diện người dùng của trình soạn thảo — trình chèn khối và trình kiểm tra khối.

Để có cái nhìn tổng quan chuyên sâu về Phép biến đổi khối, hãy xem thêm PR # 26687.

Thông tin khối bây giờ khớp với các biến thể khối

Kể từ WordPress 5.7 (và Gutenberg 9.7), giao diện người dùng hiển thị thông tin cụ thể hơn về các biến thể khối, trong khi trước đó nó chỉ hiển thị thông tin chung chung.

Các khối nhúng và Biểu tượng Xã hội được xây dựng dưới dạng các biến thể của khối; chúng cung cấp các ví dụ điển hình về thông tin khối đối sánh WordPress với các biến thể khối.

Những thay đổi này ảnh hưởng đến trình kiểm tra khối, thanh điều hướng khối và đường dẫn. Kể từ Gutenberg 9.8, tính năng nâng cao giao diện người dùng này cũng áp dụng cho trình chuyển đổi khối.

API biến thể khối mới

WordPress 5.7 cũng giới thiệu các API mới mà các nhà phát triển có thể sử dụng khi đăng ký biến thể khối để hiển thị thông tin chính xác của biến thể khối (Gutenberg 9.7).

Thuộc tính isActive mới là một hàm chấp nhận các thuộc tính của khối. Bạn có thể sử dụng các thuộc tính của biến thể để xác định xem một biến thể có đang hoạt động hay không (xem thêm Tham chiếu API khối).

Các nhà phát triển khối có thể sử dụng chức năng này để hiển thị thông tin biến thể thay vì thông tin khối. Một ví dụ có thể là khối embed , nơi chúng ta có thể thay đổi giá trị của thuộc tính providerNameSlug (ví dụ từ ghi chú của nhà phát triển):

const variations = [ { name: 'wordpress', title: 'WordPress', keywords: [ __( 'post' ), __( 'blog' ) ], description: __( 'Embed a WordPress post.' ), attributes: { providerNameSlug: 'wordpress' }, isActive: ( blockAttributes, variationAttributes ) => blockAttributes.providerNameSlug === variationAttributes.providerNameSlug, }, ];

Trong ví dụ sau, thuộc tính isActive được sử dụng để thay đổi thuộc tính color:

variations: [ { name: 'blue', title: __( 'Blue Quote' ), isDefault: true, attributes: { color: 'blue', className: 'is-style-blue-quote' }, icon: 'format-quote', isActive: ( blockAttributes, variationAttributes ) => blockAttributes.color === variationAttributes.color }, ],

useBlockDisplayInformation mới trả về thông tin về một khối nhất định. Móc mới có tính đến thuộc tính isActive của một biến thể khối và trả về title , icon và description của khối.

Những thay đổi này ảnh hưởng đến Thẻ khối (Công cụ Thanh tra), Chế độ xem Danh sách Điều hướng (thanh trên cùng) và Breadcrumbs (xem thêm PR # 27469).

Các tính năng mới của khối nút

Một số tính năng mới cải thiện chức năng và giao diện của khối Buttons.

Kích thước nút

Một điều khiển mới có sẵn trong Thanh bên cài đặt hiện cho phép chúng tôi đặt chiều rộng phần trăm cho các nút nằm trong khối Nút (Gutenberg 9.4).

Chỉ cần chọn một nút và chọn 25%, 50%, 75% hoặc 100%. Phần trăm tham chiếu đến vùng chứa mẹ. Hình ảnh dưới đây cho thấy các kết hợp khác nhau của các kích thước nút.

Để biết thêm thông tin chi tiết về kỹ thuật, hãy xem các yêu cầu kéo # 25999 và # 26781.

Bố cục dọc

Tính năng mới này bổ sung các biến thể cho hướng dọc vào khối Nút. Người dùng có thể chuyển từ bố cục ngang sang bố cục dọc bằng trình chuyển đổi Transformations có sẵn trong bảng cài đặt khối (Gutenberg 9.6).

Các cải tiến về biểu tượng xã hội

WordPress 5.7 thêm các tùy chọn tùy chỉnh mới cho Biểu tượng xã hội: hỗ trợ kích thước tùy chỉnh và màu sắc tùy chỉnh.

Kích thước biểu tượng xã hội

Với khối Biểu tượng xã hội được chọn, thanh công cụ khối bây giờ cung cấp menu tùy chọn Kích thước với các kích thước có sẵn (Gutenberg 9.4).

Màu tùy chỉnh trong biểu tượng xã hội

Khối tương tự hiện hỗ trợ cài đặt màu, cho phép chúng tôi đặt các màu tùy chỉnh khác nhau cho các biểu tượng và hình nền (Gutenberg 9.9).

Giờ đây, bạn có thể sử dụng bảng màu của chủ đề cho Biểu tượng xã hội, ngăn các màu biểu tượng xung đột với bảng màu trang web của bạn (xem thêm PR # 28084).

Hỗ trợ kích thước phông chữ

WordPress 5.7 bổ sung hỗ trợ kích thước phông chữ cho cả khối Danh sách và Mã.

Kích thước phông chữ trong khối danh sách

Một thẻ kiểu chữ với các điều khiển cho kích thước phông chữ đã được thêm vào cài đặt Khối danh sách (Gutenberg 9.4).

Người dùng có thể chọn một trong các kích thước phông chữ có sẵn cho các mục danh sách hoặc đặt kích thước phông chữ tùy chỉnh được biểu thị bằng pixel. Nút “Đặt lại” khôi phục các giá trị mặc định.

Hỗ trợ kích thước phông chữ trong khối mã

WordPress 5.7 cũng bổ sung hỗ trợ quản lý kích thước phông chữ trong các khối Mã. Với một khối Mã được chọn, thanh bên cài đặt khối hiển thị điều khiển kích thước Phông chữ mới. Điều khiển này cho phép bạn chọn một trong các kích thước đặt trước có sẵn trong chủ đề của bạn hoặc đặt giá trị tùy chỉnh theo pixel (Gutenberg 9.5).

Việc triển khai tính năng này cũng cho phép sử dụng các biến kiểu toàn cục trong CSS của các khối Mã (xem thêm PR # 27294). Hình ảnh bên dưới cho thấy một khối Mã trên giao diện người dùng với chủ đề Twenty Twenty được cài đặt.

Căn chỉnh chiều cao đầy đủ trong khối bìa

WordPress 5.7 giới thiệu thành phần Căn chỉnh thanh công cụ có chiều cao đầy đủ mới. Lần đầu tiên nó được thêm vào trình chỉnh sửa khối với Gutenberg 9.5. Bây giờ, nó được hợp nhất vào Core và được triển khai trong khối Cover.

Nếu bạn chuyển đổi nút thanh công cụ khối, theo dõi kiểm soát chiều cao tối thiểu, bạn sẽ thấy rằng căn chỉnh chiều cao đầy đủ chỉ là cách viết tắt của 100vh (đọc thêm về độ dài phần trăm khung nhìn).

Bạn có thể sử dụng Căn chỉnh độ cao đầy đủ kết hợp với các cài đặt điều khiển khác như nền cố định, vị trí nội dung, v.v. Có thể bạn sẽ ngạc nhiên bởi số lượng hiệu ứng ấn tượng mà bạn có thể tạo trên các trang của mình.

Kéo và thả các khối và mẫu từ Inserter

Trình chèn khối hiện hỗ trợ kéo và thả cho các khối và mẫu. Người dùng có thể lấy bất kỳ khối hoặc mẫu nào từ trình chèn và đặt nó ở bất kỳ đâu trên canvas bài đăng (Gutenberg 9.6 và 9.7).

Lưu ý rằng kéo và thả chỉ hoạt động nếu chủ đề của bạn hỗ trợ các mẫu khối.

Khối đệm nửa trong suốt

Thay cho màu xám đục trước đây, khối Spacer hiện có nền bán trong suốt (Gutenberg 9.8).

Tính năng này sẽ giúp bạn dễ dàng xác định khối Spacer nằm trên bất kỳ màu nền nào.

Các cải tiến bổ sung trong trình chỉnh sửa khối đáng được đề cập

Danh sách của chúng tôi sẽ không bao gồm tất cả các tính năng và cải tiến được hợp nhất vào Core, vì vậy hãy đảm bảo kiểm tra tài liệu chính thức và ghi chú của nhà phát triển để đăng ký toàn diện hơn về những tính năng mới trong trình chỉnh sửa khối với WordPress 5.7.

Nhưng chỉ cần kể tên một số người khác, trong 5.7, bạn cũng sẽ tìm thấy:

• Tự động bật Chế độ tối khi nền tối được bật (PR # 28233)
• Các biểu tượng Patreon, Telegram và TikTok đã được thêm vào Biểu tượng xã hội (PR # 26118)
• Tất cả các đơn vị được hỗ trợ trong cài đặt Kích thước Phông chữ (PR # 26475)
• Bản xem trước chuyển đổi khối (PR # 27861)
• Cải thiện bản xem trước mẫu khối trong Trình chèn khối (PR # 27204)
• Phương thức Tùy chọn đã được cải thiện và tên được đổi thành Tùy chọn
• Các thay đổi trong API @ wordpress / data
• Thay đổi API khối bên trong
• Cải tiến tính năng Nhập / Xuất
• Các thay đổi để chặn các thành phần và khối trình chỉnh sửa

Các iframe đang tải chậm

Tải chậm là một kỹ thuật tối ưu hóa giúp giảm tải các tài nguyên không quan trọng cho đến khi chúng nằm trong khung nhìn của người dùng. Hình ảnh tải chậm và tài nguyên nhúng không được tải xuống và hiển thị cho đến khi chúng cần. Nó có thể cải thiện đáng kể hiệu suất trang web, đặc biệt là đối với các trang web có hình ảnh và video độ phân giải cao.

Trước khi tải chậm bản gốc, các nhà phát triển chỉ có thể tải nội dung một cách lười biếng qua JavaScript. Người dùng WordPress buộc phải sử dụng một plugin để đạt được hiệu quả tương tự. Tuy nhiên, vì tải chậm đã trở thành một tiêu chuẩn, hình ảnh và iframe có thể được tải chậm bằng cách chỉ cần thêm thuộc tính loading="lazy" vào các thẻ img và iframe .

WordPress 5.5 đã giới thiệu Native Image Lazy-Loading trong WordPress Core, tự động thêm thuộc tính loading="lazy" vào các thẻ img với các thuộc tính width và height được chỉ định.

Bây giờ, kể từ WordPress 5.7, tải chậm được mở rộng cho các thẻ iframe . Đối với hình ảnh, để ngăn thay đổi bố cục, loading="lazy" sẽ chỉ được thêm vào những thẻ iframe có thuộc tính width và height được chỉ định.

Trong WordPress, tính năng tải lười gốc hoạt động với iframe trong các ngữ cảnh sau:

• iframe trong nội dung bài đăng ( the_content )
• iframe trong đoạn trích bài đăng ( the_excerpt )
• iframe trong widget văn bản ( widget_text_content )

Trong WordPress, phần lớn iframe dựa vào tích hợp oEmbed, tự động chuyển đổi một URL thành thẻ iframe tương ứng. Thật không may, không phải dịch vụ web nào cũng cung cấp các thuộc tính width và height cho iframe; điều này ngăn không cho WordPress thêm thuộc tính loading vào các iframe đó.

Hình ảnh bên dưới hiển thị thẻ iframe có thuộc tính loading="lazy" :

Theo lời của Felix Arntz:

Việc đánh dấu các thẻ iframe đó được kiểm soát bởi dịch vụ web tương ứng và chỉ một số dịch vụ web đó tuân theo phương pháp hay nhất là cung cấp thuộc tính width và height . Vì WordPress không thể đoán kích thước của tài nguyên được nhúng, nên thuộc tính loading="lazy" sẽ chỉ được thêm vào nếu thẻ iframe oEmbed đi kèm với cả hai thuộc tính thứ nguyên.

Hình ảnh sau đây hiển thị thẻ iframe không có thuộc tính loading="lazy" :

Các iframe Lazy-Loading dành cho Nhà phát triển

Từ quan điểm của nhà phát triển, tính năng mới yêu cầu một số thay đổi, bao gồm:

• Hành vi của hàm wp_filter_content_tags() đã được mở rộng để thêm thuộc tính loading vào thẻ iframe . Thuộc tính loading trước đây chỉ được thêm vào các thẻ img .
• Theo mặc định, hàm wp_lazy_loading_enabled() hiện trả về giá trị true cho các thẻ iframe (khi được bật).
• Hàm wp_iframe_tag_add_loading_attr() mới cho phép thêm thuộc tính loading vào thẻ iframe (tương tự như wp_img_tag_add_loading_attr() —xem Tham chiếu mã).
• Bộ lọc wp_iframe_tag_add_loading_attr cho phép tùy chỉnh tải chậm trên iframe cụ thể. Trả về false hoặc một chuỗi trống sẽ không thêm thuộc tính.

Bạn có thể ghi đè hành vi mặc định bằng cách sử dụng bộ lọc wp_lazy_loading_enabled hiện có, bộ lọc hiện trả về true cho các thẻ iframe .

add_filter( 'wp_lazy_loading_enabled', function( $default, $tag_name, $context ){ if ( 'iframe' === $tag_name && 'the_content' === $context ){ return false; } return $default; }, 10, 3 );

Bạn cũng có thể sử dụng bộ lọc wp_iframe_tag_add_loading_attr mới, cho phép tùy chỉnh hành vi của thẻ iframe cụ thể. Ví dụ: bạn có thể tắt tính năng tải chậm cho video YouTube trong một ngữ cảnh cụ thể.

Đoạn mã dưới đây dựa trên một ví dụ từ ghi chú của nhà phát triển và chỉ ra cách tắt tính năng tải chậm đối với iframe nhúng video YouTube:

add_filter( 'wp_iframe_tag_add_loading_attr', function( $value, $iframe, $context ){ if ( 'the_content' === $context && false !== strpos( $iframe, 'youtube.com' ) { return false; }, 10, 3 );

Lưu ý rằng tất cả các trình duyệt web thường không hỗ trợ tải chậm tại thời điểm viết bài này. Bạn có thể thấy bên dưới rằng Firefox và Safari chỉ hỗ trợ tải chậm trên hình ảnh.

Di chuyển trang web bằng một cú nhấp chuột từ HTTP sang HTTPS

Kể từ ngày 5.7, WordPress sẽ phát hiện xem môi trường của trang web có hỗ trợ HTTPS hay không. Nếu vậy, phần Trạng thái HTTPS trong công cụ Trạng thái trang web cung cấp nút gọi hành động cho phép quản trị viên trang web chuyển trang web của họ từ HTTP sang HTTPS chỉ bằng một cú nhấp chuột. Nội dung trang web được di chuyển nhanh chóng, giúp chúng tôi không gặp phải bất kỳ cảnh báo nội dung hỗn hợp nào.

WordPress sẽ hiển thị thông báo nếu HTTPS không được hỗ trợ.

Chuyển HTTP sang HTTPS dành cho nhà phát triển

Cùng với tính năng tự động mới có thể truy cập từ công cụ Site Health, WordPress 5.7 giới thiệu các chức năng mới cho phép các nhà phát triển kiểm tra và tùy chỉnh các khía cạnh khác nhau của phát hiện và di chuyển HTTPS.

Hàm wp_is_using_https() mới trả về true nếu cả “Địa chỉ trang web” ( home_url() ) và “Địa chỉ WordPress” ( site_url() ) đều có URL chứa https . Tính năng mới này được Felix Arntz minh họa rõ ràng trong ghi chú của nhà phát triển:

Về cơ bản, việc thay đổi cả hai URL này thành HTTPS chính thức cho thấy rằng trang web đang sử dụng HTTPS. Mặc dù có những cách khác để bật HTTPS một phần trong WordPress (ví dụ: với hằng số FORCE_SSL_ADMIN ), cơ chế phát hiện mới tập trung vào việc sử dụng HTTPS trên toàn bộ trang web, tức là giao diện người dùng và phụ trợ của nó.

Trong khi hàm wp_is_using_https() kiểm tra sự hiện diện của https trong URL, thì wp_is_https_supported() sẽ kiểm tra xem môi trường trang web có hỗ trợ chính xác HTTPS hay không.

Về cơ bản, hàm này kiểm tra sự hiện diện của tùy chọn https_detection_errors trong cơ sở dữ liệu và trả về true nếu không có lỗi nào được phát hiện. Trong trường hợp môi trường của bạn không hỗ trợ HTTPS, tùy chọn https_detection_errors sẽ xuất hiện trong wp_options , như thể hiện trong hình ảnh sau:

Như đã đề cập ở trên, các URL được mã hóa cứng trong nội dung trang web được thay đổi nhanh chóng, tất cả là nhờ vào hai hàm mới: wp_replace_insecure_home_url() và wp_should_replace_insecure_home_url() .

Để di chuyển một trang web từ HTTP sang HTTPS, quản trị viên trang web chỉ cần cập nhật thủ công “Địa chỉ trang web” và “Địa chỉ WordPress” để bao gồm HTTPS thay vì HTTP. Tuy nhiên, để mọi thứ trở nên dễ dàng hơn, WordPress 5.7 giới thiệu hàm wp_update_urls_to_https() mới.

Chức năng thứ hai này cho phép di chuyển một trang web và tất cả nội dung của trang web từ HTTP sang HTTPS chỉ bằng một cú nhấp chuột (ít nhất là trong các trường hợp phổ biến nhất, chẳng hạn như khi “Địa chỉ trang web” khớp với “Địa chỉ WordPress”). Đó là một tính mới tuyệt đối và là một cải tiến đáng kể trong trải nghiệm quản trị WordPress.

Để biết thêm các khía cạnh kỹ thuật về phát hiện và di chuyển HTTPS, hãy xem ghi chú của nhà phát triển Felix Arntz, cũng như các vé # 47577 và # 51437.

Các chức năng liên quan dành cho cha mẹ của bài đăng mới

WordPress 5.7 giới thiệu hai chức năng mới liên quan đến Post Parent. Chúng đơn giản để sử dụng và giúp bạn giảm bớt tính logic trong các plugin và chủ đề.

has_parent_post ()

Hàm has_parent_post() là một thẻ điều kiện để kiểm tra xem một bài viết đã cho có cha mẹ hay không, sau đó trả về true hoặc false tương ứng. Nó chấp nhận ID bài đăng hoặc đối tượng WP_Post làm tham số và sử dụng biến tổng thể $post nếu có. Xem ví dụ sau:

<?php if ( has_parent_post( get_the_ID() ) ) : ?> // your code here <?php endif; ?>

get_parent_post ()

Hàm get_parent_post() là một thẻ mẫu lấy đối tượng WP_Post mẹ cho một bài đăng nhất định. Giống như chức năng trước, nó chấp nhận ID bài đăng hoặc đối tượng WP_Post làm tham số. Xem ví dụ sau về cách sử dụng:

<a href="<?php the_permalink( get_parent_post( get_the_ID() ) ); ?>"><?php echo get_the_title( get_parent_post( get_the_ID() ) ); ?></a>

Trong thế giới thực, chúng tôi sẽ sử dụng các chức năng này kết hợp với nhau. Bạn có thể tự mình chạy thử nghiệm bằng cách thêm mã sau từ ghi chú của nhà phát triển vào tệp mẫu single.php của chủ đề của bạn:

<?php if ( has_parent_post( get_the_ID() ) ) : ?> <p><a href="<?php the_permalink( get_parent_post( get_the_ID() ) ); ?>"> <?php echo sprintf( esc_html__( 'Parent page: %s', 'text-domain' ), get_the_title( get_parent_post( get_the_ID() ) ) ); ?> </a></p> <?php endif; ?>

Cập nhật giao diện đăng nhập và đăng ký

WordPress 5.7 mang lại một số cải tiến cho tính năng đăng nhập và đăng ký, với giao diện Đặt lại mật khẩu được cải tiến, móc mới và các thay đổi nhỏ khác.

Đặt lại màn hình mật khẩu

Màn hình Đặt lại mật khẩu bây giờ cung cấp hai nút: Tạo mật khẩu và Lưu mật khẩu . Nút đầu tiên tạo mật khẩu mạnh mới tại mỗi lần nhấp, trong khi nút thứ hai lưu mật khẩu của bạn. Thay đổi này sẽ dẫn đến trải nghiệm đặt lại mật khẩu được cải thiện cho người dùng WordPress mới.

Hình ảnh bên dưới so sánh màn hình Đặt lại mật khẩu trong WordPress 5.6 và 5.7:

Bộ lọc mới

lostpassword_user_data mới cho phép chúng tôi lọc biến $user_data khi đặt lại mật khẩu. Các nhà phát triển hiện có thể thực hiện xác thực người dùng bằng cách sử dụng dữ liệu tùy chỉnh thay vì tên người dùng hoặc địa chỉ email. Để có một ví dụ trong thế giới thực, hãy xem nhận xét này từ Marcelo Villela Gusmão.

Móc lọc bộ lọc login_site_html_link mới cho phép chúng tôi thay thế hoàn toàn HTML tạo liên kết “Quay lại {site_name}” bằng mã / liên kết tùy chỉnh. Giờ đây, các nhà phát triển có thể đặt văn bản tùy chỉnh cho liên kết, cũng như thay đổi chính liên kết. Bạn có thể sử dụng bộ lọc như được minh họa trong ví dụ sau:

function custom_login_site_html_link( $link ) { return '<a href="' . esc_url( home_url( '/blog/' ) ) . '">' . __( 'Back to my awesome blog', 'textdomain' ) . '</a>'; } add_filter( 'login_site_html_link', 'custom_login_site_html_link', 10, 1 );

Hình ảnh dưới đây cho thấy kết quả đầu ra trên màn hình:

Để biết các thay đổi bổ sung, hãy kiểm tra các thay đổi của màn hình Đăng nhập & đăng ký trong ghi chú dành cho nhà phát triển WordPress 5.7.

Các chức năng mới để kiểm tra xem một bài đăng có thể xem được công khai hay không

WordPress 5.7 giới thiệu hai chức năng mới cho phép các nhà phát triển kiểm tra xem một bài đăng có thể xem được công khai hay không.

is_post_status_viewable ()

Hàm is_post_status_viewable() mới cho phép các nhà phát triển xác định xem một bài đăng có thể xem được công khai hay không tùy thuộc vào trạng thái bài đăng .

Hàm mới này cung cấp một cách tốt hơn để kiểm tra xem một bài đăng có thể xem được hay không so với is_post_type_viewable() hiện có, hàm này có thể kiểm tra xem một loại bài đăng có hiển thị cho người dùng ẩn danh hay không nhưng không giúp xác định xem một bài đăng cụ thể có thể xem được hay không.

Đối với các loại bài đăng dựng sẵn, is_post_status_viewable() kiểm tra thuộc tính public . Đối với các loại bài đăng tùy chỉnh, nó sẽ kiểm tra thuộc tính publicly_queryable .

Chúng tôi đã thử nghiệm mã sau, dựa trên ví dụ từ ghi chú của nhà phát triển, trong cài đặt cục bộ:

$current_post_status = get_post_status( $post ); if ( is_post_status_viewable( $current_post_status ) ) { echo '<p>This post uses a public post status.' . ' Current status: <strong>' . $current_post_status . '</strong></p>'; } else { echo '<p>This post uses a non public post status.' . ' Current status: <strong>' . $current_post_status . '</strong></p>'; }

is_post_status_viewable() chấp nhận một tham số bắt buộc:

• $post_status ( string | stdClass ) Tên hoặc đối tượng trạng thái bài đăng.

Trong một bài đăng trên blog công khai, đoạn mã trên sẽ tạo ra kết quả sau:

Trong một bài đăng riêng tư, kết quả sẽ như sau:

Jean-Baptiste Audras, tác giả của ghi chú của nhà phát triển, cảnh báo:

Xin lưu ý rằng các bài đăng được bảo vệ bằng mật khẩu được coi là có thể xem công khai, trong khi các bài đăng riêng tư thì không.

is_post_publicly_viewable ()

Hàm is_post_publicly_viewable() mới trả về true nếu cả is_post_status_viewable() và is_post_type_viewable() trả về true . Nó cũng cho phép chúng tôi xác định xem một bài đăng cụ thể có thể xem được công khai hay không (tức là liệu người dùng đã đăng xuất có thể xem được bài đăng đó hay không).

is_post_publicly_viewable() chấp nhận một tham số tùy chọn:

• $post ( string | stdClass ) ID hoặc đối tượng của bài đăng. Theo mặc định, đối tượng $post toàn cục được chuyển.

Một móc động mới để lọc nội dung của một loại khối cụ thể

WordPress 5.7 giới thiệu một móc động mới cho phép các nhà phát triển lọc nội dung của một loại khối cụ thể.

Bộ render_block_{$this->name} mới này tương tự như bộ lọc render_block hiện có, với một điểm khác biệt chính: render_block lọc nội dung của một khối duy nhất, trong khi móc động mới lọc nội dung của loại khối {$this->name} .

Để sử dụng bộ lọc này, bạn nên cung cấp các thông số sau:

• $block_content ( string ): Nội dung khối sẽ được thêm vào.
• $block ( array ): Toàn bộ khối, bao gồm tên và các thuộc tính.

Lệnh gọi lại trả về nội dung khối đã sửa đổi.

Ví dụ sau đây cho thấy một trường hợp sử dụng cho bộ lọc này trên một khối đoạn văn:

add_filter( 'render_block_core/paragraph', function( $block_content, $block ) { $content = '<div class="my-custom-wrapper">' . $block_content . '</div>'; return $content; }, 10, 2 );

Trong ví dụ này, hậu tố core/paragraph là slug của loại khối đoạn chính. Đối với các khối tùy chỉnh, slug phải là một cái gì đó giống như my-custom-plugin/my-custom-block .

Xem ghi chú dành cho nhà phát triển để có cái nhìn tổng quan sâu hơn và các ví dụ bổ sung về cách sử dụng.

API rô bốt mới

Thẻ meta robots cho phép chủ sở hữu trang web kiểm soát cách một trang web nên được lập chỉ mục và phân phát cho người dùng trong kết quả của công cụ tìm kiếm (btw, hãy nhớ xem hướng dẫn của chúng tôi về SEO WordPress).

WordPress 5.7 giới thiệu một API rô bốt mới cho phép các nhà phát triển kiểm soát thẻ meta robots này. API mới cung cấp bộ lọc wp_robots cho các nhà phát triển chủ đề để thêm các chỉ thị tùy chỉnh của họ vào thẻ meta robots .

Ngoài ra, chỉ thị max-image-preview:large hiện được thêm theo mặc định vào các trang web được định cấu hình để công cụ tìm kiếm hiển thị. Nó hướng dẫn các công cụ tìm kiếm hiển thị bản xem trước hình ảnh lớn trong kết quả tìm kiếm.

Các nhà phát triển có thể xóa chỉ thị max-image-preview:large bằng cách sử dụng mã sau:

remove_filter( 'wp_robots', 'wp_robots_max_image_preview_large' );

Tùy chỉnh các lệnh của robots khá đơn giản. Ví dụ sau từ ghi chú của nhà phát triển cho thấy cách thêm chỉ thị tùy chỉnh vào thẻ meta:

add_filter( 'wp_robots', function( $robots ) { $robots['follow'] = true; return $robots; } );

Đoạn mã trên sẽ tạo ra kết quả sau:

<meta name="robots" content="max-image-preview:large, follow">

Cũng có thể loại bỏ các chỉ thị hiện có chỉ bằng cách bỏ thiết lập các giá trị. Đoạn mã sau vô hiệu hóa chỉ thị max-image-preview :

function my_wp_robots_directives( $robots ) { unset( $robots['max-image-preview'] ); $robots['follow'] = true; return $robots; } add_filter( 'wp_robots', 'my_wp_robots_directives' );

Bạn sẽ tìm thấy tổng quan chuyên sâu về thẻ meta robots trên blog Ahrefs và tài liệu tham khảo của Google Tìm kiếm. Xem ghi chú của nhà phát triển để biết thêm thông tin về API Robot WordPress mới và các chức năng không dùng nữa.

Đặt lại liên kết mật khẩu

Một tính năng mới hiện cho phép quản trị viên trang web gửi các liên kết đặt lại mật khẩu qua email cho bất kỳ người dùng đã đăng ký nào. Tính năng này có thể hữu ích nếu người dùng không thể truy cập liên kết đặt lại mật khẩu vì bất kỳ lý do gì.

Quản trị viên trang web có thể gửi liên kết đặt lại mật khẩu qua email từ các khu vực khác nhau. Đầu tiên, bạn sẽ tìm thấy một phần mới cung cấp nút Gửi Liên kết Đặt lại trong bất kỳ Màn hình Hồ sơ người dùng nào.

Nếu mọi thứ suôn sẻ, bạn sẽ thấy thông báo quản trị xác nhận rằng liên kết đặt lại mật khẩu đã được gửi qua email cho người dùng.

Bạn cũng có thể gửi liên kết đặt lại mật khẩu từ Màn hình người dùng.

Bạn thậm chí có thể chọn một số người dùng và gửi hàng loạt liên kết đặt lại mật khẩu.

Như đã đề cập trước đó, người dùng sẽ nhận được một email có chứa liên kết đặt lại mật khẩu. Hình ảnh sau đây cho thấy một email đặt lại mật khẩu trong công cụ Hộp thư đến Email DevKinsta.

Các nhà phát triển có thể sử dụng các bộ lọc retrieve_password_title và retrieve_password_message để tùy chỉnh chủ đề và thông điệp của email.

Cải tiến bổ sung cho nhà phát triển

Các chức năng mới để chuyển các thuộc tính cho các thẻ tập lệnh

Một số hàm mới hiện cho phép chuyển các thuộc tính sang <script> (tức là không đồng async hoặc nonce có).

wp_get_script_tag ()

wp_get_script_tag() tải thẻ script đã định dạng và tự động đưa thuộc tính type vào nếu chủ đề không khai báo hỗ trợ cho các thẻ script HTML5. Nó chấp nhận một mảng các cặp khóa-giá trị đại diện cho các thuộc tính đang được thêm vào <script> .

Hàm này kết hợp với bộ lọc wp_script_attributes mới, có thể được sử dụng để lọc các thuộc tính.

wp_print_script_tag ()

wp_print_script_tag() in một thẻ script được định dạng.

wp_get_inline_script_tag ()

wp_get_inline_script_tag() bao bọc JavaScript nội tuyến trong một thẻ script .

Hàm này có một hook wp_inline_script_attributes tương ứng để lọc các thuộc tính được thêm vào thẻ script.

wp_print_inline_script_tag ()

wp_print_inline_script_tag() in JavaScript nội tuyến trong thẻ script .

wp_sanifying_script_attributes ()

Hàm wp_sanitize_script_attributes() mới được sử dụng để chuyển một mảng thuộc tính thành một chuỗi thuộc tính. Sau đó, chúng có thể được thêm vào một thẻ script .

Kiểm tra ghi chú của nhà phát triển để biết thêm thông tin và ví dụ sử dụng.

Màu WP-Admin được tiêu chuẩn hóa

Là một phần của dự án lớn hơn nhằm làm sạch CSS WP-Admin, WordPress hiện sử dụng bảng màu WP-Admin tiêu chuẩn hóa mới. Bảng màu mới bao gồm 12 sắc thái, mỗi màu xanh lam, xanh lục, đỏ và vàng. Nó cũng thêm 13 sắc thái của xám, đen và trắng. Thêm vào đó, nó đáp ứng các yêu cầu về tỷ lệ tương phản được khuyến nghị tối thiểu của WCAG 2.0.

Theo lời của Jean-Baptiste Audras:

Việc tiêu chuẩn hóa bộ màu này sẽ giúp những người đóng góp đưa ra quyết định thiết kế nhất quán, dễ tiếp cận. Các nhà phát triển Chủ đề và Plugin được khuyến khích sử dụng bảng màu mới này, để có sự nhất quán tốt hơn giữa các sản phẩm của họ và WordPress Core.

WP_MEMORY_LIMIT không đổi về tình trạng trang web

Hằng số WP_MEMORY_LIMIT chỉ định lượng bộ nhớ tối đa mà PHP có thể sử dụng.

Không được bao gồm trong các phiên bản WordPress trước đó, hằng số WP_MEMORY_LIMIT đã được thêm vào tab Thông tin trong Tình trạng trang web.

Các thay đổi bổ sung dành cho nhà phát triển được liệt kê trong Các thay đổi tập trung vào nhà phát triển khác và Thay đổi API REST trong WordPress 5.7. Bạn sẽ tìm thấy danh sách đầy đủ các ghi chú của nhà phát triển trong Hướng dẫn trường WordPress 5.7.

Bản tóm tắt

Thị phần WordPress tiếp tục tăng với tốc độ ổn định:

WordPress được sử dụng bởi 64,4% tất cả các trang web có hệ thống quản lý nội dung mà chúng tôi biết. Đây là 40,3% của tất cả các trang web.

Đó là bằng chứng quan trọng về sức khỏe của CMS, đặc biệt là đối với những người xây dựng doanh nghiệp của họ trên WordPress. Và đây cũng là một lý do tuyệt vời để chú ý đến những gì đang diễn ra trong hệ sinh thái WordPress.

WordPress 5.7 bổ sung rất nhiều tính năng và cải tiến mới cho cả người dùng và nhà phát triển, nhưng đó chỉ là hương vị của những gì chúng ta có thể mong đợi sẽ thấy vào năm 2021.

Điều đó tùy thuộc vào bạn bây giờ. Chúng ta đã bỏ lỡ điều gì quan trọng? Những thay đổi và tính năng yêu thích của bạn của WordPress 5.7 là gì?