WordPress-Development-wolfactive-949x475
10/04/2020

WordPress: Thiết Kế Theme (P1 & 2: Giới Thiệu)

Như các bạn đã biết, hiện nay trên thế ngành công nghệ thông tin ngày càng đang phát triển mạnh do đó việc thiết kế website cũng tăng theo với nhu cầu sử dụng, tạo website của các doanh nghiệp, lập trình viên,… Nhờ vậy mà nhiều nền tảng hỗ trợ cho việc tạo website ra đời như: WordPress, Shopify, Joomla, Magento ,… Nhưng ở đây mình sẽ hướng dẫn các bạn sử dụng và lập trình trên WordPress.

Vậy WordPress là gì?

  • WordPress là một CMS được xây dựng trên môi trường ngôn ngữ lập trình PHP , Apache, MySQL. WordPress được phát triển bởi Michel Valdrighi và public hoàn toàn miễn phí (Open Source). Tính tới thời điện hiện tại thì version mới nhất của WordPress là Version 5.4, bạn có thể download WordPress tại trang chủ WordPress.org . Sử dụng WP (WordPress) bạn sẽ có cảm giác như đang sử dụng một phần mềm trên máy tính bởi nó có nhiều tính năng rất chuyên nghiệp như setup, tự tải và cài đặt các plugin trên internet, hệ thống thông báo tự động.

Vậy tại sao WordPress lại nhiều người sử dụng WordPress?

  • Tính năng dễ sử dụng: Đối với những lập trình viên website thì thời gian tạo ra một website bằng WP rất nhanh so với việc code bằng Php thuần. Bởi WP không chỉ có giao diện tương tác dễ sử dụng mà nó còn có những tính năng cần thiết hỗ trợ lập trình viên trong việc tạo website bằng các function có sẵn được cung cấp bởi WP. Ngoài ra bạn còn có thể cài đặt những Plugin hỗ trợ website trên WordPress

Giao-dien-wordpress-img

  • Hỗ trợ đa ngôn ngữ: WP cung cấp nhiều loại ngôn ngữ. Trước đây thì WP vẫn chưa có tiếng Việt, nhưng giờ thì đã có. Bởi thế mà nhiều lập trình viên hay khách hàng không giỏi về tiếng anh thì vẫn có thể sử dụng được.
  • Được cộng đồng sử dụng đông đảo: Hiện nay WordPress được sử dụng khá rộng rãi trên thị trường website quốc tế. Nên có khá nhiều lập trình viên tham gia phát triển và sử dụng WP. Không những thế, mà nó ngày càng xuất hiện nhiều các website cung cấp các ThemeWordPress như mythemeshop.com hay themeforest.com. Nên bạn có thể dễ dàng chọn các các theme phù hợp với trang web

Vậy làm thế nào để sử dụng WordPress? Trước hết bạn cài đặt một trong những môi trường sau để cài đặt WP: XAMPP, WAMPP. MAMP, AMPSS, Bitnami WordPress, Local By FlyWheel,… Ở đây thì mình sẽ cài đặt Local By FlyWheel. Vì mình thấy cái này cực kì dễ sử dụng bạn có thể download tại đây

Giao diện Local By FlyWheel Image wordpress

Hình 1.1: Giao diện tương tác của Local By FlyWheel

Sau khi bạn cài đặt xong thì chọn “Create A New Site” và điền vào tên site mà bạn muốn

giao-dien-local-by-flywheel wordpress

Hình 1.2: Create Name Site

Chọn Preferred

giao-dien-local-by-flywheel wordpress

Hình 1.3: Choose Your Environment

Sau đó bạn điền tên user, password, email ( bạn có thể hiểu ở bước này giống như là đăng kí tài khoản quản trị site của bạn vậy)

giao-dien-local-by-flywheel

Và đây là kết quả sau khi bạn tạo site:

giao-dien-local-by-flywheel wordpress

Bây giờ bạn chọn Viewsite để xem trang web của mình nhé!

giao-dien-website-local

Như vậy mình đã giới thiệu cho các bạn về WordPress là gì, cách cài đặt WordPress trên Local By FlyWheel rồi. Thực sự rất đơn giản phải không nào?

Cấu Trúc WordPress

Để hiểu được cấu trúc của WP bạn cần mở thư mục folder local WordPress của bạn bằng cách click vào nút mũi tên ở dưới tên Site của bạn và nằm ngoài cùng kế bên đường dẫn folder. Ở đây đường dẫn của mình là “~\Local Sites\news-wolfactive”

giao-dien-local-by-flywheel

Sau đó bạn vào theo trình tự folder sau app > public > wp-content > themes. Tại thư mục themes nơi hứa toàn bộ themes của bạn. Như trong ảnh dưới hiện tại mình đang có 3 themes: twentynineteen, twentyseventeen, twentytwenty và file index.php. Nhưng để giải thích 1 cách cụ thể hơn mình sẽ tạo folder themes mới có tên là “newswolfactive”

themes-wordpress

Tại thư mục “newswolfactive” mình sẽ tạo gồm những file sau:

folder-themes-wordpress

Bây giờ mình sẽ giới thiệu chi tiết về các file trên:

  • index.php: ở đây file index có chức năng như show lên trang chủ của bạn. Tuy nhiên ở file này bạn không ghi gì cả và để trống.
  • style.css: dùng để thể hiện thông tin tên themes của bạn trên WP.
  • header.php: dùng để chứa phần đầu trang web. Thông thường ở file này bạn viết phần đầu của thẻ html, thẻ head, phần đầu thẻ body, và code phần đầu trang web của bạn. Tùy ý các bạn muốn sao cũng được. Mục đích của file này là tái sử dụng ở các trang khác của trang web.
  • footer.php: ngược lại với thẻ head thì file footer.php chứa phần đuôi trang web như đóng thẻ body, đóng thẻ html. Hoặc phần code mà bạn muốn tái sử dụng ở các trang sau.
  • home-page.php: đây là file template page của bạn. (chi tiết cụ thể như thế nào thì mình sẽ nói chi tiết ở bài kế)

Ngoài ra còn có 1 số file khác thường dùng như:

  • screenshort.png: đây là file ảnh giống như ảnh đại diện để hiện thị trên themes.
  • single.php: bạn có thể hiểu file này giống như trang show ra trang bài viết của bạn.
  • search.php: trang hiện thị kết quả tìm kiếm.
  • functions.php: file chứa các hàm bạn tạo dùng để sử dụng trong trang web.
  • category.php: file hiển thị các bài post theo tên category.

Như vậy mình đã giới thiệu cho các bạn về cấu trúc các folder, file của WP. Mình sẽ viết demo cho các bạn của các file php chính như index, style, header, footer, home-page ở bài kế tiếp.

Vui lòng chọn size trước khi đặt hàng (*)