-----
12
Cài Wordpress
Cài thủ công:
– Tải và Cài WAMP (ver 3.0.6) hoặc XAMPP
– Tải Wordpresss
Để ý hai trang wordpress.org và wordpress.com tuy của cùng một
công ty, nhưng hai trang này có hai mục đích khác nhau.
Trang wordpress.com hỗ trợ việc tạo blog/website miễn phí
trên nền tảng wordpress một cách đơn giản. Trong khi trang wordpress.org hỗ trợ
việc tải nguồn wordpress về máy cục bộ để phát triển một ứng dụng web/website
phức tạp hơn.
Vào trang https://wordpress.org/,
bấm vào mục Get Wordpress để tải về máy
Giải nén Wordpress (ver 4.9.8), chép thư mục wordpress vào
thư mục www của WAMP. Đổi tên thư mục wordpress thành tên dự án web đang làm
(ví dụ: website1).
– Cấu hình Wordpress
Mở trình duyệt nhập vào đường dẫn (URL) địa chỉ của
website01 (ví dụ: http://localhost/website01) vừa tạo để thực hiện các cài đặt
cho website.
Mở phpmyadmin để tạo cơ sở dữ liệu cho website: http://localhost/phpmyadmin, Username là
root, mật khẩu để trắng. Tạo cơ sở dữ liệu mới (ví dụ website01).
Lấy thông tin của cơ sở dữ liệu vừa tạo để điền vào trang cấu
hình Wordpress.
Cài tự động
Vào trang này để lấy gói cài đặt Wordpress tự động: https://instantwp.com/downloads/
13 Tạo Starter theme cho website
Starter theme là (khung) giao diện mẫu, lập trình viên sẽ sử
dụng nó để tạo ra các giao diện (theme) mới.
Đọc thêm về Starter theme và Framework theme tại đây: https://thachpham.com/wordpress/themes-wordpress/starter-theme-vs-framework-theme.html
Một số trang giúp tạo Starter theme:
– Bones: https://themble.com/bones/
– Underscores: https://underscores.me/
Sử dụng Starter theme để chuyển giao diện đã thiết kế ở các
bước trước thành một theme.
Sử dụng Underscores để tạo Starter theme. Giải nén tập tin
Starter theme (ví dụ website01.zip) và chép vào thư mục: C:\wamp64\www\website01\wp-content\themes
Thư mục themes chứa các theme của website.
Ảnh xem trước theme có tên là screenshot.png.
14 Tạo phần header cho theme
Chép toàn bộ tập tin và thư mục của giai đoạn thiết kế, bỏ
vào thư mục của website trong C:\wamp64\www\website01\wp-content\themes (ví dụ:
website01).
Chép phần mã HTML của header từ tập tin thiết kế, bỏ vào phần
header trong tập tin header.php.
Chép phần mã trong <head></head> của tập tin thiết
kế, bỏ vào vùng <head></head> trong tập tin header.php.
Sử dụng hàm bloginfo('stylesheet_directory') để lấy đường dẫn
tuyệt đối của website, sau đó kết hợp với đường dẫn tương đối khi thiết kế, để
trình duyệt có thể tìm thấy các tài nguyên cần tham chiếu.
Ví dụ:
[PHP]
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory');
?>/vendor/bootstrap3/css/bootstrap.min.css">
Kết quả, mã HTML khi gửi về trình duyệt sẽ là,
<link rel="stylesheet"
href="http://localhost/website01/wp-content/themes/website01/vendor/bootstrap3/css/bootstrap.min.css">
15 Chuyển menu sang Wordpress
Trong trang giao diện admin của Wordpress, vào mục
Apperance\Menus để chỉnh sửa menu cho trang web.
Sử dụng hàm wp_nav_menu() để chuyển menu từ trong phần admin
của Wordpress ra giao diện header.php.
Cài Wordpress snippets cho Visual Studio Code tại đây: https://marketplace.visualstudio.com/items?itemName=tungvn.wordpress-snippet,
bấm nút Install để cài đặt. Sau khi cài đặt xong, tắt VS Code và mở lại để sử dụng.
Ví dụ: hàm wp_nav_menu() sẽ sinh ra đoạn mã sau:
<div class="menu-main-container">
<ul id="menu-main"
class="menu">
<li
id="menu-item-7" class="menu-item menu-item-type-custom
menu-item-object-custom current-menu-item current_page_item menu-item-home
menu-item-7"><a
href="http://localhost/website01/">Home</a></li>
<li
id="menu-item-8" class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-8"><a
href="http://localhost/website01/sample-page/">Sample
Page</a></li>
</ul>
</div>
Thêm tham số cho hàm wp_nav_menu() để có được menu theo ý muốn.
Ví dụ: sửa 2 cấp theo cấu trúc chung của một menu.
<?php wp_nav_menu(array(
'container'
=> 'div',
'container_class'
=>'collapse navbar-collapse navbar-ex1-collapse',
'menu_class'
=> 'nav navbar-nav navbar-right'
));
?>
Trong Wordpress, menu đang được active sẽ có tên lớp là current_page_item.
Vì vậy, có thể đổi tên lớp “active” khi thiết kế CSS thành current_page_item để
định dạng cho mục menu được active. Lưu ý: vì trình duyệt thường lưu cache CSS,
nên cần xóa sạch nó (clear browser data) để xem kết quả vừa cập nhật.
[Giao diện tùy chỉnh các mục trong menu]
Để thêm mục mới trong menu, đánh dấu chọn vào mục Sample
Page\ Add to Menu\ Sửa tên theo ý muốn.
16 Tạo trang hompage
Tạo trang homepage.php, lưu ở thư mục gốc của website. Với nội
dung là:
<?php
/*
Template Name: Trang
chu
*/
?>
Vào trang wp-admin để thêm trang web mới cho website. Vào
Pages\ Add New, đặt tên cho trang mới là homepage, trong mục template chọn
trang homepage.php là tập tin chứa mã nguồn.
Thực hiện “điều hướng” (route) để khi người dùng nhập vào
tên miền của trang web (ví dụ: http://localhost/website01/)
thì mở trang chủ (hompage.php): vào trang admin của wordpress\Settings\Reading,
trong mục Your homepage displays, chọn A static page, trong mục Homepage chọn
homepage, bấm Save Changes.
Mở mã nguồn của trang homepage.php để gọi các thành phần của
trang web này:
– Để có menu, gọi hàm get_header();
Ví dụ:
<?php
/*
Template Name: Trang
chu
*/
get_header();
?>
Thực tế wordpress đã tạo sẵn một template cho trang home, đó
là trang page.php (trong thư mục: C:\wamp64\www\website01\wp-content\themes\website01).
Lấy template trong trang home.php để dán vào trang homepage.php.
[homepage.php]
<?php
/*
Template Name: Trang
chu
*/
get_header();
?>
<div
id="primary" class="content-area">
<main
id="main" class="site-main">
<?php
while (
have_posts() ) :
the_post();
get_template_part( 'template-parts/content', 'page' );
// If comments
are open or we have at least one comment, load up the comment template.
if (
comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; // End of
the loop.
?>
</main><!-- #main -->
</div><!--
#primary -->
<?php
get_footer();
-----------
Cập nhật [10/10/2018]
-----------
Xem thêm: Làm web (06) - Cách sử dụng phông chữ