Chuyển đổi HTML sang WordPress (Từng bước)


Chuyển đổi HTML sang WordPressCon đường từ các trang web được xây dựng bằng HTML thuần túy sang WordPress không phải là một con đường ngắn. Từ trải nghiệm toàn văn bản, thiết kế web đã chuyển sang sự hiện diện web có tính tương tác cao. Thêm vào đó, chúng tôi không còn phải tự viết đánh dấu mà có thể để các hệ thống quản lý nội dung thực hiện công việc nặng nhọc.


Tuy nhiên, điều đó không có nghĩa là các trang web HTML tĩnh không còn tồn tại nữa. Trên thực tế, HTML5, phiên bản mới nhất của ngôn ngữ đánh dấu, rất mạnh mẽ và cho phép bạn xây dựng các trang web chất lượng mà không cần một CMS phía sau chúng.

Tuy nhiên, thị phần ngày càng tăng của WordPress cho thấy ngày càng có nhiều người chuyển sang nền tảng.

Thị phần WordPress năm 2019

Đối với một số người trong số họ, điều đó có nghĩa là chuyển từ HTML tĩnh sang WordPress. Đây có thể là một nhiệm vụ khó khăn, nhưng bài đăng này sẽ cố gắng giải thích làm thế nào để làm điều đó theo một vài cách đơn giản.

Dưới đây, chúng tôi sẽ chỉ cho bạn một số cách chuyển đổi từ HTML sang WordPress. Đầu tiên, bạn sẽ tìm hiểu các tùy chọn khác nhau cũng như ưu và nhược điểm của chúng. Sau đó, chúng tôi sẽ chỉ cho bạn cách thực hiện từng bước một.

Hãy cùng đi.

Contents

3 cách để chuyển từ HTML tĩnh sang WordPress

Để chuyển từ HTML sang WordPress, bạn cần biến thiết kế HTML của mình thành chủ đề WordPress. Một chủ đề kiểm soát giao diện và cảm giác của một trang web WordPress, trong khi chức năng được cung cấp bởi chính CMS cũng như các plugin bổ sung.

Để thực hiện chuyển đổi, bạn có một số tùy chọn. Cái nào phù hợp với bạn phụ thuộc vào các yếu tố như thời gian và tiền bạc bạn có thể và sẵn sàng đầu tư, kỹ năng mã hóa và sở thích cá nhân. Sau đây là các tùy chọn chính.

A) Chuyển đổi thủ công HTML sang chủ đề WordPress

Tùy chọn đầu tiên cũng là kỹ thuật nhất. Nếu bạn đi theo lộ trình này, bạn sẽ lấy mã hiện có của mình và sử dụng nó làm điểm bắt đầu để tạo các tệp chủ đề WordPress.

Nó không quá phức tạp, đặc biệt nếu bạn có kinh nghiệm mã hóa. Bạn có thể lấy nó ra với một chút HTML, CSS và một số kiến ​​thức về PHP. Rất nhiều trong số đó là sao chép và dán.

Nhược điểm: mặc dù bạn sẽ kết thúc với một chủ đề WordPress đang hoạt động, nhưng nó đã giành được tất cả các khả năng mà WordPress cung cấp. Ví dụ: trừ khi bạn xây dựng nó sau khi thực tế, trang web của bạn sẽ không có khu vực widget hoặc khả năng thay đổi menu của bạn từ phụ trợ WordPress.

Mặc dù trang web của bạn sẽ thực hiện công việc của mình, nhưng bạn đã giành chiến thắng có thể quản lý nó hoàn toàn thông qua WordPress. Vì lý do đó, cá nhân chúng tôi thích lựa chọn tiếp theo.

B) HTML sang WordPress thông qua WordPress Child Theme

Theo chúng tôi, đây có lẽ là con đường dễ dàng và hợp lý nhất về nỗ lực và đầu tư tiền tệ. Thay vì sử dụng trang web hiện tại của bạn làm điểm xuất phát, thay vào đó, bạn sử dụng chủ đề WordPress được tạo sẵn. Sau đó, bạn chỉ điều chỉnh thiết kế của nó để nó giống với trang web cũ của bạn.

Làm như vậy cho phép bạn tận dụng lợi thế của WordPress một cách đầy đủ trong khi vẫn giữ được giao diện trang web cũ của bạn. Sau đó, bạn cũng đã giành chiến thắng để thêm các tính năng WordPress. Thay vào đó, bạn có thể xây dựng trên một chủ đề hiện có – thứ mà nền tảng WordPress được tạo ra rõ ràng cho.

C) Nhập nội dung từ HTML sang WordPress bằng Plugin

