Hướng dẫn download theme wordpress từ admin

Những theme WooCommerce không chỉ tập trung thiết kế về thương mại điện tử, mà toàn bộ theme đó còn xoay quanh các phong cách của WooCommerce. Kỹ thuật CSS do WooCommerce sử dụng để xác định cách hiển thị sản phẩm, sau đó được sử dụng bởi theme WordPress cho WooCommerce để mọi thứ thực sự phù hợp với nhau - làm cho một số các mặt tiền cửa hàng thương mại điện tử có được thiết kế đẹp nhất.

Không cần phải đề cập đến sự thực là việc cài đặt và thiết lập một theme WordPress cho WooCommerce mới không khó khăn hơn so với thiết lập bất kỳ theme WordPress nào khác.

Hãy để tôi hướng dẫn cho bạn cách thực hiện.

Cách Cài đặt và Thiết lập một theme WordPress mới cho WooCommerce

Nếu bạn đã cài đặt WooCommerce, điều đó thật tuyệt vời! Nếu bạn chưa cài đặt, tôi gợi ý bạn đọc Hướng dẫn sử dụng WooCommerce cho người mới bắt đầu của Rachel McCollin. Hướng dẫn này sẽ giới thiệu cho bạn về WooCommerce và dẫn bạn đi qua tất cả các bước cần thiết để xây dựng và hoạt động mặt tiền cửa hàng trực tuyến của bạn.

Bây giờ, hãy bắt đầu với cách cài đặt và thiết lập một theme WordPress mới cho WooCommerce.

Bước 1: Cài đặt dữ liệu giả

Nếu bạn đã thêm sản phẩm của mình vào WooCommerce, bạn có thể bỏ qua bước này và bắt đầu từ bước 2.

Cài đặt dữ liệu giả bổ sung cho các sản phẩm không có thực vào mặt tiền cửa hàng của bạn để giúp bạn hình dung về cửa hàng của bạn với sản phẩm. Sau khi bạn đã hoàn tất việc cài đặt và thiết lập theme WordPress mới cho WooCommerce của mình, bạn sẽ xóa tất cả các dữ liệu giả trước khi thêm vào các sản phẩm của bạn. Nếu không, bạn có thể vô tình xóa dữ liệu sản phẩm của riêng mình.

Dữ liệu giả được bao gồm trong plugin WooCommerce của bạn Nếu bạn đã cài đặt WooCommerce trong WordPress Admin, hãy tiếp tục và tải plugin đó từ WordPress Plugin Directory vào máy tính của bạn. Điều này sẽ dễ dàng hơn là đăng nhập vào FTP của bạn, đi vào thư mục plugin, và tải dữ liệu giả từ đó.

Khi quá trình tải xuống hoàn tất, hãy giải nén tập tin đó, như vậy bạn đã sẵn sàng để nhập vào tập tin dummy-data.xml.

Vào Tools và click chuột vào Import:

Đừng để “WooCommerce Tax Rates (CSV)” làm bạn phân tâm. Điều này có thể được thực hiện sau nếu bạn muốn. Đối với Dữ liệu giả WooCommerce, bạn sẽ chọn WordPress.

Có nhiều khả năng bạn sẽ không có plugin WordPress Importer được cài đặt, do đó, tiếp tục và chọn Install Now.

Sau khi cài đặt, hãy tiếp tục và chọn Activate Plugin & Run Importer.

Bạn có nhớ nơi bạn đã tải và giải nén plugin của WooCommerce? Tuyệt! Bây giờ bạn cần nhấp vào Choose File và thực hiện theo cách của bạn.

Dữ liệu giả của bạn thường sẽ ở trong thư mục đã giải nén của bạn: (woocommerce.version.number)> woocommerce> dummy-data.

Mở thư mục dummy-data, chọn dummy-data.xml, và bạn đã sẵn sàng để tải lên tập tin và nhập khẩu.

Đây là điều cuối cùng bạn cần làm trước khi nhập tất cả dữ liệu giả.

Một số trong này là sở thích cá nhân, nhưng đây là những gì tôi làm (ảnh chụp màn hình bên dưới):

