WordPress #16: Text

Nội dung

  1. Màu nền cho đoạn
  2. Màu nền cho kí tự
  3. Đường kẻ ở trên chữ
  4. Chữ ở phía trên (mũ)
  5. Chữ ở phía dưới
  6. Đổi cỡ chữ
  7. Đổi font chữ
  8. Tạo đường kẻ ngang
  9. Tạo thông tin thêm cho kí tự

Viết nốt cái bài đã đặt cọc từ khi bắt đầu lập cái page Mẹo WordPress cho đến giờ :”>
Nội dung bài này sẽ là những gì bạn có thể làm được với text, tức là chỉnh sửa font, cỡ chữ, vân vân và vân vân… ^^

Với mỗi mục sẽ có tên, code và ví dụ cụ thể ^^
Tất cả đều phải được viết trong chế độ HTML.
Nội dung không được sắp xếp theo thứ tự gì hết thế nên để dễ cho các bạn, mình sẽ xếp cái list ngay bên cạnh để các bạn tiện xem. Nếu sau này có thêm cái gì thì mình sẽ post luôn vào bài này luôn. Thế nên phần nào viết ở dưới tức là được viết sau.

Những điều cần biết trước khi xem bài này

  • Màu sử dụng trong code HTML là mã màu hex. Để biết được mã hex cho mỗi màu, các bạn chọn dấu mũi tên cạnh hình chữ A trong thanh công cụ trên WordPress, chọn More colors, copy mã trong ô Color
  • Code span dùng cho từ/cụm từ trong một đoạn, p cho cả đoạn, div cho nhiều đoạn hoặc cả bài.
  • Để áp dụng nhiều thuộc tính cho một đoạn, hãy gộp nó lại trong cùng một thẻ.

Màu nền cho đoạn

Cái này thích hợp khi viết sì poi, tức là khi đó, người đọc phải bôi đen mới có thể đọc được. Nên để màu chữ trùng với màu nền

<div style="padding: 12px; background-color: #mã hex; line-height: 1.4;">ĐOẠN</div>

Ví dụ:

<div style="padding: 12px; background-color: #8ff9eb; line-height: 1.4;">Đây là một đoạn văn ví dụ.</div>

Kết quả:

Đây là một đoạn văn ví dụ.

Màu nền cho kí tự

<span style="background-color: #mã hex;">KÍ TỰ</span>

Ví dụ:

Đây là một đoạn văn <span style="background-color: #8ff9eb;">ví dụ</span>.

Kết quả:
Đây là một đoạn văn ví dụ.

Đường kẻ ở trên chữ

<span style="text-decoration: overline;">KÍ TỰ</span>

Ví dụ:

Đây là một đoạn văn <span style="text-decoration: overline;">ví dụ</span>.

Kết quả:
Đây là một đoạn văn ví dụ.

Chữ ở phía trên (mũ)

<sup>KÍ TỰ</sup>

Ví dụ:

Đây là một đoạn văn <sup>ví dụ</sup>.

Kết quả:
Đây là một đoạn văn ví dụ.

Chữ ở phía dưới

<sub>KÍ TỰ</sub>

Ví dụ:

Đây là một đoạn văn <sub>ví dụ</sub>.

Kết quả:

Đây là một đoạn văn ví dụ.

Đổi cỡ chữ

<span style="font-size:100%;">KÍ TỰ</span>

Ví dụ:

Đây là một đoạn văn <span style="font-size:200%;">ví dụ</span>.

Kết quả:

Đây là một đoạn văn ví dụ.

Đổi font chữ

Về lý thuyết thì bạn có thể để bất cứ font nào mà bạn muốn, nhưng chỉ máy nào có cài font đó thì mới hiện ra được thôi. Vì vậy, để an toàn, hãy chỉ dùng những font mà Windows có sẵn. Đó là:
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Lucida Console
Lucida Sans Unicode
Palatino Linotype
Tahoma
Times New Roman
Trebuchet MS
Verdana