Rõ ràng, nếu bạn không kiên quyết sử dụng thiết kế hiện tại của mình và sẵn sàng thay đổi nó, mọi thứ thậm chí còn dễ dàng hơn. Trong trường hợp đó, tất cả những gì bạn cần làm là thiết lập một trang web, cài đặt chủ đề và nhập nội dung HTML của bạn. Như bạn sẽ thấy bên dưới, đây là một quá trình rất nhanh và không đau.

A) Cách chuyển đổi thủ công HTML sang chủ đề WordPress

Nếu mục tiêu của bạn là bắt đầu từ đầu và tạo chủ đề WordPress của riêng bạn giống với trang web HTML hiện tại của bạn, hãy bắt đầu từ đây.

Đừng lo lắng nếu nó nghe có vẻ đáng sợ, bạn sẽ thấy rằng đó là bất cứ điều gì nhưng. Chỉ cần một vài tệp và thư mục, cũng như một số bản sao và dán, là tất cả những gì nó cần.

1. Tạo thư mục chủ đề và các tệp cơ bản

Điều đầu tiên bạn cần làm là tạo một thư mục chủ đề mới. Bạn có thể làm điều đó trên máy tính để bàn của bạn như đối với một thư mục trên máy tính của bạn. Đặt tên cho nó bất cứ điều gì bạn muốn chủ đề của bạn được gọi.

Sau đó, đi đến trình chỉnh sửa mã và tạo một số tệp văn bản. Đặt tên cho chúng như sau:

  • style.css
  • index.php
  • tiêu đề.php
  • sidebar.php
  • chân trang.php

Don lồng làm bất cứ điều gì với họ, giữ cho các tập tin mở trong trình chỉnh sửa. Bạn sẽ cần chúng sớm thôi.

2. Sao chép CSS hiện có vào Biểu định kiểu WordPress

Bây giờ đã đến lúc chuẩn bị bảng kiểu WordPress (tệpstyle.css bạn vừa tạo) để sao chép trang web cũ CSS CSS của bạn vào đó. Đối với điều đó, mở tệp và dán như sau:

/ *
Tên chủ đề: Hai mươi mười ba
URI chủ đề: http://wordpress.org/theme/toventhirteen
Tác giả: nhóm WordPress
URI tác giả: http://wordpress.org/
Mô tả: Chủ đề 2013 cho WordPress đưa chúng ta trở lại blog, bao gồm đầy đủ các định dạng bài đăng, mỗi định dạng được hiển thị đẹp mắt theo cách riêng của chúng. Chi tiết thiết kế phong phú, bắt đầu với bảng màu rực rỡ và hình ảnh tiêu đề phù hợp, kiểu chữ và biểu tượng đẹp và bố cục linh hoạt trông tuyệt vời trên mọi thiết bị, dù lớn hay nhỏ.
Phiên bản: 1.0
Giấy phép: Giấy phép Công cộng GNU v2 trở lên
Giấy phép URI: http://www.gnu.org/licenses/gpl-2.0.html
Thẻ: đen, nâu, cam, nâu, trắng, vàng, ánh sáng, một cột, hai cột, thanh bên phải, độ rộng linh hoạt, tiêu đề tùy chỉnh, menu tùy chỉnh, kiểu trình soạn thảo, hình ảnh đặc trưng, ​​microformats, định dạng bài đăng, hỗ trợ ngôn ngữ rtl, bài đăng dính, sẵn sàng dịch
Tên miền văn bản: mười hai mười ba

* /

Đây là cái gọi là tiêu đề biểu định kiểu (Quan trọng: không phải để lại bình luận/*...*/ thẻ ra!). Điền vào từng phần như thế này:

  • Tên chủ đề – Đây là tên của chủ đề của bạn. Nó có thể là bất cứ thứ gì bạn muốn nhưng nó thường giống như tên của thư mục chủ đề của bạn.
  • URI chủ đề – Bạn thường đăng bài chủ đề Trang chủ tại đây nhưng bạn có thể sử dụng địa chỉ trang web của riêng bạn.
  • Tác giả – Đó là bạn. Đặt tên của riêng bạn ở đây hoặc bất cứ điều gì bạn muốn được gọi.
  • URI tác giả – Một liên kết đến trang chủ của bạn. Nó có thể là một trong những bạn đang xây dựng hoặc bất cứ điều gì có ý nghĩa.
  • Sự miêu tả – Một mô tả tùy chọn về chủ đề của bạn. Điều này sẽ hiển thị trong phần phụ trợ WordPress.
  • Phiên bản – Phiên bản của chủ đề của bạn. Vì bạn không xuất bản nó, nên nó không thực sự quan trọng. Chúng tôi thường đặt 1.0 ở đây.
  • Giấy phép, URI giấy phép, Thẻ – Những điều này chỉ quan trọng nếu bạn dự định gửi chủ đề của mình đến Thư mục chủ đề WordPress. Bạn có thể loại bỏ chúng trong trường hợp này, chúng tôi chỉ đưa chúng vào để hoàn thành.

