Giới thiệu

Hãy cùng khám phá Trình Chỉnh Sửa Trang Web, công cụ cho phép bạn thiết kế mọi thứ trên trang web của mình bằng các khối (blocks), từ tiêu đề đến chân trang và mọi thứ ở giữa. Để bắt đầu, hãy đến phần Giao diện và nhấp vào Trình chỉnh sửa. Điều này sẽ mở ra Trình Chỉnh Sửa Trang Web. Bên trái, bạn sẽ thấy thanh bên Chế độ xem trang web, công cụ này cho phép bạn khám phá các phần chính của trang web của bạn, bao gồm điều hướng, kiểu dáng, trang, mẫu và mẫu phần. Hướng dẫn này nhằm giúp bạn hiểu sâu về những yếu tố này.

Điều Hướng

Bắt đầu với điều hướng. Tại đây, bạn có thể nhanh chóng xem và điều chỉnh tất cả các menu của mình. Đây là trung tâm điều khiển của bạn cho việc quản lý menu. Bạn có thể thực hiện các chỉnh sửa đơn giản trực tiếp, chẳng hạn như sắp xếp lại. Khi bạn nhấp vào ba chấm dọc bên cạnh tên mục menu, bạn có thể đổi tên, sao chép và xóa mục khi cần. Nếu mở ở chế độ chỉnh sửa, bạn có thể thực hiện một số thay đổi mà không bị phân tâm. Và các cập nhật sẽ đồng bộ trên toàn trang web của bạn. Bạn có thể thêm các trang mới hoặc các mục menu khác khi nhấp vào biểu tượng cộng. Bạn sẽ nhận thấy rằng khối Điều hướng bị khóa trong khu vực này. Nếu bạn muốn thiết kế menu điều hướng của mình, bạn phải mở một mẫu hoặc phần mẫu mà nó thuộc về.

Kiểu Dáng (Styles)

Tiếp theo, hãy nói về kiểu dáng. Khi bạn chọn Kiểu dáng, bạn sẽ có thể duyệt qua các kết hợp kiểu dáng khác nhau có sẵn với chủ đề của bạn. Khi bạn nhấp vào Chỉnh sửa kiểu dáng, bạn có thể duyệt qua các kiểu dáng của bạn từ đây và sau đó thay đổi kiểu chữ, màu sắc và bố cục của trang web. Hãy xem cách nó hoạt động. Khi bạn nhấp vào Kiểu chữ, bạn có thể quản lý các cài đặt kiểu chữ cho văn bản, liên kết, tiêu đề, chú thích và nút. Một tính năng mới tuyệt vời là bạn hiện có quyền truy cập vào thư viện phông chữ. Dưới Phông chữ, chúng tôi sẽ thấy các phông chữ đã được thêm vào chủ đề của chúng tôi. Nhưng khi nhấp vào Quản lý phông chữ, bạn có thể cài đặt, gỡ bỏ và kích hoạt phông chữ địa phương và Google trên toàn trang web của bạn với bất kỳ chủ đề khối nào. Khi bạn nhấp vào Cài đặt Phông chữ, bạn có thể cài đặt bất kỳ phông chữ Google nào trên trang web của bạn và nhấp vào Tải lên nếu bạn muốn tải lên một phông chữ từ máy tính của mình. Đảm bảo bạn có quyền sử dụng bất kỳ phông chữ nào bạn tải lên. Dưới Kiểu chữ, chúng tôi sẽ thấy màu sắc. Tại đây, bạn cũng có thể thay đổi màu sắc cho các phần tử toàn cầu khác nhau trên trang web của bạn. Khi chúng tôi chuyển đến Bố cục, bạn sẽ nhận thấy bạn thậm chí còn có quyền kiểm soát các yếu tố như khoảng cách và khoảng cách giữa các khối.

Sổ Tay Kiểu Dáng (Style Book)

