Khi thiết kế một trang web, chúng ta cần chú ý rất nhiều thứ, từ phần layout, content, đến các chi tiết khác như tạo grid thế nào, tạo header và footer làm sao. Bài viết này sẽ dành riêng cho các bạn đang băn khoăn làm sao để tạo header và footer cho trang web dễ dàng nhất mà không làm ảnh hưởng tới theme web mà bạn đã dựng nên.
Header và footer là 2 trong số những nhân tố rất quan trọng để cấu thành một trang web. Vậy, header là gì? Footer là gì? Những cách để chèn thêm header và footer vào trang web wordpress của bạn? Những header và footer đẹp và miễn phí hiện đang có trên thị trường là gì?
Header, hay còn gọi là tiêu đề trang, phần đầu trang, là một phần trang web của bạn. Ở phần đầu trang này, chúng ta thường sẽ thiết kế và chèn những phần sau:
Tên website
Thanh menu gồm các đường dẫn tới các trang chính của website
Logo hoặc hình ảnh đại diện cho trang web
Những đường dẫn khác tùy theo chức năng của trang web như là đường dẫn để đăng nhập cho các website có tính tương tác hoặc giỏ hàng cho các website bán hàng hoặc thông tin
Slider (phần thanh trượt) cho hình ảnh hoặc hình ảnh có đường dẫn, mục đích chung là để cung cấp thông tin.
Thông tin liên lạc đến bạn hoặc đường dẫn tới trang liên lạc của bạn.
Những đường dẫn cung cấp thông tin cho người dùng như cách đặt hàng trên trang web,
Một ô để đăng ký nhận thông tin từ trang của bạn
Những thông tin khác mà bạn muốn để vào như lời nhắn từ doanh nghiệp, những bài viết mới nhất.
Đây là một phần gây nhiều khó khăn cho các bạn tự thiết kế website bằng con đường tự mày mò. Cách truyền thống cho mọi người là tự viết code cho header và footer và tự chèn code vào file .php trong WordPress Dashboard của bạn. Tuy nhiên, cách này cần nhiều kỹ thuật và sẽ khó khăn với các bạn mới bắt đầu. Vì vậy, để tiết kiệm thời gian và để các bạn mới nhập môn dễ thở hơn, cách mà nhiều người áp dụng nhất sẽ là thông qua các plugins, là các trình cắm hay các chương trình hỗ trợ được viết sẵn để giúp bạn mở rộng những phần sẵn có hay thêm các tính năng mới cho trang web của mình trên WordPress.
Với việc code thủ công và chèn đoạn code bạn đã tạo cho header và footer của trang web. Việc chúng ta hay làm là tạo một file chúng tôi và một file chúng tôi trong child theme và chèn code vào. Bên cạnh đó, bạn cũng có thể thêm đoạn code vào chúng tôi và kiểm soát cả phần code cho header và footer trong đây.
Bạn sử dụng đoạn code sau để tạo header:
Và sử dụng đoạn code sau để tạo footer:
Đối với phần đông người dùng WordPress hiện tại, việc tạo header và footer bằng việc tự viết các lệnh và chèn code vào file mất nhiều thời gian và công sức. Những plugins của WordPress là một cách làm thay thế hiệu quả và nhanh chóng vì những lý do sau:
Các lệnh code của bạn sẽ vẫn giữ nguyên nếu bạn có những sự thay đổi hay cập nhật về theme mới.
Các plugins giúp bạn dễ dàng hơn trong việc thực hiện các thay đổi trong header và footer cũng như nếu bạn muốn cụ thể hoá header và footer của mình chỉ xuất hiện trong những trang nhất định (trang chủ chẳng hạn)
Việc sử dụng plugin thường là ưu tiên hàng đầu đặc biệt với người dùng mới vì sử dụng plugin không cần quá nhiều kiến thức phức tạp về việc code.
Khi lướt dạo xem qua các plugin trên WordPress, bạn sẽ thấy có rất nhiều plugin được tạo dành riêng cho việc chỉnh sửa và thêm thắt header và footer. Trong bài viết này, mình sẽ giới thiệu cách sử dụng một trong những plugins được nhiều người dùng nhất hiện nay: Insert Header and Footer , đường thiết kế bởi nhóm WPBeginner.
Bước 1: cài đặt plugins Insert Header and Footer. Bạn có thể vào đây để tải về.
Sau khi bạn đã cài đặt xong, hãy nhấn vào chữ Activate plugin để bắt đầu kích hoạt plugin bạn vừa tải về.
Cách tạo child theme trong WordPress:
Bước 1: bạn tạo theme con trong mục theme của bạn với đường dẫn nhanh là wp-content/themes
Bước 2: khi tạo theme mới, bạn bắt buộc phải đặt tên cho theme con của mình. Cách đơn giản nhất và nhanh nhất mà mình khuyên bạn dùng là sử dụng tên của theme mẹ và thêm ở đằng sau tên đó.
Và đây là một ví dụ cho những gì chúng ta cần điền vào:
/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twentyfifteenchild */
Lưu ý: trong số những dòng trên, bạn bắt buộc phải điền 2 dòng sau để WordPress nhận diện đây là một theme con của theme mẹ.
Theme name: đây là tên theme con của bạn, và mình khuyến khích bạn đặt theo tên theme mẹ và thêm chữ Child ở đằng sau.
Những dòng còn lại, bạn có thể tùy chỉnh, thêm hoặc không thêm đều được.
Theme URL: đây thường là đường dẫn tới website có chứa theme mẹ à theme con của bạn.
Description: đoạn mô tả về theme con mà bạn đang tạo
Author: tên người tạo (là bạn)
Author URL: đường dẫn trang web của người tạo
Version: phiên bản của theme con.
License: tên giấy phép (bắt buộc phải là của GNU), nếu bạn không có license, có thể cắt dòng này ra khỏi file, nếu bạn có license, bạn có thêm một dòng License URL: để thêm thông tin.
Tags: những từ chính mô tả theme con này của bạn.
Text domain: dùng để quốc tế hóa trang theme con bạn tạo. Bạn có thể dùng tên trang của mình hoặc tên người tạo.
Việc tạo file chúng tôi trong mục theme con giúp những chỉnh sửa bạn tạo ra từ theme này được đè lên các lệnh tương tự bên theme mẹ. Đây là ích lợi của việc tạo child theme, bạn có thể thoải mái chỉnh sửa mà không đụng vào code nguồn, và nếu không ưng ý thì bạn có thể xóa lệnh ra khỏi theme con và những lệnh từ theme mẹ lại hiện lên như ban đầu.
<?php /* enqueue script for parent theme stylesheeet */ function childtheme_parent_styles() {
Bạn có thể đổi tên function theo ý của bạn.
Bước 5: Nhấn Update ở cuối trang và lưu thay đổi.
Bước 6: Kích hoạt child theme.