Sau tiêu đề, sao chép và dán CSS hiện có từ trang web HTML tĩnh của bạn. Sau đó, lưu tệp trong thư mục chủ đề mới của bạn và đóng nó. Thời gian để chuyển sang phần còn lại.

3. Tách HTML hiện tại của bạn

Đối với phần tiếp theo, bạn cần hiểu rằng WordPress thường sử dụng PHP để lấy thông tin từ cơ sở dữ liệu của nó. Vì lý do đó, bạn cần chia HTML hiện có của mình thành các phần khác nhau để CMS có thể đặt chúng lại với nhau đúng cách.

Mặc dù điều này nghe có vẻ phức tạp, nhưng điều đó có nghĩa là bạn sao chép và dán các phần của tài liệu HTML vào một số tệp PHP. Để chứng minh điều này tốt hơn, chúng tôi đã tập hợp một trang ví dụ đơn giản mà bạn có thể thấy bên dưới.

trang ví dụ html sang wordpress

Như bạn có thể thấy nó rất nhiều mẫu HTML tiêu chuẩn bao gồm tiêu đề, khu vực nội dung, thanh bên và chân trang. Mã đi kèm là đây:





trang Tiêu đề







trang Tiêu đề

  • mục hàng số 1
  • mục hàng số 2
  • mục hàng số 3

Tiêu đề bài viết

Lorem ipsum dolor ngồi amet, consitetur adipiscing elit. Aliquam sodales urna non odio eestas tạm thời. Nunc vel violicula ante. Etiam bibendum iaculis Libero, eget molestie nisl pharetra in. Trong semper resultat est, eu porta velit mollis nec.

Phân nhóm

Lorem ipsum dolor ngồi amet, consitetur adipiscing elit. Aliquam sodales urna non odio eestas tạm thời. Nunc vel violicula ante. Etiam bibendum iaculis Libero, eget molestie nisl pharetra in. Trong semper resultat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tạm thời. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin trong est sed erat preferisis pharetra.

Phân nhóm

Lorem ipsum dolor ngồi amet, consitetur adipiscing elit. Aliquam sodales urna non odio eestas tạm thời. Nunc vel violicula ante. Etiam bibendum iaculis Libero, eget molestie nisl pharetra in. Trong semper resultat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tạm thời. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin trong est sed erat preferisis pharetra.

Nếu thiết kế của bạn khác, bạn có thể phải điều chỉnh phần nào các bước bên dưới. Tuy nhiên, quá trình tổng thể vẫn giữ nguyên.

Đầu tiên, mở hiện tại của bạn index.html (trang web HTML của bạn tập tin chính). Sau đó, xem qua các tệp WordPress mới tạo của bạn và sao chép các tệp sau vào chúng (các ví dụ dưới đây là đánh dấu của tôi):

tiêu đề.php

Mọi thứ từ đầu tệp HTML của bạn đến khu vực nội dung chính (thường được biểu thị bằng

hoặc là

) đi vào tập tin này. Thêm vào đó, ngay trước khi nó nói, sao chép và dán . Điều này rất quan trọng để nhiều plugin WordPress hoạt động bình thường.




trang Tiêu đề






trang Tiêu đề

  • mục hàng số 1
  • mục hàng số 2
  • mục hàng số 3

sidebar.php

Tất cả mọi thứ thuộc về phần

Sau đó, bạn đã hoàn thành index.html và có thể đóng nó. Lưu tất cả các tệp khác vào thư mục chủ đề của bạn và đóng chúng ngoại trừ tiêu đề.phpindex.php. Bạn có thêm một số việc phải làm với họ.

4. WordPress WordPressify Header.php và Index.php

Đối với tiêu đề, tất cả những gì mà trái còn lại là thay đổi cuộc gọi cho biểu định kiểu từ định dạng HTML sang định dạng WordPress. Để làm như vậy, hãy tìm một liên kết hiện có trong phần. Nó có thể trông giống như thế này:

Thay thế nó bằng cái này:

Thật tuyệt, giờ bạn có thể lưu và đóng tiêu đề.php. Sau đó chuyển sang index.php. Nó nên trống rỗng vào lúc này. Vì vậy, trước tiên, sao chép và dán các dòng mã này:




Đây là các cuộc gọi cho các tệp khác có chứa phần còn lại của trang web của bạn. Bạn có thể nhận thấy khoảng trống giữa lệnh gọi cho tiêu đề và thanh bên. Đó là nơi bạn sẽ thêm Vòng lặp.