Nếu bạn nhìn xuống bên dưới, bạn có thể tùy chỉnh giao diện của các khối cụ thể cho toàn bộ trang web của bạn. Để xem cách các khối này sẽ thay đổi nếu bạn chỉnh sửa chúng, hãy vào Sổ Tay Kiểu Dáng của trang web của bạn. Bạn sẽ thấy có một biểu tượng mắt nhỏ ở trên cùng. Sổ Tay Kiểu Dáng cho phép người dùng xem trước mọi khối có thể được chèn vào trang web của bạn. Nó cung cấp cho bạn cái nhìn tổng quan về cách các kiểu dáng toàn cầu sẽ ảnh hưởng đến bất kỳ khối nào được hiển thị mà không cần người dùng chèn các khối đó vào một mẫu. Cũng cần lưu ý rằng kiểu dáng của một khối có thể được điều chỉnh trong Sổ Tay Kiểu Dáng. Hãy cập nhật khối Nút chẳng hạn, bằng cách thay đổi màu nền và chữ cái thành chữ hoa. Nếu bạn thích những gì bạn thấy, bạn có thể tiếp tục và nhấp vào Lưu. Xin lưu ý rằng việc thay đổi một khối cá nhân trong Sổ Tay Kiểu Dáng sẽ ưu tiên hơn các kiểu dáng toàn cầu mà bạn đã thiết lập.

Phiên Bản Kiểu Dáng (Style Revisions)

Khi chúng ta ở đây, chúng ta cũng cần nói về phiên bản kiểu dáng. Hãy nhấp vào Phiên bản kiểu dáng bên cạnh biểu tượng Sổ Tay Kiểu Dáng. Tính năng phiên bản kiểu dáng sẽ mở ra khi bạn chỉnh sửa một mẫu trong Sổ Tay Kiểu Dáng. Tính năng phiên bản kiểu dáng thêm một cách trực quan để duyệt qua các thay đổi kiểu dáng của bạn theo thời gian, và bạn có thể dễ dàng quay lại phiên bản trước nếu bạn tìm thấy một kiểu dáng mà bạn thích hơn hoặc muốn quay lại phiên bản trước. Bạn chỉ cần chọn phiên bản và sau đó nhấp vào Áp dụng. Trong ví dụ này, tôi đang chỉnh sửa một mẫu và sẽ làm theo quy trình tương tự. Tôi sẽ mở phiên bản kiểu dáng, chọn một kiểu dáng trước đó và sau đó nhấp vào Áp dụng để quay lại. Khi bạn nhấp vào ba chấm dọc bên cạnh kiểu dáng, bạn có thể đặt lại kiểu dáng và thêm CSS bổ sung.

Trang (Pages)

Dưới Kiểu dáng, chúng ta có thể đi đến Trang để tạo và xuất bản các trang. Để thêm một trang mới, hãy nhấp vào biểu tượng cộng bên cạnh trang và tạo một bản nháp. Nhưng bạn cũng có thể, tất nhiên, tạo một trang mới khi bạn ở trong Bảng điều khiển hoặc WP Admin. Tiếp theo, hãy mở một trong các trang hiện có của chúng tôi, trang Giới thiệu về tôi. Khi bạn mở một trang, điều quan trọng là nhớ thêm nội dung vào Khối Nội dung. Nói cách khác, Khối Nội dung là ngôi nhà hoặc container cho tất cả nội dung của bạn. Điều thứ hai cần nhớ là bạn không thể tùy chỉnh tiêu đề và chân trang khi chỉnh sửa một trang. Điều đó hoàn toàn thuộc phần quản lý mẫu. Nếu bạn nhấp vào tiêu đề, bạn sẽ nhận được một thông báo nói rằng, ‘Chỉnh sửa mẫu của bạn để chỉnh sửa khối này.’ Nếu bạn muốn chỉnh sửa mẫu đã được gán cho trang này, bạn có thể nhấp vào Chỉnh sửa Mẫu. Điều này sẽ đưa bạn đến mẫu trang của bạn trong ví dụ này. Tại đây, bạn có thể chỉnh sửa tiêu đề và chân trang của bạn. Bạn sẽ không thể thêm nội dung vào một mẫu. Nội dung, tất nhiên, được thêm vào các bài đăng và trang. Khối Nội dung chỉ là một vị trí giữ chỗ trong ngữ cảnh này.

Mẫu (Templates)

