Hôm trước mình có chia sẻ một screenshot về traffic khủng của một trong số những trang web đọc truyện online tại Việt Nam.
Ảnh này thu hút rất nhiều sự quan tâm về cách làm web đọc truyện như thế nào?
Đặc biệt là trên nền tảng WordPress chưa có hướng dẫn & cũng không có theme nào được viết sẵn.
Thực tế, nhu cầu đọc truyện tranh online trên website để giải trí, thư giãn, phục vụ đam mê rất phổ biến và luôn có sự quan tâm đông đảo từ nhiều đối tượng.
Đặc biệt là các chị em đọc truyện ngôn tình và học sinh trung học.
Bây giờ, mình sẽ hướng dẫn bạn từng bước làm website đọc truyện bằng WordPress đơn giản, dễ dàng cùng một vài định hướng phát triển.
Lưu ý: Hướng dẫn dưới đây sẽ giúp bạn hoàn thiện các tính năng cần có của 1 web đọc truyện. Chứ sẽ không bao gồm:
- Chỉnh sửa website làm sao cho đẹp: Bạn cần chọn theme theo ý bạn hoặc học sơ qua về css
- Tính năng nâng cao: Bạn sẽ tự tìm plugin thêm vào, chẳng hạn đăng ký thành viên, cho độc giả đăng bài,…
Kế đến bạn sẽ tick vào những tùy chọn cơ bản cho plugin Custom Post Type UI như video hướng dẫn.
Các đoạn code tiếp theo, bạn sẽ chèn tuần tự vào mục Add Snippet trong plugin PHP code snippets, bao gồm:
Code PHP Snippets Thuộc truyện – Đoạn code này sẽ hiển thị cái input thuộc truyện khi các bạn thêm một chapter cho truyện nào đó.
add_action( ‘edit_form_after_title', ‘mystoryparrent' );function mystoryparrent( $post_data = false ) {$scr = get_current_screen();$value = “”;if ( $post_data ) {$t = get_post($post_data);$a = get_post($t->post_parent);$value = $a->post_title;}if ($scr->id == ‘story') {echo ‘<label>Thuộc truyện: <input type=”text” name=”parent” value=”‘.$value.'” /></label> (Tên của cuốn truyện gốc)<br /><br />';}}
///////
add_action( ‘save_post', ‘save_mystory' );function save_mystory( $post_id ) {$story = isset( $_POST[‘parent'] ) ? get_page_by_title($_POST[‘parent'], ‘OBJECT', ‘post') : false ;if ( ! wp_is_post_revision( $post_id ) && $story ){remove_action(‘save_post', ‘save_mystory');$postdata = array(‘ID' => $_POST[‘ID'],‘post_parent' => $story->ID);wp_update_post( $postdata );add_action(‘save_post', ‘save_mystory');}
}
Snippet thuộc truyện giúp hệ thống nhận diện từng chương truyện mà bạn thêm vào sẽ thuộc vào bộ truyện nào.
Điều này tương tự như ý nghĩa của thanh breadcrumb thường thấy ở phía trên bài viết WordPress.
PHP Snippets Show chapters – Đoạn code này giúp cho các bạn hiển thị các chapters của truyện nhé
global $post;$args = array(‘post_type' => ‘story',‘post_status' => ‘publish',‘order' => ‘ASC',
‘post_parent' => $post->ID,
‘posts_per_page' => -1);$story = new WP_Query( $args );if( $story->have_posts() ) : ?><div class=”story__main”><h2 class=”story__title-chapter”>Danh sách các chương</h2><ul class=”story__chapter”><?phpwhile( $story->have_posts() ) :$story->the_post();?><li><a href=<?php echo the_permalink();?>><?php echo get_the_title();?></a></li><?php endwhile;?></ul></div>
<?php endif;
Snippet show chapters có tính năng hiển thị danh sách các chương có trong một bộ truyện mà bạn đăng tải trên website.
PHP Snippets Dropdown – Đoạn code này sẽ giúp cho các bạn hiển thị danh sách các chap của truyện nhé
function get_dropdown_part( $id ) {global $post, $wpdb;$query = $wpdb->get_results(sprintf(‘select * from %s where post_type = \'%s\' and post_parent = %d and post_status = \'%s\' order by post_date asc', $wpdb->posts, ‘story', $id, ‘publish'));if ($query) {echo ‘<form id=”selectpart” class=”story__form”><select name=”part” onchange=”window.location.href = (this.options[this.selectedIndex].value)”><option value=””>- Chọn tập -</option>'; foreach ( $query as $k ) { $uri = get_permalink($k->ID); if ( ! preg_match(‘/.*page-[0-9].*/', $uri)) echo ‘<option value=”‘.$uri.'”>'.$k->post_title .'</option>'; } echo ‘</select></form>';}
}
Đoạn code chèn ở file content-single.php hoặc content.php tùy vào theme của bạn dùng, bạn phải tìm trang single để hiển thị tên truyện và dropdown danh sách truyện
<div class=”comic–title”><?php if ( get_post_type() == ‘story') {printf( ‘<p class=”story__title”><a href=”%s”>%s</a></p>', get_permalink($post->post_parent), get_the_title($post->post_parent));get_dropdown_part($post->post_parent);} ?>
</div>
<div class=”story__pagination”><div class=”story__pagination-prev”><?phpglobal $post;$prev_post = get_previous_post($post->ID);if($prev_post) {$prev_title = strip_tags(str_replace(‘”‘, ”, $prev_post->post_title));echo “\t” . ‘<a rel=”prev” href=”‘ . get_permalink($prev_post->ID) . ‘” title=”‘ . $prev_title. ‘”><strong>Chương trước</strong></a>' . “\n”;}?></div><div class=”story__pagination-select”><?php if ( get_post_type() == ‘story') {get_dropdown_part($post->post_parent);} ?></div><div class=”story__pagination-next”><?php$next_post = get_next_post($post->ID);if($next_post) {$next_title = strip_tags(str_replace(‘”‘, ”, $next_post->post_title));echo “\t” . ‘<a rel=”next” href=”‘ . get_permalink($next_post->ID) . ‘” title=”‘ . $next_title. ‘”><strong>Chương tiếp</strong></a>' . “\n”;}?></div>
</div>
.story__chapter {margin-left: 0;padding-left: 0;margin-bottom: 0;}.story__chapter li a {font-size: 22px;}.story__title-chapter {padding-left: 10px;border-left: 4px solid var(–main);font-size: 30px;text-transform: uppercase;}.story__chapter li {margin-bottom: 10px;}.story__chapter li a:hover,.nav-previous a:hover,.nav-next a:hover{text-decoration: none;color: var(–main);}.story__title {text-align: center;margin-bottom: 15px;}.story__title > a {text-transform: uppercase;text-decoration: none;font-weight: bold;font-size: 25px;color: var(–main);}.story__form {text-align: center;}.story__form select {font-size: 20px;padding: 15px;border: 1px solid #eee;max-width: 100%;
}
.story__pagination {display: flex;justify-content: space-between;align-items: center;flex-direction: row;margin-bottom: 25px;}.story__pagination > * {flex-basis: 33%;max-width: 33%;text-align: center;}.story__pagination-next > a,.story__pagination-prev > a {display: inline-block;padding: 15px 30px;background-color: var(–main);color: white;border-radius: 50px;}.story__pagination-prev > a {background-color: var(–second);
}
.navigation.single-post .story__form,.single-post .story__pagination{display: none;
}
@media only screen and (max-width: 767px){.story__pagination {flex-direction: column;justify-content: center;}.story__pagination > * {max-width: 100%;flex-basis: 100%;margin: 7px 0;
}
}
Đăng ký nhận những hướng dẫn mới nhất từ Thế Khương