Cách làm website đọc truyện bằng Wordpress & hướng phát triển

Cách làm website đọc truyện bằng WordPress & hướng phát triển

By Cris & Cena | Wordpress

Nov 19

Thế Khương

Bạn đang đọc bài viết trên blog của Thế Khương. Nhấn vào đây để tìm hiểu thêm.
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. Đây là khóa học mà mình khuyến nghị: 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.

cach-lam-web-doc-truyen-online-1

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.

GỢI Ý

Ưu đãi Special 2.0 có thể giúp bạn dễ dàng bắt đầu hoặc có nhiều kết quả hơn với kiếm tiền online hoặc kinh doanh online.

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

Video hướng dẫn:

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:

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à:

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');
}
}

cach-lam-web-doc-truyen-online-2

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;

cach-lam-web-doc-truyen-online-code-show-chapter

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>

Còn đoạn code dưới đây là dùng để phân trang cho các chapters cho các bạn dễ dàng xem tiếp chapter mới hoặc coi lại chapter cũ. Các bạn có thể chèn đoạn code này vào dưới code code của file single-content.php hoặc content.php tùy vào theme của các bạn nhé.

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

Để cho giao diện trông đẹp hơn thì các bạn đừng quên vào Theme Customize để chèn đoạn code CSS dưới đây vào nhé

.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;
}
}

Đó là tất cả những đoạn code bạn cần lưu lại để chèn vào website cho hoàn chỉnh trang web truyện, về thao tác và vị trí chèn, bạn nên xem kĩ video.

Tiếp tục, mình sẽ nói qua một vài gợi ý về định hướng kiếm tiền từ trang web truyện online.

Định hướng phát triển website đọc truyện

Trang web đọc truyện là một ngách thu hút traffic cực cao nếu bạn phát triển tốt.

Thời gian đầu, nhiệm vụ của bạn là tìm nguồn nội dung truyện mới, hot, được quan tâm nhiều và đăng tải, cập nhật đều đặn lên website.

Để kéo traffic ban đầu vào site, bạn cần cân nhắc sử dụng paid traffic. Vì nếu bạn không chủ động xây dựng cộng đồng fan đầu tiên cho web truyện của bản thân, bạn phải chờ khá lâu để có những organic traffic đầu tiên vào site.

Sử dụng Facebook Ads

Paid traffic phù hợp nhất lúc này để bạn triển khai để thu hút những visitor đầu tiên cho website là Facebook Ads.

Với Facebook Ads, bạn dễ dàng nhắm target đến những đối tượng phù hợp nhất của website đọc truyện dựa vào độ tuổi, giới tính, hoặc sở thích cụ thể.

dinh-huong-phat-trien-website-doc-truyen-1

Bạn có nhiều lựa chọn cho chiến lược kéo traffic bằng Facebook Ads với giá ads rẻ.

Chiến lược ở đây là bạn hãy chạy quảng cáo tới những truyện đang HOT nhất (Chẳng hạn như những truyện ngôn tình mà chị em hay đọc)

Để biết được truyện nào đang hot, bạn có thể vào spy các website truyện khác:

Tổ chức event/ giveaway

Là người có hứng thú và đam mê làm website đọc truyện thì không ai hiểu rõ audience của ngách này ngoài bạn.

Bạn có thể trích chút chi phí, tổ chức các event contest, giveaway và trao giải thưởng.

Thể lệ tham gia nhận giải nên là các hình thức viral mà những fanpage bán hàng hay fanpage cộng đồng áp dụng rất thành công như: tag bạn bè, comment, like, share bài viết về tường ở chế độ public.

Như vậy fanpage của bạn sẽ phát triển rất nhanh, traffic vào website truyện sẽ tăng dần, thời gian lâu dài sẽ mang về lượng organic traffic tốt.

Cách kiếm tiền từ website đọc truyện

Chỉ cần là website có traffic tốt, có nội dung phù hợp ngách website và duy trì phát triển đều đặn thì bạn không sợ không có cách để kiếm tiền từ đó.

Sau đây là những gợi ý về các hình thức kiếm tiền từ trang web đọc truyện mà bạn sở hữu.

Kiếm tiền từ Ads Network

Đây là nguồn thu nhập chính của các website truyện.

Hãy lướt qua các website truyện, họ đều đặt quảng cáo & có được lợi nhuận thông qua lượng click vào quảng cáo hoặc views

Ngoài ra, sẽ có rất nhiều đơn vị muốn đặt quảng cáo trực tiếp lên website của bạn với hình thức thu phí theo tháng, bạn có thể cân nhắc đặt nếu doanh thu mang về cao hơn Ad Network.

Hoặc bạn có thể thu phí của họ thông qua lượng impression (Lượt quảng cáo hiển thị)

Ngoài ra, nếu cộng đồng truyện tranh của bạn lớn mạnh. Bạn có thể kinh doanh những ấn phẩm thương hiệu như áo thun, mũ, hoodie,…

Tạm kết

Bài viết đã đi qua hướng dẫn chi tiết cách tạo website đọc truyện online bằng WordPress rất dễ dàng, bất cứ ai cũng có thể làm được.

Bạn chỉ cần cài đặt website WordPress như bình thường, sử dụng 2 plugin miễn phí và vài đoạn code mà mình chia sẻ trong bài là có thể bắt đầu đăng tải những bộ truyện đầu tiên cho đọc giả theo dõi.

