Lập trình WordPress – Bài 4: Chuyển template HTML sang theme WordPress

Hướng dẫn chuyển layout HTML sang theme WordPress

Thiết lập trang chủ – Trang Blog

Mặc định chế độ (Reading) liệt kê bài viết mới nhất → chọn file index.php làm giao diện trang chính.

Tuy nhiên, khi chuyển chế độ: chọn trang chủ và trang blog, lúc này trong blog sẽ chọn index.php làm template trang để hiển thị và front-page.php làm template trang chủ.

Cụ thể:

  • Tạo 2 page: Trang Chủ và Blog, sau đó
  • Reading chọn Homepage là Trang Chủ
  • Trang tin tức chọn Blog.
  • Reload trang web sẽ thấy giao diện index.php cho blog và front-end.php làm trang chính.

Chuẩn bị template HTML

Link template có thể tải ở đây.

Thực hiện chuyển HTML sang theme WordPress

Bước 1: Chuyển phần header, footer

(như phần trước)

Bước 2: Chuyển CSS, JavaScript trong functions.php

Load CSS như phần trước.

Load JS:

<?php wp_enqueue_script('main_theme_js', get_theme_file_uri('/build/index.js'), [], '1.0', true);?>
2 tham số đầu giống như load CSS, tham số thứ 3 là các thư viện mà script phụ thuộc (vd: jquery), tham số thứ 4 là phiên bản của script, và tham số cuối là vị trí load - true nếu muốn load ở trước </body>, còn false load trong phần head.

Bước 3: Các ảnh – trong HTML dùng đường dẫn với code như sau:

<?php echo get_theme_file_uri([duong_dan_tu_theme_den_anh]) ?>

Phần 2 (fix link)

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *