Cách làm website đọc truyện bằng WordPress & 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,…

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

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;

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

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

}