Chuyển file PSD trong Photoshop sang Wordpress

Mục lục nội dung

  • 1 Các bước để chuyển đổi PSD sang WordPress
    • 1.1 Bước 1: Cắt PSD
    • 1.2 Bước 2: Tạo các file HTML và CSS
    • 1.3 Bước 3: Chuyển đổi HTML sang Theme WordPress
    • 1.4 Cấu trúc cở bản của một Theme WordPress:
  • 2 3 công cụ chuyển đổi PSD sang WordPress tốt nhất hiện nay
    • 2.1 Có thể bạn thích

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ụng Adobe 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.php, header.php, sidebar.phpvà 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$.