Hướng dẫn thay đổi giao diện wordpress Informational

Một plugin miễn phí giúp chúng ta có thể dễ dàng sử dụng nhiều giao diện khác nhau cho một trang web bất kỳ, chúng ta có thể tùy chỉnh menu và widget trên từng giao diện, plugin đó chính là multiple themes.

Một điều tuyệt vời của plugin này là cho phép chúng ta sử dụng một giao diện bất kỳ cho một đường dẫn bất kỳ chứ không phải chỉ gói gọn vào category, tag, post hay page. Nó cho phép chúng ta sử dụng một giao diện khác dựa trên truy vấn hoặc một truy vấn nào đó với giá trị nào đó. Sau khi xem hướng dẫn cài đặt và hoàn tất quá trình, bạn sẽ thấy sự khác biệt giữa 2 giao diện trên webpage của bạn:

– Webpage với theme bạn chọn trên wordpress theme

– Webpage đã chỉnh sửa lại bằng plugin multiple themes

Cách sử dụng multiple themes

Để sử dụng plugin này trước tiên bạn phải chuẩn bị một giao diện webpage upload lên hosting đã cài đặt wordpress của bạn. Hướng dẫn cài đặt wordpress cho hosting có thể tham khảo tại đây: https://kienthuc.pavietnam.vn/article/Open-Source/Wordpress/Huong-dan-cai-dat-Wordpress-thu-cong-tren-host-PA-Viet-Nam–cPanel.html

Bước 1 : Trong giao diện wordpress bạn tiến hành cài đặt plugin như sau:

Để tìm plugin, các bạn truy cập vào Dashboard –> Plugins –> Add New

Hướng dẫn thay đổi giao diện wordpress	Informational

Khi vào đó, bạn cũng có thể tìm plugin thông qua tên bằng cách điền tên ở khung Search Plugins bên tay phải rồi Enter, hoặc xem danh sách các plugin thông qua các bộ lọc như Featured (nổi bật), Popular (thông dụng), Recommended (khuyên dùng).

Hướng dẫn thay đổi giao diện wordpress	Informational

Bước 2: Sau Khi cài đặt plugin thành công chúng ta sẽ tiến hành thiết lập tại Settings -> Multiple Themes plugin.

Hướng dẫn thay đổi giao diện wordpress	Informational

– Tại đây chúng ta sẽ có các phần bao gồm:

Settings: thiết lập cơ bản để chọn theme cho trang chủ, các trang con.

Site Aliases: Thiết lập các tên miền aliases để hỗ trợ plugin xác định đường dẫn, nếu bạn có sử dụng thêm parked domain để trỏ về website chính.

Advanced Settings: Thiết lập theme cho toàn trang, toàn post hay toàn page.

Theme Options: Hướng dẫn thiết lập menu, widget cho plugin này.

System Information: Thông tin hệ thống host đang chạy website.

Help: Hướng dẫn gửi yêu cầu hỗ trợ đến tác giả.

Hướng dẫn thay đổi giao diện wordpress	Informational

Bước 3: Để thiết lập một giao diện dùng riêng cho trang chủ, chúng ta sẽ vào phần Settings của plugin này và tìm mục Select Theme for Site Home, ở đây bạn sẽ chọn giao diện cần sử dụng cho trang chủ.

Hướng dẫn thay đổi giao diện wordpress	Informational

Sử dụng giao diện Hueman cho trang chủ. Ở đây plugin sẽ không phân biệt trang chủ bạn là một trang tĩnh hay danh sách các bài viết mới nhất, miễn đường dẫn là enigma của bạn.ltd là nó nhận đây là trang chủ.

Hướng dẫn thay đổi giao diện wordpress	Informational

Ở đây mình sẽ chọn giao diện chính cho home là enigma.

Bước 4: Thiết lập một giao diện khác cho trang phụ

Thiết lập giao diện riêng cho một category thì cũng vào mục Settings của plugin này và tìm mục For An Individual Page, Post or other non-Admin page, sau đó thêm đường dẫn của trang tại phần URL of Page, Post, Prefix or other và chọn giao diện cần kích hoạt.

