5 giờ tạo website bằng WordPress cực kỳ đơn giản và chuyên nghiệp

Cập nhật lần cuối: 06 Tháng Một 2023

Lập trình

996 Lượt xem

Bạn không muốn có một website để quảng bá sản phẩm hay đơn giản hơn là bạn muốn có một blog cá nhân để ghi lại những cảm nghĩ hãy viết những bài viết hay để chia sẻ với bạn bè và mọi người. Nhưng có một vấn đề xảy ra đó là bạn không hề biết lập trình bạn không biết làm thế nào để tạo nên một trang web nhưng bạn lại đang muốn tự tạo một trang web cho riêng mình vậy chúng ta có giải pháp nào cho vấn đề này không? Đừng lo lắng hôm nay mình sẽ hướng dẫn các bạn tạo một trang web bằng WordPress cực kỳ đơn giản và chuyên nghiệp. Nào chúng ta hãy cùng bắt đầu 5 giờ tạo website bằng WordPress cực kỳ đơn giản và chuyên nghiệp thôi nào.

Chuẩn bị

Đầu tiên bạn hãy cài đặt XAMPP lên máy bạn đây là một phần mềm tạo localhost để có thể chạy được các website viết bằng PHP sau đó bạn cài WordPress vào localhost của bạn, và bạn cũng phải có một phần mêm code editor tốt mình thì hay dùng visual code.

Những hướng dẫn cài đặt này đều đã có những bài viết hướng dẫn trên mạng nên bạn có thể tìm trên đó và làm theo rất dễ dàng.

Cài đặt dự án web của bạn

Đầu tiên bạn hãy tạo một thư mục chứa dự án của bạn tại đường dẫn: C:\xampp\htdocs\[thư mục wordpress của bạn]\wp-content\themes

tạo thư mục chứa dự án

Sau khi đã có thư mục chứa dự án rồi bạn hãy truy cập đường dẫn https://github.com/squibbleFish/theme-bones để có thể tải về gói started theme Bones.

Giải nén file theme started.

Sau khi tải về hãy giải nén nó vào thư mục dự án của bạn.

kích hoạt theme

Bạn có thể kích hoạt theme ở phần giao diện để bắt đầu sử dụng theme này.

Theme sau khi kích hoạt

Về cơ bản thì đây là một core theme cơ bản được xây dựng sẵn những thứ cơ bản rồi bạn không cần phải quan tâm quá nhiều tới việc code toàn bộ dự án từ đầu nữa mà bạn có thể chỉnh sửa lại theo ý thích của mình và hôm nay mình sẽ hướng dẫn các bạn tạo một trang blog đơn giản bạn chỉ cần biết HTML và CSS và một chút PHP thôi là có thể làm được rồi. Giờ chúng ta hãy bắt đầu tạo trang web cho riêng mình nhé.

Đầu tiên để bắt đầu tạo cho mình một trang wordpress riêng thì bạn phải coppy các tài nguyên có trong bộ template của bạn như các file css, js hay các file hình ảnh hoặc âm thanh vào thư mục dự án của bạn.

Giờ bạn hãy mở file head.php trong thư mục dự án của bạn lên bằng code editor của bạn đồng thời cũng mở file index.html của template của bạn lên.

Giờ bạn hãy nhìn vào file index.html bạn sẽ thấy các thẻ html quen thuộc với bạn hãy nhìn vào đó để xác định cấu trúc website để chọn được đoạn code bạn sẽ coppy vào phần đầu của website trong file header.php thông thường ở phần đầu của website sẽ có những phần không thay đổi là phần menu, logo và banner đây là những phần không bao giờ thay đổi là phần chung của website vì thế bạn có thể cắt phần này để đưa vào file header.php như mẫu template của mình có những phần không thay đổi là menu và banner nên mình sẽ coppy những đoạn code thuộc phần đó vào file header.php.

phần headder