Nhập tác giả mặc định "wooteam" thay vì tạo một tác giả mới hoặc sử dụng tác giả đã có trước đây. Bằng cách này, bạn sẽ biết nội dung nào đã được nhập / tạo trong quá trình này dựa trên tên tác giả (tôi khuyên bạn nên xóa tác giả khi bạn xóa dữ liệu giả sau khi bạn hoàn tất cài đặt và thiết lập chủ đề WooCommerce mới cho WordPress)

Tôi cũng khuyên bạn nên chọn Download and import attachments để bạn có các hình ảnh liên kết với từng sản phẩm (một lần nữa, bạn nên đảm bảo phương tiện truyền thông được bỏ đi khi bạn hoàn thành dữ với các dữ liệu giả).

Khi bạn đã thực hiện các lựa chọn này, chọn Submit:

Truy cập yourwebsite.com/shop/ và bạn sẽ thấy một cửa hàng thử nghiệm đã được nhập đầy đủ:

Yeah! Bạn đã làm được rồi!

Nó không được thiết kế tốt, phải không? Điều tuyệt vời mà chúng ta sẽ làm là cài đặt một theme WordPress đẹp mắt cho WooCommerce như Savoy.

(LƯU Ý: Sau khi bạn đã cài đặt và thiết lập theme của bạn xong, đừng quên xóa các sản phẩm và hình ảnh của các dữ liệu giả trước khi bắt đầu thêm các sản phẩm của riêng bạn.)

Bước 2: Cài đặt một theme WordPress cho WooCommerce

Bây giờ, hãy xem cách cài đặt theme WooCommerce. Nếu bạn chưa tải về theme Thương mại cho WordPress của mình, hãy tiếp tục và tải nó xuống máy tính của bạn (đảm bảo là bạn biết nơi bạn sẽ tải nó, để bạn có thể truy cập vào nó).

Có hai cách khác nhau để cài đặt theme của bạn:

1. Truy cập trang web của bạn bằng FTP
2. Từ WordPress Admin

FTP theme của bạn

Nếu bạn cảm thấy quen sử dụng FTP, hãy tiếp tục và kết nối với máy chủ của bạn và vào wp-content > themes directory. Đây là nơi bạn sẽ muốn gửi theme của mình. Tuy nhiên, hãy đảm bảo là bạn sẽ gửi theme của mình trước khi bạn gửi thư mục đã giải nén đến máy chủ. Chúng ta hãy xem kỹ hơn bằng cách sử dụng ví dụ về theme WordPress của chúng tôi từ ThemeForest.

Sau khi giải nén tập tin tải xuống, bạn sẽ thấy có một số thư mục khác nhau:

Không phải mọi theme mà bạn tải xuống sẽ đóng gói như thế này. Đôi khi thư mục nén mà bạn tải xuống là thư mục theme thực sự. Đó là một ý kiến hay để kiểm tra lại vì điều này thay đổi tùy nơi.

The Savoy - Minimalist AJAX WooCommerce Theme bao gồm một số nội dung khác như tài liệu, công cụ, v.v ... Nếu bạn tìm trong thư mục Theme Files của Savoy, bạn sẽ tìm thấy theme của bạn (savoy.zip).

Nếu bạn đang cài đặt qua FTP, hãy tiếp tục và tải lên thư mục theme đã được giải nén của bạn (ví dụ: "savoy") vào thư mục các theme. Nếu bạn không chắc chắn về việc sử dụng FTP hoặc muốn cài đặt từ WordPress Admin, thì điều này cũng không sao. Tôi cũng thích sử dụng WordPress Admin.

Từ WordPress Admin

Cài đặt một theme WordPress từ trang Quản trị yêu cầu phải nén thư mục theme đó (themefolder.zip). Như chúng tôi đã đề cập, bạn cần đảm bảo rằng bạn đang làm việc với thư mục theme có thực chứ không phải thư mục mà theme của bạn có thể được đóng gói trong đó.

Từ WordPress Admin, bên dưới Appearance, click chuột vào Themes:

Thêm theme mới:

Tải lên theme:

Bạn có nhớ vị trí tập tin zip theme của bạn ở đâu không?

(theme ví dụ của chúng tôi có tiêu đề: savoy.zip)

Nhấp vào Choose File và thực hiện theo cách của bạn:

Sau khi cài đặt, bạn có thể vào Appearance> Themes trong WordPress Admin để xem nó đã được cài đặt hoặc click chuột để kích hoạt nó ngay.

