Thêm “Made with Love” với biểu tượng trái tim vào Footer

Nếu bạn nhìn vào cuối trang của mình ở mục Footer, bạn sẽ thấy rằng nó không hiển thị văn bản mặc định được xuất ra bởi Genesis Framework. Nhiều trang hiển thị “Made with Love” hoặc “Handcrafted with Love” trong mục đó, và mình muốn làm điều tương tự với trang web của mình. Bạn sẽ có được nó  chỉ với vài bước đơn giản.

Nếu bạn nhìn vào cuối trang của mình ở mục Footer, bạn sẽ thấy rằng nó không hiển thị văn bản mặc định được xuất ra bởi Genesis Framework. Nhiều trang hiển thị “Made with Love” hoặc “Handcrafted with Love” trong mục đó, và mình muốn làm điều tương tự với trang web của mình. Bạn sẽ có được nó  chỉ với vài bước đơn giản.

Enqueue Ionicons

Mở file functions.php trong theme và dán code sau vào:

<script src=”https://gist.github.com/quyengeek/e5fd04470f130746cacc98009528c3b2.js”></script>

Việc này giúp tích hợp ionicons vào trang web và cho phép bạn thêm bất kì biểu tượng nào mà họ cung cấp.

 

Tùy chỉnh Footer của bạn

Bước tiếp theo trong quá trình này cũng khá đơn giản. Tải xuống và cài đặt plugin Genesis Simple Edits cho trang web của bạn.

Đối với những người không quen, plugin này cho phép bạn chỉnh sửa ba khu vực được sửa đổi nhiều nhất trong bất kì theme Genesis: meta nhập trong header, meta nhập trong footer và Footer của trang.

Sau khi kích hoạt plugin, chuyển đến màn hình Genesis > Simple Edits và tìm chọn mục Footer Output ở cuối trang.

(Đảm bảo rằng tùy chọn Modify Entire Footer Text đã được chọn)

Bạn đặt đoạn code sau vào:

<script src=”https://gist.github.com/quyengeek/9718ae556be138377c2fbf714f90cc93.js”></script>

Bạn có thể chỉnh sửa HTML với tên chủ sỡ hữu hoặc liên kết đến trang khác. Ở đây chỉ là ví dụ của mình.

Tạo kiểu cho Heart Dashicon

Tùy thuộc vào kích thước và màu sắc của phông chữ mà bạn đã khai báo, bạn có thể tinh chỉnh CSS một chút cho biểu tượng trái tim ionicons.

Dưới đây là CSS mà minh đã sử dụng trên trang web của mình để đảm bảo giao diện và vị trí đẹp nhất trong Footer.

<script src=”https://gist.github.com/quyengeek/d214f1d6d97e87c24edb382b88bcab54.js”></script>

Và cuối cùng, bạn đã tùy chỉnh thành công Footer của mình với một icon trái tim của ionicons.

Thông tin liên hệ

    • 1

      Step 1

    • 2

      Step 2

    • 3

      Step 3

    1/3

    Step 1

    0%

    50%

    100%

    X