Hướng dẫn WordPress: Cách tạo Theme WordPress từ HTML (Phần 1)

  1. 1. Hiện đang đọc: Hướng dẫn WordPress: Cách tạo Theme WordPress từ HTML (Phần 1)
  2. 2. Hướng dẫn WordPress: Cách tạo chủ đề WordPress từ HTML (Phần 2)
  3. 3. Giới thiệu về giải phẫu của một chủ đề WordPress

Nếu bạn bắt đầu với một trang web HTML (+ CSS), bạn không cần phải vứt bỏ tất cả khi chuyển sang WordPress. Bạn có thể chuyển đổi HTML của mình thành WordPress và chạy trang web (giờ mạnh hơn) của mình trên nền tảng WordPress động.


Hoặc có thể đó không phải là trường hợp. Có lẽ bạn chỉ đang tự hỏi làm thế nào để chuyển đổi một thiết kế HTML của khách hàng thành một chủ đề WordPress hoàn chỉnh. Hoặc có thể bạn muốn học lập trình WordPress (+ PHP) cơ bản từ phía HTML quen thuộc hơn.

Dù lý do bạn ở đây hôm nay là gì, hướng dẫn WordPress này sẽ giới thiệu cho bạn những điều cơ bản để tạo chủ đề WordPress từ HTML. Bạn có thể làm theo hướng dẫn này để tạo chủ đề của mình từ đầu hoặc bạn có thể truy cập Github và tải xuống chủ đề khởi động WPExplorer cung cấp một canvas trống trống để tạo chủ đề của bạn với tất cả các tệp và mã mẫu cần thiết để bắt đầu. Vì vậy, nếu bạn là một trong những người thích học bằng cách đọc mã, sau đó tải xuống chủ đề khởi động, bỏ qua hướng dẫn và xem mọi thứ hoạt động như thế nào. Khác, hãy lấy trình chỉnh sửa mã (Tôi sử dụng và khuyên dùng Sổ tay++, hoặc là Cao siêu) và một trình duyệt đã sẵn sàng, sau đó làm theo hướng dẫn đơn giản này đến cùng.

Đặt tên cho chủ đề WordPress của bạn

Trước tiên, chúng tôi phải đặt cho chủ đề của bạn một cái tên duy nhất, điều này không cần thiết nếu bạn chỉ xây dựng một chủ đề cho trang web của mình. Bất kể, chúng tôi cần đặt tên cho chủ đề của bạn để làm cho nó dễ nhận dạng khi cài đặt.

Giả định chung tại thời điểm này:

  • Bạn đã sẵn sàng index.html và biểu định kiểu CSS.
  • Bạn có cài đặt WordPress hoạt động với ít nhất một chủ đề, ví dụ: Mười hai mười bốn
  • Bạn đã tạo một thư mục chủ đề nơi bạn sẽ lưu chủ đề WordPress mới của mình

Hãy để trở lại để đặt tên cho chủ đề WordPress của bạn. Mở trình chỉnh sửa mã của bạn và sao chép-dán nội dung của biểu định kiểu của bạn vào một tệp mới và lưu nó dưới dạng style.css trong thư mục chủ đề của bạn. Thêm thông tin sau vào đầu style.css mới được tạo:

/ *
Tên chủ đề: Tên chủ đề của bạn
URI chủ đề: URL của chủ đề của bạn
Mô tả: Mô tả ngắn gọn về chủ đề của bạn
Phiên bản: 1.0 hoặc bất kỳ phiên bản nào bạn muốn
Tác giả: Tên của bạn hoặc tên người dùng của WordPress.org
URI tác giả: Địa chỉ web của bạn
Thẻ: Thẻ để định vị chủ đề của bạn trong kho chủ đề WordPress
* /

Đừng bỏ qua các thẻ nhận xét (/ * * *). Lưu các thay đổi. Thông tin này cho WordPress biết tên chủ đề của bạn, tác giả và những thứ miễn phí như thế. Phần quan trọng là tên chủ đề, cho phép bạn chọn và kích hoạt chủ đề của mình thông qua bảng điều khiển WP.

Phá vỡ mẫu HTML của bạn thành các tệp PHP

