Tạo thẻ truy cập cho WordPress

Khi bạn tạo một tài khoản WordPress, một trong những vấn đề đầu tiên mà bạn quan tâm là giao diện của nó. Hiện nay Wp có một kho giao diện vô cùng phong phú đến nỗi khiến người dùng cảm thấy khá bối rối trong việc chọn lựa theme. Sau khi chọn được một theme vừa ý, bạn sẽ bắt đầu trang trí cho nó bằng rất nhiều công cụ khác nhau, bằng những cách từ đơn giản đến phức tạp: chọn lựa hình nền, cắt dán ảnh, lựa chọn bố cục cho bài viết, sắp xếp widget. Những thứ đó đều là những việc đơn giản mà hầu hết mọi người chỉ cần bỏ chút thời gian mò mẫm là sẽ thành công.

Nhưng rồi sau một thời gian dài sử dụng bạn ngỡ ra rằng những thứ tưởng chừng đơn giản lại vô cùng phức tạp, điển hình như Widget văn bản. Trước đây mình cứ nghĩ rằng nó là một Widget đơn giản nhất, nhưng thực chất không phải vậy, đừng để vẻ ngoài của nó đánh lừa bạn. Khả năng tùy biến của Widget này là vô song. Trước đây mình đã đề cập tới Widget này trong rất nhiều bài viết như:

Bây giờ điểm lại mới thấy Widget văn bản quá áp đảo. Hôm nay lại thêm một mẹo nữa liên quan đến Widget này đó là Tạo thẻ truy cập cho WordPress.

Nhìn chung khả năng tùy biến của Widget này là do khả năng chèn Code của nó, mà code thì vô kể, một biển mênh mông.
Download
Harry Potter

Bây giờ bạn nhìn về phía góc dưới bên trái có một thẻ “Download Harry Potter”, nó được tạo bởi code:

<a href="https://heomephim.wordpress.com/2013/10/02/bo-truyen-harry-potter-full-dich-gia-ly-lan/" target="_blank" style="font-size:18px;padding:5px 11px;position:fixed;left:0;bottom:80px;background-color:#f1af00;color:#fff;text-align:center;">Download <br>
Harry Potter<img class="emoji" src="https://heomephim.files.wordpress.com/2016/02/harry-potter.png" alt="" /></a>

Các bạn có thể thấy Thẻ này nhìn hơi vướng, đối với theme mình đang dùng thì đúng như vậy, nhưng còn đối với những theme mà Sidebar và Content nằm sát nhau, cùng dồn về một phía thì thẻ này sẽ rất phù hợp, ví dụ như theme https://confitdemo.wordpress.com/ thì lại rất hợp.

Bây giờ chúng ta sẽ phân tích Code này:

1/Code chèn link

href="https://heomephim.wordpress.com/2013/10/02/bo-truyen-harry-potter-full-dich-gia-ly-lan/" target="_blank"

Đây là đoạn link chèn vào thẻ, khi bạn click vào thẻ này nó sẽ dẫn bạn tới link: https://heomephim.wordpress.com/2013/10/02/bo-truyen-harry-potter-full-dich-gia-ly-lan/

Bạn không cần nhớ đoạn Code này vì chức năng chèn link đã được Wp cung cấp sẵn.

2/Code Style

style="font-size:18px;padding:5px 11px;position:fixed;left:0;bottom:80px;background-color:#f1af00;color:#fff;text-align:center;"

a/Cỡ chữ

font-size:18px

b/Cỡ nền

padding:5px 11px

=>thực ra bạn không cần quan tâm đến nó vì nếu chữ quá lớn thì cỡ nền sẽ tự điều chỉnh theo.

c/Ghim vị trí

position:fixed

d/Xác định vị trí (tọa độ)

left:0;bottom:80px

e/Màu nền

background-color:#f1af00

trong đó

#f1af00

=> Chính là Mã màu Hex, cách lấy mã màu này mình sẽ hướng dẫn ở cuối bài viết này.

