TỪNG BƯỚC THIẾT KẾ WEB VỚI WORDPRESS TRONG 30 PHÚT

TỪNG BƯỚC THIẾT KẾ WEB VỚI WORDPRESS TRONG 30 PHÚT Revision 1.0 Copyright ® 2017 by FIT – Khoa CNTT Trường ĐH Phan Thiết CÁC THUẬT NGỮ THÔNG DỤNG STT Thuật ngữ Wordpress (WP) 10 Giải thích WordPress phần mềm nguồn mở (Open Source Software) viết ngơn ngữ lập trình website PHP (Hypertext Preprocessor) sử dụng hệ quản trị sở liệu MySQL WordPress mắt lần vào ngày 27/5/2003 tác giả Matt Mullenweg Mike Little Hiện WordPress sở hữu phát triển công ty Automattic có trụ sở San Francisco, California thuộc hợp chủng quốc Hoa Kỳ CMS viết tắt Content Management System, hay gọi hệ thống quản trị nội dung nhằm mục đích giúp dễ dàng quản lý, chỉnh sửa nội dung Nội dung tin tức điện tử, báo chí hay media hình ảnh, video, Hệ thống CMS giúp tiết kiệm thời gian quản lý, chi phí vận hành bảo trì nên có nhiều cơng ty sử dụng Khơng công ty mà blog cá nhân đời với số lượng không nhỏ, họ chọn giải pháp sử dụng CMS nhằm dễ dàng xây dựng website quản lý nội dung, bên cạnh cịn tiết kiệm chi phí xây dựng website XAMPP Xampp chương trình tạo máy chủ Web (Web Server) tích hợp sẵn Apache, PHP, MySQL, FTP Server, Mail Server công cụ phpMyAdmin Không Appserv, Xampp có chương trình quản lý tiện lợi, cho phép chủ động bật tắt khởi động lại dịch vụ máy chủ lúc Plugin Plugin thành phần mở rộng nhỏ lập trình riêng dựa API hàm mở có sẵn WordPress để tạo thành tính mà mặc định WordPress khơng có Nói dễ hiểu hơn, plugin module bổ sung chức mà bạn cài vào WordPress Widget Widget gọi tính mà website WordPress phải cần dùng, tập hợp chức năng; widget tương ứng với chức để bạn chèn vào sidebar (thanh bên) theme Page trang wordpress Post Post dịch theo tiếng Việt có nghĩa “bài đăng” Cái nghĩa nói lên tất Post viết hay đăng có website bạn Khi bạn viết nội dung hay viết chủ đề đó, post CSS chữ viết tắt Cascading Style Sheets, ngơn ngữ sử dụng để tìm định dạng lại phần tử tạo ngơn ngữ đánh dấu (ví dụ HTML) Localhost Localhost từ ghép hai chữ “local” “host“ Local dịch theo nghĩa IT máy tính bạn, Host theo nghĩa IT máy chủ Vậy localhost nghĩa máy chủ vận hành máy tính bạn Host/Hosting Host hiểu theo nghĩa nghành công nghệ website nghĩa máy tính truy cập hai chiều (nhận kết nối gửi kết nối ngồi), máy tính mà nói tới nghĩa máy chủ web (cịn gọi Web Server) chứa liệu liên quan đến website bao gồm mã nguồn, liệu tải lên (hình ảnh, media,…) sở liệu (database – liệu sinh trình bạn sử dụng WordPress nội dung post, page, tag,…) 11 Domain (tên tên miền nghĩa địa định danh dẫn tới website bạn miền) chứa host host bạn truy cập qua dãy IP máy chủ CÀI ĐẶT WORDPRESS TRÊN LOCALHOST 2.1 Cài đặt môi trường - - Trước bắt tay vào cài đặt wordpress, cần chuẩn bị cho mơi trường hoạt động (một host máy tính – localhost) để trang web chạy máy tính cá nhân Trong tài liệu này, sử dụng XAMPP Sử dụng trình tìm kiếm từ khóa “XAMPP”, tải cài đặt Phiên dùng tài liệu 7.1.4 - Cài đặt xampp Sau cài đặt thành cơng, hình XAMPP Control Panel xuất hiện, đồng thời ta kiểm tra biểu tượng xampp khay đồng hồ hệ thống - Màn hình Xampp Control panel - Trong trường hợp start services bị lỗi port, thay đổi port 443 80 mặc định thành 8080 4443 file httpd.conf httpd-ssl.conf tương ứng - Chúng ta mở trình duyệt, nhập localhost để kiểm tra xem start dịch vụ chưa Lưu ý: nhập thêm 8080 sau localhost bạn thay đổi port 80 mặc định Nếu hình thành cơng 2.2 Tải Wordpress - Vào https://wordpress.org/download/ tải source wordpress - Giải nén toàn tập tin folder wordpress vào folder htdocs xampp 2.3 Tạo CSDL mySQL phpMyAdmin: - Trong trình duyệt, gõ localhost/phpmyadmin (thêm port 8080 sau localhost đổi port mặc định) Trong phpMyAdmin, tạo CSDL, đặt tên bấm tạo Lưu ý: ghi nhớ tên CSDL để khai báo phần cài đặt Wordpress 2.4 Cài đặt Wordpress - Trong trình duyệt, gõ localhost/wp-admin (thêm port 8080 sau localhost đổi port mặc định) Cài đặt wordpress theo bước đây: Chọn ngôn ngữ - Bấm Let’s go - - Nhập tên CSDL tạo mục 2.3 - Bấm Run the install để bắt đầu cài đặt - Tại trang Welcome, nhập thơng tin cịn lại để bắt đầu cài đặt - Cài đặt thành công Bấm login để đăng nhập vào wordpress 10 Bước 1: Vào plugin Smart Slider tạo slider Bước 2: Copy php code smart slider Bước 3: Thêm code php smart slider vào theme - Appearance -> Editor -> Theme Header -> Dán code php smart slider vào cuối đoạn 18 3.4.4 Thiết kế Home page (trang chủ): Muốn đặt trang chủ, trước tiên phải định page làm trang chủ phải tạo chuyên mục muốn hiển thị Trong ví dụ này, sử dụng chuyên mục Tin tức kiện Thông báo sinh viên Lưu ý: phải xóa trang Sample page wordpress trước tiến hành tạo trang chủ Bước 1: Pages -> Add pages Add page mới, ví dụ: “Trang chủ”, không cần thêm nội dung cho page Bước 2: Chuyển sang chế độ điều chỉnh giao diện trang chủ -> Bấm Page Builder Bước 3: Chọn kiểu hiển thị Page Builder Ở muốn trang chủ hiển thị chuyên mục chọn số lượng block tương ứng Trong ví dụ này, thêm chuyên mục Tin tức kiện Thông báo sinh viên 19 - Bước 2: Đặt “Trang chủ” Sau tạo xong Trang chủ, ta tiến hành cài đặt trang thành trang chủ tĩnh Settings -> Reading -> Front page display: A static page -> chọn page “Trang chủ” menu xổ xuống -> Save Changes 3.4.5 Chỉnh sửa Banner cho trang web - Chúng ta cần thêm banner cho trang web để dễ dàng nhận diện thương hiệu 20 Bước 1: Sahifa -> Theme Settings -> Header Settings Bước 2: Trong Header Settings -> Custom Image Logo -> Upload Chúng ta tìm chọn hình ảnh làm banner cho trang web Kích thước khuyến nghị 190px x 60px Trong hướng dẫn này, sử dụng kích thước 1421px × 334px để làm banner Bước 3: Bấm save change để lưu lại cấu hình Trở lại trang web, refresh lại trang web để kiểm tra kết 21 3.4.6 Chỉnh sửa thông tin Footer: - Footer trang web phần cuối trang web, thường thêm thông tin liên hệ, icon mạng xã hội… để khách hàng liên hệ dễ dàng Bước 1: Appearance -> Widgets Trong hình Widgets, thêm mục liên hệ vào khu vực First Footer Widget Area Số lượng bố cục cột Footer cài đặt menu footer sahifa setting Bước 2: Trong hình widget, tìm tới Widget có tên Visual Editor, thêm vào First Footer Widget Area 22 Bước 3: Trong hình widget, First Footer Widget Area, điều chỉnh lại thông tin liên hệ Bước 4: Refresh lại trang web kiểm tra kết 3.4.7 Chỉnh sửa Sidebar: Một trang web cần có side bar (thanh bên trái phải tùy bố cục) để khách hàng truy cập vào số mục như: Post list, Facebook Like Box, Youtube… Trong Wordpress, khu vực sidebar quản lý Primary Widget Area 23 Bước 1: Appearance -> Widgets -> Primary Widget Area 24 Bước 2: Chúng ta tìm thêm widget: Sahifa – Post list, Easy Facebook Likebox, Sahifa – Video vào khu vực Primary Widget Area Nếu khơng tìm thấy widget, quay lại menu plugin, tìm cài đặt Bước 3: Sau thêm widget, cần khai báo lại thông số widget tương ứng 3.4.8 Chỉnh sửa Tone màu Theme Một trang web thường có màu sắc chủ đạo, đặc trưng trang web giúp khách hàng nhận biết thương hiệu dễ dàng làm cho trang web đỡ tẻ nhạt Do cần thay đổi màu sắc chủ đạo theme Trên internet cung cấp số công cụ để phối màu, Kuler Adobe công cụ tốt để chọn màu sắc chủ đạo Sau chọn màu ưng ý, tiến hành thay đổi màu cho trang web Bước 1: Sahifa -> Theme setting -> Styling 25 - Styling theme Sahifa cho phép thay đổi màu sắc theme Custom theme color, màu Background Color Bước 2: Thay đổi màu menu ngang - Tìm đến Main Navigation Styling Tại thay đổi màu sắc menu ngang theo ý thích 26 ĐƯA TRANG WEB LÊN HOST Sau thiết kế trang web hoàn chỉnh, cần upload trang web từ localhost lên host để khách hàng internet truy cập Để làm điều này, cần có tên miền (domain) nơi lưu trữ (host) Định nghĩa khái niệm localhost, host, domain tham khảo chương 4.1 Tại localhost 4.1.1 Trích xuất (Export) CSDL - Trong trình duyệt web, vào trang phpmyadmin địa chỉ: localhost/phpmyadmin, thêm port 8080 thay đổi port mặc định Bước 1: Chọn tên CSDL, chọn tab Xuất Bước 2: Chọn kiểu định dạng SQL bấm thực Bước 3: Trình duyệt tải file có định dạng sql Chúng ta tìm file thư mục tải copy thư mục an toàn 4.1.2 Trích xuất source web Sau trích xuất CSDL, ta cần trích xuất source web Nén thư mục htdocs xampp thành file zip Lưu ý: host chấp nhận file zip nên cần nén chuẩn này, dùng chuẩn nén khác không sử dụng Bước 1: Trong Windows explore, vào đường dẫn Xampp: C:\xampp\htdocs 27 Bước 2: Chọn hết tất file thư mục htdocs, dùng winrar chương trình nén file tùy thích nén lại thành file zip Ta file htdocs.zip Bước 3: Kiểm tra lại file vừa nén, copy file htdocs.zip đến nơi an toàn để tiến hành upload lên host 4.2 Tại host - - Tùy vào Control Panel host khác nhau, tạo thực công việc: o Tạo CSDL mới, tạo thông tin đăng nhập, o Import CSDL Trong tài liệu này, thao tác dựa Control panel host Mắt Bão Trong Control Panel, vào mục Cơ sở liệu, chọn mục Nhập kết xuất, tìm đến file sql upload Bước 1: Chọn Nhập Kết xuất để import CSDL, tìm đến file sql CSDL mà trích xuất mục 4.1 Bước 2: Sau upload CSDL thành công, tạo thêm người dùng để quản lí CSDL 28 Bước 3: Chúng ta tạo thêm người dùng quản lí CSDL hình bên 4.3 Thực upload trang web lên host - Sau bước chuẩn bị mục 4.1 4.2, tiến hành upload source web kết nối với CSDL Bước 1: Chép giải nén file zip thư mục htdocs xampp localhost vào thư mục httpdocs host (thư mục chứa source code website khác tùy vào host.) 29 Bước 2: Sau upload giải nén thành công, tiến hành kết nối CSDL cách điều chỉnh file wp-config.php Trong thư mục httpdocs - Trong file wp-config.php, điều chỉnh lại tên miền - Và điều chỉnh tham số tên CSDL, thông tin đăng nhập CSDL Tên CSDL thông tin đăng nhập khởi tạo phpMyAdmin host 30 31 KẾT LUẬN Tài liệu giới thiệu tổng quan cách cài đặt sử dụng số thành phần Wordpress, ưu điểm như: hồn tồn miễn phí, dễ sử dụng, dễ dàng tùy biến hỗ trợ nhiều plugin tiện ích làm cho Wordpress trở thành công cụ làm web vô hữu dụng Sự biến tấu khả tùy chỉnh vô hạn làm cho Wordpress trở thành cơng cụ CMS tốt nhất, thích hợp cho muốn tự thiết kế cho website, dùng để tự thiết kế trang blog chuyên nghiệp hay website phục vụ cho công việc ( website cho công ty, site bán hàng mạng ) “Wordpress is limited only by your imagination” 32