Phần sau là một phần của WordPress nơi CMS xuất nội dung được tạo trong phần phụ trợ. Nó rất quan trọng nếu bạn muốn WordPress tự động thêm nội dung vào các trang mà bạn sẽ nhập sau này. Cuối cùng, dán nó ở đây ngay sau :


Bây giờ, lưu lại index.php tập tin và đóng nó Làm tốt! Chủ đề cơ bản của bạn đã sẵn sàng. Bây giờ bạn có thể thêm nó vào trang web WordPress mới của bạn.

5. Tạo ảnh chụp màn hình và tải lên chủ đề

Bây giờ bạn sẽ thêm một ảnh chụp màn hình chủ đề, cùng với thông tin từ tiêu đề trang mẫu của bạn, sẽ đóng vai trò là bản xem trước của trang web của bạn trong phần phụ trợ WordPress.

Để làm điều đó, hãy mở trang web hiện tại của bạn trong trình duyệt và chụp ảnh màn hình với phương thức ưa thích của bạn. Sau đó, mở phần mềm chỉnh sửa hình ảnh bạn chọn và cắt nó thành 880 × 660 pixel. Lưu nó dưới dạng ảnh chụp màn hình.png và thêm nó vào thư mục chủ đề của bạn. Bây giờ bạn đã sẵn sàng để tải lên chủ đề của bạn.

Để có được chủ đề mới trên trang web WordPress của bạn, bạn có một số tùy chọn. Tuy nhiên, điều kiện tiên quyết là tất cả các tệp nằm trong thư mục chủ đề của bạn.

Tùy chọn đầu tiên là tạo một tệp zip từ nó. Sau đó, đi đến trang web WordPress của bạn và sau đó để Ngoại hình> Chủ đề. Ở đây, bấm vào Thêm mới ở trên cùng và sau đó Tải lên chủ đề.

tải lên chủ đề chuyển đổi

Trong menu sắp tới, sử dụng nút để duyệt đến vị trí tệp zip của bạn. Đánh dấu và nhấp Mở, sau đó Cài đặt ngay. Khi nó hoàn thành, kích hoạt chủ đề.

Ngoài ra, bạn có thể kết nối với máy chủ của mình qua FTP (hoặc chỉ cần truy cập thư mục cục bộ trên ổ cứng) và điều hướng đến nội dung wp / chủ đề. Sau đó, tải lên thư mục chủ đề (giải nén) của bạn ở đó. Sau đó, kích hoạt chủ đề từ cùng một nơi như trước.

Đẹp! Trang web mới của bạn trước đây sẽ giống như trang web cũ của bạn. Tất cả những gì còn lại để hoàn thành việc chuyển từ HTML sang WordPress là nhập nội dung hiện có của bạn. Chúng tôi sẽ đề cập đến vấn đề này bên dưới khi nói về việc sử dụng một chủ đề WordPress hiện có.

Tuy nhiên, hãy lưu ý rằng trong khi chủ đề cơ bản hoạt động hiện tại, có nhiều điều bạn có thể làm để tích hợp HTML của mình tốt hơn với WordPress. Điêu nay bao gôm làm cho tiêu đề và mô tả blog của bạn có thể chỉnh sửa, thêm các khu vực phụ tùng, ý kiến, và nhiều hơn nữa. Bạn cũng có thể phải thêm đánh dấu CSS vì nội dung không phải là một phần của thiết kế ban đầu của bạn như hình ảnh.

Vì nó là rất nhiều công việc, cá nhân chúng tôi muốn sử dụng một giải pháp đã có tất cả các chức năng đó và chỉ cần một sự thay đổi thiết kế. Đó là những gì chúng tôi sẽ cho bạn thấy tiếp theo.

B) HTML sang WordPress thông qua WordPress Child Theme

Nếu những điều trên có vẻ quá mãnh liệt đối với bạn, phương pháp tiếp theo có thể dễ quản lý hơn. Nó cho phép bạn tận dụng hàng ngàn chủ đề WordPress hiện có trong khi vẫn giữ thiết kế ban đầu của mình.

Điều đó bằng cách sử dụng một chủ đề con được gọi là. Các chủ đề này được xây dựng trên đầu trang của một chủ đề khác (cha mẹ) không thể tự mình đứng lên mà chỉ sửa đổi chủ đề gốc để phù hợp với nhu cầu của bạn. Đủ dễ để làm mặc dù phải mất một chút công việc thám tử.

1. Chọn một chủ đề phù hợp

Bước đầu tiên là chọn một chủ đề phù hợp để thiết kế dựa trên thiết kế của bạn. Do đó, nó giúp tìm một chủ đề gần với thiết kế hiện tại của bạn hoặc sử dụng khung chủ đề hoặc chủ đề bắt đầu, cả hai đều được tạo để làm cơ sở cho các chủ đề tùy chỉnh.

