[Lập trình theme WordPress] Tạo Custom Page Template [NEW]



Trong WordPress có một chức năng khá hay mà bạn cũng nên biết đó là Custom Page Template. Chức năng này có nghĩa là bạn sẽ tạo các mẫu của riêng mình, nơi bạn có thể viết mã khác một chút so với giao diện ban đầu của trang web nhằm mục đích sử dụng nó cho một Trang cụ thể. Vì vậy, trong phần này của loạt bài Lập trình Chủ đề WordPress, tôi sẽ hướng dẫn bạn thực hiện chức năng này để tạo hai Mẫu Trang Tùy chỉnh.

Mẫu Trang Tùy chỉnh có nghĩa là bạn có thể tạo một mẫu tùy chỉnh và sử dụng nó cho bất kỳ Trang nào.

Tạo trang liên hệ

Bây giờ chúng ta sẽ áp dụng Mẫu trang tùy chỉnh để tạo một mẫu có tên là Liên hệ. Trước hết, hãy mở tệp Template / contact.php ra và khai báo những điều sau:

<?php
/*
Template Name: Contact
*/

Đó là, chúng tôi sẽ đặt tên là Liên hệ Mẫu này. Bây giờ bạn vào Pages, tạo trang mới rồi đặt Template là Liên hệ, tức là mẫu vừa tạo.

[Lập trình theme WordPress] Tạo Custom Page Template [NEW]

Ok, trong template này nó cũng có cái gì đó giống các trang bình thường, các bạn copy nội dung của page.php vào và cho vào file contact.php, nhớ đừng xóa các dòng khai báo Tên Template ở đầu file nhé. Như thế này:


<?php
/*
Template Name: Contact
*/
?>

<?php get_header(); ?>

<div id="content">

<section id="main-content">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php get_template_part( ‘content’, get_post_format() ); ?>
<?php get_template_part( ‘author-bio’ ); ?>
<?php comments_template(); ?>
<?php endwhile; ?>
<?php else : ?>
<?php get_template_part( ‘content’, ‘none’ ); ?>
<?php endif; ?>
</section>
<section id="sidebar">
<?php get_sidebar(); ?>
</section>

</div>

<?php get_footer(); ?>

Bây giờ, bạn có thể xóa những đoạn này, vì tôi không muốn nó hiển thị nội dung của trang nữa.


<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php get_template_part( ‘content’, get_post_format() ); ?>
<?php get_template_part( ‘author-bio’ ); ?>
<?php comments_template(); ?>
<?php endwhile; ?>
<?php else : ?>
<?php get_template_part( ‘content’, ‘none’ ); ?>
<?php endif; ?>

Thay vào đó bạn có thể tạo 2 khối như thế này để sau này chia cột cho đẹp.

[html]

Liên lạc

Nhập địa chỉ của bạn vào đây

090 456 765

[/html]

Đây chỉ là một phần nội dung đơn giản, bạn có thể viết bất cứ thứ gì vào đó. Trong phần biểu mẫu liên hệ, bạn có thể thay đổi [CONTACT-FORM] shortcode của Contact Form 7 vì các chức năng tự mã hóa này không nhất thiết phải tốt như các plugin phổ biến như Contact Form 7.

Sau khi cài đặt plugin và hiển thị biểu mẫu, bây giờ nội dung của trang chúng ta vừa tạo sẽ có dạng như sau:

laptrinhtheme-finish-contact

Mình cũng nói luôn là nếu bạn vẫn muốn tự mình code form contact thì mình khuyên chân thành là không nên vì dù bạn có code form như vậy nhưng chia sẻ theme cho người khác chắc cũng không dùng được nên cứ cài. một số plugin phổ biến. Bạn vẫn có thể tạo một Theme Option để họ có thể dễ dàng thay đổi shortcode mà không cần nhập mã, và thêm chức năng buộc cài plugin khi kích hoạt theme, nhưng đây là những thứ mình sẽ nói ở cuối loạt bài .

Tạo một trang đầy đủ

Toàn trang có nghĩa là chúng ta sẽ tạo một mẫu hiển thị nội dung của một Trang nhưng không tạo thanh bên để nó hiển thị nội dung rộng hơn, vì có một số yêu cầu mà mọi người thích sử dụng loại trang này hơn.

Sở dĩ chúng ta cần tạo mẫu trang cho riêng mình vì mặc định tệp page.php sẽ hiển thị nội dung bằng sidebar.

Bây giờ hãy mở tệp Template / full-width.php up, sau đó sao chép toàn bộ mã trong page.php và đặt nó vào full-width.php, nhưng nhớ viết mã để khai báo mẫu trang ở đầu tệp:

<?php
/*
Template Name: Full Width
*/
?>

Bây giờ trong tệp full-width.php, tìm dòng này và xóa nó:


<section id="sidebar">
<?php get_sidebar(); ?>
</section>

Sau đó, thêm một lớp biểu tượng (ví dụ: .chiều rộng đầy đủ) đưa trang này vào

như thế này:

[html]

[/html]

Vì mặc định sau này chúng ta sẽ viết CSS cho # main-content, nó sẽ hiển thị hơi nhỏ vì nó vẫn tiết kiệm dung lượng cho sidebar, nên chúng ta cần thêm một lớp để có thể viết CSS đè lên nó để mở rộng nó sau này. trang đầy đủ.

Bây giờ toàn bộ nội dung tệp Template / full-width.php sẽ trông như thế này:


<?php
/*
Template Name: Full Width
*/
?>
<?php get_header(); ?>

<div id="content">

<section id="main-content" class="full-width">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php get_template_part( ‘content’, get_post_format() ); ?>
<?php get_template_part( ‘author-bio’ ); ?>
<?php comments_template(); ?>
<?php endwhile; ?>
<?php else : ?>
<?php get_template_part( ‘content’, ‘none’ ); ?>
<?php endif; ?>
</section>

</div>

<?php get_footer(); ?>

Xong rôi.

Phần kết

Vậy là xong, chúng ta có hai mẫu trang tùy chỉnh đơn giản. Mục đích của tôi là để bạn hiểu được cách thức hoạt động của chức năng này, vậy thì nó đơn giản, nhưng chính vì những điều đơn giản này mà bạn sẽ có thể tự mình sáng tạo ra những ý tưởng để thực hiện công việc. Tôi ước.

Và một tin vui cho các bạn là khi hoàn thành bài viết này thì coi như theme đã vào khung xong, tức là chúng ta đã code xong các phần hiển thị nội dung cho nó. Bắt đầu từ bài tiếp theo, chúng ta sẽ làm một bước cực kỳ quan trọng nữa để quyết định theme đẹp hay xấu, đó là trang trí website bên ngoài front-end bằng CSS.

5/5 – (1 phiếu bầu)

Tiếp tục đọc trong bộ truyện