<span style="font-family:TÊN FONT;">KÍ TỰ</span>

Ví dụ:

Đây là một đoạn văn <span style="font-family:Palatino Linotype;">ví dụ</span>.

Kết quả:

Đây là một đoạn văn ví dụ.

Tạo đường kẻ ngang

<hr />

Ví dụ:

Đây là một đoạn văn ví dụ.
<hr />
Đây là một đoạn văn ví dụ.

Kết quả:

Đây là một đoạn văn ví dụ.


Đây là một đoạn văn ví dụ.

Tạo thông tin thêm cho kí tự

Cái này tức là khi di chuyển vào một kí tự, một dòng giải thích/thông tin thêm cho kí tự đó sẽ hiện ra.
Cũng có thể sử dụng nó như một hình thức spoiler cho truyện, yêu cầu người xem phải di chuyển chuột vào chỗ đó mới đọc được phần spoil ^^

<abbr title="THÔNG TIN THÊM">KÍ TỰ</abbr>

Ví dụ:

Đây là một đoạn văn <abbr title="Đây là một đoạn thông tin thêm.">ví dụ</abbr>.

Kết quả:

Đây là một đoạn văn ví dụ.

https://tieuxuyen.wordpress.com/meo-wordpress/

150 bình luận về “WordPress #16: Text

  1. Cảm ơn bạn rất nhiều. Mình mới hỏi hôm qua mà hôm nay bạn đã trả lời bằng một bài rất hoành tráng rùi :-))
    Chỉ là mình cảm thấy viết bằng HTML phiền quá đi, hehe. Đành tiết chế trong việc trình bày vậy.
    Mình search thấy có một số plug-in có thể chỉnh tùy chọn cho text nhưng cài vào không được. Sao vậy hả bạn?

    Đã thích bởi 1 người

  2. Chao em ,
    Vo tinh chi tim duoc website cua em khi search vao chu WordPress ..Trang Meo WordPress cua em rat la bo ich cho nhung nguoi dang thuc tap lam website nhu chi .. Em da bo rat nhieu thoi gian va rat nhiet tinh , giup do cac ban khi gap kho khan trong viec lam website ..Cho chi hoi em cai link website nay http://www.eva.vn/lam-dep/5-cong-thuc-lam-dep-hieu-qua-cho-ban-gai-c58a81755.html
    .Cai khung bai : 5 công thức làm đẹp hiệu quả cho bạn gái .. goi la sidebar ( giua ) phai khong em ?
    va cach lam nhu the nao , em co the cho chi cai code duoc khong de chi lam giong nhu vay ?
    chi dang xai WordPress ..them la kieu Suffusion …
    con 2 ben co nhung khung hinh Quang Cao , goi la sidebar right & left hay goi la cac cot : two-column and three-column width layouts….em cho chi biet nha , cam on em !
    Em co CODE de cai lich 2012 Calrndar khong ? em co the cho chi duoc khong ??
    Cam On em rat nhieu …va chuc em co mot ngay that vui ve , hanh phuc voi nhung gi em dang chia se nhung gi voi cac ban khap noi tren trang nay .. Chi My Huong

    Thích

    1. Chào chị,
      Em rất vui vì những gì mình viết có ích cho chị
      Về các nội dung chị, rất tiếc vì em không giúp gì được, vì những cái đấy thuộc về phần cài wp trên host riêng, mà em chỉ dùng phiên bản wp trên web nên không tìm hiểu gì về những cái đó
      Còn về lịch thì chị có thể tham khảo các kiểu lịch và hướng dẫn trên trag web này
      Hi vọng giúp được cho chị
      Thân.

      Thích

  3. Chi cam on em da bo thoi gian tra loi cac cau hoi giup chi va cac ban khac … chi da copy code cua lich vao trang website duoc roi ..Mot lan nua ” Cam On Co Be ” that de thuong qua !
    Chuc em co mot tuan le vui ve & may man nhe !
    Chi se thuong xuyen vao trang nay cua em ..
    Chi My Huong…

    Thích

  4. Chào bạn, cho mình hỏi chút.
    Mình muốn vừa chỉnh cỡ chữ vừa font chữ một lúc thì làm thế nào. Mình đã thử kết hợp hai cái với nhau những không được. Như thế này bạn:

    Gặp em.
    Mong bạn giúp đỡ ^^ Cảm ơn rất nhiều

    Thích

    1. minhf thấy bạn đang để kết hợp giữa in đậm và in nghiêng và vẫn hiện bình thường đấy chứ :-?
      cụ thể thì bạn muốn chỉnh cỡ chữ và font chữ gì

      Thích

  5. cám ơn chị!
    chị ơi làm thế nào để đổi cỡ chữ cho cả đoạn vậy a? em thử làm theo cách của chị nhưng nó chỉ đổi từng dòng môt thôi +_+

    Thích

    1. chị đã ghi ở phần trên là

      Code span dùng cho từ/cụm từ trong một đoạn, p cho cả đoạn, div cho nhiều đoạn hoặc cả bài.

      vậy với đoạn em thay chữ các chỗ có chữ span trong code thành p hoặc div là được

      Thích

  6. Sis ơi, cho em hỏi, em mới đăng kí WP đầu năm nay. Lúc e viết bài mới thì ko có chế độ chỉnh màu chữ? Giờ e ko biết làm thế nào để chữ có màu được, chỉ toàn để chữ đen thôi. :((. Sis giúp e với.

    Thích

  7. Bạn ơi cho mình hỏi, nếu như chỉnh font chữ trong wordpress thì nên để font chữ gì cho dễ đọc? Các font chữ có sẵn trong wordpress thôi ấy.

    Cho mình hỏi thêm font chữ nhà bạn là font chữ gì vậy?

    Thích

    1. Font chữ gì cho dễ đọc là tùy vào mắt của mỗi người
      Font chữ trong nhà mình là font chữ mặc định của theme, mình không thay đổi gì hết

      Thích

  8. *gãi đầu* thật là ngại quá, bạn cho mình hỏi là ko pik tại sao mình ko đổi font chữ đc, nó cứ hiện ra cái đoạn code thui :(
    hay là phải cài đặt gì ko hả bạn ^^
    mong tin bạn … cảm ơn bạn nhé, blog rất hay :X

    Thích

      1. à, mình làm đc rùi, cảm ơn bạn nhìu lắm ^^
        bạn cho mình hỏi chuyện này nữa ^^ mình đã tạo đc mục lục rùi, cũng đã thêm vài thư mục con trog đó, nay cũng làm như bình thường nhưng cuối bài nó ko hiện lên cái mục lục để mình chọn nữa, nên bài đó nó vẫn ở trag chủ ko đưa vào mục lục đc, cho mình hỏi là tại sao vậy

        Thích

          1. à, *gãi đầu* mình ko pik nói sao nữa, để mình nói thế này thử xem bạn hỉu ko nhé ^^
            bạn vào wp của mình xem thử nha, mình mún đăng cái show ảnh vào trog mục thư viện ảnh đấy, vẫn làm bình thường như lúc trước, đến lúc dắp đăng bài nó ko hiện ra thư mục mẹ, hay thư mục con … nên mình ko đưa cái show ảnh đó vào thư viện ảnh đc

            Thích

                1. slideshow làm gì có cái gọi là thư mục con hả bạn @.@
                  hoặc cái thư mục con mà bạn nói nó không phải là thư mục mà là một cái gì đó khác

                  Thích

                  1. à, bạn hiểu nhầm ý mình rùi ^^
                    hi hi, nhưng mình đã sửa lại đc rùi, cảm ơn bạn đã bỏ thời gian đọc mấy comt nhảm của mình nhé
                    cảm ơn bạn nhìu lắm, ngày lành :X
                    p.s : lần sau nếu có gì ko hiểu, mình lại hỏi bạn nhé, bạn chỉ rất dễ hiểu xDD~

                    Thích

  9. Yap ơi làm cách nào để chèn code mà nó ra y chang code mình chèn, như cái ví dụ của nàng mà ko hiện ra như cái kết quả?

    Thích

  10. Bạn ơi, cho mình hỏi về cách viết bài được không? Nếu mình post một bài thật dài thì làm sao để đổi font chữ , font màu của quyên bài đó. Mỗi lần mình viết phải đổi từng dòng, hảo mệt T^T có cách nào đổi luôn quyên bài mà không phải đổi từng dòng không? Mình cũng xài wordpress như bạn vậy :D

    Thích

    1. Ở ngay đầu bài mình đã viết

      Code span dùng cho từ/cụm từ trong một đoạn, p cho cả đoạn, div cho nhiều đoạn hoặc cả bài.

      Vậy nếu bạn muốn dùng cho cả bài thì bạn thay các chỗ có chữ span thành chữ div là được.

      Thích

  11. Bạn ơi, mình hơi thắc mắc một chút, mình muốn chỉnh màu chữ trên widget, mình đã đọc các giải đáp bên trên của bạn nhưng trong phần post, ko biết máy mình cùi bắp hay làm sao nhưng không có phần chỉnh màu bạn ạ, cụ thể thì nó như thế này :3 :3

    Bạn có thể giúp mình được không :3

    Thích

  12. bạn ơi cho mình hỏi, nếu trong một câu/dòng mà cần vừa đổi font, vừa đổi size thì làm sao? màu chữ nữa,
    còn một câu nữa mình muốn nhờ bạn chỉ giáo, đó là mình cứ phải cop cả đoạn code vào từng dòng ý, có cách nào khác ko

    Thích

    1. ở trên đầu bài viết mình đã ghi rất rõ

      Code span dùng cho từ/cụm từ trong một đoạn, p cho cả đoạn, div cho nhiều đoạn hoặc cả bài.
      Để áp dụng nhiều thuộc tính cho một đoạn, hãy gộp nó lại trong cùng một thẻ.

      bạn cứ làm đúng như vậy là được

      Thích

  13. chị ơi cho em hỏi là sao lúc trước em viết bài trên wp thì nó hiện ra 2 thanh công cụ lận mà sao bây giờ chỉ còn một thanh (mất thanh chỉnh Paragraph, màu chữ,…) không biết là vô đâu để lấy lại vậy chị???

    Thích

  14. bạn ơi cho mình hỏi chút là giờ mình muốn đổi màu chữ trong một câu ví dụ như từ đậm đến nhạt màu hơn ấy thì có làm tự động được không hay phải chỉnh màu chữ của từng chữ một hả bạn?

    Thích

  15. b ơi cho mình hỏi, có thể đổi màu chữ tất cả các post cùng một lúc k? tại mỗi lần mình đổi background là màu chữ cũ lại nhìn k rõ, nếu vào từng post chỉnh thì chả hiểu bh mới xong T^T

    Thích

    1. không có cách nào đâu bạn ạ
      vậy nên tốt nhất là bạn để màu nguyên gốc của wp, rồi sau này có đổi background thì cũng chọn background nào cho màu chữ có sẵn dễ nhìn thôi

      Thích

    1. chị cũng chưa hiểu sao nó lại bị thế nữa
      nhưng chị đoán là do bài viết đó của em đang để ở chế độ Aside
      em thử đổi lại post format sang bình hường xem thế nào nhé

      Thích

  16. chào bạn! Mình có 2 vấn đề muốn hỏi bạn
    1/ Mình ko hiểu cái Widget chuyên mục đó có tác dụng gì, nói chung là mình chưa hiểu lắm về nó, bạn có thể giải thích giúp mình ko? Mình vào trong phần cái đặt thì thấy có báo là chuyển đổi chuyên mục thành tag, mình hơi lúng túng chỗ này. Mong bạn giúp đỡ
    2/ Có cách nào đổi font và cỡ chữ cho cả themes không? mình thấy thật là khó khăn khi cứ mỗi lần viêt bài là lại mỗi lần chèn code font
    Cảm ơn bạn

    Đã thích bởi 1 người

    1. 1/ widget chuyên mục là widget hiển thị các chuyên mục (category) trong wp, có thể hiểu chuyên mục như folder, trong đó chứa các bài viết vậy
      tag có thể hiểu là các từ khóa trong bài viết
      2/ ko bạn ạ, trừ phi bạn dùng custom upgrade (mất phí)

      Đã thích bởi 1 người

          1. Chào bạn!
            Cho mình hỏi thêm cái này nữa!
            Nếu mình muốn chia wp của mình thành nhiều trang thì mình phải làm thế nào? vì bài viêt thì quá nhiều mà nó cữ nằm 1 trang thì dài quá
            Nhờ bạn giúp đỡ
            Xin cảm ơn

            Thích

              1. Hình như bạn hiểu ko đúng ý mình, ý của mình là ví dụ trang wp của mình hiện tại có 6 bài viết, nó hơi dài nên mình muốn phân mỗi trang có 3 bài viết thôi. Mong bạn giúp đỡ. Xin cảm ơn

                Thích

                    1. chào bạn!
                      Có cách nào làm cho các tag hiển thị lên trên trang wp ko? nếu ban biết thì giúp mình với. Cảm ơn bạn

                      Thích

                  1. Chào bạn!
                    mình muốn copy bài viết hôm qua đăng cho hôm nay với tiêu đề khác thì làm như thế nào.
                    Nếu biết thì vui lòng giúp mình
                    Xin cảm ơn

                    Thích

                    1. ý mình là,ví dụ: ngày hôm qua mình viết 1 bài đăng lên rồi với tiêu đề là A, hôm nay mình lại muốn đăng y chang bài hôm qua nhưng lấy tiêu đề là B, thì mình phải làm sao

                      Thích

  17. bạn làm ơn cho mình hỏi tại sao mình không thể thay đổi màu chữ và font chữ trong phần tiêu để của widget văn bản được vậy?

    Thích

  18. tks bạn rất nhìu nha….nhờ bạn mà cái wp của mềnh nó hoàn thiện được đôi chút….*ngó nghiêng*..*ko thấy ai*, * ăn đậu hũ chủ nhà* khà khà khà…….

    Thích

  19. Ôi mình vừa mới tạo web, đang không biết phải làm sao để đổi màu chữ vì nó trùng với hình nền. May là có bạn haiz *thở phào nhẹ nhõm* . Cảm ơn bạn nhiều lắm ^-^

    Thích

  20. chào bạn, mình muốn hỏi 1 chút, mình up truyện để thành nhiều page, vậy làm thế nào để đổi được font cho tất cả các page đó, mình làm theo code của bạn nhưng khi chèn vào thì ko đc.

    Thích

  21. cậu ơi tớ muốn hỏi, tớ vào phần Customize của blog đển chỉnh font chữ mà chỉnh xong nó chẳng thay đổi gì cả, có mẹo nào không cậu?

    Thích

    1. a, tớ đã đọc lại rồi, về font chữ chắc là do tớ chọn cái Windows không có, nhưng muốn thắc mắc thêm nữa.
      tại sao trong khi edit đã chú ý để phần trống rất lớn giữa ảnh đi kèm và dòng chữ ở ngay sau nó mà khi edit xong, ra xem nó vẫn dính sát vào nhau trông rất không đẹp?

      Thích

  22. Mình muốn hỏi, làm sao có thể thay đổi màu site title vậy? :), mò mãi mà mình ko biết làm thế nào :<

    Thích

  23. mình ko thay đổi đc màu font của toàn blog hả bạn ? Trong mục tùy chỉnh giao diện,có phần color & backgrounds. Đổi cái đó là đi cả trang, ko riêng gì màu font =.= Mình chỉ muốn đổi mau cho font thui à, có cách nào ko chủ nhà, bạn vào nhà mình xem thử, màu font hơi khó nhìn phải ko, còn cái header đầu trang màu nâu nhìn kinh kinh ==” đổi luôn dc ko chủ nhà, híc

    Thích

  24. (⁀‵⁀) ✫ ✫ ✫. Gia chủ Neko tạc mao`⋎´✫¸.•°*”˜˜”*°•✫ ..✫¸.•°*”˜˜”*°•.✫ nói:

    khi không tớ bị mất Tab ngang chỉnh màu chữ trong bài Post rồi :(, Khi vào viết bài ở hai cách ( nhấn vào + phía trên tay phải hoặc là viết ở mục bài viết ) đều bị mất tab đó :( có cách nào kêu nó quay về không chủ nhà.

    Thích

      1. (⁀‵⁀) ✫ ✫ ✫. Gia chủ Neko tạc mao`⋎´✫¸.•°*”˜˜”*°•✫ ..✫¸.•°*”˜˜”*°•.✫ nói:

        ok,đa tạ nàng :3

        Thích

  25. Em không làm được ss ơi! lúc em chỉnh màu trong một bài viết bình thường xong copy rồi pater qua Widget nó vẫn không có màu. Ss giúp em với

    Thích

      1. Em không gửi ảnh chụp widget của em qua cmt được chị ơi T_T Em làm theo như chị. Viết trong một bài chỉnh sửa bình thường xong rồi em paste qua Widget mà em vẫn không thấy màu. Chị giúp em nhé em cảm ơn chị nhiều :(

        Thích

        1. em không gửi ảnh thì chị không thể xem được em có làm gì sai hay không
          em chụp ảnh rồi up lên trang nào đó rồi paste loink vào đây là được

          Thích

  26. Cảm ơn chị nhiều lắm. Nhờ cái tận tình của chị mà em làm được rồi. Ban đầu em bị bất lực luôn T^T Nhưng mà nhờ có chị chỉ phải chuyển sang chế độ văn bản nên em làm được rồi ^^ Cảm ơn chị ngàn lần luôn ^_^ Mà cho em hỏi cái nha :D Chị là Hủ Nữ hay sao vậy ạ <3

    Thích

  27. Dù sao cũng cảm ơn chị nhiều lắm ^^ Em là hủ nữ :p không ngờ tìm được cái blog này vừa được chị chỉ nhiều cái mà còn được đọc đam nữa :D Kamsamita chị nhiều nhiều

    Thích

  28. Mình cảm ơn bài viết của bạn trước, và có 1 vấn đề muốn hỏi như sau: Mình sử dụng theme sorbet, lúc đầu font chữ của theme này mình không thích lắm nên trong phần tùy chỉnh mình đã điều chỉnh lại font chữ, nhưng không hiểu sao mấy hôm nay font chữ của wp lại về cái font ban đầu của theme, bạn có thể giúp mình được không?

    Thích

    1. a e còn 1 thắc mắc nữa là nếu dùng với cả 1 đoạn truyện dài thì sao ạ, e dùng nhug nó ko đc liên hết cả ạ, xuống đoạn là lại như bt. Làm tnao bjo ss

      Thích

        1. ak tỷ ơi e vẫn ko biết cho cái code chatbox này vào chỗ nào, e đọc mà vẫn gà mờ quá, tức là ấn new post r cho vào mục html hay tnao ạ

          Thích

            1. mà tỷ ơi làm tn để có thể ghim 1 bài đứng im đầu trang được ạ, kiểu nó là about hay profile mà mình ko muốn nó bị di chuyển xuống khi có new post ý ạ

              Thích

  29. Yappa cho mình hỏi, dạo gần đây mình up bài mới thì hay bị như thế này, chỗ đậm chỗ nhạt, chỉ có mấy bài gần đây mới bị thôi, có cách nào để khắc phục ko nhỉ?

    Thích

Bình luận về bài viết này