Điều này dẫn chúng ta đến chủ đề tiếp theo, đó là Mẫu. Mẫu cung cấp cấu trúc cho cách nội dung của bạn được hiển thị. Khi bạn chọn Mẫu, bạn sẽ nhận thấy một loạt các mẫu đi kèm với chủ đề của bạn, các mẫu tích hợp sẵn. Ví dụ, mẫu trang hiển thị một trang đơn, mẫu chỉ mục là một mẫu dự phòng, hoặc mẫu bài viết đơn hiển thị bố cục của các bài viết đơn. Và ngay dưới cùng, chúng ta sẽ thấy bất kỳ mẫu tùy chỉnh nào. Khi bạn nhấp vào biểu tượng cộng bên cạnh Mẫu, bạn có thể thêm nhiều mẫu mới, thậm chí là mẫu tùy chỉnh có thể áp dụng cho bất kỳ bài đăng hoặc trang nào. Hãy mở mẫu trang để hiểu rõ hơn về cách một mẫu hoạt động. Một mẫu cung cấp cấu trúc. Một mẫu thường bao gồm một phần tiêu đề và một phần chân trang.

Khối Nội dung kéo nội dung từ trang hoặc bài viết được gán cho mẫu. Vì vậy, một mẫu chỉ được sử dụng để chỉnh sửa bố cục hoặc thiết kế của trang, tức là tiêu đề, chân trang và thậm chí thanh bên. Trình Chỉnh Sửa Trang Web, do đó, tạo sự phân biệt rõ ràng giữa việc chỉnh sửa mẫu và trang. Bạn có thể chỉnh sửa tiêu đề và chân trang của bạn trong mẫu. Một trong những tùy chọn bạn cũng có là nhấp vào ba chấm dọc và chọn Thay thế Tiêu đề. Sau đó, bạn có thể thay thế tiêu đề hiện tại của bạn bằng một trong các phần mẫu tiêu đề hiện có của bạn hoặc các mẫu tiêu đề đi kèm với chủ đề của bạn. Một tùy chọn khác là chọn tiêu đề của bạn và sau đó nhấp vào Chỉnh sửa. Điều này sẽ cho phép bạn chỉnh sửa tiêu đề hoặc chân trang của bạn trong chế độ chỉnh sửa mẫu mà không bị phân tâm.

Gán Mẫu

Để gán một mẫu mới cho một trang hoặc bài viết, mở nội dung liên quan, trong trường hợp này là trang Giới thiệu về tôi, và sau đó mở cài đặt thanh bên bên phải. Bên cạnh Mẫu, nhấp vào tên của mẫu, chọn Thay thế Mẫu, và sau đó bạn có thể chọn một mẫu tùy chỉnh để gán cho trang hoặc bài viết của bạn.

Quản lý Mẫu

Cũng đáng đề cập rằng khi bạn nhấp vào Quản lý tất cả các mẫu và sau đó chọn Chỉnh sửa Hàng loạt, bạn có thể khám phá và lọc các mẫu của mình qua chế độ xem bảng hoặc lưới. Và khi bạn chọn Chỉnh sửa Hàng loạt một lần nữa, có nhiều tùy chọn lọc hơn. Xin lưu ý rằng bạn có thể khám phá và lọc các trang và phần mẫu theo cách chính xác như vậy.

Mẫu (Patterns)

Cuối cùng, hãy nói về Mẫu. Ở trên cùng, bạn có thể xem tất cả các mẫu có sẵn. Khi bạn chọn Mẫu của tôi, bạn có thể tạo và quản lý các mẫu tùy chỉnh của riêng bạn, cả đồng bộ và không đồng bộ. Dưới Mẫu của tôi, chúng ta có thể xem tất cả các mẫu tùy chỉnh của chúng tôi và các mẫu đi kèm với chủ đề của chúng tôi trong các danh mục liên quan. Dưới Phần Mẫu, chúng ta cũng có thể tạo và quản lý các phần tiêu đề, chân trang và mẫu chung của chúng tôi. Các phần mẫu về cơ bản là các mẫu. Chúng là các thành phần tái sử dụng đồng bộ có thể được sử dụng trên toàn bộ trang web của bạn.

Mẫu Tùy Chỉnh