Mình có một lưu ý nho nhỏ với các bạn là trong phần header sẽ có những file css và js của template được nhúng vào đó và để sử dụng được những file js và css này trong wordpress bạn cần nhúng các file này vào wordpress trong file function.php như sau.

wp_enqueue_style( 'tên','đường dẫn css' );

thêm css vào theme

Và trong phần head của trang header.php bạn hãy gọi hàm:

wp_head();

Để có thể load những thông tin được cài đặt tròng file funtion.

Bạn thêm các file Js cũng tương tự nhưng bạn phải dùng hàm:

wp_register_script( string $handle, string|bool $src, array $deps = array(),string|bool|null $ver = false, bool $in_footer = false )

wp_enqueue_script( string $handle, string $src = '', array $deps = array(),string|bool|null $ver = false, bool $in_footer = false )

để có thể nhúng file js vào.

Thêm Javascript vào wordpress

Ở thẻ Title trong phần head bạn có thể thêm câu lện WordPress sau để thay đổi tiêu để website

<title><?php wp_title(''); ?></title>
Và để tạo menu cho website thì bạn hãy làm như sau.

tạo menu wordpress

Lưu ý ở những chỗ mà có code HTML của menu bạn hãy chỉnh sửa lại theo đúng với cấu trúc menu của bạn là được.

Tiếp theo bạn hãy mở file footer.php ra để chỉnh sửa phần footer trang web.

phần footer

Sau đó hãy coppy phần footer từ template mẫu vào file footer này để tạo phần footer cho trang web của bạn

hoàn thành chân trang

Như vậy là bạn đã hoàn thành hai phần là đầu trang và chân trang đây chính là hai khu vực ít có sự thay đổi nhất trong toàn bộ website tiếp theo chúng ta hãy cùng làm phần thân trang đây chính là phần quan trọng cũng như phức tạp nhất của trang web.

Đầu tiên với trang index thì bạn hãy mở file ìndex,php ra để tạo phần thân trang cho trang chủ website của bạn.

Tại file này bạn hãy để lại hai hàm quan trọng là <?php get_header(); ?> và <?php get_footer(); ?> đây chính là hai hàm được dùng để gọi phần đầu và chân trang của bạn. Còn những phần còn lại nằm giữa hai hàm này bạn có thể xoá hết đi và chèn code thân trang template của bạn vào đó.

code phần thân index

Như vậy bạn đã dễ dàng tạo trang chủ cho website của mình rồi phải không nào tiếp theo chúng ta hãy cùng làm thêm các phần như category, post và page để hoàn chỉnh trang web của bạn nhé.

Tiếp theo chúng ta hãy cùng làm phần Category nhé. Đây là phần mà khi bạn nhấn vào một chuyên mục nào đó thì website sẽ hiện ra những bài thuộc chuyện mục đó cho bạn.

Đầu tiên hãy mở file archive.php ra đây chính là file sẽ được chạy khi bạn nhấn vào một category nào đó thì nó sẽ hiển thị những bài viết thuộc category đó.

Tạo trang category

Tiếp theo bạn hãy coppy code của trang category của template của bạn và paste vào đây như vậy bạn đã có một trang category rồi bạn chỉ cần phải chỉnh sửa một số thành phần sao cho phù hợp nữa là được.

Như mình đã làm ví dụ ở Template của mình bạn có thể làm tương tự là được.