Hướng dẫn này giả định thêm rằng bạn có mẫu HTML được sắp xếp từ trái sang phải: tiêu đề, nội dung, thanh bên, chân trang. Nếu bạn có một thiết kế khác, bạn có thể cần phải chơi với mã một chút. Nó rất vui và siêu dễ.

Bước tiếp theo liên quan đến việc tạo bốn tệp PHP. Sử dụng trình soạn thảo mã của bạn, tạo index.php, header.php, sidebar.php và footer.php và lưu chúng vào thư mục chủ đề của bạn. Tất cả các tập tin đều trống vào thời điểm này, vì vậy, don hy vọng chúng sẽ làm bất cứ điều gì. Đối với mục đích minh họa, tôi đang sử dụng các tệp biểu định kiểu index.html và CSS sau:

INDEX.HTML




Cách chuyển đổi mẫu HTML sang chủ đề WordPress - WPExplorer



Đây là phần tiêu đề. Đặt logo của bạn và các chi tiết khác ở đây.

Đây là khu vực nội dung chính.

Và đây là chân trang.

PHONG CÁCH CSS

#wrap {lề: 0 tự động; chiều rộng: 95%; lề trên: -10px; chiều cao: 100%;}
.tiêu đề {chiều rộng: 99,8%; viền: 1px solid # 999; height: 135px;}
.nội dung {chiều rộng: 70%; viền: 1px solid # 999; lề-top: 5px;}
.thanh bên {float: phải; lề trên: -54px; chiều rộng: 29%; viền: 1px solid # 999;}
.chân trang {width: 99,8%; viền: 1px solid # 999; lề-top: 10px;}

Bạn có thể lấy cả hai mã nếu bạn không có gì để làm việc. Chỉ cần sao chép-dán chúng vào trình soạn thảo mã của bạn, lưu chúng, tạo bốn tệp PHP mà chúng ta vừa đề cập và sẵn sàng cho phần tiếp theo. Mở mới tạo của bạn (và trống) tiêu đề.php. Đăng nhập vào cài đặt WordPress hiện tại của bạn, điều hướng đến Ngoại hình – >> Biên tập và mở ra tiêu đề.php. Sao chép tất cả các mã giữa các thẻ và dán nó vào tập tin header.php của bạn. Sau đây là mã tôi nhận được từ tệp header.php trong chủ đề Twenty Fourteen:




<?php wp_title( '|', true, 'right' ); ?>




Sau đó mở index.html tệp và sao chép mã tiêu đề (nghĩa là mã trong

phần) vào tiêu đề.php của bạn ngay bên dưới các thẻ như hình dưới đây:




<?php wp_title( '|', true, 'right' ); ?>







Đây là phần tiêu đề. Đặt logo của bạn và các chi tiết khác ở đây.

Sau đó thêm vào

Ở bất cứ đâu giữa các thẻ trong tệp header.php để liên kết biểu định kiểu của bạn. Cũng nhớ đặt và mở thẻ trong tiêu đề.php như hình trên. Lưu tất cả các thay đổi.

Sao chép phần thứ hai (tức là.

Giáo dục

từ index.html đến index.php mới được tạo , và thêm vào

Trên đỉnh cao và trên đỉnh cao


Sầu đến đáy tuyệt đối. Ba dòng này tìm nạp tiêu đề.php, sidebar.php và footer.php (theo thứ tự đó) và hiển thị chúng trong tệp index.php, giúp đặt mã của bạn trở lại với nhau. Lưu tất cả các thay đổi. Tại thời điểm này, tệp index.php của bạn sẽ trông như sau:



Sau đó sao chép nội dung từ các phần thanh bên và chân trang trong index.html của bạn sang sidebar.php và footer.php tương ứng.

Thêm bài viết

Mẫu HTML của bạn sắp sửa biến thành một chủ đề WordPress. Chúng tôi chỉ cần thêm bài viết của bạn. Nếu bạn có bài đăng trên blog của mình, bạn sẽ hiển thị chúng như thế nào trong chủ đề HTML HTML-to-WordPress tùy chỉnh của bạn? Bạn sử dụng một loại hàm PHP đặc biệt được gọi là Vòng. Loop chỉ là một đoạn mã chuyên dụng hiển thị các bài đăng và bình luận của bạn ở bất cứ nơi nào bạn đặt nó.

Bây giờ, để hiển thị bài viết của bạn trong phần nội dung của mẫu index.php, sao chép và dán đoạn mã sau vào giữa

các thẻ như hình dưới đây:

>

Điều đó sẽ chăm sóc bài viết của bạn. Dễ dàng như ABC. Tại thời điểm này (và sử dụng các tệp mẫu được cung cấp trong hướng dẫn này), tiêu đề.php của bạn sẽ trông như thế này:




<?php wp_title( '|', true, 'right' ); ?>




Sidebar.php của bạn sẽ trông như thế này:

Footer.php của bạn sẽ trông như thế này:

Và đây là chân trang

Bạn có để ý việc đóng cửa không và thẻ trong phần chân trang? Đừng quên bao gồm cả những người quá.

Style.css của bạn sẽ trông giống như thế này:

/ *
Tên chủ đề: Tạo chủ đề WordPress từ HTML
URI chủ đề: http://wpexplorer.com
Mô tả: Chủ đề này cho bạn thấy cách tạo chủ đề WordPress từ HTML
Phiên bản: 1.0
Tác giả: Freddy cho @WPExplorer
URI tác giả: http://WPExplorer.com/create-wordpress-theme-html-1/
Tags: wpexplorer, chủ đề tùy chỉnh, HTML sang WordPress, tạo chủ đề WordPress
* /
thân hình {
họ phông chữ: arial, helvetica, verdana;
cỡ chữ: 0,8em;
chiều rộng: 100%;
chiều cao: 100%;
}

.tiêu đề {
màu nền: # 1be;
lề trái: 14%;
đầu trang: 0;
chiều rộng biên giới: 0,1em;
màu viền: # 999;
kiểu viền: chắc chắn;
chiều rộng: 72%;
chiều cao: 250px;
}

.Nội dung {
màu nền: # 999;
lề trái: 14%;
lề trên: 5px;
phao: trái;
chiều rộng: 46%;
chiều rộng biên giới: 0,1em;
màu viền: # 999;
kiểu viền: chắc chắn;
}

.thanh bên {
màu nền: # 1d5;
lề phải: 14%;
lề trên: 5px;
phao: phải;
chiều rộng biên giới: 0,1em;
màu viền: # 999;
kiểu viền: chắc chắn;
trên cùng: 180px;
chiều rộng: 23%;
}

.chân trang {
màu nền: đỏ;
lề trái: 14%;
phao: trái;
lề trên: 5px;
chiều rộng: 72%;
chiều cao: 50px;
chiều rộng biên giới: 0,1em;
màu viền: # 999;
kiểu viền: chắc chắn;
}

Và index.php của bạn sẽ trông giống như:





Một lần nữa – điều này dựa trên một trang web từ trái sang phải với tiêu đề, nội dung, thanh bên, bố cục chân trang. Bạn đang theo dõi? Tất cả năm tệp nên được lưu trong thư mục chủ đề của bạn. Đặt tên cho thư mục bất cứ điều gì bạn muốn và nén nó vào một kho lưu trữ ZIP bằng WinRar hoặc một chương trình tương đương. Tải chủ đề mới của bạn lên bản cài đặt WordPress của bạn, kích hoạt nó và xem chủ đề đã chuyển đổi của bạn hoạt động!

Điều đó thật dễ dàng, phải không? Bạn có thể định kiểu chủ đề của mình theo bất kỳ cách nào bạn muốn nhưng hầu hết các tính năng chúng tôi yêu thích trong WordPress vẫn không hoạt động kể từ khi hướng dẫn này hướng dẫn cơ bản về chuyển đổi các mẫu HTML sang WordPress và có giá trị lớn đối với bạn khi mới bắt đầu. Trong hướng dẫn tiếp theo, chúng tôi sẽ đưa mọi thứ lên cao hơn và chơi xung quanh với các khía cạnh khác của lập trình WordPress (chẳng hạn như Tệp mẫuThẻ mẫu) sẽ cho phép bạn biến các mẫu HTML của mình theo bất kỳ cách nào bạn muốn. Giữ nguyên!

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