Thiết kế theme cho wordpress
Vấn để của chúng ta ở đây có 2 hướng đi
- Các bạn có thể down theme có sẵn trên mạng về và chỉnh sửa thành của mình, hoặc dùng luôn theme có sẵn trong thư mục wp-content/themes của wordpress. Khi down trên mạng các bạn nên vào đây down thì theme sẽ “sạch” vì đã kiểm duyệt khi đưa lên mạng .
- Tự tạo cho mình một theme wordpress. Mang phong cách của mình và theo ý mình từ đầu đến cuối. (Mình cũng thích tự code ^^)
Trong bài này chúng ta sẽ đi giải quyết vấn đề tự tạo theme cho mình.
Vấn đề cần giải quyết
Để có thể tự làm theme wp cho mình điều tối thiểu bạn phải biết html, css để có thể tạo giao diện cho mình. Hơn nữa thì bạn biết jquery thì càng tốt. Nếu không biết jquery thì cũng không sao. Bạn có thể lên mạng search các hiệu ứng mà mình cần là được.
Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.
Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều
- Azdigi: Giá rẻ thì dùng gói Pro Gold Hosting còn chất lượng hơn thì em khuyên dùng Business Hosting. Có điều kiện thì lên VPS nhé
- Tino hosting
- iNet
- Nước ngoài thì Vultr
Khi đã có giao diện rồi (html,css,jquery) thì chúng ta tiến hành tích hợp các hàm wordpress vào.
Các file bắt buộc phải có trong theme
Trong 1 theme wp phải có những file như sau
- index.php : Chứa toàn bộ nội dung muốn hiển thị ra trang chủ
- style.css : Chứa thông tin khai báo cho theme
- screenshot.png : Ảnh thumbnail của theme (Thường dùng là 300x225px)
- functions.php : Chứa các hàm của theme, nếu không có hàm nào thì không cần cũng được. Nhưng chẳng theme nào mà không có hàm nhỉ ^^
- single.php : Trang bài viết
- Page.php : hiển thị nội dung của một trang nào đó
- archives.php: hiển thị các bài theo ngày, tháng, năm …
- Author: hiển thị thông tin tác giả, các bài viết của tác giả đó
- 404.php
Và một số file khác, trong lúc làm chúng ta tìm hiểu sau nha.
Bắt tay vào code theme wordpress
Trước khi vào viết code thì file style.css phải có các đoạn như sau. Mục đích là để wp có thể nhận diện theme của mình có trong hệ thống
/* CSS Document Theme Name: SinhVienLife's Theme Author: SinhVienLife Author URI: https://levantoan.com Author THEME: https://levantoan.com Description: Theme được thiết kế bởi Lê Văn Toản Version: 1.0 */
kết quả trong phần quản lý theme sẽ như sau
Các hàm cơ bản cần biết khi tự code theme
Trong file index.php ta cho hàm sau vào chỗ muốn hiển thị bài viết
<?php if(have_posts()):?> <?php while ( have_posts() ) : the_post(); ?> <!--Nội dung bài viết muốn hiển thị--> <?php endwhile; ?> <?php else:?> <!--Thông báo khi không có bài viết nào--> <?php endif;?>
Trong ví dụ này ta sẽ hiển thị thông tin như hình bên dưới
- Hiển thị tiêu đề :
<?php the_title();?>
- Hiển thị tên tác giả:
//Bao gồm link đến tác giả <?php the_author_posts_link(); ?> //Không có link đến tác giả <?php the_author(); ?>
- Hiển thị ngày tháng:
//Chỉ hiển thị ngày tháng <?php echo get_the_date();?> //Hiển thị ngày tháng thêm link $archive_year = get_the_time('Y'); $archive_month = get_the_time('m'); $archive_day = get_the_time('d'); <a href="<?php echo get_day_link( $archive_year, $archive_month, $archive_day); ?>" title="Bài viết trong ngày <?php echo $archive_day."/".$archive_month."/".$archive_year;?>"><?php echo get_the_date();?></a> - Hiển thị lượt xem bài viết (xem thêm đếm lượt xem bài viết không cần plugin)
<?php echo getPostViews(get_the_ID()); ?>
- Hiện thị số lượt bình luận
//bao gồm link tới comments <?php comments_popup_link( '<span class="leave-reply">' . __( '0 Bình luận', '' ) . '</span>', __( '1 Comment', '' ), __( '% bình luận', '' ) ); ?> //Chỉ đếm số comments <?php comments_number( '0', '1', '%' ); ?>
- Hiển thị categories của bài viết
//Cách nhau dấu ,Mẫu website nổi bật của tôi
<?php the_category(', ');?> - Link tới bài viết
<?php the_permalink();?>
- Hiển thị excerpt hoặc mô tả ngắn kiểu rss (chỉ text đơn thuần)
<?php the_excerpt_rss();?>
OK rồi ^^ chỉ cần các hàm cơ bản trên các bạn đã có thể hiển thị bài viết ra trang chủ rồi đó….
Chúc các bạn thành công ^^
- Bình luận
