Tổng hợp các thuật ngữ cơ bản, phong cách và chủ đề WordPress | Togeppi
Tổng quan
Bài viết này được đăng với mục đích để bạn có thể dễ dàng tham khảo khi có phần nào không rõ trong các bài viết khác thông qua mục lục ở bên phải.
Bạn không cần phải xem toàn bộ từ đầu đến cuối, chỉ cần xác nhận một chút về chủ đề và phong cách, sau đó có thể kiểm tra nội dung khác khi gặp phần nào chưa quen trong bài viết sau. (Sẽ có liên kết được thêm vào sau)
Ngoài ra, nội dung ở đây sẽ được cập nhật định kỳ theo nhu cầu.
Chủ đề (Theme)
Trên trang quản trị WordPress, bạn sẽ thấy ở thanh bên trái mục Appearance – Themes.
Phiên bản tiếng Hàn có lẽ hiển thị phần Appearance là ‘Ngoại hình’, nhưng tôi sử dụng tiếng Hàn nên có vẻ bản dịch khó hiểu hơn, do đó, tôi vẫn sử dụng bằng tiếng Anh.
Vậy chủ đề là gì? WordPress không giống như các nền tảng như blog Naver. Nó là một công cụ giúp dễ dàng tạo dựng website hơn so với những phương thức trước đó.
Vì vậy, việc cài đặt WordPress không có nghĩa là sẽ có một khung sẵn có như blog Naver mà chỉ có thể đăng bài viết. Người dùng cần tự tay tạo ra mọi thứ.
Việc tạo ra mọi thứ ngay từ đầu có thể sẽ khó khăn chứ nhỉ? Đó chính là điều mà chủ đề giúp bạn.
Chủ đề cung cấp một khung cơ bản. Bạn có thể nhận một chủ đề mà mình thích và gắn nó vào, và sau đó tùy chỉnh theo ý thích của mình.
Dù bạn là người mới, chỉ cần áp dụng chủ đề, bạn có thể xây dựng một website hoạt động ở mức độ nhất định và có thể đăng bài viết.
Người dùng YouTube ‘RoalNam’ cũng hướng dẫn trên WordPress thông qua việc sử dụng chủ đề.
Bạn có thể nhấn vào add new trong mục Themes để tải xuống và áp dụng rất nhiều chủ đề. Có thể tìm kiếm ở góc trên bên phải và nếu bạn có chủ đề riêng thì có thể tải lên để sử dụng.
Trong trường hợp của tôi, tôi không thực sự sử dụng chủ đề và thích tự tạo từng thứ từ đầu, vì vậy tôi sử dụng Kava Child Theme được tích hợp trong Crocoblock.
Đừng lo lắng nếu bạn sử dụng một chủ đề khác với tôi. Cách sử dụng cơ bản vẫn như nhau, chỉ khác ở chỗ khung đã tạo nên, vì cuối cùng bạn có thể thay đổi theo ý thích của mình.
Bạn có thấy nút Tùy chỉnh không? Đây là nút điều chỉnh mà bạn có thể thiết lập màu sắc cơ bản của chủ đề, định dạng văn bản, logo trang web v.v. Hãy cùng xem qua nhé.
Tùy chỉnh chủ đề (Customize)
Đây là màn hình Tùy chỉnh của blog TogePI. Tôi sẽ giải thích ngắn gọn từng phần.
(1) Danh tính Trang
Bạn có thể thiết lập tiêu đề và tagline của trang web tại đây.
(2) Cài đặt Tổng quát của Trang
Bạn có thể thiết lập favicon (Favicon), bố cục trang, breadcrumbs, nút lên trên (To top button) v.v.
Tôi đã thiết lập bố cục trang là Full width, tuy nhiên bạn có thể tùy thích, và cài đặt này có thể được thay đổi từng bước khi sửa trang sau này, vì vậy không cần phải chỉnh sửa sớm.
Tôi chưa sử dụng tính năng breadcrumbs ở đây.
Nút lên trên xuất hiện khi bạn cuộn trang xuống và giúp bạn quay lại đầu trang, bạn có thể sử dụng nếu thích. Nếu bạn muốn thay đổi hình dáng của nút này, hãy tham khảo phần ‘Phong cách’ mà tôi sẽ đề cập dưới đây.
(3) Màu sắc / Sơ đồ màu
Bạn có thể thiết lập màu nền của trang và màu sắc văn bản cơ bản, màu áp dụng khi bạn đã liên kết v.v.
Tuy nhiên, điều này có thể được cài đặt riêng trong quá trình bạn tạo trang, vì vậy không cần phải điều chỉnh quá nhiều, nhưng nếu có những màu sắc cơ bản không thể được hiển thị tùy theo widget thì bạn có thể thay đổi trong này.
(4) Kiểu chữ
Bạn có thể chỉ định kích thước, độ dày, chiều rộng của chữ cái H1 ~ H6 v.v.
Dù có thể chỉ định văn bản của nút và cơ thể, nhưng tôi chỉ định riêng H1~H6. Trong bài viết này, tiêu đề sẽ là H1, H2 và nội dung sẽ sử dụng H5.
Thay vì thiết lập ngay từ đầu, bạn có thể điều chỉnh khi viết bài để kiểm tra cách hiển thị của nó.
(5) Cài đặt Trang Chủ
Bạn có thể chỉ định trang nào sẽ là trang chủ của website của mình. Trang chủ là trang chính mà trang web sẽ dẫn đến khi nhấn vào logo.
Các phần chưa được đề cập như tiêu đề / Hình nền / Menu / Widget v.v. cũng sẽ được thiết lập tách biệt nên bạn không cần phải thiết lập nếu không cần thiết.
Nội dung này được tạo trên cơ sở Kava Child theme, vì vậy các thiết lập có thể khác nhau giữa các chủ đề. Xin lưu ý.
Cài đặt Chi tiết Widget
Các loại widget rất đa dạng phải không? Ảnh chụp màn hình trên là widget Button và ngoài ra còn nhiều loại widget như văn bản, hình ảnh, biểu tượng, v.v. Việc áp dụng phong cách cho nhiều widget này có một số quy tắc tương tự, tôi sẽ giải thích cho bạn.
Để giải thích một cách cơ bản, widget Button có vẻ là tiện lợi nhất. Nó cũng thường được sử dụng.
Nội dung
Tại thanh bên trái, nếu bạn tìm kiếm nút, sẽ có nhiều tùy chọn, tôi thường sử dụng nút của Crocoblock bên dưới nhưng cũng có những người không sử dụng nên tôi sẽ sử dụng nút cơ bản của WordPress để giải thích.
Nhấp vào widget nút sẽ mở ra cửa sổ nội dung đầu tiên.
Type giữ nguyên giá trị mặc định cũng không sao.
(1) Văn bản
Bạn có thể thay đổi tên của nút.
(2) Liên kết
Khi nhấp vào nút này, bạn sẽ chuyển đến liên kết được chỉ định. Nếu nó hiện ra là # ở đây thì sẽ không có hành động gì xảy ra. # này cũng sẽ được sử dụng trong quá trình thiết lập menu sau này.
Trong này, bạn có thể liên kết đến trang trong website của mình hoặc liên kết đến trang khác. Khi thêm liên kết đến trang khác, chỉ cần sao chép URL và dán vào là xong.
Khi liên kết đến trang trong website của mình cũng tương tự, nhưng nếu bạn biết slug (đường dẫn ngắn), chỉ cần nhập /slug/ thì đường dẫn đó sẽ được kích hoạt.
Bên cạnh đó, có nút cài đặt và biểu tượng bánh pancake ở bên phải. Hãy kiểm tra nút cài đặt trước nhé.
Khi nhấp vào nút cài đặt hình bánh răng (Link Options), nó sẽ xổ xuống như trong ảnh dưới đây. Liên kết giống như tôi đã giải thích phía trên, bên dưới là hai điều mà tôi sẽ giải thích.
Mở trong cửa sổ mới
Bằng cách kích hoạt nút Mở trong cửa sổ mới, khi nhấp vào nút này, địa chỉ được nhập trong liên kết sẽ mở ra trong một cửa sổ mới mà không có di chuyển từ trang hiện tại mà bạn đang xem.
Điều này cũng có thể là một yếu tố quan trọng trong SEO (mặc dù bạn không cần phải biết ngay ở giai đoạn này), chỉ cần giải thích ngắn gọn là: SEO tính toán thời gian mà người dùng ở lại trang đó.
Vì vậy, nếu bạn mở liên kết trong một cửa sổ mới, trang hiện tại vẫn được giữ ở đó nên điểm SEO sẽ được nâng cao. Nhưng trong trường hợp của Google Adsense hoặc quảng cáo doanh thu, có nhiều trang web mà bạn không thể xem nội dung nếu không nhìn thấy quảng cáo khi vào trang.
Thêm nofollow
Chức năng này cũng không thật sự quan trọng trong giai đoạn hiện tại và không cần biết ngay. Như tôi đã đề cập đến SEO ở trên,
Khi bạn liên kết đến một trang khác thì điều đó có thể ảnh hưởng đến điểm số SEO của trang bị liên kết.
Nếu kích hoạt tính năng này, nó sẽ thêm thuộc tính nofollow vào liên kết, giúp không tính số lượt truy cập từ liên kết này đến trang khác, để tránh tác động đến SEO.
Bấm vào nút ở dạng bánh pancake (Dynamic tags) sẽ hiển thị như hình dưới đây.
Thực ra, lúc đầu tôi thấy chức năng này rất khó và nhầm lẫn, nhưng càng quen thì nó lại rất dễ sử dụng. Giờ ở giai đoạn này bạn không cần phải biết.
Trong giới thiệu của Crocoblock và Elementor cũng có tính năng Dynamic.
Chức năng này thường được sử dụng khi bạn muốn kéo dữ liệu nào đó.
Ví dụ nếu bạn đã tạo bài viết và muốn hiển thị tiêu đề thì bạn đã nhập tiêu đề trong bài viết, nhưng nếu bạn muốn hiển thị nội dung thì bạn cần phải nhập lại tiêu đề một lần nữa.
Nhưng nếu sử dụng chức năng Dynamic, bạn có thể lấy tiêu đề từ bài viết, bất kể nội dung là gì.
Nói cách khác, chức năng Dynamic giống như chủ đề, tạo ra khung để dễ sử dụng.
Nếu bạn bấm vào Post URL trong phần thiết lập thì nó sẽ lấy thông tin URL của bài viết hiện tại để liên kết với nó.
(3) Căn chỉnh
Không cần giải thích nhiều đúng không? Đây là nút để bạn quyết định căn chỉnh ở bên trái, bên phải hay giữa.
(4) Biểu tượng
Bạn có thể thiết lập hình dáng biểu tượng xuất hiện phía trước tên nút. Nếu bạn xóa tên và chỉ thiết lập biểu tượng thì nút chỉ còn lại biểu tượng.
Phần Icon Spacing bên dưới giúp bạn thiết lập khoảng cách giữa biểu tượng và văn bản.
Giờ tôi sẽ thực hiện một nút để bạn hiểu rõ hơn về các thiết lập mà tôi đã đề cập.
Chắc bạn đã nhớ rằng nút của tôi có màu hồng do thiết lập màu sắc trong Tùy chỉnh Chủ đề nè. Hãy tham khảo nhé.
Khi bạn nhấn nút, nó sẽ chuyển đến trang mà bạn đã thiết lập ở trên!
Phong cách (Style)
Khung màu đỏ là nơi bạn thiết lập phong cách.
Phong cách định hình cái gì? Đó là font chữ, màu sắc, kích thước, nền, chiều rộng và khoảng cách, viền tương tự như là mọi thứ hiển thị bên ngoài.
Tôi sẽ tiếp tục giải thích qua widget Button.
(1) Kiểu chữ
Family : chọn font chữ.
Size : chọn kích thước văn bản.
Weight : chọn độ dày văn bản.
Transform : chọn kiểu chữ hoa thường.
Style : chọn kiểu chữ nghiêng.
Decoration : thêm đường kẻ vào chữ.
Line-Height : điều chỉnh khoảng cách giữa các dòng.
Letter Spacing : điều chỉnh khoảng cách giữa các ký tự.
Word Spacing : điều chỉnh khoảng cách giữa các từ.
Khoảng cách giữa Letter Spacing và Word Spacing có thể làm bạn bối rối, nhưng dưới đây là ví dụ áp dụng thực tế sẽ giúp bạn dễ hiểu hơn.
(2) Bóng chữ
Tôi không sử dụng tính năng này nhiều, nhưng đây là cách thêm hiệu ứng bóng cho chữ. Dưới đây là nút để bạn tham khảo.
Căn cứ theo các cài đặt khác nhau, để minh họa cho bạn, tôi đã thêm hiệu ứng một cách thái quá trong ví dụ này.
(3) Normal / Hover
Bạn có thấy rằng khi di chuột lên một nút, màu sắc có thể thay đổi hay không? Đó là hiệu ứng mà bạn đang cài đặt.
Hover thường đề cập đến việc di chuột qua nút, chứ không phải bay lơ lửng như trực thăng.
Normal là những gì bạn thiết lập khi không di chuột qua, và Hover là khi bạn đưa chuột vào nút này.
Màu văn bản : chọn màu chữ.
Kiểu nền : chọn màu nền là đơn sắc hay có hiệu ứng gradient.
Màu : chọn màu nền.
Màu viền : nếu nút có viền, chọn màu viền.
Hiệu ứng hover : tùy chỉnh hiệu ứng cho nút khi hover.
Hãy xem các nút đã được cài đặt bên dưới để biết hiệu ứng của chúng ra sao nhé.
(4) Viền
Viền có nghĩa là, như tôi đã đề cập ở trên, rất đơn giản, đó là viền.
Đây là nơi bạn có thể thiết lập viền cho widget.
Loại viền : chọn cách viền, có thể là đường thẳng hoặc đường chấm.
Chiều rộng : chọn độ dày của viền.
Bán kính viền : số đo để làm cho các góc của viền tròn hoặc sắc nét.
Bóng hộp : tương tự như chức năng bóng ở trên.
Trong ví dụ nút bên dưới hãy xem sự khác biệt giữa các cài đặt.
(5) Khoảng cách
Có một khái niệm mới ở đây. Khoảng cách có nghĩa là giữa các phần ngoài của widget.
Sau đây là thiết lập tương tự với Margin. Tôi đã từng nhầm lẫn giữa Padding và Margin, nhưng tôi nghĩ Padding giúp làm cho widget lớn hơn trong khi Margin giúp giảm kích thước của widget.
Hãy tìm hiểu thêm qua những nút dưới đây nhé.
Bạn cảm thấy sự khác biệt chứ?
Phía bên cạnh chữ số, cái chữ px có nghĩa là bạn điều chỉnh theo đơn vị pixel hay theo phần trăm toàn bộ.
Nút có hình dạng chuỗi là nút đồng bộ (SYNC). Giống như trong điều hòa không khí, bạn có thể tạo điều kiện thuận lợi cho cả hai ghế trước và sau.
Khi bạn kích hoạt tính năng này và chỉnh sửa nó, các khoảng cách cho Top, Bottom, Right, Left đều sẽ đồng bộ và có cùng giá trị số.
Đó là cách tôi đã giải thích xong cài đặt phong cách cho Button widget.
Nâng cao
-Nội dung sẽ được thêm vào sau-
Bài viết này là bản dịch nguyên bản.
Bạn có thể xem hình ảnh rõ nét trong bản gốc.