Hướng dẫn tạo custom single post Template ( Code và Plugin)

Các mẫu WordPress giúp các nhà phát triển dễ dàng tạo nội dung động hơn và áp dụng kiểu nhất quán trên nhiều bài đăng hoặc trang. Mặc dù đây là một tính năng rất hữu ích nhưng tính năng này bị bỏ qua bởi nhiều người dùng do mức độ yêu cầu mã hóa.

Tuy nhiên, điều này không còn là trường hợp. Elementor Theme Builder với khả năng tạo các mẫu bài đăng đơn tùy chỉnh mà không làm bất kỳ mã hóa nào. Điều này mở ra cho các khả năng mới cho mọi người dùng, bất kể chuyên môn mã hóa của họ.

Trong bài viết này, chúng tôi sẽ giới thiệu cho bạn các mẫu bài đăng đơn lẻ và cho bạn thấy cách bạn có thể tạo một bản mẫu. Chúng tôi sẽ đề cập đến cả phương pháp dựa trên mã chuẩn và sau đó minh họa cách bạn có thể sử dụng Trình tạo chủ đề phần tử để tạo mẫu bài đăng đơn tùy chỉnh mà không cần bất kỳ mã hóa nào. Băt đâu nào!

I. Giới thiệu Single Post Templates

Tóm lại, bạn có thể sử dụng các mẫu WordPress để áp dụng một tập hợp các kiểu và nội dung cho một bài đăng hoặc trang. Đặc biệt, các mẫu bài đăng, cho phép bạn tạo các thiết kế khác nhau mà bạn có thể áp dụng cho một số bài đăng nhất định mà không phải tạo lại kiểu và định dạng mỗi lần. Nó tương tự như cách một stencil cho phép bạn vẽ một hình dạng nhất định hơn và hơn bằng cách cho bạn một phác thảo, bạn có thể điền với nội dung mới mỗi lần.

Tùy thuộc vào trang web của bạn, điều này có thể được sử dụng theo nhiều cách khác nhau. Bạn có thể sử dụng các mẫu khác nhau cho các loại nội dung bài đăng khác nhau yêu cầu bố cục cụ thể. Ví dụ: một trang web âm nhạc có thể sử dụng các mẫu khác nhau để xem bài đăng và tin bài. Bạn cũng có thể sử dụng nó để tạo một mẫu khác nhau cho mỗi tác giả bài đăng hoặc cho nội dung nổi bật, để chỉ cung cấp thêm hai ví dụ.

Nếu điều này nghe có vẻ như một tính năng hữu ích đáng kinh ngạc, bạn không sai! Tuy nhiên, đó là một phần được phần nào bị bỏ qua bởi hầu hết người dùng WordPress. Điều này là do không có cách dễ dàng để tạo các mẫu bài đăng đơn tùy chỉnh của riêng bạn mà không cần phải thực hiện một số mã hóa, điều này có thể khiến nhiều người dùng bị giới hạn trải nghiệm.

Tuy nhiên, điều này không còn là điều cần thiết, vì bây giờ có một cách để thực hiện cùng một mục tiêu mà không cần viết mã gì cả. Phần còn lại của bài viết này sẽ được dành riêng để hiển thị cho bạn những cách khác nhau mà bạn có thể tạo một mẫu bài đăng đơn tùy chỉnh.

II. Cách tạo Single Post Templates thủ công

Cách học cũ của việc tạo ra một mẫu bài đăng là bằng cách bẻ khóa trình soạn thảo văn bản yêu thích của bạn và thực hiện nó từ đầu. Tuy nhiên, phương pháp này sẽ yêu cầu bạn làm quen với phát triển WordPress. Đương nhiên, đây là rào cản đối với nhiều người, nhưng việc có chuyên môn mang đến cho bạn sự tự do hoàn toàn nhiều hơn hoặc ít hơn để điều chỉnh mẫu cho sự hài lòng của bạn.

Trước khi tiếp tục, bạn nên đảm bảo bạn đang sử dụng chủ đề con. Điều này sẽ cho phép bạn chỉnh sửa chủ đề hiện tại của mình mà không có khả năng mất những thay đổi đó khi bạn thực hiện cập nhật cho nó.

Tiếp theo, bạn cần phải tạo tệp mới, tệp này sẽ tạo cơ sở cho mẫu của bạn. Bây giờ, đặt tên nó là new-template.php và dán vào đoạn mã sau:

<?php
/*
 * Template Name: New Template
 * Template Post Type: post
 */
  
 get_header();  ?>

 

Điều này xác định tệp của bạn dưới dạng mẫu bài đăng và tìm nạp nội dung tiêu đề bằng cách sử dụng móc. Tất nhiên, bạn nên thay đổi Tên mẫu thành bất kỳ thứ gì bạn muốn. Mặc dù bạn có thể tải mẫu lên trang web của mình nhưng hiện chưa có nội dung nào khác, vì vậy, hãy thêm một số nội dung.