Kiểm tra Thư mục chủ đề WordPress, danh sách các chủ đề tuyệt vời của chúng tôi hoặc xem xét chủ đề cao cấp để tìm một ứng cử viên phù hợp. Sau một số tìm kiếm, chúng tôi quyết định rằng Hai mươi mười hai chủ đề sẽ là điểm khởi đầu tốt cho việc tôi chuyển từ HTML sang WordPress. Thông thường, chúng tôi sẽ chọn một cái gì đó cập nhật hơn, nhưng nó phù hợp với thiết kế đơn giản mà chúng tôi làm việc cùng.

Khi bạn đã chọn, hãy cài đặt chủ đề trên trang web WordPress của bạn giống như bạn sẽ cài đặt bất kỳ chủ đề nào. Không cần phải kích hoạt nó. Như đã đề cập, nó chỉ ở đó để cung cấp một cơ sở để bạn làm việc. Phần còn lại xảy ra trong chủ đề trẻ em.

2. Tạo một thư mục mới

Tương tự như phương pháp trước đó, đối với chủ đề con, bạn cần tạo một thư mục chủ đề. Tại đây, nơi bạn sẽ đặt tất cả các tệp thuộc về nó.

Khi tạo chủ đề con, nó phổ biến để gọi thư mục cùng tên với chủ đề gốc cộng với -đứa trẻ. Vì vậy, vì chủ đề con của chúng tôi dựa trên chủ đề Twenty Tw 12, chúng tôi gọi thư mục của nó mười hai con.

Dù bạn chọn tên nào, chỉ cần đảm bảo không bao gồm bất kỳ khoảng trắng nào vì nó đã giành chiến thắng theo cách đó.

3. Thiết lập Biểu định kiểu

Các chủ đề con cũng cần một tờ phong cách. Cái này sẽ hoạt động gần giống như biểu định kiểu được tạo ở trên. Tuy nhiên, nó có một tiêu đề hơi khác và sẽ chứa ít mã hơn.

Chúng ta sẽ đến phần thứ hai sau. Bây giờ, tạo thông thường style.css và đặt nó trong thư mục chủ đề. Sau đó, thêm vào như sau:

/ *
Tên chủ đề: Hai mươi mười lăm đứa trẻ
URI chủ đề: http://example.com/toven-fundred-child/
Mô tả: Hai mươi mười lăm chủ đề trẻ em
Tác giả: John Doe
URI tác giả: http://example.com
Bản mẫu: hai mươi mười lăm
Phiên bản: 1.0.0
Giấy phép: Giấy phép Công cộng GNU v2 trở lên
Giấy phép URI: http://www.gnu.org/licenses/gpl-2.0.html
Thẻ: sáng, tối, hai cột, thanh bên phải, bố cục đáp ứng, sẵn sàng truy cập
Tên miền văn bản: hai mươi mười lăm con
* /

Như bạn có thể thấy, nó rất giống với tiêu đề biểu định kiểu bạn đã sử dụng trước đây với một ngoại lệ: nó chứa Bản mẫu nhãn.

Trong phần đó, bạn nên đặt tên của chủ đề sẽ hoạt động như cha mẹ. Không có nó, chủ đề con đã giành được công việc. Để tránh điều này, hãy nhập tên thư mục của cha mẹ. Vì vậy, đối với Twenty Tw 12, đó sẽ là Bản mẫu: hai mươi.

4. Tạo Hàm.php và Kế thừa kiểu cha mẹ

Chỉ với biểu định kiểu và thư mục, nó có thể kích hoạt chủ đề con. Tuy nhiên, điều đó sẽ làm rất tốt vì ngay bây giờ trang web của bạn sẽ trông giống như một trang HTML mà không có bất kỳ kiểu dáng nào.

Để thay đổi điều đó, trước tiên bạn cần kế thừa các kiểu cha mẹ và vì thế, bạn cần Hàm.php. Tệp này là một phần quan trọng của bất kỳ cài đặt WordPress nào và cho phép bạn thực hiện các thay đổi sâu rộng cho trang web của mình.

Tuy nhiên, trong trường hợp này, bạn sẽ chỉ sử dụng nó để gọi kiểu dáng cha mẹ. Đối với điều đó, tạo một tập tin mới và gọi nó Hàm.php. Điều đầu tiên bạn sẽ thêm vào lúc đầu là:

Với một thẻ PHP mở, tệp đã sẵn sàng về mặt lý thuyết nhưng nó không làm gì cả. Vì vậy, ngoài ra, bạn sẽ phải nhập này:

