Cách trang trí bài viết wordpress
NỘI DUNG CHÍNH 1. Tạo màu nền cho bài viết 2. Tạo hình nền bài viết đơn giản 3. Tạo hình nền bài viết tương tự theme blog Zing Me Bài viết này được cập nhật lần cuối vào ngày 02/10/2019 Hẳn là đôi khi các bạn cũng gặp vấn đề với những theme trong suốt của WordPress vì nó khiến cho chữ trong bài viết trở nên khó đọc đúng không? Ngoài việc khắc phục điều này bằng cách thay những hình nền dễ nhìn hoặc tạo viền cho chữ thì các bạn cũng có thể tạo một hình nền riêng cho mỗi bài viết, giống như bài viết này của Sera chẳng hạn Nếu bạn là một người mới, hoàn toàn không biết bất cứ điều gì về WordPress, hãy xem bài Hướng dẫn WordPress cơ bản cho người mới bắt đầu trước khi đọc bài này. Các code có trong bài hướng dẫn này được dán (paste) vào giao diện HTML của trình soạn thảo văn bản Cổ điển, không phải dán vào giao diện trực quan (Visual). Nếu các bạn không biết hoặc không hiểu giao diện HTML và giao diện trực quan (Visual) là gì, hãy bấm vào ĐÂY để đọc. Trong bài viết có thể nhắc đến những khái niệm liên quan đến các thành phần của blog, nếu các bạn không biết hoặc không hiểu những khái niệm này, hãy bấm vào ĐÂY để xem hình minh hoạ. Mình không phải là dân công nghệ thông tin hay nhân viên của WordPress nên mình không dùng các thuật ngữ chuyên ngành (nên các bạn đừng bắt bẻ mình về cách dùng từ nhé Nếu trong bài viết có sử dụng video từ YouTube, các bạn hãy lựa chọn chế độ xem video với chất lượng cao nhất (720p hoặc 1080p). Các hướng dẫn trong blog của mình được thực hiện với ngôn ngữ blog và ngôn ngữ giao diện là tiếng Anh. Do đó, nếu blog của các bạn đang sử dụng tiếng Việt thì hãy làm theo video dưới đây để chuyển sang tiếng Anh nhé. Còn vì sao nên để ngôn ngữ blog và ngôn ngữ giao diện là tiếng Anh thì các bạn có thể đọc ở ĐÂY nhé Video 1. Thay đổi Ngôn ngữ blog và Ngôn ngữ giao diện Bây giờ chúng ta sẽ đi vào từng nội dung chi tiết của bài này nhé 1. Tạo màu nền cho bài viết Đầu tiên, đây là cách tạo màu nền cho bài viết, tức là tạo màu nền cho một đoạn văn bản hoặc toàn bộ bài viết (gồm nhiều đoạn văn bản hợp thành), không phải tạo màu nền cho kí tự, các bạn đừng nhầm lẫn nhé. Nếu các bạn vẫn chưa hiểu sự khác nhau thì hãy xem ví dụ sau: a) Đoạn văn sử dụng code tạo màu nền cho kí tự: Ra Hiết Hổ và Hoán Diện Nhân cả đêm lò dò trong cung, kéo nhau lên Đài Ngắm Sao nghỉ chân. Vạn Độc Vương và Đông Tử lên đài, hai tên dị nhân nấp vào một góc. Khi Vạn Độc Vương và Đông Tử hưởng ngoạn cảnh sao trời, hai tên này thưởng thức diễn biến của vở kịch tình iu trước mắt. b) Đoạn văn sử dụng code tạo màu nền cho một đoạn văn hoặc toàn bộ bài viết: Ra Hiết Hổ và Hoán Diện Nhân cả đêm lò dò trong cung, kéo nhau lên Đài Ngắm Sao nghỉ chân. Vạn Độc Vương và Đông Tử lên đài, hai tên dị nhân nấp vào một góc. Khi Vạn Độc Vương và Đông Tử hưởng ngoạn cảnh sao trời, hai tên này thưởng thức diễn biến của vở kịch tình iu trước mắt. Các bạn đã thấy sự khác biệt chưa nào? Tiếp theo, trước khi đi vào phần code, mình cần lưu ý các bạn điều này: Phần này và cả bài này mình sẽ hướng dẫn trên trình soạn thảo văn bản Cổ điển (Phiên bản 1). Nếu các bạn không biết trình soạn thảo Cổ điển là gì thì hãy quay lại phần lưu ý ở đầu bài này để đọc. Trình soạn thảo Block-Editor có thể thực hiện được thao tác tạo màu nền (hoặc tạo hình nền đơn giản) cho bài viết bằng cách sử dụng khối Paragraph hoặc khối Cover. Tuy nhiên, điều bất tiện ở đây là các bạn không thể thay đổi được phông chữ và thêm bớt một số thuộc tính định dạng khác. Do đó, mình quyết định chỉ hướng dẫn các bạn thao tác trên trình soạn thảo Cổ điển mà thôi. Nhưng điều này không có nghĩa là không thể dùng code trong bài này trên trình soạn thảo Block-Editor. Hoàn toàn có thể nhé Được rồi, giờ thì chúng ta sẽ đến với code tạo màu nền đầu tiên. Đây là code đơn giản nhất, các bạn xem nhé: Nội dung bài viết background: Đây là thuộc tính màu nền, mã màu của màu nền có thể dùng tên màu bằng tiếng Anh, mã HEX hoặc mã RGB. Ở đây mình khuyên các bạn nên dùng mã HEX đối với các màu không phải màu cơ sở, các bạn có thể xem và lấy mã màu ở ĐÂY nhé padding: Thuộc tính này mình mặc định giá trị là 12px (đơn vị tính ở đây là px), các bạn có thể tăng lên hoặc giảm đi nếu muốn. Ở đây, mình sẽ không giải thích về padding theo khái niệm chính thống, hiểu một cách đơn giản thì nếu coi vùng màu nền của văn bản là một tờ giấy, thì padding chính là khoảng cách tính từ mép giấy vào đến phần nội dung văn bản. Để dễ hình dung, các bạn hãy xem hình minh hoạ sau đây: Hình 1. Padding font-family: Đây là thuộc tính định dạng phông chữ. Lưu ý: Không phải phông chữ nào cũng hiển thị được trên trình duyệt web, tốt nhất là các bạn chỉ nên dùng những phông chữ có sẵn trong hệ điều hành Windows thôi. Ba phông chữ mình khuyến khích các bạn nên sử dụng bao gồm: Times New Roman, Arial, Palatino Linotype. Đây là những phông chữ phổ biến và tương đối dễ chịu với người đọc cả trên máy tính lẫn điện thoại thông minh. Ngoài ra các bạn có thể thử dùng thêm phông Tahoma hoặc Verdana. font-size: Đây là thuộc tính định dạng cỡ chữ, ở đây mình sẽ tính theo đơn vị pt (giống trong Microsoft Word). Các bạn nên chọn cỡ chữ trong khoảng 14pt đến 18pt cho nội dung bài viết, không nên để cỡ chữ quá nhỏ hoặc quá to. Cá nhân mình thường dùng trong khoảng 14pt đến 16pt, đối với font Arial thì có thể là từ 12pt đến 16pt cũng được. color: Đây là thuộc tính định dạng màu chữ. Cách dùng mã màu tương tự như với mã màu của thuộc tính background. Ở đây, mình mặc định màu chữ là màu đen (black). Tuy nhiên, các bạn có thể quay lại giao diện trực quan để đổi màu chữ bằng cách bấm vào nút đổi màu chữ trên thanh công cụ cho dễ, không nhất thiết phải sao chép mã màu rồi thay vào code. line-height: Đây là thuộc tính định dạng khoảng cách giữa các dòng, ở đây mình sẽ tính theo đơn vị pt. Tuỳ thuộc vào cỡ chữ mà các bạn có thể tăng, giảm giá trị của thuộc tính này. Ví dụ: Mình dùng phông Times New Roman, cỡ chữ 16pt thì line-height của mình sẽ rơi vào khoảng 20pt đến 22pt. Tóm lại là các bạn cứ chỉnh cho đến khi nào các bạn hài lòng thì thôi. Theme sẽ có line-height mặc định, nhưng nếu các bạn tăng cỡ chữ lớn hơn cỡ chữ mặc định của theme thì khoảng cách giữa các dòng có thể bị thu hẹp lại. Do đó, nếu không hài lòng với khoảng cách giữa các dòng như mặc định của theme, các bạn có thể dùng thuộc tính line-height trong code để sửa. Nếu muốn giữ nguyên khoảng cách giữa các dòng theo mặc định của theme, các bạn có thể xoá thuộc tính này hoặc điền giá trị là normal cho nó. Bây giờ mình sẽ thay một đoạn code hoàn chỉnh cho các bạn xem nhé
Ra Hiết Hổ và Hoán Diện Nhân cả đêm lò dò trong cung, kéo nhau lên Đài Ngắm sao nghỉ chân. Vạn Độc Vương và Đông Tử lên đài, hai tên dị nhân nấp vào một góc. Khi Vạn Độc Vương và Đông Tử hưởng ngoạn cảnh sao trời, hai tên này thưởng thức diễn biến của vở kịch tình iu trước mắt.
Ra Hiết Hổ và Hoán Diện Nhân cả đêm lò dò trong cung, kéo nhau lên Đài Ngắm sao nghỉ chân. Vạn Độc Vương và Đông Tử lên đài, hai tên dị nhân nấp vào một góc. Khi Vạn Độc Vương và Đông Tử hưởng ngoạn cảnh sao trời, hai tên này thưởng thức diễn biến của vở kịch tình iu trước mắt. Để dễ hình dung, các bạn có thể xem video hướng dẫn dưới đây: Video 2. Tạo màu nền cho bài viết 2. Tạo hình nền bài viết đơn giản Code tạo hình nền bài viết kiểu này tương tự như code tạo màu nền, chỉ khác nhau ở chỗ thay vì dùng màu thì chúng ta sẽ dùng hình ảnh làm nền thôi Các thuộc tính như font-family, font-size, color, các bạn có thể tuỳ biến như với code màu nền. Ở đây, mình chỉ nói về thuộc tính background. Đây là thuộc tính định dạng nền cho văn bản, nền ở đây có thể là màu hoặc hình ảnh. Với code này, chúng ta sử dụng hình ảnh để làm nền cho văn bản. Link hình ảnh dùng làm nền là link có các đuôi như .jpg, .png, .gif,, tóm lại là các đuôi file hình ảnh. Về cơ bản, các bạn có thể sử dụng link hình ảnh ở bất kì nguồn lưu trữ nào để làm nền cho văn bản. Tuy nhiên, mình không khuyến khích các bạn sử dụng link hình ảnh ở các nguồn lưu trữ khác ngoài nguồn lưu trữ là blog WordPress của chính các bạn. Lý do là nếu các bạn sử dụng link hình ảnh từ nguồn lưu trữ không thuộc quyền sở hữu của các bạn, thì rất dễ xảy ra tình trạng chết link vì hình ảnh có thể bị xoá bất cứ lúc nào. Do đó, mình chỉ hướng dẫn các bạn tải ảnh lên thư viện blog và lấy link từ ảnh trong thư viện để làm nền cho bài viết, mình sẽ không hướng dẫn các bạn lấy link ảnh từ các nguồn lưu trữ bên ngoài nhé. Nếu blog của các bạn không phải blog đăng truyện tranh thì mình nghĩ 3GB có sẵn của WordPress đủ để cho các bạn lưu trữ rất nhiều hình ảnh và bài viết, không cần thiết phải đi lấy link từ bên ngoài làm gì hết Thao tác tải ảnh lên thư viện blog và lấy link ảnh sẽ được minh hoạ bằng video sau: Video 3. Tải ảnh lên thư viện và lấy link ảnh Cách sử dụng code tạo hình nền này tương tự như cách sử dụng code tạo màu nền như mình đã viết ở trên nên mình sẽ không nhắc lại nữa. Để dễ hình dung, các bạn hãy xem video dưới đây nhé Video 4. Tạo hình nền đơn giản cho bài viết Xong rồi Trang 2 Về bảng nội dung VUI LÒNG KHÔNG SAO CHÉP BÀI VIẾT NÀY! CẢM ƠN CÁC BẠN! Share this:
Like this:Like Loading... RelatedPages: 1 2 Posted by Sera Hwang on 13/02/2014 in Hướng dẫn WordPress and tagged Code khung viền, Mẹo WordPress, Tạo hình nền riêng cho bài viết, Thủ thuật WordPress, Trang trí WordPress. 252 Comments About Sera Hwang~ Forever Young ~View all posts by Sera Hwang » |