Nếu bạn không muốn bắt đầu từ đầu, bạn có thể sao chép nội dung của tệp mẫu single.php hiện có của chủ đề. Bạn có thể thực hiện điều này bằng cách truy cập trang web WordPress của mình bằng Secure Shell (SSH) or Secure File Transfer Protocol (SFTP) – chúng tôi thích sử dụng ứng dụng khách nguồn mở như FileZilla. Tệp bạn đang tìm kiếm sẽ nằm trong thư mục của chủ đề con:

Hướng dẫn tạo custom single post Template

Mở single.php và sao chép tất cả các nội dung bên dưới get_header (); ?>. Mã này xác định cách các bài viết đơn xuất hiện trong chủ đề hiện tại của bạn, vì vậy hãy sao chép và dán nó vào new-template.php, sau get_header (); ?>:

HOW TO CREATE A CUSTOM SINGLE POST TEMPLATE

Tại thời điểm này, bạn được tự do thêm bất kỳ kiểu dáng hoặc chức năng nào khác vào mẫu. Đây là nơi bạn sẽ cần phải dựa vào kỹ năng phát triển của riêng bạn, nhưng bạn cũng có thể tham khảo WordPress Theme Handbook và hướng dẫn này của WPBeginner để biết thêm thông tin.

Khi bạn đã hoàn thành mẫu của mình, đã đến lúc tải lên mẫu đó. Một lần nữa, bạn cần kết nối qua SSH hoặc SFTP. Quay lại thư mục của chủ đề con và thêm tệp new-template.php của bạn vào bên trong:

HOW TO CREATE A CUSTOM SINGLE POST TEMPLATE

Thao tác này sẽ thêm mẫu bài đăng của bạn vào chủ đề mà bạn có thể kiểm tra bằng cách điều hướng đến bài đăng hoặc trang trong WordPress và tìm kiếm tùy chọn mới trong  Post Attributes metabox:

HOW TO CREATE A CUSTOM SINGLE POST TEMPLATE

 

Đơn giản vậy thôi, bạn đã tạo thành công một mẫu bài đăng theo cách thủ công!

III. Giới thiệu Elementor Pro Plugin

Elementor Pro Plugin

Tiếp theo, chúng ta sẽ xem xét cách bạn có thể tạo một mẫu bài đăng đơn tùy chỉnh mà không cần viết mã. Để làm điều này, chúng tôi sẽ sử dụng Elementor Pro rất phổ biến. Đây là phiên bản cao cấp của plugin trình xây dựng trang Elementor miễn phí cho WordPress và là trình tạo kéo và thả cho phép bạn cập nhật chủ đề của mình bằng trình chỉnh sửa trực tiếp. Sử dụng nó là một cách siêu dễ dàng để nhanh chóng tạo ra một cái nhìn độc đáo, chuyên nghiệp cho trang web WordPress của bạn.

Các phiên bản Pro dốc lên với các tính năng bổ sung, một trong số đó là Theme Builder được thêm gần đây. Bạn có thể sử dụng điều này để tạo chân trang, tiêu đề và mẫu của riêng bạn. Chúng tôi sẽ xem xét kỹ hơn sau này.

Key Features

  • Easy to use for beginners, with extensive options for advanced designers.
  • Uses an instant drag-and-drop interface that updates immediately when you make a change.
  • Enables you to create a responsive website for mobile devices.
  • Includes a large number of assets and templates to use.

Làm thế nào để tạo Single Post Template với Elementor Pro

Bây giờ, tôi sẽ tạo mẫu tùy chỉnh cho các bài đăng đơn lẻ bằng cách sử dụng Elementor Pro. Do đó, bạn cần đảm bảo bạn có cả plugin Elementor và tiện ích mở rộng Elementor Pro được cài đặt và kích hoạt trên trang web của bạn.

Trước tiên, bạn cần truy cập Elementor> My Templates trong WordPress. Đây là nơi bạn sẽ tìm thấy các mẫu tùy chỉnh của mình, nhưng sẽ trống trước tiên:

 

Click Add New Template để bắt đầu, trước tiên bạn sẽ được hỏi loại mẫu bạn muốn tạo. Vì chúng ta sẽ là một mẫu bài đăng duy nhất, hãy chọn Đơn. Bạn cũng có thể đặt tên cho mẫu ở đây, nhưng đây là tùy chọn:

Elementor Theme Builder

Click Create Template and the Elementor Theme Builder  cung cấp cho bạn tùy chọn để làm việc với mẫu hiện có:

Elementor Theme Builder

Bạn có thể chọn sử dụng một trong những cơ sở này làm cơ sở cho riêng mình hoặc đóng cửa sổ bật lên này để tạo thứ gì đó từ đầu. Đối với ví dụ này, chúng tôi sẽ sử dụng một trong các mẫu bài đăng mà chúng tôi sẽ thêm bằng cách nhấp vào liên kết Chèn xuất hiện bên dưới hình thu nhỏ của nó khi chúng tôi di chuột lên đó. Thao tác này sẽ mở trình tạo chủ đề với mẫu đã chọn:

Elementor Theme Builder

 

Khi ở đây, bạn có toàn quyền tự do chỉnh sửa mẫu của mình. Nếu trước đó bạn chưa từng làm việc với Elementor, chúng tôi khuyên bạn nên dành một chút thời gian để tự làm quen với những điều cơ bản. Tuy nhiên, đây là một plugin rất trực quan nên bạn không nên mất nhiều thời gian để bắt kịp tốc độ. Bạn sẽ tìm thấy các tiện ích con và nội dung trong menu bên trái, bạn có thể kéo và thả vào mẫu:

Elementor Theme Builder

Để chỉnh sửa các phần tử riêng lẻ, hãy chọn nó và trình đơn sẽ thay đổi để hiển thị các cài đặt của nó. Điều này mang đến cho bạn rất nhiều tự do sáng tạo, vì vậy hãy thêm một vài yếu tố và xem bạn có thể làm gì.

Elementor Theme Builder

Để có ý tưởng tốt hơn về cách thiết kế của bạn sẽ trông như thế nào trong thực tế, bạn có thể sử dụng tính năng Xem trước. Điều này cho phép bạn xem cách một bài đăng được chọn sẽ trông như thế nào với mẫu của bạn. Bạn có thể truy cập bằng cách nhấp vào biểu tượng ‘hình con mắt’ trong bảng điều khiển phía dưới bên trái, sau đó chọn Cài đặt:

Preview Settings Custom Post Single

Thao tác này sẽ thêm phần Preview Setting vào menu chính, nơi bạn có thể chọn loại nội dung để sử dụng. Chọn Đăng ở đây và chọn bài đăng trên blog của bạn từ trường thứ hai:

preview dynamic content

 

Tiếp theo, nhấp vào Apply & Preview để tải lại trình chỉnh sửa chính để chứa bài đăng đã chọn. Giờ đây, bạn có thể tiếp tục chỉnh sửa mẫu của mình và xem nó sẽ ảnh hưởng như thế nào đến giao diện của bài đăng trong thời gian thực:

Khi bạn hài lòng với mẫu của mình, đã đến lúc lưu và xuất bản mẫu đó. Bạn có thể làm điều này bằng cách sử dụng nút Xuất bản ở góc dưới cùng bên trái. Khi bạn nhấp vào đây, một cửa sổ bật lên khác sẽ xuất hiện cho phép bạn xác định vị trí mẫu sẽ được áp dụng:

Create Elementor Template

Điều này yêu cầu bạn tạo điều kiện, có thể nói chung hoặc rất cụ thể, tùy thuộc vào mục đích của mẫu. Bạn có thể chọn tự động áp dụng nó cho mọi bài đăng trên trang web của mình hoặc áp dụng nó cho tất cả các bài đăng trong một danh mục duy nhất:

Create Elementor Template

Bạn cũng có thể thêm nhiều điều kiện vào một mẫu. Ví dụ: bạn có thể áp dụng nó cho tất cả các bài đăng trong một danh mục, nhưng loại trừ bài đăng bằng một thẻ cụ thể. Bạn thậm chí có thể chỉ định từng bài đăng riêng lẻ. Đối với ví dụ này, chúng ta hãy làm cho nó dễ dàng cho chính mình và chọn bài viết, mà sẽ áp dụng nó cho tất cả các bài viết.

Khi bạn đã thêm điều kiện của mình, bạn có thể nhấp vào Xuất bản để lưu mẫu của bạn. Thao tác này sẽ thêm mẫu vào thư viện của bạn và áp dụng mẫu đó cho tất cả các bài đăng khớp với các điều kiện được chỉ định của bạn. Mở bất kỳ bài đăng nào trên trang web của bạn để xem mẫu được áp dụng:

Create Elementor Template

Bây giờ bạn đã tạo mẫu thành công! Bạn có thể quay lại và chỉnh sửa nó theo ý bạn, hoặc thay đổi các điều kiện để áp dụng nó cho các bài viết khác nhau hoàn toàn. Mẫu cũng có thể được thêm vào bài đăng và trang, vì vậy, hãy thử nghiệm tính năng này và bạn sẽ sớm có thể tạo mẫu có thể sử dụng lại tuyệt vời cho trang web của mình!

Lời kết

là một tính năng WordPress hữu ích mà nhiều người dùng đã không thể sử dụng, vì trước đây nó yêu cầu một số mã để triển khai. Tuy nhiên, Trình xây dựng chủ đề Elementor đã mở các mẫu bài đăng tùy chỉnh cho đến một đối tượng rộng hơn. Giờ đây, bất kỳ ai cũng có thể tạo các mẫu bài đăng của riêng mình mà không cần chạm vào một dòng mã.

Trong bài viết này, chúng tôi đã giới thiệu cách bạn có thể tạo một mẫu bài đăng đơn tùy chỉnh. Có hai phương pháp làm điều này, với giải pháp cổ điển yêu cầu bạn sử dụng mã để tạo mẫu theo cách thủ công. Tuy nhiên, chúng tôi cũng đã cho bạn thấy cách sử dụng plugin Elementor Pro để thực hiện cùng một công việc bằng Trình tạo chủ đề của nó.

Bạn có bất kỳ câu hỏi nào về việc sử dụng các mẫu bài đăng đơn tùy chỉnh không? Cho chúng tôi biết trong phần ý kiến dưới đây!

Chúc bạn thành công!

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x