Hướng dẫn wordpress.com truyện

Tips: Nếu như bạn là người mới, hoặc chưa thành thạo Wordpress. Bạn nên tìm đến khóa học bài bản về Wordpress để có lộ trình từng bước vững chắc =>  7 giờ học Wordpress

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,…

Chuẩn bị hosting và domain

Để làm bất cứ website gì, bạn cần hosting & domain. Dưới đây là 2 tài liệu hướng dẫn:

Nếu bạn hỏi mình học online về MMO, kinh doanh, chạy quảng cáo ở đâu là oke nhất thì bấm vào link dưới đây xem xu hướng nhé. Hơn 50000 người đang học chứ không chỉ riêng mình

• Hướng dẫn mua tên miền Namecheap
• Những hosting tốt nhất mà bạn nên sử dụng

Các đoạn code cần chèn vào website

2 plugin miễn phí bạn cần cài đặt để bắt đầu làm website truyện là:

• Custom Post Type UI
• PHP code snippets

Thao tác cài đặt plugin rất đơn giản, nếu chưa biết bạn có thể xem lại video sau.

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”>
<?php
while( $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”>
<?php
global $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;
}

}

 Bình luận?

Kéo xuống bên dưới 1 chút nữa bạn sẽ thấy phần bình luận. Hoặc tham gia ngay vào các cộng đồng của mình:

(HOT) Bạn có thể nhận tư vấn tự động của mình tại đây: https://hoc.marketing/tuvan