Như bạn thấy (bên dưới), theme Savoy đã được cài đặt thành công, do đó, click chuột vào Activate:

Bây giờ theme WordPress cho WooCommerce đã được cài đặt và kích hoạt thành công, hãy thiết lập nó nhé.

Bước 3: Thiết lập một chủ đề WooCommerce trong WordPress

Không phải mọi theme được tùy chỉnh chính xác như nhau. Cách một theme được thiết kế và phát triển là một yếu tố lớn, vì vậy có thể có một số khác biệt giữa hướng dẫn này và những gì bạn có thể thấy. Tuy nhiên, nói chung, điều này sẽ giúp bạn hiểu cách thiết lập theme WordPress cho WooCommerce của mình - bất kể bạn đang sử dụng theme dành cho WooCommerce từ ThemeForest hay bất cứ nơi nào khác.

Các plugin được đề xuất / bắt buộc

Sau khi cài đặt và kích hoạt theme Savoy, bạn sẽ được thông báo về các plugin được đề xuất:

Đôi khi các thông báo theme của bạn về các plugin được đề xuất, trong khi các theme khác thì bao gồm các đề xuất trong tài liệu của họ Đó có thể là các chức năng thiết kế theme - chẳng hạn như thanh trượt tùy chọn - không được viết code vào theme đó, nhưng được cấp cho.

Nhấp vào Begin installing plugins trong theme Savoy để xem danh sách các plugin được đề xuất:

Một lần nữa, điều này sẽ thay đổi tùy theo theme, nhưng trong trường hợp này, bạn có thể hoặc không thể cài đặt tất cả những thứ này.

Ví dụ: trong khi Savoy đề xuất Contact Form 7 và bao gồm phong cách cho nó, thì bạn có thể sẽ không muốn sử dụng plugin này cho biểu mẫu liên hệ của bạn. Có thể bạn muốn sử dụng một plugin nào đó như Gravity Forms hoặc Ninja Forms.

Một plugin như Regenerate Thumbnails là một plugin tuyệt vời để sử dụng cho những người có một cửa hàng hiện tại được thiết lập và có các hình ảnh của mình được cấu hình cho một theme trước đó. Plugin này sẽ đi qua WordPress Media Library của bạn và thay đổi kích thước tất cả các hình ảnh của bạn để cho phù hợp với theme mới của bạn. Bạn có thể sẽ muốn hoặc không muốn làm điều này với dữ liệu giả, và bạn có thể bỏ qua plugin này hoàn toàn (nhưng tôi khuyên bạn nên thực hiện, để tất cả các phương tiện truyền thông đều có kích thước chính xác cho các mục đích thử nghiệm).

Tuy nhiên, một plugin như Envato Toolkit rất quan trọng đối với các theme được mua trên ThemeForest, để đảm bảo rằng bạn được thông báo các cập nhật theme.

Tôi gợi ý bạn nên cài đặt tất cả các plugin được đề xuất khi bạn bắt đầu. Bạn luôn có thể xóa plugin sau đó nếu bạn không cần nó, trong khi nếu bạn không cài đặt một plugin cần thiết, bạn có thể cảm thấy thất vọng vì theme đó không "làm việc" hoặc không làm một đièu gì đó mà bạn thích trên bản demo.

Khi bạn đã cài đặt tất cả, một số hoặc không có plugin nào được đề xuất và / hoặc yêu cầu, đừng quên kích hoạt chúng:

Nếu bạn đang sử dụng một theme đã mua từ ThemeForest, ví dụ như theme Savoy, đừng quên nhập Marketplace Username và Secret API Key của bạn vào bộ công cụ Envato WordPress Toolkit để đảm cập nhật theme phù hợp

Tùy chỉnh

Đây là phần cài đặt và thiết lập theme WooCommerce cho WordPress của bạn khi nó trở nên thực sự thú vị và bạn bắt đầu thấy trang web của bạn trở nên sống động.

Bạn có thể truy cập WordPress Customizer từ trình đơn trong WordPress: Appearance > Customize. Hoặc vào trang Theme trong Appearance > Themes và sau đó nhấp vào nút Customize:

Chào mừng bạn đến với WordPress Customizer:

Đây là nơi chúng ta sẽ thực hiện một vài điều chỉnh trước khi đi sâu vào cấu hình.

Điều đầu tiên bạn sẽ thấy là Identity Site. Đây là nơi bạn có thể thay đổi Site Title và Tagline.

Đôi khi đây là nơi bạn có thể thêm hình ảnh tiêu đề tùy chỉnh và / hoặc Biểu tượng trang web (Site Icon) (điều này sẽ thay đổi theo chủ đề).

Tiếp theo, cấu hình các trình đơn của bạn:

Nếu đây là một thiết lập WooCommerce mới hoặc bạn chưa tạo bất kỳ trang nào, có thể bạn sẽ không "tuỳ chỉnh" được nhiều thứ.. Tuy nhiên, với WooCommerce đã được cài đặt, nó tự động thêm một số trang mà tôi chắc chắn bạn muốn thêm vào trình đơn của bạn ngay lập tức.

Bạn có thể dễ dàng thêm và tạo một trình đơn mới:

Khi bạn đã thêm một trình đơn (hoặc nhiều), bạn có thể chọn nơi bạn muốn trình đơn đó xuất hiện cũng như các mục trình đơn khác nhau (chẳng hạn như liên kết tùy chỉnh, bài đăng, trang, sản phẩm, v.v.).

Điều này mang lại cho bạn rất nhiều tính linh hoạt với cách bạn muốn trang web WooCommerce của bạn thực hiện. Đừng ngại để thử với nó hoặc thay đổi nó sau.

Trước khi chúng ta rời khỏi WordPress Customizer, bạn sẽ muốn nói với WordPress hãy làm cho trang chủ cho cửa hàng của bạn:

Đánh dấu Front page displays as A static page và chọn Front page là trang Shop của bạn. Trang Shop đã tự động được tạo ra khi bạn cài đặt plugin WooCommerce đó.

Đối với trang Posts, điều này phụ thuộc vào việc bạn muốn hay không muốn có một blog trên trang WooCommerce của bạn Nếu muốn, bạn sẽ cần phải tạo trang blog và chọn trang này trên WordPress Customizer hoặc trong WordPress Admin Settings > Reading.

Kết quả

Với một số cấu hình cơ bản, bạn có thể thấy cửa hàng trực tuyến tuyệt vời của bạn có thể sử dụng một theme WordPress cho WooCommerce như thế nào:

Các trang sản phẩm cá thể trông thật tuyệt vời:

Nó thậm chí còn bao gồm cả các sản phẩm liên quan:

The Savoy - Minimalist AJAX WooCommerce Theme cho phép bạn dễ dàng điều chỉnh nhiều yếu tố trong trang web của bạn và có thể đi xa hơn bất cứ điều gì tôi đã giới thiệu trong hướng dẫn này (chắc chắn đọc qua tài liệu hướng dẫn của theme của bạn để tìm hiểu thêm về chủ đề của bạn một cách cụ thể). Tôi chỉ giới thiệu cho bạn thấy những thay đổi có thể được thực hiện trong WordPress Customizer và có thể thường được thực hiện với bất kỳ chủ đề nào mà bạn có thể sử dụng.

Kết luận

Bạn có thể dễ dàng thấy được cách các bước thực hiện trong việc định cấu hình theme WordPress cho WooCommerce của bạn thật dễ dàng và cách chúng trông thật tuyệt vời - chỉ đơn giản bằng cách sử dụng một theme WordPress được thiết kế đặc biệt cho WooCommerce.

Có rất nhiều plugin WordPress dành cho WooCommerce hữu ích có sẵn trên CodeCanyon và một số theme WordPress cho WooCommerce được thiết kế đẹp mắtvà hiệu quả trên ThemeForest.

Tham khảo một số theme dành cho WooCommerce bán chạy nhất trên ThemeForest có thể là một nơi tốt để bắt đầu (Savoy vẫn là theme yêu thích của tôi). Tôi chắc chắn bạn sẽ tìm thấy một theme nào đó phù hợp với cửa hàng Thương mại điện tử của bạn một cách hoàn hảo. Hoặc duyệt qua sự giới thiệu các tính năng nổi bật của chúng tôi để tìm thấy một theme phù hợp với cửa hàng của bạn: