Bài mẫu wordpress

Các mẫu trong WordPress là một cách tuyệt vời để thay đổi hoàn toàn cách hiển thị của các trang cụ thể. Bạn có thể sử dụng chúng để bổ sung thêm chức năng chuỗi chức năng vào trang web của bạn

Tuy nhiên, chúng tôi có một giới hạn chế độ đó là chúng tôi là các mẫu 'tĩnh'. Bạn không thể tùy biến chúng hoặc thay đổi hành vi của chúng theo bất kỳ cách nào. Bạn chỉ có thể lựa chọn bật hoặc tắt một mẫu. Mặc dù vậy, một mẫu sẽ đơn giản là thực hiện một chức năng cố định, ví dụ như, hiển thị sơ đồ trang web hoặc loại bỏ thanh bên để hiển thị toàn bộ chiều rộng của trang, tức là một trang sử dụng toàn bộ chiều rộng

Trong loạt bài viết này, tôi sẽ hướng dẫn cách bạn có thể mở rộng các mẫu sao cho linh hoạt hơn, cải thiện tính năng của chúng. Tôi sẽ bắt đầu bằng cách giới thiệu về cách tạo mẫu tiêu chuẩn thông qua một giao diện con, trước khi di chuyển đến hướng tiếp cận linh hoạt hơn, nơi tôi sẽ tạo một mẫu động cho mục đích chung

Cuối cùng, tôi sẽ trình bày cho bạn ba ví dụ thực tế về các mẫu động đầy đủ chức năng. Tôi cũng sẽ khám phá các chủ đề nâng cao như cách gán các mẫu cho các kiểu bài viết tùy biến (hay còn gọi là loại bài đăng tùy chỉnh)

Bạn muốn làm theo hướng dẫn chứ?

Để làm theo loạt bài hướng dẫn này, bạn cần có một trang WordPress cùng với quyền truy cập phần quản trị. Cách dễ nhất để thực hiện công việc này là sử dụng một môi trường phát triển cục bộ. Một trình soạn thảo văn bản chuyên dụng cũng hữu ích nhưng không bắt buộc

Nếu như bạn đang phát triển WordPress thông qua một máy chủ từ xa, thì bạn cần phải có khả năng chỉnh sửa các tập tin của chủ đề thông qua trang quản trị của WordPress, hoặc chỉnh sửa các tập tin tại bộ máy cục bộ và phần sử dụng . Để đơn giản, tôi sẽ khẳng định rằng bạn đang làm việc với WordPress giả tại máy chủ trong suốt phần còn lại của hướng dẫn này

Để cài đặt các mẫu của chúng tôi, tôi sẽ sử dụng một chủ đề dựa trên chủ đề cha là Twenty Seventeen, là chủ đề (tại thời điểm viết) mặc định mới nhất của WordPress. Vì vậy, nếu bạn thực hiện theo hướng dẫn thì tốt nhất là bạn nên cài đặt chủ đề này trước khi tiếp tục

Bạn có thể sử dụng một chủ đề con dựa trên một chủ đề cha khác nếu muốn, nhưng bạn sẽ cần chỉnh sửa một số mã để làm cho nó hoạt động một cách trơn tru với chủ đề cha của bạn. Tuy nhiên, các phương pháp cơ bản đều giống nhau cho bất kỳ chủ đề nào

Mẫu trong WordPress

Trước khi tìm hiểu cách làm cho các mẫu trở nên linh hoạt hơn, chúng ta hãy đi qua một số chi tiết cơ bản

WordPress sử dụng một hệ thống phân cấp mẫu để quyết định mẫu nào sẽ xuất trang hiện tại. Mẫu được sử dụng trong hầu hết các trường hợp cho các trang là

/*

Dưới đây là một số ví dụ tiêu biểu về các mẫu được sử dụng phổ biến trong WordPress

• Form Liên hệ
• Trang Portfolio
• Các câu hỏi thường gặp
• Biến thể trang 404
• Trang Đăng nhập cuộc gọi
• Sơ đồ trang
• Toàn trang
• TrangBlog
• Tiện ích Trang
• And also many other pages

Tôi không thể kể tiếp, nhưng như vậy bạn đã có thể cấu hình dung về mẫu. Mẫu thật tuyệt vời. Bạn có thể sử dụng chúng cho hầu hết mọi thứ

Nếu bạn đã từng sử dụng WordPress trong bao lâu cũng được, thì rất có thể bạn đã vô tình bắt gặp một hoặc nhiều ví dụ ở trên. Hầu hết các chủ đề đều bao gồm các mẫu để bổ sung chức năng cho chủ đề và bạn có thể dễ dàng bổ sung các tính năng của riêng mình thông qua một chủ đề con. Tôi sẽ mô tả cách làm điều này trong vài giây nữa

Các mẫu rất hữu ích vì chúng cho phép bạn hoàn toàn kiểm tra giám sát toàn bộ một trang. Bạn có thể bỏ qua header, footer và/or sidebar nếu bạn muốn. Đây là một trong những lý do tại sao mẫu cho trang toàn chiều rộng lại rất phổ biến, bởi vì rất dễ dàng lắp ghép thanh bên thông qua một mẫu

Để xem tất cả các mẫu hiện có, hãy vào trình soạn thảo trang trong WordPress và truy cập vào menu thả xuống Mẫu thông qua hộp meta Thuộc tính trang. Chỉ cần chọn mẫu mà bạn muốn và khi trang đã được cập nhật, nó sẽ được hiển thị trong lần tiếp theo khi trang được xem

Add Template information through a Theme con

Như đã đề cập ở trên, chúng tôi sẽ sử dụng một chủ đề tùy biến để cài đặt tất cả các mẫu trong suốt hướng dẫn này. Tôi sẽ bắt đầu với một chủ đề lừa đảo và một mẫu cơ bản, sau đó bổ sung các tính năng phức tạp hơn vào nó khi chúng ta tiếp tục

Toàn bộ quá trình sẽ được truy vấn từng bước từng bước một, vì vậy đừng lo lắng nếu bạn chưa tìm hiểu về giao diện con và/hoặc mẫu. You will quen với chúng khi kết thúc hướng dẫn này

Ý tưởng cơ bản đằng sau các chủ đề con là chúng cho phép bạn tùy biến giao diện của chủ đề hiện tại (được gọi là chủ đề cha) theo một cách nào đó mà không bị ảnh hưởng khi chủ đề cha được cập nhật

Nếu mã được thêm trực tiếp vào chủ đề cha thì tất cả các biến tùy chọn sẽ được thay thế và mất đi trong quá trình cập nhật chủ đề. Đây là điểm xoay vì bất kỳ chủ đề nào được bảo trì tốt sẽ được cập nhật một cách thường xuyên. Để tìm hiểu thêm về các chủ đề lừa đảo, tôi khuyên bạn nên xem qua tài liệu hướng dẫn chính thức

Điều thú vị cần lưu ý là, về mặt kỹ thuật, có thể sử dụng plugin WordPress để thêm các mẫu, nhưng sẽ đơn giản hơn nhiều khi sử dụng chủ đề con. Tôi không muốn làm phức tạp hóa những thứ không cần thiết bằng mã không liên quan, vì vậy tôi sẽ gắn kết với chủ đề con cho việc cài đặt mẫu của chúng tôi

Please start any

Được rồi, lý thuyết như vậy là đủ rồi—hãy tạo mẫu đầu tiên của chúng ta. Nó sẽ được đặt trong một chủ đề con tùy biến của Twenty Seventeen sẽ hoạt động như một kho chứa mẫu của chúng ta, vì vậy chúng ta cần phải tạo chủ đề con trước

Vui lòng mở thư mục chủ đề của bạn và tạo một thư mục mới cho chủ đề con. Theo cách tốt nhất của WordPress, bạn nên đặt tên cho chủ đề thư mục giống với chủ đề cha mà nó dựa trên, và thêm '-child' vào phía sau tên thư mục. Vì thư mục chủ đề cha của chúng tôi được đặt tên là

/*

/*

/*

_______ 4____0

2

 Theme Name:   Twenty Seventeen Child

3

 Description:  Twenty Seventeen Child Theme

/*

/*

/*

/*

/*

/*

/*

/*

/*

/*

/*

/*

/*

/*

Bây giờ chúng ta cần phải tham khảo tất cả các css từ chủ đề Twenty Seventeen. Nếu bạn đã từng làm việc với chủ đề con trước đây, thì bạn có thể đã từng thêm một câu lệnh CSS

/*

Bên trong thư mục gốc của theme con, hãy tạo một tệp

/*

1

2

2

3

2

/*

2

/*

2

/*

 Theme Name:   Twenty Seventeen Child

/*

 Theme Name:   Twenty Seventeen Child

/*

 Theme Name:   Twenty Seventeen Child

/*

/*

 Theme Name:   Twenty Seventeen Child

 Theme Name:   Twenty Seventeen Child

 Theme Name:   Twenty Seventeen Child

3

3

3

3

3

3

3

3

3

 Description:  Twenty Seventeen Child Theme

Lưu ý. Câu lệnh đóng PHP là không cần thiết, nhưng bạn có thể thêm nó nếu bạn thích

Bây giờ hãy thêm hook và callback để liệt kê các css của chủ đề cha Twenty Seventeen, thay vì nhập chúng trực tiếp bên trong kiểu tệp tin. css. Làm điều này bằng cách thêm hai phương thức lớp mới

1

2

2

3

2

/*

/*

/*

 Theme Name:   Twenty Seventeen Child

/*

/*

/*

/*

/*

3

/*

/*

/*

 Theme Name:   Twenty Seventeen Child

/*

3

/*

3

3

Save the change your own and active theme con. Bây giờ bạn đã có một theme con đầy đủ chức năng, cho dù đơn giản là theme con của Twenty Seventeen. Để kiểm tra xem nó có hoạt động đúng hay không, hãy thêm một dòng CSS tùy biến vào

/*

1

/*

Nếu tất cả đều ổn, thì bạn sẽ nhìn thấy tất cả các văn bản bên trong trang web của bạn bây giờ có một màu đỏ và rất đẹp

Đừng quên xóa dòng CSS thử trước khi tiếp tục. Bây giờ chủ đề con đã được kích hoạt, chúng ta có thể bắt đầu cài đặt mẫu đầu tiên của chúng ta

Add Template First of them ta

Một điều cần lưu ý về nơi bạn lưu các mẫu bên trong chủ đề con của bạn. Bạn có thể lưu các mẫu trực tiếp bên trong thư mục gốc của giao diện con hoặc trong một thư mục cao cấp nhất. Không quan trọng là bạn chọn bất kỳ vị trí nào;

Tuy nhiên, nếu bạn có nhiều mẫu, bạn có thể chọn lưu chúng trong một thư mục để dễ dàng quản lý. Tên của thư mục không quan trọng, nhưng nó phải được đặt trực tiếp bên trong thư mục gốc của chủ đề lừa đảo, nếu không thì WordPress sẽ không nhận ra các mẫu của bạn. Đối với hướng dẫn này, tôi sẽ sử dụng một thư mục gọi là

/*

Please add a new template to theme con. Cách tiêu chuẩn để thực hiện công việc này là sao chép tệp

/*

/*

Một khi bạn đã sao chép tệp

/*

/*

Mở tệp

/*

1

2

3

2

/*

/*

/*

2

/*

/*

/*

/*

/*

/*

/*

 Theme Name:   Twenty Seventeen Child

Bước này rất quan trọng vì khối chú thích nói cho WordPress biết rằng tập tin này là một mẫu và sẽ thêm nó vào danh sách các mẫu có sẵn trên màn hình thảo luận

Toàn bộ mã hoàn chỉnh cho mẫu sẽ giống như sau

1

2

2

2

3

/*

/*

2

/*

/*

/*

/*

/*

/*

/*

 Theme Name:   Twenty Seventeen Child

/*

/*

/*

 Theme Name:   Twenty Seventeen Child

3

/*

3

/*

3

/*

3

3

/*

 Description:  Twenty Seventeen Child Theme

/*

 Description:  Twenty Seventeen Child Theme

 Description:  Twenty Seventeen Child Theme

/*

/*

/*

/*

/*

/*

/*

/*

/*

/*

/*

/*

/*

/*

/*

/*

/*

/*

/*

/*

/*

/*

/*

/*

/*

Please try template of them ta. Truy cập vào trang quản trị của WordPress và chỉnh sửa bất kỳ trang nào hiện có hoặc tạo một trang mới. Trên màn hình soạn thảo trang, chọn menu thả xuống Mẫu từ hộp meta Thuộc tính trang để chỉ định mẫu cho trang hiện tại

Bởi vì chúng ta chỉ sao chép tệp mẫu

/*

/*

/*

1

2

3

/*

/*

/*

Save it and view page on front-end

Lưu ý. Nếu bạn không thể nhìn thấy tùy biến thông báo, hãy đảm bảo rằng bạn đã chọn biến tùy biến mẫu trên trình soạn thảo trang và lưu nó để cập nhật cài đặt

Bây giờ chúng ta hãy làm cho mẫu tùy biến của chúng ta trở nên hữu ích hơn một chút. Please replace the message that they ta has been added at on by code after here to export out diagram of all pages used to export original

1

2

/*

3

/*

/*

/*

/*

/*

This job will đưa ra kết quả sau đây

Thật dễ dàng để nhận ra các mẫu có thể hữu ích như thế nào. Nhưng chúng ta thậm chí có thể làm tốt hơn

Tóm tắt phần tóm tắt

Cho đến thời điểm này, chúng tôi đã tạo ra một chủ đề con và sử dụng nó để cài đặt mẫu tiêu chuẩn của chúng tôi. Trong bài tiếp theo, tôi sẽ hướng dẫn bạn từng bước cách mở rộng mẫu này, minh họa cách các mẫu có thể làm cho linh hoạt hơn

Cụ thể, chúng ta sẽ tạo một mẫu động phục vụ cho mục đích chung bằng cách thêm các tùy biến điều khiển điều khiển vào màn hình soạn thảo trang. Trình điều khiển logic sẽ được thêm vào mẫu để cho phép chúng ta trực tiếp tùy biến cách xuất trang

WordPress có nền kinh tế cực kỳ năng động. Có các theme, plugin, thư viện và nhiều sản phẩm khác giúp bạn xây dựng trang web và dự án của mình. Tính chất nguồn mở của nền tảng này cũng giúp nó trở thành một lựa chọn tuyệt vời để bạn có thể nâng cao kỹ năng lập trình của mình. Bất kể là gì, bạn có thể tìm thấy những thứ mà chúng tôi bán trên Envato Market

Đây là hướng dẫn đầu tiên của tôi (xin hãy nhẹ nhàng. ), vì vậy xin vui lòng để lại bất kỳ phản hồi nào trong phần bình luận dưới đây. Tôi sẽ cố gắng hết sức để trả lời mọi câu hỏi