f/Màu chữ.

color:#fff

g/Căn dòng.

text-align:center

Bạn có thể thay

center

bằng

left

hoăc

right

3/Code nội dung.

>Download <br>
Harry Potter<img class="emoji" src="https://heomephim.files.wordpress.com/2016/02/harry-potter.png" alt="" /><

Bạn để ý đến nội dung của thẻ truy cập và so sánh với code này nhé.Cấu trúc của code này cũng như bạn soạn văn bản vậy, nó không liền mạch;

Sau “Download” mình chèn Code xuống hàng

<br>

rồi đến “Harry Potter”; rồi đến hình ảnh.

Về code hình ảnh trong đoạn này:

<img class="emoji" src="https://heomephim.files.wordpress.com/2016/02/harry-potter.png" alt="" /><

Đoạn:

class="emoji"

=>chính là để xác định kích thước của hình ảnh bằng một emoji – biểu tượng cảm xúc.

Những thành phần này bạn thay đổi vị trí của nó cho phù hợp với nhu cầu của bạn.

Code mẫu cơ bản dành cho các bạn

<a href="LINK" target="_blank" style="font-size:18px;padding:5px 11px;position:fixed;left:0;bottom:80px;background-color:#f1af00;color:#fff;text-align:center;">GHI CHU VAO DAY<br>GHI CHU VAO DAY<img class="emoji" src="LINK ANH" alt="" /></a>

Bạn tự thay đổi các thông số về kích cỡ font, màu chữ để phù hợp với Wp của bạn nhé. 🙂

Trong trường hợp đọc bài này không hiểu thì hãy đọc bài: Trang trí WordPress bằng ảnh động (*GIF)sau khi đọc xong bài này mà vẫn không hiểu thì hãy hỏi mình nhé.

***Cách lấy mã màu HEX

Mã màu HEX rất phổ biến, bạn có thể tự tìm trên mạng hoặc cài Extension ColorZilla trên chrome để tìm mã màu nhé.

Còn nếu tinh mắt thì có thể tìm trong hình ở dưới, nhớ thêm dấu # nhé.

Ma mau hex

 

