Làm web (05) - Wordpress_cài đặt_Starter theme (01)

Tiếp theo của: Làm web (04) - Photoshop và Bootstrap (04)
-----

12          Cài Wordpress


Cài thủ công:

– Tải và Cài WAMP (ver 3.0.6) hoặc XAMPP



– Tải Wordpresss

Để ý hai trang wordpress.org và wordpress.com tuy của cùng một công ty, nhưng hai trang này có hai mục đích khác nhau.

Trang wordpress.com hỗ trợ việc tạo blog/website miễn phí trên nền tảng wordpress một cách đơn giản. Trong khi trang wordpress.org hỗ trợ việc tải nguồn wordpress về máy cục bộ để phát triển một ứng dụng web/website phức tạp hơn.

Vào trang https://wordpress.org/, bấm vào mục Get Wordpress để tải về máy

Giải nén Wordpress (ver 4.9.8), chép thư mục wordpress vào thư mục www của WAMP. Đổi tên thư mục wordpress thành tên dự án web đang làm (ví dụ: website1).

­– Cấu hình Wordpress

Mở trình duyệt nhập vào đường dẫn (URL) địa chỉ của website01 (ví dụ: http://localhost/website01) vừa tạo để thực hiện các cài đặt cho website.

Mở phpmyadmin để tạo cơ sở dữ liệu cho website: http://localhost/phpmyadmin, Username là root, mật khẩu để trắng. Tạo cơ sở dữ liệu mới (ví dụ website01).

Lấy thông tin của cơ sở dữ liệu vừa tạo để điền vào trang cấu hình Wordpress.

Cài tự động

Vào trang này để lấy gói cài đặt Wordpress tự động: https://instantwp.com/downloads/

13          Tạo Starter theme cho website


Starter theme là (khung) giao diện mẫu, lập trình viên sẽ sử dụng nó để tạo ra các giao diện (theme) mới.

Đọc thêm về Starter theme và Framework theme tại đây: https://thachpham.com/wordpress/themes-wordpress/starter-theme-vs-framework-theme.html

Một số trang giúp tạo Starter theme:


– Underscores: https://underscores.me/

Sử dụng Starter theme để chuyển giao diện đã thiết kế ở các bước trước thành một theme.

Sử dụng Underscores để tạo Starter theme. Giải nén tập tin Starter theme (ví dụ website01.zip) và chép vào thư mục: C:\wamp64\www\website01\wp-content\themes

Thư mục themes chứa các theme của website.

Ảnh xem trước theme có tên là screenshot.png.

14          Tạo phần header cho theme


Chép toàn bộ tập tin và thư mục của giai đoạn thiết kế, bỏ vào thư mục của website trong C:\wamp64\www\website01\wp-content\themes (ví dụ: website01).

Chép phần mã HTML của header từ tập tin thiết kế, bỏ vào phần header trong tập tin header.php.

Chép phần mã trong <head></head> của tập tin thiết kế, bỏ vào vùng <head></head> trong tập tin header.php.

Sử dụng hàm bloginfo('stylesheet_directory') để lấy đường dẫn tuyệt đối của website, sau đó kết hợp với đường dẫn tương đối khi thiết kế, để trình duyệt có thể tìm thấy các tài nguyên cần tham chiếu.

Ví dụ:

[PHP]

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/vendor/bootstrap3/css/bootstrap.min.css">

Kết quả, mã HTML khi gửi về trình duyệt sẽ là,

<link rel="stylesheet" href="http://localhost/website01/wp-content/themes/website01/vendor/bootstrap3/css/bootstrap.min.css">

15          Chuyển menu sang Wordpress


Trong trang giao diện admin của Wordpress, vào mục Apperance\Menus để chỉnh sửa menu cho trang web.

Sử dụng hàm wp_nav_menu() để chuyển menu từ trong phần admin của Wordpress ra giao diện header.php.

Cài Wordpress snippets cho Visual Studio Code tại đây: https://marketplace.visualstudio.com/items?itemName=tungvn.wordpress-snippet, bấm nút Install để cài đặt. Sau khi cài đặt xong, tắt VS Code và mở lại để sử dụng.

Ví dụ: hàm wp_nav_menu() sẽ sinh ra đoạn mã sau:

<div class="menu-main-container">
<ul id="menu-main" class="menu">
<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-7"><a href="http://localhost/website01/">Home</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8"><a href="http://localhost/website01/sample-page/">Sample Page</a></li>
</ul>
</div>

Thêm tham số cho hàm wp_nav_menu() để có được menu theo ý muốn. Ví dụ: sửa 2 cấp theo cấu trúc chung của một menu.

<?php wp_nav_menu(array(
                                                'container' => 'div',
                                                'container_class' =>'collapse navbar-collapse navbar-ex1-collapse',
                                                'menu_class' => 'nav navbar-nav navbar-right'
                                    )); ?>

Trong Wordpress, menu đang được active sẽ có tên lớp là current_page_item. Vì vậy, có thể đổi tên lớp “active” khi thiết kế CSS thành current_page_item để định dạng cho mục menu được active. Lưu ý: vì trình duyệt thường lưu cache CSS, nên cần xóa sạch nó (clear browser data) để xem kết quả vừa cập nhật.

[Giao diện tùy chỉnh các mục trong menu]



Để thêm mục mới trong menu, đánh dấu chọn vào mục Sample Page\ Add to Menu\ Sửa tên theo ý muốn.

16          Tạo trang hompage


Tạo trang homepage.php, lưu ở thư mục gốc của website. Với nội dung là:

<?php
/*
    Template Name: Trang chu
*/
?>

Vào trang wp-admin để thêm trang web mới cho website. Vào Pages\ Add New, đặt tên cho trang mới là homepage, trong mục template chọn trang homepage.php là tập tin chứa mã nguồn.

Thực hiện “điều hướng” (route) để khi người dùng nhập vào tên miền của trang web (ví dụ: http://localhost/website01/) thì mở trang chủ (hompage.php): vào trang admin của wordpress\Settings\Reading, trong mục Your homepage displays, chọn A static page, trong mục Homepage chọn homepage, bấm Save Changes.

Mở mã nguồn của trang homepage.php để gọi các thành phần của trang web này:

– Để có menu, gọi hàm get_header();

Ví dụ:

<?php
/*
    Template Name: Trang chu
*/
    get_header();
?>

Thực tế wordpress đã tạo sẵn một template cho trang home, đó là trang page.php (trong thư mục: C:\wamp64\www\website01\wp-content\themes\website01). Lấy template trong trang home.php để dán vào trang homepage.php.

[homepage.php]

<?php
/*
    Template Name: Trang chu
*/
    get_header();
?>
   
    <div id="primary" class="content-area">
        <main id="main" class="site-main">
        <?php
        while ( have_posts() ) :
            the_post();

            get_template_part( 'template-parts/content', 'page' );

            // If comments are open or we have at least one comment, load up the comment template.
            if ( comments_open() || get_comments_number() ) :
                comments_template();
            endif;

        endwhile; // End of the loop.
        ?>

        </main><!-- #main -->
    </div><!-- #primary -->
   
<?php

get_footer();
-----------
Cập nhật [10/10/2018]
-----------
Xem thêm: Tổng hợp các bài viết về Làm web
Xem thêm: Làm web (06) - Cách sử dụng phông chữ