hàm child_theme_enqueue_styles () {

$ Parent_style = 'kiểu cha mẹ';

wp_enqueue_style ($ Parent_style, get_template_directory_uri (). '/style.css');
wp_enqueue_style ('kiểu trẻ em',
get_stylesheet_directory_uri (). '/style.css',
mảng ($ Parent_style),
wp_get_theme () -> get ('Phiên bản')
);
}
add_action ('wp_enqueue_scripts', 'child_theme_enqueue_styles');

Đoạn mã này bảo WordPress đi đến thư mục mẫu (còn gọi là chủ đề gốc) và sử dụng các kiểu có trong đó. Nó cũng cho phép sửa đổi chủ đề thông qua chủ đề con của bạn (nhiều hơn về điều đó sau).

5. Kích hoạt chủ đề trẻ em

Tại thời điểm này, chủ đề con đã sẵn sàng để được kích hoạt.

Bạn có thể thêm một ảnh chụp màn hình vào nó như trong hướng dẫn ở trên nếu bạn muốn. Ngoài ra, bạn có thể nén nó và thêm nó vào WordPress thông qua Giao diện> Chủ đề> Thêm mới> Tải lên chủ đề hoặc chỉ cần thêm thư mục là nội dung wp / chủ đề.

Trong cả hai trường hợp, khi bạn kích hoạt chủ đề, trang web của bạn bây giờ sẽ trông giống hệt như cha mẹ của nó.

6. Điều chỉnh thiết kế

Tại đây, nơi mà công việc thám tử nói trên bắt đầu. Bây giờ, bây giờ đã đến lúc thay đổi thiết kế của chủ đề hiện tại để nó giống với trang web HTML gốc của bạn.

Ví dụ: một trong những điều đầu tiên nổi bật là chủ đề WordPress của chúng tôi thêm không gian phía trên tiêu đề và bên dưới chân trang mà trang web HTML của chúng tôi không có.

html sang wordpress thông qua trang ví dụ chủ đề con

Để khắc phục điều này, chúng tôi có thể xem trang web HTML bằng công cụ phát triển trình duyệt để tìm đánh dấu chịu trách nhiệm. Khi chúng ta làm như vậy, chúng ta gặp phải điều này:

thân hình {
lề: 0;
}

Sau đó, chúng tôi làm tương tự với chủ đề WordPress mới của tôi, nơi chúng tôi tìm thấy các phong cách này:

cơ thể .site {
lề trên: 48px;
lề trên: 3,428571429rem;
lề dưới: 48px;
lề dưới: 3,428571429rem;
}

Mục tiêu của tôi bây giờ là áp dụng kiểu dáng từ trang web HTML vào chủ đề WordPress. Trong trường hợp này, chúng tôi có thể đạt được điều này chỉ bằng cách thêm phần sau vào chủ đề con của tôi style.css:

cơ thể .site {
lề: 0 tự động;
}

Sau khi lưu, chủ đề WordPress có các kiểu mới được áp dụng cho nó:

html sang wordpress thông qua trang ví dụ chỉnh sửa chủ đề con

Điều đó bởi vì bất cứ điều gì bạn thêm vào chủ đề con, bảng kiểu Phong cách sẽ ghi đè lên các kiểu trong cha mẹ của nó. Tuy nhiên, phần còn lại của đánh dấu vẫn còn nguyên, vì vậy bạn chỉ có thể thay đổi những thứ có liên quan.

Ngoài ra, nếu bạn đang sử dụng mẫu HTML5 làm người bắt đầu và chủ đề WordPress hiện đại với tư cách là cha mẹ của bạn, rất nhiều đánh dấu cơ bản sẽ tương ứng, giúp cuộc sống của bạn dễ dàng hơn nhiều.

Có rất nhiều thứ bạn có thể làm với các chủ đề con, bạn có thể học đây. Khi bạn đã hoàn tất việc điều chỉnh thiết kế, đến lúc nhập nội dung của bạn. Hãy để ngay bây giờ.

C) Nhập nội dung từ HTML sang WordPress bằng Plugin

Cuối cùng, trong danh sách chuyển từ HTML sang WordPress đang sử dụng một chủ đề hiện có và chỉ cần di chuyển nội dung của bạn từ trang HTML của bạn vào đó. Đây là cách đơn giản nhất - tất cả những gì bạn cần làm là cài đặt và kích hoạt chủ đề bạn chọn (chúng tôi giả sử bạn biết cách thực hiện điều đó ngay bây giờ) và sau đó làm theo các bước dưới đây.

Nhân tiện, mặc dù quá trình này không quá khó khăn, nhưng có những điều có thể sai. Vì lý do đó, hãy đảm bảo bạn sao lưu trang web WordPress của mình trước khi tiếp tục với nó.