Để tránh điều này, bạn có thể tạo một mẫu giao diện con (child theme), cho phép bạn tùy chỉnh nhiều tùy thích mà không có nguy cơ mất những thay đổi này khi cập nhật mẫu giao diện mẹ.

Chúng tôi sẽ hướng dẫn bạn từng bước của quy trình. Đầu tiên, hãy làm rõ một chút thuật ngữ.

Chủ đề Trẻ em Chính xác là gì?

Chủ đề con là một chủ đề WordPress đầy đủ chức năng kế thừa các chức năng và thuộc tính của nó từ một chủ đề khác — chủ đề mẹ của nó. Khi bạn tạo chủ đề con, bạn có thể tận dụng tất cả các tính năng của chủ đề mẹ mà không làm mất các tính năng này mỗi khi chủ đề mẹ nhận được bản cập nhật.

Có ba thành phần cơ bản mà bạn sẽ cần để tạo một chủ đề con và những thành phần này sẽ được đề cập chi tiết khi chúng ta thảo luận về cách tạo một chủ đề con theo cách thủ công.

Tuy nhiên, trước tiên, chúng tôi sẽ giới thiệu nhanh cách tạo chủ đề con bằng cách sử dụng trình tạo chủ đề con miễn phí và bằng cách sử dụng plugin.

Sẵn sàng? Hãy vào đó!

1. Cách tạo chủ đề con bằng Trình tạo chủ đề con

Đây có lẽ là phương pháp dễ nhất và đơn giản nhất. Tất cả những gì bạn phải làm là điều hướng đến trang web của trình tạo chủ đề con, nhập tên cho chủ đề con của bạn và thế là xong.

Hai trong số các trình tạo chủ đề trẻ em phổ biến hơn là Trình tạo chủ đề trẻ em Astra và Trình tạo chủ đề trẻ em , tạo các trình tạo chủ đề con cho chủ đề Astra phổ biến.

Hướng dẫn thay đổi giao diện wordpress	Informational

Chủ đề Astra là một chủ đề WordPress phổ biến, nhẹ và nhanh, phù hợp để xây dựng bất kỳ loại trang web nào. Đây cũng là một trong những chủ đề WordPress miễn phí hàng đầu của năm 2021 , vì vậy nó là một lựa chọn tốt để xây dựng trang web của bạn. Để sử dụng Astra Child Theme Generator, trước tiên bạn cần cài đặt chủ đề Astra.

Để sau đó tạo chủ đề con mới của bạn, chỉ cần đăng nhập vào Trình tạo chủ đề con Astra , nhập tên bạn muốn cho chủ đề con mới của mình, nhấp vào Tạo và thế là xong!

Chủ đề con mới của bạn sẽ tự động tải xuống dưới dạng thư mục zip. Cài đặt và kích hoạt nó như bạn làm với bất kỳ chủ đề nào khác.

2. Cách tạo chủ đề con bằng plugin

Phương pháp này gần như đơn giản như sử dụng trình tạo chủ đề con trực tuyến. Có rất nhiều plugin tạo chủ đề con nhưng chúng tôi khuyên bạn nên sử dụng một trong những tùy chọn phổ biến hơn— Trình cấu hình chủ đề con .

Hướng dẫn thay đổi giao diện wordpress	Informational

Để bắt đầu, hãy cài đặt và kích hoạt plugin từ kho lưu trữ WordPress. Trong bảng điều khiển bên trái, di chuột qua Công cụ , sau đó nhấp vào Chủ đề con .

Để tạo chủ đề con của bạn, hãy đánh dấu vào TẠO Chủ đề con mới , sau đó cuộn xuống và chọn chủ đề mẹ. Nhấn Phân tích và chờ kết quả. Nếu tất cả các tệp chủ đề của bạn theo thứ tự, bạn sẽ thấy các tùy chọn bổ sung trên màn hình. Bạn có thể bỏ qua hầu hết những điều này hoặc thực hiện các thay đổi nếu thích hợp.

Hướng dẫn thay đổi giao diện wordpress	Informational

Để làm cho chủ đề trẻ em của bạn trở nên sống động, chỉ cần nhấp vào nút Tạo Chủ đề trẻ em mới ở cuối màn hình, vậy là xong.