<?php get_header(); ?>

            <!--================Blog Categorie Area =================-->

            <section class="blog_categorie_area">

            <div class="container">

                <div class="row">

                    <div class="col-lg-4">

                        <div class="categories_post">

                            <img src="<?php echo get_template_directory_uri().'/' ?>image/blog/cat-post/cat-post-3.jpg" alt="post">

                            <div class="categories_details">

                                <div class="categories_text">

                                    <a href="blog-details.html"><h5>Social Life</h5></a>

                                    <div class="border_line"></div>

                                    <p>Enjoy your social life together</p>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="col-lg-4">

                        <div class="categories_post">

                            <img src="<?php echo get_template_directory_uri().'/' ?>image/blog/cat-post/cat-post-2.jpg" alt="post">

                            <div class="categories_details">

                                <div class="categories_text">

                                    <a href="blog-details.html"><h5>Politics</h5></a>

                                    <div class="border_line"></div>

                                    <p>Be a part of politics</p>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="col-lg-4">

                        <div class="categories_post">

                            <img src="<?php echo get_template_directory_uri().'/' ?>image/blog/cat-post/cat-post-1.jpg" alt="post">

                            <div class="categories_details">

                                <div class="categories_text">

                                    <a href="blog-details.html"><h5>Food</h5></a>

                                    <div class="border_line"></div>

                                    <p>Let the food be finished</p>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </section>

        <!--================Blog Categorie Area =================-->




        <!--================Blog Area =================-->

        <section class="blog_area">

            <div class="container">

                <div class="row">

                    <div class="col-lg-8">

                        <div class="blog_left_sidebar">

                        <?php if (have_posts()) : while (have_posts()) : the_post(); // kiểm tra xem có post thuộc category này không nếu có thì bắt đầu vòng lặp để lấy ra?>

                        <article class="row blog_item">

                               <div class="col-md-3">

                                   <div class="blog_info text-right">

                                        <div class="post_tag">

                                        <?php

                                            $id = get_the_ID(); // Lấy ID của post

                                            $category_detail=get_the_category($id);// Lấy thông tin category của post

                                            foreach($category_detail as $cd){

                                                echo '<a href="'.get_category_link($cd->cat_ID). '">'. $cd->cat_name .'</a>';// Hiển thị các category thuộc post

                                                }

                                            ?>

                                        </div>

                                        <ul class="blog_meta list_style">

                                            <li><a href="#"><?php the_author(); // Lấy tên tác giả ?><i class="lnr lnr-user"></i></a></li>

                                            <li><a href="#"><?php the_date() ?><i class="lnr lnr-calendar-full"></i></a></li>




                                        </ul>

                                    </div>

                               </div>

                                <div class="col-md-9">

                                    <div class="blog_post">

                                        <img src="<?php echo get_the_post_thumbnail_url($id, 100);// Lấy hình đại diện của bài viết ?>" alt=""/>

                                        <div class="blog_details">

                                            <a href="<?php the_permalink(); // lấy link bài viết?>"><h2><?php the_title();// Lấy tiêu đề bài viết ?></h2></a>

                                            <p><?php the_excerpt(); // Lấy phần trích dẫn bài viết?></p>

                                            <a href="<?php the_permalink(); ?>" class="view_btn button_hover">View More</a>

                                        </div>

                                    </div>

                                </div>

                            </article>

                        <?php endwhile; ?>

                        <?php else:?>

                        <?php endif;?>







                            <nav class="blog-pagination justify-content-center d-flex">

                              

                                <?php pagination_custom(); // tạo phần phân trang bạn có thể xem hàm này tại bài viết này https://tuandc.com/thu-thuat-wordpress/huong-dan-tao-custom-pagination-phan-trang-trong-wordpress.html?>

                            </nav>

                        </div>

                    </div>

                    <div class="col-lg-4">

                        <div class="blog_right_sidebar">

                            <aside class="single_sidebar_widget search_widget">

                                <div class="input-group">

                                <!-- Tạo form tìm kiếm -->

                                <form style="width:100%" action="https://tuandc.com" id="searchform" method="get"> 

                                    <input type="text" onfocus="if (this.value == 'Search') 

                                    {this.value = '';}" onblur="if (this.value == '') 

                                    {this.value = 'Search';}" id="s" name="s"  

                                    class="form-control" placeholder="Search Posts"/>

                                

                                </form>




                                </div><!-- /input-group -->

                                <div class="br"></div>

                            </aside>

                            <aside class="single_sidebar_widget author_widget">

                                <img class="author_img rounded-circle" src="<?php echo get_template_directory_uri().'/' ?>image/blog/author.png" alt="">

                                <h4>Charlie Barber</h4>

                                <p>Senior blog writer</p>

                                <div class="social_icon">

                                    <a href="#"><i class="fa fa-facebook"></i></a>

                                    <a href="#"><i class="fa fa-twitter"></i></a>

                                    <a href="#"><i class="fa fa-github"></i></a>

                                    <a href="#"><i class="fa fa-behance"></i></a>

                                </div>

                                <p>Boot camps have its supporters andit sdetractors. Some people do not understand why you should have to spend money on boot camp when you can get. Boot camps have itssuppor ters andits detractors.</p>

                                <div class="br"></div>

                            </aside>

                            <aside class="single_sidebar_widget popular_post_widget">

                                <h3 class="widget_title">Popular Posts</h3>

                                <?php if (have_posts()) : while (have_posts()) : the_post(); // kiểm tra xem có post thuộc category này không nếu có thì bắt đầu vòng lặp để lấy ra?>

                                <div class="media post_item">

                                    <img src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="post">

                                    <div class="media-body">

                                        <a href="<?php the_permalink(); ?>"><h3><?php the_title();?></h3></a>

                                        <p><?php echo get_the_date('D. M. Y', get_the_ID()) ?></p>

                                    </div>

                                </div>

                                <?php endwhile; ?>

                                <?php endif;?>







                                <div class="br"></div>

                            </aside>

                            <aside class="single_sidebar_widget ads_widget">

                                <a href="#"><img class="img-fluid" src="<?php echo get_template_directory_uri().'/' ?>image/blog/add.jpg" alt=""></a>

                                <div class="br"></div>

                            </aside>

                            <aside class="single_sidebar_widget post_category_widget">

                                <h4 class="widget_title">Post Catgories</h4>

                                <ul class="list_style cat-list">

                                <?php

                                    $args = array(

                                        'type'      => 'post',

                                        'child_of'  => 0,

                                        'parent'    => ''

                                    );

                                    $categories = get_categories( $args );

                                    foreach ( $categories as $cate ) { ?>

                                        <li>

                                        <a href="<?php echo get_category_link($cate->cat_ID)?>" class="d-flex justify-content-between">

                                            <p><?php echo $cate->cat_name; ?></p>

                                        </a>

                                    </li>

                                <?php } ?>




                                                                                            

                                </ul>

                                <div class="br"></div>

                            </aside>

                            <aside class="single-sidebar-widget newsletter_widget">

                                <h4 class="widget_title">Newsletter</h4>

                                <p>

                                Here, I focus on a range of items and features that we use in life without

                                giving them a second thought.

                                </p>

                                <div class="form-group d-flex flex-row">

                                    <div class="input-group">

                                        <div class="input-group-prepend">

                                            <div class="input-group-text"><i class="fa fa-envelope" aria-hidden="true"></i></div>

                                        </div>

                                        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Enter email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter email'">

                                    </div>

                                    <a href="#" class="bbtns">Subcribe</a>

                                </div>  

                                <p class="text-bottom">You can unsubscribe at any time</p>  

                                <div class="br"></div>                          

                            </aside>

                            <aside class="single-sidebar-widget tag_cloud_widget">

                                <h4 class="widget_title">Tag Clouds</h4>

                                <ul class="list_style">

                                <?php 

                                // Lấy danh sách các tag có trong trang web để tạo tag cloud.

                                    $tags = get_tags(array(

                                    'hide_empty' => false

                                    ));

                                    

                                    foreach ($tags as $tag) {

                                        $tag_link = get_tag_link( $tag->term_id );

                                    echo '<li><a href="'.$tag_link.'">' . $tag->name . '</a></li>';

                                    }

                                    

                                    ?>




                                </ul>

                            </aside>

                        </div>

                    </div>

                </div>

            </div>

        </section>

        <!--================Blog Area =================-->