1. Cài đặt Plugin nhập

Điều đầu tiên bạn cần làm là cài đặt plugin Nhập HTML 2. Cách dễ nhất để đạt được điều này là đi đến Plugin> Thêm mới và tìm kiếm nó theo tên. Khi bạn tìm thấy nó trong danh sách (nó có thể nằm sâu hơn về phía dưới), nhấp vào Cài đặt ngay. Kích hoạt nó khi nó thực hiện xong.

plugin nhập từ html sang wordpress

2. Chuẩn bị nhập khẩu

Để nhập nhiều trang cùng một lúc, bạn cần tải chúng lên cùng một máy chủ với cài đặt WordPress của bạn. Plugin sẽ đề xuất một cái gì đó như tập tin html để nhập  tên thư mục nhưng bạn có thể chọn bất cứ thứ gì bạn muốn. Chỉ cần nhớ rằng tên đường dẫn.

Như bạn sẽ thấy trong phần sau, bạn cũng có thể nhập từng trang một. Đối với một trong hai phương pháp, hãy truy cập WordPress và Cài đặt> Nhập HTML. Chúng tôi sẽ đi qua các cài đặt cơ bản nhất bây giờ. Nếu bạn cần thêm thông tin hoặc nếu có gì không rõ ràng, hãy tham khảo hướng dẫn sử dụng chính thức.

Các tập tin

tập tin nhập từ html sang wordpress

Cấu hình màn hình này như sau:

  • Thư mục để nhập - Nhập đường dẫn mà bạn vừa sao chép các tệp hiện có của mình vào.
  • URL trang web cũ - Được sử dụng để chuyển hướng. Nhập URL cũ của bạn. Chúng tôi sẽ giải quyết vấn đề này một lần nữa sau trong bài viết này.
  • Tập tin mặc định Tập tin mặc định cho các thư mục trên trang web cũ, thường là index.html.
  • Phần mở rộng tệp để bao gồm - Phần mở rộng của tệp bạn muốn nhập.
  • Thư mục để loại trừ - Nếu bạn có bất kỳ thư mục nào trong trang web cũ mà bạn không muốn nhập, hãy nhập chúng vào đây.
  • Giữ nguyên tên tập tin - Để plugin tự động sử dụng tên tệp của bạn làm URL mới, hãy chọn hộp này. Điều này có ý nghĩa nếu tiêu đề của bạn rất dài bởi vì thông thường, nhà nhập khẩu sẽ sử dụng chúng để tạo sên.

Nội dung

Trong nội dung, bạn cần định cấu hình thẻ HTML chứa nội dung trang web của bạn.

nhập nội dung từ html sang wordpress

Để làm điều đó, chọn tùy chọn Thẻ HTML ở trên cùng Sau đó cấu hình thẻ trong ba trường sau. Ví dụ: nếu nội dung của bạn được chứa trong một thẻ được gọi là

, thông tin bạn nhập sẽ là div, Tôichủ yếu.

Các cài đặt khác trên trang này phải tự giải thích và cho phép bạn nhập hình ảnh, tài liệu, cập nhật liên kết nội bộ và hơn thế nữa.

Tiêu đề & siêu dữ liệu

tiêu đề và siêu dữ liệu nhập từ html sang wordpress

Phần này tương tự như phần nội dung trước đây. Tuy nhiên, nó xử lý các tiêu đề trang. Ban đầu, bạn cần cho plugin biết cách các tiêu đề được đánh dấu trong mẫu HTML của bạn để nó có thể nhập chúng vào đúng chỗ.

Ngoài ra, bạn có thể lọc ra những thứ dư thừa như tiêu đề trang web vì điều đó thường được hiển thị theo chủ đề WordPress theo mặc định. Nếu tiêu đề của bạn nằm trong nội dung, bạn cũng có thể yêu cầu nhà nhập khẩu xóa chúng để chúng không được bao gồm hai lần.

Điều quan trọng là bạn quyết định nhập nội dung cũ của mình như bài viết hay trang. Phần còn lại khá tự giải thích và cho phép bạn định cấu hình cài đặt WordPress cho các trang mới.

Trường tùy chỉnh

nhập các trường tùy chỉnh html sang wordpress

Nếu bạn có bất kỳ dữ liệu nào cần nhập vào các trường tùy chỉnh, bạn có thể định cấu hình dữ liệu này tại đây.

Danh mục & Thẻ

nhập các danh mục và thẻ nhập từ html vào wordpress

Tại đây bạn có thể chỉ định danh mục, thẻ và định dạng bài đăng cho nội dung đã nhập của mình. Plugin sẽ hiển thị phân loại hiện có trên trang web của bạn để làm cho bước này dễ dàng hơn.

Công cụ

