Cách thêm hình ảnh trong WordPress Sidebar

Thong_Huynh · 24 Tháng Tám 2021 19:05

Trong bố cục chủ đề WordPress, thanh bên sẽ hiển thị một số thành phần như tìm kiếm, lưu trữ và hơn thế nữa. Sự hiện diện và định vị của các thành phần này có thể do quản trị viên xây dựng. Chúng tôi có thể thêm nhiều thành phần hơn vào thanh bên bằng cách thực hiện các thay đổi ở cấp độ chủ đề. Hãy để chúng tôi các cách thêm hình ảnh vào thanh bên WordPress.

Tại sao lại là thanh bên? Trong bố cục trang web, thanh bên là một phần quan trọng được chú trọng hơn so với các thành phần bố cục khác. Vì vậy, mọi người thường thêm nội dung chiếm ưu thế vào thanh bên để thu hút người dùng. Nội dung đồ họa như hình ảnh, biểu tượng, biểu đồ thường tập trung hơn và cũng được sử dụng để truyền tải bản tóm tắt nhanh chóng đến người dùng.

Nếu chủ đề trang web WordPress của bạn hỗ trợ tiện ích thì bạn có thể thêm hình ảnh vào thanh bên bằng các tiện ích của thanh bên. Nếu không, chúng ta cần thêm đánh dấu hình ảnh vào tệp chủ đề sidebar.php theo cách thủ công. Đây là những cách để thêm hình ảnh trong thanh bên của WordPress.

Bằng cách sử dụng các widget thanh bên của WordPress
Bằng cách tạo một widget tùy chỉnh
Bằng cách thay đổi tệp chủ đề hoặc ghi đè thanh bên bằng chủ đề con

Thêm hình ảnh bằng WordPress Sidebar Widgets

Các chủ đề WordPress hỗ trợ widget sẽ chứa nhiều vùng chứa widget khác nhau. Trong số đó, chúng ta phải xác định vị trí các vùng chứa widget thanh bên của trang web. Quản trị viên có thể tạo cấu hình widget WordPress bằng cách điều hướng qua menu quản trị Appearance -> Widgets .

Trong các phần tiếp theo, chúng ta sẽ xem cách thêm hình ảnh vào thanh bên bằng các widget khác nhau. Cài đặt tiện ích con sẽ chứa nhiều thẻ tiện ích con có thể kéo để thả vào vùng chứa tiện ích con Blog Sidebar.

Sử dụng tiện ích hình ảnh WordPress

Đầu tiên, chúng ta phải kéo thẻ Image Widget và thả nó vào vùng chứa Blog Sidebar . Sử dụng tiện ích WordPress Image, chúng ta có thể thêm một hình ảnh với tiêu đề thông số kỹ thuật, liên kết mục tiêu. Ngoài ra, các tùy chọn chỉnh sửa / thay thế hình ảnh có sẵn trong tiện ích này. Ảnh chụp màn hình bên dưới hiển thị bảng cài đặt tiện ích Hình ảnh.

Sử dụng tiện ích văn bản

Nếu chúng ta muốn thêm nhiều văn bản đa dạng thức với hình ảnh sẽ được thêm vào thanh bên, thì tiện ích hình ảnh sẽ không phù hợp. Thay vào đó, bằng cách sử dụng bảng cài đặt tiện ích văn bản WordPress có chứa một trình soạn thảo văn bản tùy ý để tải lên các tệp phương tiện. Ngoài ra, nó còn chứa một tùy chọn để nhập tiêu đề.

Sử dụng tiện ích HTML tùy chỉnh

Sử dụng Tiện ích HTML tùy chỉnh, chúng tôi có thể thêm đánh dấu HTML được tạo thủ công vào trình chỉnh sửa. Kiểu sử dụng widget này sẽ phù hợp nếu chúng ta có script để hiển thị hình ảnh. Sử dụng cài đặt tiện ích này, chúng tôi cũng có thể tham chiếu đến đường dẫn hình ảnh bên ngoài đến thuộc tính nguồn.

Mở rộng chủ đề và tạo tiện ích con tùy chỉnh để kết xuất hình ảnh trên thanh bên

Nếu chủ đề hiện tại của bạn không hỗ trợ các widget, hãy đăng ký các widget với functions.php của chủ đề. Sau đó, tạo một widget tùy chỉnh để hiển thị hình ảnh trên thanh bên của WordPress. Trong hướng dẫn trước, chúng ta đã biết cách phóng đại chủ đề WordPress và tạo một tiện ích tùy chỉnh để xếp tiện ích đó vào mẫu.

Mã cho tiện ích hình ảnh thanh bên tùy chỉnh được hiển thị bên dưới. Thêm mã này vào function.php của chủ đề WordPress của bạn hoặc bất kỳ tệp bên ngoài nào. Nếu bạn đặt mã này trong một tệp bên ngoài, thì hãy đưa tệp bên ngoài vào mã nơi bạn gọi hành động WordPress để đăng ký tiện ích tùy chỉnh này.


/ *
 Tên plugin: Tiện ích con phân loại tùy chỉnh PhpPot
 URI của plugin: https://phppot.com
 Mô tả: Tiện ích thanh bên để hiển thị Hình ảnh
 Tác giả: Vincy
 URI của tác giả: https://phppot.com
 Phiên bản: 1.0.0
 * /

lớp Phppot_SideBar_Image_Widget mở rộng WP_Widget {
    function __construct () {
        cha :: __ construct (
            'SideBar_Image_Widget',
            'Tiện ích hình ảnh Phppot SideBar',
            mảng ('mô tả' => 'Tiện ích thanh bên để hiển thị Hình ảnh',)
            );
    }
    
    tiện ích hàm ($ args, $ instance) {
        $ title = apply_filters ('widget_title', $ instance ['title']);
        echo $ args ['before_widget'];
        echo $ args ['before_title']. "Giới thiệu về Đội ngũ của chúng tôi". $ args ['after_title'];
        echo "<img src = 'http: //localhost/wp/wp-content/uploads/2018/11/team.jpeg' alt = 'Nhóm' />";
        echo $ args ['after_widget'];
    }
}

Để đăng ký tiện ích tùy chỉnh này trên quá trình khởi tạo WordPress, móc tác vụ sau sẽ được sử dụng. Trước khi đăng ký tiện ích con tùy chỉnh, đường dẫn tệp lớp tiện ích con được bao gồm ở đầu đoạn mã.


$ templatePath = get_template_directory ();
request_once $ templatePath. "/widgets/class.custom-sidebar-image-widget.php";
...
...
function register_sidebar_image_widget () {
    register_widget ('Phppot_SideBar_Image_Widget');
}
add_action ('widgets_init', 'register_sidebar_image_widget');

Thêm đánh dấu hình ảnh vào Sidebar.php theo cách thủ công

Phương pháp này đôi khi làm cho công việc đơn giản để thêm một thành phần tùy chỉnh vào thanh bên. Thanh bên động với các tiện ích WordPress mặc định là các tiện ích tùy chỉnh phù hợp để xếp các thực thể WordPress như phân loại, các bài đăng liên quan hoặc để xây dựng và hơn thế nữa.

Để thêm hình ảnh vào thanh bên với tiêu đề và mô tả tối thiểu, chúng ta có thể thực hiện theo cách thủ công bằng cách thay đổi sidebar.php của chủ đề. Nếu bạn không muốn thay đổi chủ đề và có kế hoạch nâng cấp nó định kỳ, thì bạn có thể tạo một chủ đề con để ghi đè lên nội dung thanh bên của chủ đề.