Một trong những vấn đề mà mọi chủ sở hữu hoặc người tạo trang web gặp phải là làm thế nào để làm cho trang web của họ hấp dẫn hơn về mặt hình ảnh và cải thiện khả năng giữ chân người dùng. Lợi ích khá rõ ràng, khách truy cập ở lại trang web càng lâu thì cơ hội đăng ký bản tin, bán hàng hoặc doanh thu quảng cáo càng cao. Bạn có thể thu hút sự quan tâm của khách truy cập bằng cách tạo nội dung hữu ích và hấp dẫn, nhưng bạn cũng có thể bao gồm các tiện ích được chọn cẩn thận để thu hút khách truy cập và giữ họ ở lại trang web của bạn lâu hơn. Tuy nhiên, bạn cũng cần tìm đúng số lượng vật dụng để sử dụng, vì quá ít hoặc quá nhiều có thể gây tác dụng ngược cho bạn. Đây là một phần lý do tại sao các nhà phát triển chủ đề đã tạo các khu vực tiện ích mặc định. Những khu vực này cho phép người dùng kéo và thả các tiện ích khác nhau vào đó. Các khu vực widget giống nhau có thể nhắm mục tiêu các trang hoặc phần khác nhau của nội dung. Số lượng khu vực tiện ích con mặc định có thể thay đổi đáng kể tùy thuộc vào chủ đề. Tuy nhiên, cho dù có bao nhiêu thì việc có tùy chọn thêm nhiều khu vực tiện ích con tùy chỉnh phù hợp với nhu cầu của bạn có thể khá hữu ích. Do đó, chúng tôi quyết định thực hiện hướng dẫn toàn diện này giải thích cách tạo các khu vực tiện ích con bổ sung. Sử dụng các bước được nêu trong bài viết này, bạn có thể tạo một trang web tuyệt đẹp thu hút sự chú ý của khách truy cập và giữ chân họ Show Nếu bạn muốn bỏ qua bất kỳ phần cụ thể nào của bài viết, chỉ cần nhấp vào một trong các liên kết bên dưới  Cách thêm khu vực widget trong WordPressTrước khi chúng tôi đi sâu vào quá trình thêm các khu vực tiện ích con tùy chỉnh, chúng tôi cần đề cập rằng đây là một chủ đề nâng cao. Do đó, tùy thuộc vào kiến thức WordPress trước đây của bạn, bạn có thể cần tiến hành một số nghiên cứu bổ sung hoặc thậm chí thuê hỗ trợ chuyên nghiệp. Tuy nhiên, nếu bạn chọn tiếp tục, chúng tôi khuyên bạn nên tạo bản sao lưu trang web trước. Chúng tôi đã chia nhỏ quy trình thành các bước nhỏ hơn mà bạn nên tuân thủ cẩn thận. Các bước này được kèm theo giải thích kỹ lưỡng và kết hợp với một số mẹo và ví dụ hữu ích ở gần cuối bài viết. Vì vậy, không chần chừ thêm nữa, chúng ta hãy bắt đầu Sử dụng các tùy chọn dành riêng cho chủ đề để thêm các khu vực tiện íchCách dễ nhất để thêm các khu vực tiện ích con tùy chỉnh là sử dụng các tùy chọn chủ đề tích hợp sẵn nếu chủ đề của bạn có chúng. Ví dụ: tất cả các chủ đề WordPress cao cấp của chúng tôi đều có tùy chọn như vậy. Bạn có thể điều tra xem chủ đề của mình có các tính năng tương tự hay không bằng cách điều hướng đến Giao diện > Tiện ích. Kiểm tra xem có tùy chọn hoặc trường nào để tạo/thêm khu vực tiện ích tùy chỉnh không. Trong các ảnh chụp màn hình bên dưới, chúng tôi đã sử dụng chủ đề Manon làm ví dụ để thêm các khu vực tiện ích con tùy chỉnh bằng các tùy chọn của chủ đề. Trong đó, phần bạn cần được đặt tên đơn giản là Khu vực tiện ích tùy chỉnh và nằm gần phần dưới cùng bên phải của màn hình Trong trường hợp đó, tất cả những gì bạn cần làm để thêm khu vực tiện ích tùy chỉnh là chèn tên của khu vực tiện ích mới của bạn và nhấn nút Thêm khu vực tiện ích. Sau đó, một khu vực tiện ích con trống sẽ xuất hiện ở cuối danh sách khu vực tiện ích con hiện có Các khu vực tiện ích tùy chỉnh rất giống với các khu vực mặc định. Điều chính làm nên sự khác biệt của chúng là tùy chọn xóa khu vực tùy chỉnh của bạn bằng cách nhấn vào X ở góc bên phải. Sau khi tạo khu vực widget, bạn có thể thêm widget từ phần Available Widgets bên trái bằng cách kéo thả bình thường Khi khu vực widget mới của bạn và nội dung của nó đã sẵn sàng, điều duy nhất còn lại là làm cho nó hiển thị ở vị trí bạn muốn. Tùy thuộc vào vị trí đó, bạn cần sửa đổi các tùy chọn khác nhau trong chủ đề. Ví dụ: nếu bạn muốn sử dụng khu vực tiện ích con mới tạo làm thanh bên trên các danh mục và thẻ blog của mình, bạn có thể làm như vậy bằng cách điều chỉnh các tùy chọn thích hợp trong phần Tùy chọn chủ đề > Blog > Danh sách blog. Bạn có thể chọn thủ công khu vực tiện ích con tùy chỉnh làm thanh bên của mình trên các trang lưu trữ (danh mục và thẻ) bằng cách sử dụng trình đơn thả xuống, như minh họa trong ảnh chụp màn hình bên dưới Tương tự, bạn có thể điều chỉnh bố cục của thanh bên, nghĩa là vị trí và chiều rộng của thanh bên, bằng cách điều chỉnh tùy chọn Bố cục thanh bên cho Trang Lưu trữ, tùy chọn này cũng được đánh dấu trên ảnh chụp màn hình. Bạn cũng có thể đặt khu vực tiện ích tùy chỉnh làm thanh bên trên một bài đăng blog. Để làm như vậy, bạn cần xác định vị trí và mở bài đăng đã chọn, sau đó tìm tập hợp các tùy chọn, tương đương với các tùy chọn ở trên, thuộc về bài đăng đó. Theo logic tương tự như trước đó, các tùy chọn đó sẽ nằm trong phần Bài đăng chủ đề (trong trường hợp của chúng tôi là phần Bài đăng cạnh). Ở đó, bạn sẽ tìm thấy các tùy chọn bố cục thanh bên và thanh bên áp dụng cho bài đăng cụ thể mà bạn đã mở Trước khi chuyển sang phần tiếp theo, chúng ta nên làm rõ một điều—sự khác biệt giữa thanh bên và khu vực tiện ích. Giải thích ngắn gọn là không có sự khác biệt và hai thuật ngữ đó có thể được sử dụng thay thế cho nhau. Lý do là trong những năm đầu của WordPress, chỉ có thanh bên tồn tại. Tuy nhiên, khi mã WordPress được phát triển, tùy chọn thêm tiện ích con vào đầu trang, chân trang hoặc các khu vực do chủ đề xác định khác đã trở nên khả thi. Do đó, thuật ngữ khu vực widget đã ra đời, đề cập đến tất cả các khu vực mà bạn có thể chèn widget. Mặc dù ngày nay thuật ngữ mới đang phổ biến, nhưng bạn cũng có thể bắt gặp việc sử dụng thuật ngữ thanh bên cho tất cả các lĩnh vực đó, đặc biệt là giữa các nhà phát triển Chủ đề Qi cao cấpXem thêmTạo mã tùy chỉnh để thêm các khu vực widgetNếu chủ đề của bạn thiếu các tùy chọn được mô tả trước đây hoặc đơn giản là bạn muốn linh hoạt hơn, mã hóa tùy chỉnh để tạo các khu vực tiện ích bổ sung là cách tốt nhất. Vì chủ đề hơi chuyên sâu về mã hóa, chúng tôi khuyên bạn nên tìm thêm sự trợ giúp của nhà phát triển nếu bạn chưa quen với việc viết mã. Dù bạn chọn làm gì, chúng tôi đã chia quy trình thành ba bước đơn giản để bạn dễ dàng thực hiện hơn. Những bước đó là. đăng ký khu vực widget, chèn widget và hiển thị khu vực widget trên trang web. Chúng tôi cũng bao gồm một số mẹo bổ sung trong phần sau phần này
Bước đầu tiên để thêm các khu vực tiện ích vào trang web WordPress của bạn là đăng ký. Mọi khu vực tiện ích phải được đăng ký trước bằng hàm register_sidebar. Điều này yêu cầu chèn một mã tương tự như mã được đưa ra bên dưới bên trong các hàm. tập tin php của chủ đề của bạn function register_custom_widget_area() {
register_sidebar(
array(
'id' => 'new-widget-area',
'name' => esc_html__( 'My new widget area', 'theme-domain' ),
'description' => esc_html__( 'A new widget area made for testing purposes', 'theme-domain' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<div class="widget-title-holder"><h3 class="widget-title">',
'after_title' => '</h3></div>'
)
);
}
add_action( 'widgets_init', 'register_custom_widget_area' );Chỉnh sửa các chức năng của chủ đề của bạn. php yêu cầu sử dụng FTP, vì vậy bạn có thể muốn đọc về điều đó trước khi tiếp tục. Khi bạn đã sẵn sàng, bạn có thể kiểm tra danh sách các đối số mà hàm register_sidebar có thể có cùng với phần giải thích của chúng Đó là những điều sau đây
Sau khi đăng ký, bước thứ hai sẽ rất quen thuộc với bất kỳ người dùng WordPress nào. Nó liên quan đến việc kéo và thả các tiện ích bên trong khu vực tiện ích mới được tạo. Để thực hiện việc này, hãy điều hướng đến Giao diện > Widget, tìm khu vực tiện ích bạn đã tạo và thêm các tiện ích bạn muốn vào đó
Tuy nhiên, ngay cả sau khi bạn đăng ký khu vực tiện ích con và đảm bảo rằng khu vực đó không trống, khu vực tiện ích con vẫn không tự động hiển thị trên trang web của bạn. Để nó xuất hiện, bạn cần thêm mã bổ sung “gọi” thanh bên cụ thể, tôi. e. khu vực widget mà bạn đã tạo. Mã bạn cần chèn tương tự như mã này <?php if ( is_active_sidebar( 'new-widget-area' ) ) : ?> <div id="secondary-sidebar" class="new-widget-area"> <?php dynamic_sidebar( 'new-widget-area' ); ?> </div> <?php endif; ?> Bạn cần đặt mã này bên trong một trong các tệp mẫu của chủ đề. Tệp bạn sử dụng phụ thuộc hoàn toàn vào nơi bạn muốn khu vực tiện ích mới của mình hiển thị. Các lựa chọn phổ biến nhất là thanh bên. php, tiêu đề. php hoặc chân trang. tập tin php. Khi bạn chọn tệp bạn sẽ sử dụng, bạn có thể xem xét các thành phần của mã mà bạn cần chèn Hàm dynamic_sidebar chịu trách nhiệm hiển thị vùng widget. Nó chấp nhận tên hoặc id đã đăng ký trước đó của khu vực widget làm tham số hợp lệ. Việc bọc khu vực tiện ích bằng thẻ div là không cần thiết, nhưng chúng tôi khuyên bạn nên làm như vậy vì nó làm cho HTML của các trang của bạn có cấu trúc hơn. Hơn nữa, bạn cũng có thể thêm id hoặc lớp vào các div đó. Điều này sẽ làm cho cách điệu nội dung đó dễ dàng hơn nhiều sau đó. Cuối cùng, bằng cách bọc thêm mã bằng thẻ điều kiện is_active_sidebar, chúng tôi đảm bảo khu vực tiện ích chỉ được hiển thị nếu nó có các tiện ích được chèn vào Chủ đề Qode. Chọn hàng đầuXem bộ sưu tậpCầu Chủ đề WordPress đa mục đích sáng tạo X-tốc-khôm Một chủ đề đa khái niệm thực sự Bắt đầu làm đi Chủ đề kinh doanh khởi nghiệp mới Mẹo bổ sungSử dụng các bước được mô tả ở trên, bây giờ bạn sẽ có một khu vực tiện ích con tùy chỉnh với chức năng cơ bản. Tuy nhiên, nếu muốn, bạn có tùy chọn để cải thiện một số thứ. Hai điểm rõ ràng nhất mà bạn có thể muốn giải quyết là hạn chế khả năng hiển thị của khu vực tiện ích đã thêm và cải thiện cách điệu của nó. Chúng tôi sẽ bao gồm cả hai dưới đây Sử dụng thẻ điều kiệnMột số khu vực widget có thể được sử dụng trên mọi trang, trong khi những khu vực khác chỉ trên một số trang được chọn. Ví dụ: bạn có thể chỉ muốn hiển thị một thanh bên cụ thể trên một loại trang nhất định (e. g. danh mục bài viết). Các cài đặt và chức năng này thường đạt được thông qua việc sử dụng các tùy chọn chủ đề trong trường hợp khu vực tiện ích con mặc định. Tuy nhiên, để đạt được điều tương tự cho các khu vực tiện ích mà bạn đã tạo bằng mã, bạn cần sử dụng các thẻ và câu lệnh có điều kiện. Chúng tôi sẽ chỉ cho bạn các bước cũng như một số ví dụ về thẻ điều kiện sử dụng chủ đề Cevian ví dụ
if ( is_single( array( '831', '1193') ) && is_active_sidebar( 'new-widget-area' ) ) { ?>
<div id="secondary-sidebar" class="new-widget-area">
<?php dynamic_sidebar( 'new-widget-area' ); ?>
</div>
<?php }Đoạn mã trên hiển thị khu vực widget mới mà bạn đã tạo nếu nó có các widget được chèn vào. Và khu vực tiện ích được đặt để chỉ hiển thị trên các bài đăng có ID là 831 và 1193. Bạn có thể tìm ra ID bài đăng của chúng tôi bằng cách sử dụng URL của bài đăng. Khi bạn đang chỉnh sửa một bài đăng, phần URL ngay sau “post=” sẽ hiển thị ID của bài đăng Bạn có thể đặt cùng một mã này trong thanh bên. php, ngay trước mã hiển thị thanh bên chủ đề mặc định. Trong trường hợp đó, bạn có thể có một thanh bên gồm hai phần và kết quả sẽ giống như ảnh chụp màn hình bên dưới
function portfolio_after_content_widget_area() {
if ( is_singular( 'portfolio-item' ) && is_active_sidebar( 'new-widget-area' ) ) { ?>
<div id="secondary-sidebar" class="new-widget-area">
<?php dynamic_sidebar( 'new-widget-area' ); ?>
</div>
<?php }
}
add_action( 'cevian_select_action_portfolio_page_after_content', 'portfolio_after_content_widget_area' );Mục đích của mã này là chỉ hiển thị khu vực tiện ích đã tạo trước đó trên các mục danh mục đầu tư nếu nó có các tiện ích bên trong nó. Trong trường hợp này, một mục danh mục đầu tư đóng vai trò là loại bài đăng tùy chỉnh mà một chủ đề có thể có. Tuy nhiên, đoạn mã này khác với các ví dụ trước ở chỗ bạn nên chèn nó vào bên trong hàm. php của chủ đề của bạn. Đó là bởi vì chức năng đã được viết—portfolio_after_content_widget_area “hook” vào một hook hành động thuộc chủ đề Cevian có tên là cevian_select_action_portfolio_page_after_content. Sử dụng hook và bộ lọc là cách được khuyến nghị, thân thiện với nhà phát triển để thêm các chức năng tùy chỉnh vào chủ đề bạn đang sử dụng. Nói chung, vì đây là một chủ đề khá nâng cao, chúng tôi khuyên bạn nên tiến hành nghiên cứu bổ sung trước khi tiếp tục. Hơn nữa, ngoài việc sử dụng các hook dành riêng cho chủ đề, bạn cũng có thể sử dụng một trong các hook mặc định của WordPress. Tuy nhiên, nếu bạn dự định sử dụng mã được đưa ra trong ví dụ, đừng quên thay thế hook hành động cevian_select_action_portfolio_page_after_content bằng hook phù hợp nhất với nhu cầu của bạn, cho dù đó là hook mặc định của WordPress hay một hook dành riêng cho chủ đề bạn đang sử dụng Đây là một ví dụ về kết quả có thể trông như thế nào Cách điệu các khu vực tiện ích đã tạo bằng CSSTùy thuộc vào các tiện ích bạn đặt bên trong khu vực tiện ích mới hoặc vị trí của nó trên trang, vẫn có thể có những điều bạn cần giải quyết. Những vấn đề này chủ yếu là phong cách. Điều chỉnh phần đệm hoặc lề, căn chỉnh văn bản hoặc một số cài đặt kiểu chữ là những điều đầu tiên bạn nghĩ đến. Và tất cả những điều này có thể được giải quyết bằng CSS. Để tạo CSS đó, bạn cần kiểm tra trang có thể tìm thấy nội dung của khu vực tiện ích con mới của bạn. Bạn có thể làm điều đó bằng cách nhấp chuột phải vào một nơi nào đó trên trang (lý tưởng nhất là trên một trong các tiện ích bạn đã thêm) rồi chọn tùy chọn Kiểm tra từ menu mở ra Trong cửa sổ mở ra, từ tab Thành phần, bạn cần tìm khu vực tiện ích mà bạn đã thêm. Sau đó viết CSS cho các widget ở đó. Nói chung, CSS bạn viết phải có định dạng sau your-css-selector{
// CSS rules go here
}Phần khó khăn là tìm đúng bộ chọn CSS. Đây là lý do tại sao nên gói mã vùng widget bằng các div có một lớp hoặc id tùy chỉnh nhất định. Nó làm cho nhiệm vụ tìm một bộ chọn CSS phù hợp dễ dàng hơn nhiều. Sử dụng mã ví dụ của chúng tôi ở trên, chúng tôi có thể chỉ cần khởi động bộ chọn CSS của mình bằng #secondary-sidebar hoặc. new-widget-khu vực. Điều này sẽ đảm bảo rằng toàn bộ khu vực tiện ích tùy chỉnh hoặc một số tiện ích bên trong nó bị ảnh hưởng Trong trường hợp bạn không thể theo dõi phần cuối cùng của bài viết này hoặc bạn chỉ muốn cải thiện kiến thức CSS của mình, bạn có thể tìm hiểu thêm về bộ chọn CSS và cách sử dụng CSS nói chung trước khi tùy chỉnh khu vực tiện ích con mới của mình. Điều này sẽ rất xứng đáng với thời gian bạn đã đầu tư, vì các chỉnh sửa CSS nhỏ sẽ cho phép bạn sửa đổi giao diện của bất kỳ khu vực tiện ích con nào bạn tạo để mang lại cho khu vực tiện ích đó một thứ gì đó đặc biệt sẽ khiến khách truy cập trang web của bạn phải kinh ngạc. Suy nghĩ cuối cùngCác khu vực widget là một phần rất quan trọng của mọi trang web WordPress, vì chúng được sử dụng để làm phong phú thêm thiết kế của trang web cũng như để thu hút sự chú ý của khách truy cập và tương tác với họ. Mặc dù mọi chủ đề đều có khu vực tiện ích con mặc định, việc thêm khu vực tiện ích con tùy chỉnh có thể làm cho trang web của bạn nổi bật giữa đám đông. Với các bước và mẹo được đưa ra trong bài viết được viết cẩn thận của chúng tôi, hy vọng bạn sẽ thấy nhiệm vụ thêm các khu vực tiện ích con tùy chỉnh dễ dàng hơn nhiều. Bây giờ, tất cả những gì bạn phải làm là quyết định nơi bạn muốn đặt khu vực tiện ích con mới của mình và những tiện ích con nào bạn muốn thêm vào đó để có được kết quả tốt nhất. Sử dụng một chút CSS tùy chỉnh để tạo phong cách cho nó và bạn sẽ dễ dàng tạo ra một trang web hấp dẫn |