công cụ nhập từ html sang wordpress

Màn hình này liệt kê một số công cụ hữu ích để nhập thành công từ HTML sang WordPress.

3. Bắt đầu nhập

Khi bạn đã hoàn tất, lưu các cài đặt. Điều này sẽ cho phép Nhập tệp cái nút. Nhấn vào đây để bắt đầu.

nhập từ html sang wordpress

(Lưu ý: bạn cũng có thể đến đây thông qua Công cụ> Nhập và sau đó chọn Chạy nhập khẩu phía dưới cái HTML Lựa chọn.)

Tiếp theo, chọn nhập thư mục tệp hoặc một tệp (bạn cần duyệt đến tệp đó), sau đó nhấn Gửi đi. Các plugin sau đó sẽ đi làm.

Sau khi hoàn thành, bạn nên có tất cả nội dung hiện có trên trang web WordPress của mình và được định dạng theo chủ đề mới. Hoặc, nếu bạn đã đi một trong những tuyến đường khác, trang web của bạn về cơ bản sẽ giống như trang web HTML trước đây của bạn. Hoàn thành tốt!

Các bước bổ sung

Nếu bạn có kế hoạch triển khai trang web WordPress ở cùng nơi có trang web HTML tĩnh trước đây, thì sẽ có thêm một số việc phải làm trước khi bạn hoàn thành.

Việc đầu tiên là kiểm tra URL của các bài đăng và trang mới nhập của bạn để đảm bảo chúng thân thiện với công cụ tìm kiếm (nghĩa là bao gồm các từ khóa bạn muốn xếp hạng). Nó rất đơn giản - chỉ cần truy cập một trang hoặc bài đăng và xem URL bên dưới tiêu đề.

kiểm tra permalinks sau khi nhập html vào wordpress

Để thay đổi nó, nhấp Biên tập ở bên phải, thay đổi URL theo lựa chọn của bạn và nhấn Đồng ý.

Điều thứ hai là triển khai chuyển hướng từ các URL cũ sang các URL mới. Bằng cách đó, bạn đã thắng được mất giá trị SEO hiện có.

Nếu bạn đã điền địa chỉ trang web cũ vào plugin HTML, nó sẽ tạo mã chuyển hướng cho bạn. Bạn có thể sao chép và dán nó vào tập tin.htaccess nằm trên máy chủ của bạn (thường là trong thư mục gốc).

Bạn truy cập nó qua FTP, tuy nhiên, bạn có thể phải cho phép xem các tệp ẩn vì nó không hiển thị theo mặc định. Sau đó chỉnh sửa .htaccess và nhập các quy tắc.

Xin lưu ý rằng nó chỉ hoạt động nếu bạn không thay đổi các URL. Nếu bạn trú ẩn và cần thiết lập chuyển hướng tùy chỉnh, hãy sử dụng Plugin chuyển hướng. Đó là một giải pháp rất thoải mái, cũng theo dõi bất cứ khi nào ai đó truy cập vào một URL không tồn tại trên trang web của bạn. Bằng cách đó bạn cũng có thể thực hiện chuyển hướng cho các liên kết đó.

Bạn đã chuyển thành công từ HTML sang WordPress chưa?

Và đó là điều đó. Bạn vừa học cách chuyển đổi một trang web HTML tĩnh sang WordPress. Kết quả là, bạn đã trở thành một phần của một trong những cộng đồng lớn nhất trên web và có được quyền truy cập vào hàng ngàn tài nguyên để làm cho trang web của bạn trở nên tốt hơn.

Tùy thuộc vào giải pháp bạn đã chọn ở trên, bạn đã có ấn tượng về cách thức hoạt động của WordPress. Từ đây trở đi, nó khá dễ dàng để phân nhánh và đi sâu hơn vào việc tạo các trang web với nền tảng WordPress. Nếu bạn cần trợ giúp thêm trong lĩnh vực này, trang web này có vô số trang. Bạn có thể học cách:

  • Tùy chỉnh từng bước WordPress
  • Chuyển trang web của bạn từ HTTP sang HTTPS
  • Thêm phông chữ tùy chỉnh vào WordPress
  • Tăng tốc trang web WordPress của bạn
  • Thêm một hình thức liên lạc vào trang web WordPress của bạn

Bên cạnh đó, chúng tôi chúc bạn may mắn với trang web WordPress mới được đúc. Chúng tôi hy vọng bạn thích làm việc với WordPress nhiều như chúng tôi.

Bạn đã chuyển trang web của mình từ HTML sang WordPress chưa? Kinh nghiệm của bạn thế nào? Bất kỳ lời khuyên để thêm? Xin vui lòng cho chúng tôi biết trong phần ý kiến ​​dưới đây.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map