3 bước chuyển đổi PSD sang Theme WordPress

Là một người yêu thích WordPress và tạo nên những sản phẩm từ WordPress, công việc của mình như thiết kế website wordpress, cắt psd sang html rồi lại chuyển sang wordpress là điều hằng ngày mình phải làm để nâng cao trình độ và thu nhập hằng ngày, và ở bài viết này mình sẽ chia sẻ tới các bạn quy trình của mình để làm nên một website bằng wordpress chỉ từ một file PSD (Định dạnh tệp tin Photoshop)

psd-to-wordpress

Thông thường đối với một Web Developer hay Designer thì công việc đầu tiên để họ tạo nên một trang web đó chính là ý tưởng, từ ý tưởng đó bạn sẽ phác họa trên hình ảnh, và từ hình ảnh sẽ biến thành những sản phẩm hoàn thiện. Và ở đây, đòi hỏi bạn phải có kiến thức vững chắc đó là HTML/CSS, JavaScript và PHP.

Nếu bạn muốn rút ngắn con đường để hoàn thiện một sản phẩm tuyệt vời, chức năng ưu việt thì hay nghỉ tới WordPress và dành thời gian để vọc nó, bạn có thể xem qua các bài viết trên blog của mình hoặc trên mạng, rất nhiều… chỉ cần bạn thích! Có thể bạn sẽ đặt ra câu hỏi là tại sao nên sử dụng WordPress? bởi vì WordPress là một CMS quản lý nội dung cực kỳ tốt, chức năng vô vàn, phải nói rằng là chức năng gì cũng có. Mình tin chắc rằng nếu bạn chuyển PSD sang WordPress chắc chắc bạn sẽ nghiền nó cho mà coi.

Các bước để chuyển đổi PSD sang WordPress

Quy trình chuyển đổi thiết kế PSD(Photoshop File)/ hình ảnh sang Theme WordPress

Bước 1: Cắt PSD

Đây là bước đầu tiên trong việc chuyển đổi PSD sang WordPress. Thuật ngữ “cắt” có nghĩa là cắt một tập tin hình ảnh thành nhiều file thiết kế, có các thành phần thiết kế khác nhau của bộ thiết kế tổng thể. Bạn sử dụngAdobe Photoshop( trên mạng có rất nhiều bản crack nhưng mình không khuyến khích bạn dùng)

Bước 2: Tạo các file HTML và CSS

Đây là bước tiếp theo, bước này yêu cầu bạn phải có kiến thức về HTML vs CSS cơ bản. Một số phần mềm bạn có thể sử dụng đến đó là

  1. Dreamweaver: Phần mềm nổi tiếng của hàng Adobe
  2. Adobe Fireworks: Đồng hương với Dreamweaver
  3. Submit Texline 2: Nhỏ nhưng chất
  4. Notepad ++: Phần mềm nhỏ gọn, được mọi người yêu thích

Bước 3: Chuyển đổi HTML sang Theme WordPress

Mục đích chính của việc chuyển đổi PSD sang WordPress là tạo nên một theme wordpress và sau đó bổ sung thêm chức năng đến theme đó hay là sử dụng các plugin có sẵn trong thư viện của wordpress. Vì vậy, để thiết kế nên một theme, ban đầu bạn phải lập trình theo cấu trúc tập tin theme WordPressvà sau đó “Xé” HTML đơn thành nhiều tập tin HTML theo cấu trúc tập tin theme wordpress. Đa số file HTLM là index.html và sau đó được chia thành nhiều bộ phận khác như index.phpheader.phpsidebar.php và nhiều tập tin khác.

Cấu trúc cở bản của một Theme WordPress:

  • 404.php: Hiển thị lỗi url không có trong site.
  • footer.php: Hiển thị phần dưới cùng trang web thường là thông tin bản quyền, design…
  • index.php: Trang chủ
  • functions.php: Nơi khai báo các hàm dùng trong theme wordpress.
  • header.php: Hiển thị phần đầu Theme.
  • page.php: Hiển các pages.
  • single.php: Hiển thị chi tiết bài post.
  • sidebar.php: Hiển thị các cột của như trái, phải của theme.
  • search.php: Hiển thị kết quả tìm kiếm WordPress
  • archive.php: Hiển thị bài viết trong Category, Tag…

3 công cụ chuyển đổi PSD sang WordPress tốt nhất hiện nay

  1. Theme Matcher: Công cụ chuyển đổi psd sang wordpress thông minh, đơn giản và nhanh chóng, bạn có thể tạo nên một theme wordpress chỉ trong 40 giây.
  2. Divine Project: Phần mềm chuyển PSD sang WordPress mạnh mẽ nhất hiện nay
  3. HTML To WordPress Converter: Một plugin trả phí của WordPress, được bán với giá 16$.

Sau bài viết này, hi vọng các bạn cũng hiểu được phần nào công việc của mình, cũng như các bước để tạo nên một theme wordpress là cả một quá trình, một công sức của người tạo nên nó.

Nguyễn Tấn Tài

Nguyễn Tấn Tài Founder/ CEO Giaotrinhhay.com - Giáo Trình Hay Chia Sẻ: Tài liệu SEO website, DIGITAL MARKETING, Ebook CNTT, Mẹo vặt, Phần mềm, Thủ thuật PC và kho tài liệu học tập hữu ích miễn phí.

Bài viết liên quan

Tạo nút liên hệ đẹp nhẹ không dùng JS cho WordPress

share code tạo nút liên hệ ở góc màn hình đẹp đơn giản gọn nhẹ, [...]

Download theme Sahifa wordpress sạch 100% từ themeforest

Download theme Sahifa wordpress dành cho website tin tức, tạp chí sạch 100% từ themeforest [...]

Theme Flatsome – Theme Bán Hàng số #1 hiện nay

Theme Flatsome là theme bán hàng tốt nhất hiện nay Nhiều mẫu web được thiết [...]

Elementor Pro thiết kế web kéo thả siêu nhanh

Bạn đang sử dụng website wordpress nhưng không giỏi về code, bạn muốn tạo ra [...]

Ithemes Security plugin bảo mật website wordpress tốt nhất

Việc bảo mật website là rất cần thiết vì không ai muốn website của mình bị hacker [...]

Quản trị web là gì? hướng dẫn cách quản trị website

Website không chỉ là nền tảng marketing online chủ lực nhất mà còn giúp xây [...]

Trả lời