Bài viết này giới thiệu cách làm các trang 404, Trang, Bài Viết và Liên hệ của giao diện Clean Blog, gồm 404.php, page.php, single.php và template-contact.php.

Theme WordPress: 404.php, page.php, single.php và template-contact.php

Nội dung 404.php

Trang 404 sẽ thông báo không tìm thấy trang, đồng thời xuất 5 bài viết ngẫu nhiên (order=rand&posts_per_page=5).

<?php get_header(); ?>

        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="site-heading text-center">
                        <h1>404</h1>
                        <hr class="small">
                        <span class="sub-heading">Không tìm thấy trang!</span>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <?php
                    query_posts('ignore_sticky_posts=1&order=rand&posts_per_page=5');
                    if (have_posts()) : while (have_posts()) : the_post();
                ?>
                <div class="post-preview">
                    <a href="<?php the_permalink(); ?>">
                        <h2 class="post-title"><?php the_title(); ?></h2>
                        <h3 class="post-subtitle"><?php echo esc_attr(wp_trim_words(get_the_excerpt(), 15, '...')); ?></h3>
                    </a>
                    <p class="post-meta">Đăng bởi <a href="<?php echo get_author_posts_url(get_the_author_meta('ID'), get_the_author_meta('user_nicename')); ?>"><?php the_author(); ?></a> ngày <?php the_time('d M, Y'); ?></p>
                    <hr>
                </div>
                <?php
                    endwhile; else : echo '<p>Không có bài viết.</p>'; endif;
                ?>
            </div>
        </div>
    </div>

<?php get_footer(); ?>

Nội dung page.php

<?php
    get_header();
    if (have_posts()) : the_post();
?>

        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="site-heading text-center">
                        <h1><?php the_title(); ?></h1>
                        <hr class="small">
                        <span class="sub-heading"><?php echo esc_attr(wp_trim_words(get_the_excerpt(), 15, '...')); ?></span>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <?php the_content(); ?>
            </div>
        </div>
    </div>

<?php endif; get_footer(); ?>

Nội dung single.php

<?php
    get_header();
    if (have_posts()) : the_post();
?>

        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="site-heading post-heading">
                        <h1><?php the_title(); ?></h1>
                        <h2 class="sub-heading"><?php echo esc_attr(wp_trim_words(get_the_excerpt(), 15, '...')); ?></h2>
                        <span class="meta">Đăng bởi <a href="<?php echo get_author_posts_url(get_the_author_meta('ID'), get_the_author_meta('user_nicename')); ?>"><?php the_author(); ?></a> ngày <?php the_time('d M, Y'); ?></span>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <?php the_content(); ?>
                <p><?php the_tags('Thẻ: ', ', ', ''); ?></p>
                <div class="comments-container">
                    <?php comments_template(); ?>
                </div>
            </div>
        </div>
    </div>

<?php endif; get_footer(); ?>

Biểu mẫu bình luận tạm thời cứ để như vậy, chúng ta sẽ sử dụng Disqus Comment System cho chức năng này, tham khảo tại đây.

Nội dung template-contact.php

<?php
    /**
     * Template Name: Liên Hệ
     */
    get_header();
    if (have_posts()) : the_post();
?>

        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="site-heading text-center">
                        <h1><?php the_title(); ?></h1>
                        <hr class="small">
                        <span class="sub-heading"><?php echo esc_attr(wp_trim_words(get_the_excerpt(), 15, '...')); ?></span>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <?php the_content(); ?>
                <form>
                    <div class="row">
                        <div class="form-group col-xs-12 floating-label-form-group">
                            <label>Tên</label>
                            <input type="text" class="form-control" placeholder="Tên">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-xs-12 floating-label-form-group">
                            <label>Địa chỉ Email</label>
                            <input type="email" class="form-control" placeholder="Địa chỉ Email">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-xs-12 floating-label-form-group">
                            <label>Nội dung</label>
                            <textarea rows="5" class="form-control" placeholder="Nội dung"></textarea>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="form-group col-xs-12">
                            <button type="submit" class="btn btn-default">Gửi</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

<?php endif; get_footer(); ?>

Biểu mẫu liên hệ tạm thời không hoạt động, tham khảo bài viết này để tạo biểu mẫu liên hệ.