Hãy bắt đầu với Mẫu của tôi. Để tạo mẫu tùy chỉnh của bạn, nhấp vào Chèn bên cạnh mẫu và sau đó chọn Tạo Mẫu. Sau khi đặt tên, bạn có thể chọn để thêm nó vào danh mục liên quan và sau đó quyết định đồng bộ hoặc không đồng bộ mẫu của bạn. Một mẫu đồng bộ sẽ đồng bộ trên toàn bộ trang web của bạn, nghĩa là nếu bạn thay đổi mẫu của bạn ở một nơi, nó sẽ cập nhật bất cứ nơi nào nó được sử dụng. Bạn cũng có thể tắt tùy chọn này nếu bạn thích có một mẫu không đồng bộ. Các mẫu không đồng bộ chỉ là các mẫu thông thường có thể được chỉnh sửa độc lập. Khi bạn trở lại khu vực mẫu tùy chỉnh của bạn, bạn sẽ nhận thấy rằng các mẫu đồng bộ có biểu tượng tím và các mẫu không đồng bộ thì không. Tiếp theo, bạn sẽ nhận thấy rằng các mẫu đi kèm với chủ đề của bạn bị khóa và bạn không thể chỉnh sửa chúng. Nhưng khi bạn nhấp vào ba chấm dọc bên dưới một mẫu, bạn có thể sao chép nó vào khu vực Mẫu của tôi.

Phần Mẫu

Ở dưới cùng, chúng ta có thể tạo và quản lý các phần tiêu đề, chân trang và mẫu chung của chúng tôi. Bạn có hai tùy chọn ở đây. Bạn có thể tạo các tiêu đề và chân trang tùy chỉnh của riêng bạn hoặc tùy chỉnh các mẫu phần đi kèm với chủ đề của bạn. Để tạo phần mẫu của riêng bạn, nhấp vào biểu tượng cộng ở trên cùng bên cạnh mẫu và chọn Tạo phần mẫu. Khi bạn thêm một phần mẫu mới, bạn có thể chọn giữa các phần tiêu đề và chân trang chung. Các phần mẫu chung không gắn liền với bất kỳ khu vực cụ thể nào, vì vậy hãy nhớ đặt tên cho chúng một cách mô tả. Khi bạn mở một phần mẫu từ đây, bạn sẽ có thể chỉnh sửa và thay đổi phần mẫu của bạn trong chế độ chỉnh sửa mẫu mà không bị phân tâm. Bạn cũng có thể mở mẫu liên quan và, trong trường hợp này là mẫu tùy chỉnh của tôi, và sau đó bạn có thể chỉnh sửa phần tiêu đề hoặc chân trang của bạn từ trong mẫu. Như đã trình bày trước đó, bạn có thể dễ dàng thay thế một trong các tiêu đề hoặc chân trang của bạn bằng một mẫu hoặc một phần mẫu hiện có từ thư viện.

Bảng Điều Khiển Lệnh (Command Palette)

Cuối cùng, tôi cũng muốn làm nổi bật một tính năng cực kỳ hữu ích gọi là Bảng Điều Khiển Lệnh sẽ tiết kiệm rất nhiều thời gian và giúp bạn di chuyển xung quanh Trình Chỉnh Sửa Trang Web một cách hiệu quả hơn. Bảng Điều Khiển Lệnh cho phép bạn thực hiện các nhiệm vụ và điều hướng trong Trình Chỉnh Sửa Trang Web một cách nhanh chóng. Bạn có thể, chẳng hạn, gõ ‘Mới’ để tạo một trang hoặc mẫu hoặc chỉ tên của khu vực bạn muốn đến. Ví dụ, mẫu để quản lý tất cả các mẫu của tôi. Bạn có thể truy cập Bảng Điều Khiển Lệnh bằng cách sử dụng phím tắt command+k trên Mac hoặc control+k trên Windows. Bạn cũng sẽ tìm thấy nó trong thanh bên chế độ xem trang web bằng cách nhấp vào biểu tượng tìm kiếm. Hoặc bạn có thể chỉ cần nhấp vào thanh tiêu đề.

Kết Luận

Đó là tổng quan ngắn gọn về những gì bạn có thể đạt được khi sử dụng Trình Chỉnh Sửa Trang Web.

Thực Hành

Hãy vào WordPress Playground và hoàn thành các nhiệm vụ sau để kiểm tra kiến thức của bạn:

Chọn một kết hợp kiểu dáng khác đi kèm với chủ đề của bạn.
Thêm một Phông chữ Google vào thư viện của bạn dưới mục Kiểu chữ.
Gán một mẫu tùy chỉnh cho trang Mẫu, chẳng hạn như Trang với Thanh bên. Bạn có thể thực hiện điều này khi mở một trang từ trong bảng điều khiển hoặc Trình Chỉnh Sửa Trang Web.

3.1 – Giới thiệu về trình chỉnh sửa trang web (site editor)

You must be logged in to access this course