14 thoughts on “Tạo thẻ truy cập cho WordPress

    • Một khi cần thì sẽ chú tâm đọc, lúc đó sẽ thấy rất dễ hiểu. Còn nếu thấy không cần thiết thì không nên đọc, bạc đầu sớm.
      Nhìn chung thì mình viết cho vui thôi, dành cho những ai cần chứ đến ngay cả mình cũng ít khi dùng đến những Mẹo WordPress do chính mình viết cơ mà. hehe. 🙂

      Liked by 1 person

      • Bạn nói hay quá 😀 Uh, vì trí óc con người có giới hạn mà.
        Có thể không liên quan nhưng làm mình nhớ lại cuộc trò chuyện với chị mình. Đợt ầm ĩ vụ bác sĩ Cát Tường (bạn biết chứ!?) mà mình ko biết nội tình gì cả vì ko thèm đọc lấy 1 dòng tin. Chị mình hỏi lý do. Mình tl gọn lỏn: “Tại em không có ý định PTTM”. Chị mình nghệch ra lắc đầu: “Trời trời, em ko đọc, sao biết chỉ có thế? Rộng ra là chuyện cả tin, ko tìm hiểu đã vội tin người để bị lừa, bị hại,… kiểu vậy. Nên đọc để hiểu tình hình xã hội mà tự bảo vệ mình”. Nhờ câu đó của chị, mình bắt đầu chịu khó đọc chuyện đời, tâm sự thực tế hơn… thay vì chỉ tiểu thuyết 😀

        Số lượt thích

          • Bạn ơi, có đang xài chrome không? Dạo này chrome của mình chán ghê á: mình vô trang nào thì nó liền điều hướng tới trang khác: toàn các trang quảng cáo, bình chọn, khảo sát,…quay quay cả buổi, mình tăt cũng ko được. Điên thật! Rồi mấy cái add-on mình có cài đâu mà cũng dính vào, rắc rối quá. Bạn có biết lý do vì sao không? Mà bạn…có phải bên lĩnh vực máy tính, công nghệ thông tin không?

            Số lượt thích

            • Mình cảm ơn bạn nhiều nha. Từ lâu rồi, Chrome của mình của chẳng lên được facebook. Google giải pháp thì biết côc côc lên thoải mái. Nên mình down về, cần fb thì qua đó. Chỉ bởi vì cái app momentum của chrome (như hình) mà mình ko nỡ bỏ chrome. Và mình tưởng app nào của chrome ở chrome web store thì chỉ dùng cho chrome, ko add vào coc coc dc. Mình tin thế một cách không có cơ sở (tự suy diễn chứ ko đi check). Giờ gặp vấn đề này, trong lúc chờ bạn trả lời (dù bạn trả lời rất nhanh chóng và mình cảm ơn nhiều) thì mình có chat với em mình, nó nói mình biết một tin mà mình vẫn chưa hiểu lắm: côc côc được xây trên nền tảng chrome nên app nào cho chrome thì côc côc vẫn cài được. Và mình check thì đúng vậy. Thế rốt cuộc 2 cái khác nhau thế nào? Cái nào hơn? Trường hợp của mình thì thấy coc coc khắc phục đc hết rồi đó. Nên mình nghĩ mình sẽ chuyển hoàn toàn qua xài côc côc luôn đây.
              https://i2.wp.com/ngaygio.files.wordpress.com/2015/08/untitled.png?ssl=1&w=450

              Số lượt thích

            • Kì quá ta, mình vào thư viện hình ảnh và rõ ràng chọn sao chép địa chỉ hình ảnh dán vào mà sao hình không đc show ra trực tiếp, là sao vậy bạn?

              Số lượt thích

            • Có vẻ như máy tính (hoặc tài khoản wp của bạn có vấn đề), một số comment có chèn thêm link lạ.
              Về cái ảnh mà bạn gửi cũng bị chèn thêm một đoạn làm nó không thể hiển thị là i2.wp.com và ?ssl=1&w=450

              Mình cũng chẳng biết sửa nó ra sao nữa 😦
              Về cái trình duyệt web mà bạn hỏi thì chrome và cốc cốc đều chạy trên một mã nguồn mở (mã nguồn được công bố rộng rãi và được tất cả sử dụng miễn phí). Từ cái mã nguồn mở (bạn cứ hiểu nó là cái nền) những nhà phát triển sẽ xây dựng phần mềm của riêng họ.
              Một mã nguồn mở khác mà bạn đang dùng chính là WordPress đấy.
              Bạn có thể Follow những wordpress dạng XXX.wordpress.com và những host trả phí dạng XXX.com (miễn là nó được xây dựng trên nền tảng mã nguồn WordPress).
              Hiểu nôm na kiểu như gạo nếp là cái nền, từ đó làm được xôi, bánh chưng, bánh ít,… 🙂
              Chrome và Cốc cốc đều được xây dựng trên một mã nguồn mở chung là Chromium.
              Firefox và Tor cũng được xây dựng trên cùng một mã nguồn mở.
              Google cũng được xây dựng trên một mã nguồn mở.
              Mã nguồn mở hiểu đơn giản như những dự án xã hội, được những lập trình viên tạo nên để đóng góp miễn phí cho cộng đồng. Nếu bạn thích tìm hiểu thì có thể tìm trên mạng.
              Unix là hệ điều hành xây dựng trên mã nguồn mở.
              Window là hệ điều hành xây dựng trên mã nguồn không được công bố (được Microsoft xây dựng, đăng ký sở hữu và giữ riêng cho họ).

              Liked by 1 person

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google photo

Bạn đang bình luận bằng tài khoản Google Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s