<?php get_footer(); ?>

Như ví dụ trang WordPress của mình thì sau khi hoàn thành chỉnh sửa nó sẽ được như sau.

Sau khi tạo category

Như vậy là bạn đã có một trang category khá là đơn giản rồi đúng không nào tiếp theo ta hãy tạo trang hiển thị chi tiết cho từng post nhé.

Đầu tiên bạn hãy mở thư mục format ra đây là thư mục chứa các file php định dạng nội dung của bạn, chắc hẳn bạn đã biết WordPress hỗ trợ rất nhiều các định dạng nội dung khác nhau như post, gallery,… và bạn hoàn toàn có thể sáng tạo cách trình bày hiển thị nội dung cho từng loại định dạng bài viết và định dạng cơ bản nhất chính là post. Bạn hãy mở file format.php, đây chính là file sẽ xử lý hiển thị cho nội dung post của bạn.

Bạn hãy coppy và dán toàn bộ mã nguồn template của trang post vào file này và bạn hãy chỉnh sửa lại chút để có thể hiển thị một các hợp lý nhất.

Như mình làm ở ví dụ sau.

              <?php

              /*

                 * This is the default post format.

                 *

                 * So basically this is a regular post. if you don't want to use post formats,

                 * you can just copy ths stuff in here and replace the post format thing in

                 * single.php.

                 *

                 * The other formats are SUPER basic so you can style them as you like.

                 *

                 * Again, If you want to remove post formats, just delete the post-formats

                 * folder and replace the function below with the contents of the "format.php" file.

                */

              ?>

              <!--================Blog Area =================-->

        <section class="blog_area single-post-area">

            <div class="container">

                <div class="row">

                    <div class="col-lg-8 posts-list">

                        <div class="single-post row">

                        <?php

                                            $id = get_the_ID(); // Lấy ID của post

                                            // $category_detail=get_the_category($id);// Lấy thông tin category của post

                                            // foreach($category_detail as $cd){

                                            //  echo '<a href="'.get_category_link($cd->cat_ID). '">'. $cd->cat_name .'</a>';// Hiển thị các category thuộc post

                                            //  }

                                            ?>

                            <div class="col-lg-12">

                                <div class="feature-img">

                                    <img class="img-fluid" src="<?php echo get_the_post_thumbnail_url($id, 100)?>" alt="">

                                </div>                                  

                            </div>

                            <div class="col-lg-3  col-md-3">

                                <div class="blog_info text-right">




                                    <div class="post_tag">

                                    <?php

                                  $category_detail=get_the_category($id);// Lấy thông tin category của post

                                  foreach($category_detail as $cd){

                                    echo '<a href="'.get_category_link($cd->cat_ID). '">'. $cd->cat_name .'</a>';// Hiển thị các category thuộc post

                                    }

                                  ?>

                                    </div>

                                    <ul class="blog_meta list_style">

                                        <li><a href="#"><?php the_author(); ?><i class="lnr lnr-user"></i></a></li>

                                        <li><a href="#"><?php the_date(); ?><i class="lnr lnr-calendar-full"></i></a></li>




                                    </ul>

                                    <ul class="social-links">

                                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>

                                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>

                                    </ul>

                                </div>

                            </div>

                            <div class="col-lg-9 col-md-9 blog_details">

                                <h2><?php the_title(); ?></h2>

                                <p class="excert">

                                    <?php the_excerpt();// Lay phan tom tat bai viet ?>

                                </p>




                            </div>

                            <div class="col-lg-12">

                                <!-- <div class="quotes">

                                    MCSE boot camps have its supporters and its detractors. Some people do not understand why you should have to spend money on boot camp when you can get the MCSE study materials yourself at a fraction of the camp price. However, who has the willpower to actually sit through a self-imposed MCSE training.                                      

                                </div> -->

                                <div class="row">

                                    <?php the_content(); ?>                         

                                </div>

                            </div>

                        </div>

                        <div class="navigation-area">

                            <div class="row">

                                <div class="col-lg-6 col-md-6 col-12 nav-left flex-row d-flex justify-content-start align-items-center">

                                    <div class="thumb">

                                        <a href="#"><img class="img-fluid" src="image/blog/prev.jpg" alt=""></a>

                                    </div>

                                    <div class="arrow">

                                        <a href="#"><span class="lnr text-white lnr-arrow-left"></span></a>

                                    </div>

                                    <div class="detials">

                                        <p>Prev Post</p>

                                       <?php echo _rand_posts();// Chạy hàm lấy ngẫu nhiên bài viết trong file function ?>




                                    </div>

                                </div>

                                <div class="col-lg-6 col-md-6 col-12 nav-right flex-row d-flex justify-content-end align-items-center">

                                    <div class="detials">

                                        <p>Next Post</p>

                                        <?php echo _rand_posts();// Chạy hàm lấy ngẫu nhiên bài viết trong file function ?>

                                    </div>

                                    <div class="arrow">

                                        <a href="#"><span class="lnr text-white lnr-arrow-right"></span></a>

                                    </div>

                                    <div class="thumb">

                                        <a href="#"><img class="img-fluid" src="image/blog/next.jpg" alt=""></a>

                                    </div>                                      

                                </div>                                  

                            </div>

                        </div>

                        <div class="comments-area">

                            <h4><?php $comment_count = wp_count_comments( $id ); echo $comment_count->moderated; // Đếm số commnet có trong bài viết ?> Comments</h4>

                            <?php 

                            $args = array('cat' => 'home','post_type' => 'post');

                            $post_obj = new WP_Query($args);




                                //HIển thị comment

                                $comments = get_comments(array(

                                    'post_id' => $id,

                                    'number' => '2' ));

                                foreach($comments as $comment) {?>

                                    <div class="comment-list">

                                    <div class="single-comment justify-content-between d-flex">

                                        <div class="user justify-content-between d-flex">

                                            <div class="thumb">

                                                <img src="<?php echo get_template_directory_uri() ?>/image/blog/c1.jpg" alt="">

                                            </div>

                                            <div class="desc">

                                                <h5><a href="#"><?php echo comment_author( $comment->comment_ID ); ?></a></h5>

                                                <p class="date"><?php echo $comment->comment_date; ?> </p>

                                                <p class="comment">

                                                    <?php echo $comment->comment_content; // hiển thị nội dung bình luận?>

                                                </p>

                                            </div>

                                        </div>

                                        <div class="reply-btn">

                                               <a href="" class="btn-reply text-uppercase">reply</a> 

                                        </div>

                                    </div>

                              <?php  }

                            ?>                                      

                        </div>




                        <?php 

                        comment_form(); // hàm này sẽ gọi comment form từ file comments.php ?>

                    </div>




                </div>

            </div>

        </section>

        <!--================Blog Area =================-->

