Cách chèn code vào header và footer WordPress

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ỉnh sửa header trong 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 trong wordpress 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.

Footer trong wordpress là gì?

Footer là phần cuối trang của một website hay một trang web. Khi người dùng nhấn truy cập vào trang web của bạn, header sẽ là nơi để lại ấn tượng đầu tiên cho họ. Nhưng cũng đừng quên chăm chút cho footer nhé. Đây sẽ là nơi để lại những thông tin cơ bản cho người dùng biết được:

• 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 tới những website ngoài nhưng có liên quan tới website của bạn (ví dụ như những trang mạng xã hội của thương hiệu)
• 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.

Cách thêm code vào header và footer trong wordpress

Chỉnh sửa header trong wordpress như thế nào? Đâ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.

Chèn code vào header.php và footer.php thủ công:

Một trong những tips nhỏ mà chúng ta thường nghe là hãy sử dụng child theme (theme con) thay vì parent theme (theme mẹ) để tránh những thay đổi không đáng có nếu bạn update theme chính của mình. Nếu bạn không biết cách tạo ra child theme, hãy xem mục 4 để xem phần hướng dẫn nhé.

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 header.php và một file footer.php 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 functions.php và kiểm soát cả phần code cho header và footer trong đây.

Wikipedia

• Bước 1: chuẩn bị đoạn code:

Bạn sử dụng đoạn code sau để tạo header:

/* Đây là đoạn mô tả nhẹ về phần code này để về sau bạn có thể tìm lại một cách dễ dàng('wp_head', 'đặt tên cho function này tại đây nhé');
function đặt tên cho function này tại đây nhé(){
?>
CHÈN ĐOẠN CODE TẠO HEADER TẠI ĐÂY
<?php };

Và sử dụng đoạn code sau để tạo footer:

/* Đây là đoạn mô tả nhẹ về phần code này để về sau bạn có thể tìm lại một cách dễ dàng('wp_footer', 'đặt tên cho function này tại đây nhé');
function đặt tên cho function này tại đây nhé(){
?>
CHÈN ĐOẠN CODE TẠO FOOTER TẠI ĐÂY
<?php };

• Bước 2: chèn code vào file:

Sau khi bạn đã chuẩn bị các đoạn code, giờ là lúc chèn chúng vào file bằng cách vào Appearance => Editor => functions.php (hoặc header.php, footer.php tuỳ bạn). Sau đó copy đoạn code của bạn vào dưới cùng của file, lưu nó lại là xong.

Chèn code vào header và footer bằng plugins:

Đố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ề.

• Bước 2: kích hoạt plugin của bạn.

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ề.

• Bước 3: bây giờ plugin Insert Header and Footer đã ở trong menu của bạn. Chọn Settings => chọn Insert Header and Footer. Bạn sẽ thấy 2 khung Header và Footer xuất hiện để bạn chèn code vào trong.

• Bước 4: nhấn nút save để lưu lại những gì bạn đã làm. Sau đó thì kiểm tra thành quả của mình nào.

Cách tạo child theme trong WordPress:

Chúng ta sẽ cùng đi nhanh qua các bước tạo child theme trong WordPress của bạn nhé.

• 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 -child ở đằng sau tên đó.

Bạn đặt tên folder theo tên theme mẹ là twentyseventeen kèm theo chữ -child để phân biệt.

• Bước 3: tạo một stylesheet để định dạng child theme của bạn

Trong bước này: bạn tạo một file stylesheet dưới cái tên style.css (giúp bạn thiết lập tất cả các luật CSS cần thiết và giúp bạn định hình được theme của mình. Trong file style.css, ban bắt buộc phải có những thông tin như dưới đây để WordPress hiểu rằng đây là child theme cho theme mẹ của bạ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.
• Template: đây là mẫu theme mà child theme cần phải làm theo. Theo ví dụ trên thì theme mẹ mẹ bạn đang dùng cho trang web là Twenty Fifteen, vậy nên trong phần template bạn phải ghi là twentyfifteen. Hãy điều chỉnh những thông tin trên cho khớp với parent theme của bạn nhé.

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.

Sau khi tạo xong, bạn nên lưu lại cả quá trình vừa rồi trước khi bước qua bước số 4 nhé.

• Bước 4: tạo file functions.php

Việc tạo file functions.php 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.

Khi bạn tạo file function, thay vì để lại những dòng lệnh có từ theme mẹ qua, hãy để trống nó và copy đoạn code dưới đây:

<?php
/* enqueue script for parent theme stylesheeet */function childtheme_parent_styles() {
// enqueue style
wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', '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.

Bạn vào Administration Screen > Appearance > Themes. Bạn sẽ thấy trong list theme của bạn có child theme mà bạn vừa tạo và đã sẵn sàng để kích hoạt.

Qua bài viết trên chắc bạn cũng đã biết cách chèn cũng như chỉnh sửa header trong wordpress rồi đúng không nào!