Một vài gợi ý hướng phát triển cho website và định hướng kiếm tiền mà mình đã chia sẻ cũng không khó để thực hiện, nếu bạn yêu thích comic website và muốn tâm huyết kiếm tiền từ nó thì hãy follow theo và thực hành.

Bạn cũng có thể tham khảo cách làm và cách kiếm tiền từ những dạng website WordPress khác tại chuyên mục: Tự học WordPress của Kiemtiencenter.

Có thắc mắc gì hãy để lại bình luận mình sẽ hỗ trợ.

guest
147 Comments
mới nhất
cũ nhất
Inline Feedbacks
View all comments
Phương
Phương

Ad ơi mk mua tên miền vs doman thì giá miền dătd rẻ khác nhau gì không ạ
Với lại nếu mk lập 1 web như này thì dữ liệu tối đa mà web chưá dk là bao nhiêu. Và muốn nâng cấp để chưa nhiều dữ liệu hơn thì làm ntn ạ

Việt Đức
Việt Đức
Reply to  Phương

Tên miền và Domain là 1 mà bạn , rẻ đắt gì dùng được là được thôi bạn . Cái dữ liệu web thì chứa ở hosting , giá càng cao thì dung lượng càng nhiều , cái này bạn lên các trang bán host để tham khảo nha .

Phương
Phương
Reply to  Việt Đức

Trang name chap e mua hosting mà ko dk a ạ

Việt Đức
Việt Đức
Reply to  Phương
Van Anh
Van Anh

Cảm ơn ad nhiều

phuc
phuc

Cho mình hỏi là thiết kế web xong rồi thì mình lấy truyện ở đâu để đăng

Việt Đức
Việt Đức
Reply to  phuc

Bạn có thể copy từ các web truyện khác .

phuc
phuc
Reply to  Việt Đức

Vậy có vi phạm bản quyền gì không

Việt Đức
Việt Đức
Reply to  phuc

Không ai bắt bản quyền đâu bạn .

Jun
Jun

Video có hướng dẫn cái gì đâu bạn

Việt Đức
Việt Đức
Reply to  Jun

Bạn xem kỹ lại coi , trong bài có 2 video đó bạn .

hoanghuy
hoanghuy

đăng truyện tranh dc k

Việt Đức
Việt Đức
Reply to  hoanghuy

Được bạn , nhưng bạn học WordPress rồi tự làm chứ hướng dẫn trong bài này không phải dành cho truyện tranh .

San
San

add ơi, mình muốn chèn code hiện ra chap truyện vào web mà làm k dc, có thể cho mình video cụ thể để làm theo k ạ?

Phúc Lợi (Support)
Phúc Lợi (Support)
Reply to  San

Có video kiemtiencenter sẽ cập nhật bạn nha.

Dương Minh
Dương Minh

Có thể làm blog bình thường kết hợp với đọc truyện bằng cách này ko cậu ơi?

Phúc Lợi (Support)
Phúc Lợi (Support)
Reply to  Dương Minh

Được chứ bạn, đó là ý tưỡng mà, quan trọng bạn có làm không và làm đến đâu.

Nhi
Nhi

mình cài woody snippets nhưng nó ko có activate được.

Phúc Lợi (Support)
Phúc Lợi (Support)
Reply to  Nhi

Mình cài activate bình thường mà, bạn làm k đc thì nó báo lỗi gì ? bạn load rồi cài lại thử xem.

Nhi
Nhi

cài được, nhưng nó chỉ hiển thị phần thuộc truyện, còn show chap và Dropdown không hiện. cũng không xem chương được, chỉ xem được bài post

Phúc Lợi (Support)
Phúc Lợi (Support)
Reply to  Nhi

Hiện tại plugin này đã có sự thay đổi, đã có nhiều bạn phản hồi, có video hướng dẫn kiemtiencenter sẽ cập nhật sớm nhé.

Dần
Dần

video hướng dẫn thực hiện năm 2018 , đến hiện tại hình như ko còn cái plugin ” PHP code Snippets ” mà chỉ còn cái plugin ” insert php Code Snippets ” nên không cài đặt giống như trong videos đc ( tìm trên google cũng ko còn cai blugin : PHP code Snippets” như trong video ) cài thử cái plugin ” Insert PHP code snippets và cài giống video thì không gom cac chap vào trong truyện , k có cái nút tiến , lùi Chap và danh sach chap , AD lam cai video mới với cái blugin ” Insert PHP code Snippets ” ( hoặc blugin khác tương tự ) để làm sao có các chức năng như video trên đc ko ?

Phúc Lợi (Support)
Phúc Lợi (Support)
Reply to  Dần

Nếu có video hướng dẫn mới, kiemtiencenter sẽ cập nhật sớm bạn nhé.

chau
chau

ad vẫn chưa sửa dòng thứ ba của code drop down kìa. Tui viết vô mà vẫn bị lỗi .
The code snippet you are trying to save produced a fatal error on line 3:

syntax error, unexpected ” and post_parent = %d and pos’ (T_CONSTANT_ENCAPSED_STRING), expecting ‘,’ or ‘)’
The previous version of the snippet is unchanged, and the rest of this site should be functioning normally as before.

Please use the back button in your browser to return to the previous page and try to fix the code error. If you prefer, you can close this page and discard the changes you just made. No changes will be made to this site.

Phúc Lợi (Support)
Phúc Lợi (Support)
Reply to  chau

Sẽ update sau bạn nhé, nếu có team sẽ thông báo.