Bạn có thể làm tương tự vói các định dạng khác của post.

Cuối cùng để hoàn tất trang web của chúng ta thì có thể bạn sẽ cần phải tạo một số trang với mục đích khác nhau.

Đầu tiên bạn hãy tạo một file php tại thư mục gốc của theme nhé tên thì bạn có thể đặt tuỳ ý theo mục đích của mình.

tao file page

Bạn nhớ phải có dòng chú thích

Template Name: Contact

*/
Trong file template page đó nhé nếu không thì wordpress sẽ không nhận ra file template của bạn đâu.

Viết code cho page template

Tiếp theo bạn chỉ việc coppy code của page template từ template của bạn vào đây nữa là xong như vậy là bạn đã tạo được một custom page rồi đấy.

hoàn thành trang web

Như vậy chỉ với vài bước đơn giản bạn đã có thể tự mình làm ra một trang web WordPress dễ dàng và đơn giản đúng không nào, chỉ với 5 giờ bạn có thể có một trang web WordPress là điều hoàn toàn có thể làm được.

Chúc các bạn may mắn khi tự mình tạo một trang web WordPress dễ dàng và chuyên nghiệp nhé, nếu có chỗ nào cần tham khảo bạn có thể tải mã nguồn bài mình vừa làm ở đây.