Điều hướng đến Giao diện> Chủ đề và chủ đề con mới của bạn sẽ hiển thị và sẵn sàng để kích hoạt.

Sử dụng trình tạo chủ đề con hoặc plugin tạo chủ đề con đều là những giải pháp tuyệt vời, dễ thực hiện và không yêu cầu kỹ năng kỹ thuật nâng cao. Tuy nhiên, nếu bạn muốn thành thạo và đóng một vai trò tích cực hơn trong việc tạo chủ đề con mới của mình, thì phương pháp tiếp theo là dành cho bạn.

3. Cách tạo chủ đề con theo cách thủ công

Tạo chủ đề con theo cách thủ công hấp dẫn hơn nhiều so với một trong hai phương pháp trước đó, nhưng nó vẫn tương đối đơn giản để thực hiện.

Bạn sẽ cần ba thành phần cơ bản: tệp chủ đề cho chủ đề con của bạn, biểu định kiểu style.css và tệp functions.php .

1. Tạo tệp chủ đề

Bạn có thể thực hiện việc này trong cPanel hoặc sử dụng FTP. Chúng tôi khuyên bạn nên sử dụng cPanel nếu dịch vụ lưu trữ của bạn cung cấp nó. Đăng nhập vào cPanel> Trình quản lý tệp> Tệp> Public_html> wp-content> chủ đề .

Hướng dẫn thay đổi giao diện wordpress	Informational

Nhấp vào nút + Thư mục từ menu trên cùng để tạo một thư mục mới. Bạn phải đặt tên này theo tên của chủ đề mẹ, thêm “-child” ở cuối. Ví dụ: nếu bạn đang sử dụng chủ đề Twenty Twenty-One, điều này sẽ giống như: “hai mươi hai mươi một đứa trẻ”.

2. Tạo tệp Style.css

Style.css là quy ước đặt tên WordPress mặc định cho các bảng định kiểu CSS. Đây là nơi tất cả CSS cho chủ đề con của bạn sẽ chuyển sang, nhưng bạn có thể tạm dừng việc tạo CSS cho đến khi bạn thiết lập đầy đủ chủ đề con của mình.

Để tạo tệp style.css , chỉ cần nhấp vào tùy chọn + Tệp từ menu trên cùng. Biểu định kiểu phải nằm trong thư mục chủ đề mới mà bạn vừa tạo. Trong tệp mới, hãy dán vào nhận xét sau:

/*  
Theme Name: Twenty Twenty One Child  
Theme URI: http://example.com/twenty-twenty-one-child/  
Description: Twenty Twenty One Child Theme  
Author: Jane Doe  
Author URI: http://example.com  
Template: twentytwentyone  
Version: 1.0.0  
License: GNU General Public License v2 or later  
License URI: http://www.gnu.org/licenses/gpl-2.0.html  
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready  
Text Domain: twentytwentyonechild  
*/  

Đây là một nhận xét và sẽ không được thực thi trong thời gian chạy, nhưng nếu không có nó, tệp biểu định kiểu CSS của bạn sẽ không hoạt động. Lưu tệp dưới dạng style.css .

3. Tạo một tệp Functions.php

Cũng giống như bạn đã thêm một tệp mới và gọi nó là style.cs s, hãy thêm một tệp mới và gọi nó là functions.php . Dán mã bên dưới:

  
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}  

?>

Đó là nó! Bây giờ bạn có tất cả ba thành phần cần thiết để chủ đề con của bạn hoạt động. Để hoàn thiện nó, hãy quay lại phần phụ trợ WordPress của bạn và kích hoạt chủ đề giống như cách bạn làm với bất kỳ chủ đề nào khác.

Bắt đầu với Chủ đề con WordPress

Chủ đề con là một cách hữu ích để thực hiện các thay đổi đối với chủ đề WordPress của bạn mà không phải lo lắng về các bản cập nhật cho chủ đề mẹ. Trong bài viết này, chúng tôi đã chỉ cho bạn ba phương pháp khác nhau, dễ sử dụng để tạo chủ đề con. Nếu tất cả những gì bạn muốn là tạo một số thiết kế tùy chỉnh cho các trang web của mình, thì một giải pháp thay thế hiệu quả là sử dụng trình tạo trang WordPress.