PHP

Các khái niệm rối rắm của wordpress - Cách làm theme wordpress cơ bản

Bài này sẽ hướng dẫn tạo theme Wordpress mà không sử dụng gì. Gồm 5 phần với thứ tự như sau: Tạo theme tĩnh, Các khái niệm dễ gây nhầm lẫn trong Wordpress, Xây theme Wordpress động, Cài Wordpress trên localhost, Cài Wordpress trên Google Cloud.

Ngược vậy vì mình nghĩ là tạo theme thì bạn sẽ phải truy cập bài để xem đi xem lại nhiều lần, setup thì chỉ xem một lần, nên đảo thứ tự sẽ giúp sau này không phải mỗi lần vào đây cứ tua tua đến rã cổ tay. Bài viết rất dài, ai cần/không cần phần nào tự tua nhé, bằng Dấu trang ở bên phải.

Cám ơn anh Minh Trung Nguyễn đã cho mòe biết đến Google Cloud :cake:

alt text

Tạo theme Wordpress tĩnh

Ai chưa biết cài Wordpress thì tua xuống dưới cùng để xem đã rồi bơi ngược lên trên này tập làm theme nhé!

Mình sẽ làm trên localhost cho dễ chọc ngoáy đã, xong xuôi đẩy lên cloud sau.
Trước tiên thì bạn nên bình tĩnh vì sau khi cài Wordpress thì thư mục dự án có một mớ files and folders như thế này
alt text
... Thì không biết học đến bao giờ cho nó hết. Nhưng đừng lo! Vì hầu hết các file và folder này chúng ta không cần sờ vào. Thứ duy nhất ta sờ vào là thư mục themes ở htdocs\thư mục dự án\wp-content\themes

Cài và Sử dụng theme như thế nào

Trong môi trường localhost thì bạn cài theme quá các bước sau:

  • Tải theme .zip (được làm cho wordpress) từ đâu đó về
  • Giải nén để được một thư mục theme
  • Cóp thư mục đó vào c:\xampp\htdocs\tên dự án\wp-content\themes
  • Vào Dashboard > Appearance > Themes > Activate cái theme vừa nãy

Tạo thư mục chứa theme

Tạo theme bắt đầu bằng việc tạo 1 thư mục viết liền không cách, đặt ở trong c:\xampp\htdocs\tên dự án\wp-content\themes giả sử mình đặt thư mục tên moetheme alt text

Trong thư mục cần 2 file là index.php và style.css

Bản chất của việc ném HTML/CSS tĩnh vào Wordpress đó là đổi tên file html thành index.php (đổi tên vậy thôi còn ruột không cần động chạm), và file css thành style.css. Đây đồng thời cũng là 2 file bắt buộc của một theme Wordpress.

Nếu muốn theme được dư lày khi xem trong màn hình chọn theme thì alt text
Thì quăng các dòng sau vào đầu file style.css

 /* 
 Theme Name: Mòe Theme 
 Version: 2.2 
 Author: mòe 
 Description: Đây là một theme tĩnh được viết bởi mòe để test 
 Tags: cat,dog 
 */ 

Và quăng 1 tấm ảnh có tên screenshot.jpg hoặc screenshot.png vào thư mục theme (moetheme)
alt text

Trong file HTML link đến file CSS

Nếu như mọi khi thì muốn link đến CSS ta viết như sau

<link rel="stylesheet" type="text/css" href="/style.css"  />

Nhưng trong Wordpress thì phải link như sau

 <link href="<?php echo get_bloginfo('template_directory'); ?>/style.css" rel="stylesheet">

Link đến file js cũng tương tự đó là


Các khái niệm riêng của Wordpress dễ gây nhầm lẫn

Ai muốn làm theme động luôn và không muốn hiểu lý thuyết có thể bỏ qua phần này.

Ngay ở documentation cũng đã thấy quái: Có tận 2 hệ thống doc: developer.wordpress.org và codex.wordpress.org. Thôi đọc cả hai vậy. Trong các doc này có rất nhiều khái niệm mới mẻ, và chúng gây bối rối không ít. Phần này hi vọng sẽ làm rõ được những khái niệm đó.

Từ nay trở đi, những khái niệm then chốt thì Mòe sẽ dùng Tiếng Anh thay vì dịch sang Tiếng Việt, cho dù ban đầu có thể hơi khó nhưng sẽ có ích về sau:

  • từ vựng Tiếng Việt trong lĩnh vực này khá ít + không có sự phân biệt rõ ràng
  • nhớ được từ Tiếng Anh thì sau này dễ tra cứu trên mạng

Một danh sách khá dài, các bạn chú ý nhất đến những thằng quan trọng là Conditional tags, Template tags, Post Type.

Header và Footer

Ở ngoài đời thì thì header là dòng trên cùng của văn bản, chứa ngày tháng hay gì đó, Trang chủ - Tin tức - Giới thiệu - Liên hệ.... bla bla nhưng trong wp thì header còn phải chứa thêm những thứ tương đương với <head> trong file html như <meta>, <title, <link>, và thẻ mở <body>

Tương tự, ngoài đời thì footer chứa copyright, đánh số trang, thông tin phụ,.... nhưng trong wordpress thì là tổng hợp của những cái vừa nói và chêm thêm là nơi đóng thẻ </body> và </html> và chứa code javascript

ID

Không nói đến ID trong css, đây là mã số ID của từng bài viết, danh mục, trang tĩnh,... trong một project wordpress. Ngày xưa thì wordpress ghi ID này ra trong giao diện admin luôn, nhưng bây giờ thích giấu đi để nâng cao trí não cho người dùng nên chúng ta chỉ có thể biết ID bằng cách liếc vào URL của đương sự và tìm chỗ id= rồi tự suy ra.

ID này sử dụng khá nhiều nên các bạn chú ý cứ khi nào trong code mà có số má từ đâu ra thì đó có thể là ID.

Template

Đôi khi ở ngoài đời chúng ta dùng "theme" và "template" với ý nghĩa giống nhau. Nhưng trong Wordpress, thì chúng hoàn toàn khác nhau.

theme bao gồm nhiều template.

template là một bộ khung cho một trang lẻ. Còn theme là tổng cộng tất cả các template và file chức năng .

Bản thân template nó không có thông tin và nội dung gì cả ngoài layout. Sau này mới dùng code để nhét nội dung múc từ các bài viết vào.

Một số từ vựng

Ức quá, tiếng Việt quá ít từ vựng cho cái này. Cả website cả page cả post đều là "trang" cả.

  • Post: bài viết đơn dạng tin tức, sản phẩm,
  • Page/Static page: trang tĩnh đơn như giới thiệu, trang liên hệ, trang lỗi 404
  • Single: post và page gọi chung là single
  • Singular: singular to hơn single, vì singular ngoài postpage thì còn bao gồm cả một số thứ khác như attachment hay custom post type...
  • Archive: trang kết quả tìm kiếm, trang danh mục,...
  • admin: trang quản trị

Đặc biệt là Home/Main vs Front:

  • Home/Main page: Trang liệt kê ra tất cả các bài viết
  • Front page: Trang đầu tiên show ra cho khách khi họ truy cập vào địa chỉ chính của trang như kenh14.vn, voz.vn...

Trang Home và trang Front sẽ là một khi bạn chọn trang đầu tiên show ra chính là một nơi liệt kê tất cả các bài viết. Nhưng hầu như bây giờ ít ai muốn thế mà hay dùng một static page để làm.

Post Type

Có một điều rất quái đản là Post (bài đăng tin tức, sản phẩm) với Page (trang đơn như trang giới thiệu, trang liên hệ, trang 404) thì là Post Type thì đúng rồi, nhưng cái bọn Attachment (file đính kèm) hay Custom CSS (một nhúm code css) cũng là Post Type luôn, lol.

alt text

Có tổng cộng 5 loại Post Type mặc định sau đây, quan trọng nhất là post và page.


    Post (Post Type: ‘post’)
    Page (Post Type: ‘page’)
    Attachment (Post Type: ‘attachment’)
    Revision (Post Type: ‘revision’)
    Navigation menu (Post Type: ‘nav_menu_item’)

Có một thứ Post Type tự chế sau đây, nó cũng rất quan trọng

Custom Post Type

Có 3 loại Post Type mà ngày xưa là mặc định nhưng hình như bị cho ra rìa rồi hay sao ấy, mà trong Wordpress Codex thì có mà Wordpress Developer thì không, thôi ghi luôn đây để nhỡ gặp:

    Custom CSS (Post Type: 'custom_css')
    Changesets (Post Type: 'customize_changeset')
    User Data Request (Post Type: 'user_request' )

Custom template

Là template do bạn tự nghĩ ra ví dụ cacloaimeo.php, thay vì các default template có tên đã được wordpress đặt gạch như single.php, archive.php... hoặc cấu trúc tên được đặt gạch như page-abcxyz.php, page-3.php...

Template Hierarchy

thứ tự ưu tiên của wordpress để wordpress quyết định xem xài thằng nào để generate ra HTML. Nói một cách chung chung thì càng lẻ càng chi tiết thì càng được ưu tiên . Vậy nên mới có chuyện là nhiều template files chưa hề tồn tại trong thư mục theme, nhưng lại có đặt cục gạch trước rồi. lmao. Ví dụ bạn chưa hề có category.php nhưng chỉ cần bạn tạo một phát thì Wordpress tự lấy dùng, biết dùng vào đâu, không cần nhiều lời. Có được điều này là do Nguyên tắc Template Hierarchy.

Một số template đã được đặt gạch:

alt text

và một số template khác nữa, xem tất cả ở đây https://developer.wordpress.org/themes/basics/template-files/#common-wordpress-template-files

Template hierarchy có thể gói gọn bằng sơ đồ sau:

alt text

Đây là mình cóp từ trong Wordpress Developer document, nhìn hơi vĩ đại nhưng cách dùng cũng không đến nỗi phức tạp như vẻ bề ngoài của nó. Càng ở bên trái thì càng ưu tiên, càng về bên phải thì càng ít ưu tiên. Bạn cứ theo mũi tên mà chạy... Ví dụ bạn đang muốn biết Trang Giới thiệu loài Mèo Rừng sẽ xài template nào để generate ra html, Đầu tiên phải xác định Trang Giới thiệu loài Mèo Rừng là Singular Page > Static Page > tìm đến Page Template > trong page template có hai loại là custom template và default template > vì chỗ custom template nằm bên trái nghĩa là nó được ưu tiên hơn > nếu có tồn tại custom template gioithieumeo.php thì xài > không thì phải dùng default template dạng page-meorung.php hoặc page-3.php > không có nốt thì xài template chung cho tất cả static page là page.php > không có luôn thì xài singular.php

Conditional tag

Là thẻ điều kiện để xem tình hình ra sao rồi mới thực thi mệnh lệnh. Conditional tag sau đây là phổ biến nhất, mục đích để xem trang hiện tại là trang nào, có thỏa mãn nọ kia hay không: (chắc không cần giải thích ý nghĩa từng thẻ, ai đọc cú pháp cũng hiểu)

is_archive() 
is_search() 
is_404() 
is_singular() 
is_page() 

Toàn bộ conditional tag xem ở đây https://codex.wordpress.org/Conditional_Tags

Template tag

Là các thẻ mệnh lệnh, có tính năng ra lệnh cho Wordpress lấy hoặc làm gì đó

Cấu trúc của template tag:

Gồm có 3 phần là

  • thẻ php
  • wordpress function
  • thông số (parameter)

Thẻ php
Mở: <?php
Đóng:?>

Wordpress Function
Wordpress function chính là php function để thực hiện một hành động hoặc hiển thị một thông tin của web. Wordpress function gồm chữ và dấu gạch dưới, không có dấu cách, ở cuối là cặp ngoặc đơn và kết thúc bằng dấu chấm phẩy.

<?php the_ID(); ?>

Tất cả wordpress function được liệt ở đây https://codex.wordpress.org/Function_Reference

Thông số
Khi nào cần thì bỏ thông số vào trong ngoặc đơn

<?php bloginfo('name'); ?>

Danh sách tất cả Template tag đây: https://codex.wordpress.org/Template_Tags

Wordpress Function

Là ruột cấu thành nên chính template tag. Có thể gọi wordpress function và template tags là 1 cũng được.

Mình thấy 2 danh sách Template Tag và Wordpress Function ở trên không khác nhau là mấy, chỉ tổ đặt ra lắm khái niệm làm bối rối đau lòng người nông dân.

The Loop

vòng lặp để lôi các post ra. Đây là công dụng cốt lỗi của wordpress

Query

Query là hành vi lục lọi để lôi ra một hoặc nhiều bài viết

Query-based template

Là các trang danh mục, trang kết quả search, trang tag....

Wordpress Variables

Gồm:

  • Inside the Loop Variables: $page, $post, $currentday là các biến chỉ post đang xét, page đang xét... để thao tác trong vòng lặp
  • Browser Detection Booleans: xem là trình duyệt gì $is_iphone, $is_chrome...
  • Web Server Detection Booleans: xem là server gì
  • Version Variables: xem version của wordpress, database, php, mysql...
  • và các loại variable khác

Global Custom Field

Đây là tên gọi khác của variable tự chế trong website của bạn. Ví dụ như link trang Facebook chẳng hạn, thỉnh thoảng chỗ này chỗ kia cần link trang FB thì không thể cứ mỗi lần cần thì gõ đi gõ lại. Nếu sau này đổi face thì lại đi sửa từng cái một à... Nến ta cho vào một variable.

Các Global Custom Field này không có sẵn mà phải tạo nhưng mà nhanh thôi. Tạo xong thì người dùng có thể dùng giao diện dashboard để nhập giá trị.

(không Global) Custom Field

Thật ra cái Custom Field chả liên quan gì đến Global Custom FIeld ở trên kia cả.

Custom Field là các trường mà người dùng tự chế để thêm vào các post. Mặc định thì mỗi post chỉ có vài trường như title, feature image, content, category, tag... không đủ thỏa mãn yêu cầu.

Ví dụ như mình muốn đăng bài về sản phẩm đĩa DVD phim thì muốn tạo các Custom Field sau:

  • năm sản xuất
  • diễn viên chính
  • đạo diễn
  • điểm IMDB
  • thể loại phim

Meta Box

Là mấy cái khung option trong màn hình Dashboard như này:
alt text

administration screens

màn hinh trang admin
alt text

administration menu

Menu ở sidebar dọc trong administration screen
alt text

permalink

Toàn bộ cái URL. Mình cũng không thấy khác nhau gì mà Wordpress cứ thích dùng chữ permalink chứ ít khi gọi là URL

slug

Dễ bị nhầm với permalink/url nhưng thực ra slug là một phần của permalink, đó là đoạn text được bỏ dấu và tối giản hóa từ title gốc sao cho đẹp đẽ gọn gàng.

Ví dụ Mòe có một bài post tên là "Các cách rán bánh" thì sau khi đăng bài, nó sẽ có url là moe.com/cac-cach-ran-banh chẳng hạn. Slug ở đây là đoạn cac-cach-ran-banh.

Lưu ý là những permalink mà sử dụng ID của bài viết, ví dụ domain.com/?p=id của post thì không có slug nhé.

category

Là danh mục của post. Có phân cấp bậc mẹ con.

tag

Giống category nhưng không phân cấp mẹ con. Tag dùng để mô tả kĩ hơn về nội dung của post. Cả tag cả category cộng lại không được quá 15 vì sẽ bị coi như spam. Đây là theo lý thuyết, còn trên thực tế Mòe đoán là nên ít hơn thế nữa.

taxonomy

Bao gồm cả Category và Tag (và một số thứ nữa chúng ta sẽ đề cập sau)

term

Chính là Taxonomy

Hook: Filter Hook + Action Hook

Hook có thể tạm hiểu là những lệnh can thiệp sâu vào chức năng bên trong của Wordpress. Có 2 loại hook là Filter Hook và Action Hook.

Tất cả Filter Hook ở đây https://codex.wordpress.org/Plugin_API/Filter_Reference
Tất cả Action Hook ở đây https://codex.wordpress.org/Plugin_API/Action_Reference

Đôi điều về php

php có thể chung sống với html, nghĩa là cả code php và code html nằm trong một file, nhưng code php luôn phải nằm trong cặp thẻ <?php?>

Làm theme dynamic động

Nếu như theme tĩnh chỉ cần 1 trang do đó chỉ cần có 1 nguồn html và 1 nguồn css là ta xong. thì theme động cần phải update được và thường có nhiều trang. Việc sẽ trở nên phức tạp hơn rất nhiều. Bây giờ mòe sẽ làm một theme động gồm các trang sau:

  • Trang chủ
  • Trang list tin tức
  • Trang tin đơn
  • Trang Giới thiệu

Chúng ta hãy cùng phân tích, một nguyên tắc nói chung trong lập trình, kể cả functional hay việc làm template: đó là KHÔNG LẶP ĐI LẶP LẠI (Dont Repeat Yourself - hay viết tắt là DRY code). Nếu có cái gì lặp đi lặp lại thì phải gói nó lại thành 1 function hoặc 1 template hoặc 1 cái gì đó miễn là quăng quật đi khắp nơi được. Lưu nó ở 1 chỗ thôi, khi nào cần dùng thì gọi ra.

Khi làm các templates, ví dụ cái đoạn chân trang xuất hiện ở mọi nơi, trang chủ cũng có mà trang tin tức trang bài viết trang sản phẩm.... cũng thấy. Đột nhiên một ngày bạn thay đổi nó,...vậy là phải rà soát tất cả các nơi đã từng chứa đoạn chân trang đó để sửa... Oh hell.

Vì vậy các nguồn vừa nói ở trên sẽ biến thành:

  • 1 header ---> header.php
  • 1 footer ---> footer.php
  • 1 main ở trang chủ (ko bao gồm head và foot) ----> index.php
  • 1 trang list tin tức ---> archive.php
  • 1 main trang tin đơn dùng chung cho trang Giới thiệu luôn (ko bao gồm head foot) ----> singular.php.

Chú ý: Nếu bạn không tạo singular.pho mà tạo single.php thì chỉ áp dụng được cho Tin đơn thôi chứ không cho Page được. Lúc này khi không tìm thấy template cho Page, wodpress sẽ xài luôn cái index.php để generate ra Page. Xem lại ở Template Hierarchy

Các bạn có thể thắc mắc tại sao lại đặt tên như vậy, vui lòng xem lại về Template Hierarchy. Đó là những cái tên này được đặt gạch trước rồi.

Cộng thêm 1 file style.css , script.js , functions.php thì tổng cộng ta phải tạo 8 files.

Trước khi vào làm mấy cái file thì bạn hãy viết vài bài tin tức, đặt trong category Tin tức, và 1 page Giới thiệu, để tí nữa dễ làm việc.
alt text

alt text

functions.php

Trước tiên ta tạo file functions.php cơ bản. Nội dung file sẽ như sau

<?php

add_theme_support( 'title-tag' );

add_theme_support( 'post-thumbnails' );

wp_enqueue_style( 'style', get_stylesheet_uri() );

wp_enqueue_script( 'script', get_template_directory_uri() . '/script.js', array(), '1.0.0', true );

?>

Sau đây là giải thích từng đoạn trong file

Làm tên và description động

add_theme_support( 'title-tag' );

Wordpress tự sinh ra tên và description động cho chúng ta, nhưng nếu ta không nói thì nó không tự giác mà làm nên phải ghi cái này ở trong functions.php

Bật tính năng cho tải ảnh thumbnail

add_theme_support( 'post-thumbnails' );

Mình không hiểu sao không auto cái món này đi mà cứ để dev phải ra lệnh nhỉ.

link file css

wp_enqueue_style( 'style', get_stylesheet_uri() );

Lưu ý style ở đây là ám chỉ style.css. Chúng ta có thể dùng lệnh này để link các file css với các tên khác.

Bạn sẽ thắc mắc sao lúc nãy hướng dẫn tạo theme tĩnh thì link file css vào <head> mà giờ lại link trong functions.php. Làm thế để làm gì?

Mình đọc trên mạng thì thấy bảo là phải link file css và javascript ở trong functions.php vì:

  • Dễ quản lý tránh trùng lặp, cùng 1 file mà link nhiều lần ở nhiều chỗ khác nhau, gây chậm khi load hoặc xung đột version.
  • Thư viện này phụ thuộc thư viện kia thì có thể sử dụng các hàm enqueue để điều phối sao cho load cái thư viện kia trước mới load thư viện này.

Ai rõ về cái này chỉ thêm nha :heart:

link file javascript

wp_enqueue_script( 'script', get_template_directory_uri() . '/script.js', array(), '1.0.0', true );

Cái script.js là ám chỉ file mình đặt tên là script.js, bạn đặt tên khác cũng được.

header.php

alt text

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="profile" href="http://gmpg.org/xfn/11" />
        <?php wp_head(); ?>
    </head>

    <body>

        <header>
        <h1><a href="<?php echo home_url(); ?>">Tên website</a></h1>
        <ul>
            <li><a href="<?php echo home_url(); ?>">Trang chủ</a></li>
            <li><a href="<?php echo home_url(); ?>/index.php?cat=2">Tin tức</a></li>
            <li><a href="<?php echo home_url(); ?>/index.php?page_id=22">Giới thiệu</a></li>

        </ul>
        </header>

Cái đoạn <head> mình thuổng trong theme mẫu twentyseventeen. Nhắc lại là header trong wordpress không chỉ bao gồm thanh điều hướng, tên trang, đầu trang... mà còn chứa thẻ head và thẻ mở body.

link đến homepage

<a href="<?php echo home_url(); ?>">

Đoạn tên website và Trang chủ bạn có thể thấy là cùng một đường link. Có nhiều cách để link tới Trang chủ là sử dụng cái bloginfo(‘url’) hoặc bloginfo(wpurl) nhưng tốt nhất là dùng như mình home_url() bởi vì home_url nó tự động chuyển sang https còn 2 cái kia thì không. Mình cũng không thạo lắm về khoản này, mới tìm trên mạng thì thấy người ta nói vậy thôi... nên ai biết rõ thì giải thích giùm nha. :heart:

link đến category

<a href="<?php echo home_url(); ?>/index.php?cat=2">

Thay số 2 trong code trên thành ID của category mà bạn muốn. Cách tìm ID đó là vào Dashboard > tìm đến màn hình Categories, rồi rờ rẫm trỏ vào Edit của category nào đó, sẽ hiện ra link ở dưới đáy màn hình, trong link có số má thì đó chính là ID.

alt text

alt text

alt text

alt text

thay vì chèn ID như trên còn có thể chèn slug như/tin-tuc, mình làm theo ID vì mình nghĩ slug có khi còn thay đổi chứ ID thì không. Hơn nữa lúc nhấn vào link thì link hiện trên thanh địa chỉ tự động chuyển thành link slug.

Ngoài ra mình lục lọi trong document của wordpress tìm được cái get_category_link với get_term_link mà dùng mãi không được, cao nhân nào biết xin chỉ giáo. :heart:

link đến page

<a href="<?php echo home_url(); ?>/index.php?page_id=22">

Tương tự link đến category.

footer.php

alt text
Nhắc lại là footer trong wordpress không chỉ gồm chân trang, copyright... mà còn chứa thẻ đóng body

<?php wp_footer(); ?>
<footer>
  <p>&copy; 3019 by mòe</p>
</footer>
</body>
</html>

index.php

alt text
Để cho đơn giản thì trang chủ chỉ cần gồm head, foot và lời chào mừng như này

<?php get_header(); ?>

<h2>Trào mừng đến với trang chủ.</h2>

<?php get_footer(); ?>

archive.php

archive.php sẽ là template để trình bày trang Tin Tức
alt text

<?php get_header(); ?>
<h2>TIN TỨC</h2>
<?php 
if ( have_posts() ) : 
while ( have_posts() ) : 
the_post(); 
?>

    <article>
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <time><?php the_time('F jS, Y'); ?> </time>
        <p><?php the_excerpt(); ?></p>
        <p>Danh mục:<?php the_category( ', ' ); ?></p>
    </article>

 <?php 
 endwhile; 
 endif;
 ?>

<?php get_footer(); ?>

Liệt kê các tin bài ra bằng loop

Trong khi tìm kiếm mò mẫm cái loop, mình tìm thấy đoạn code này

<?php
if (have_posts()) :
   while (have_posts()) :
      the_post();

        CHỖ NÀY CHỈ CHỨA ĐƯỢC HÀM PHP NHƯ the_title, the_excerpt... 
        mà như vậy thì lại không bọc <h2> với các thứ được

   endwhile;
endif;
?>

nhưng sinh ra một thắc mắc, đó là làm sao để trong cái loop này có thể chèn html vô được. Thì ra là chỉ việc đóng sớm cái nửa trên, đến nửa dưới thì lại mở rồi đóng, hic ngốc thiệt.
alt text

Lấy link bài

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

Lấy tên bài

<?php the_title(); ?>

Lấy ngày đăng

<?php the_time('F jS, Y'); ?>

Có cái ngáo là hàm get_date để lấy ngày tháng của bài viết, nếu có vài bài bị trùng ngày thì nó chỉ hiện 1 lần ngày tháng cho bài trên cùng (Chả hiểu vậy thì được cái gì). Vì vậy mình dùng the_time để bao nhiêu bài hiện bấy nhiêu lần.

Lấy đoạn trích

<?php the_excerpt(); ?>

Lấy tên danh mục (kèm link)

<?php the_category( ', ' ); ?>

singular.php

alt text

<?php get_header(); ?>

    <article> 
        <h2><?php the_title(); ?></h2>
        <time><?php the_time('F jS, Y'); ?> </time>
        <p>
            <?php 
                    the_post();
                    the_content();
            ?>
        </p>
        <p>Danh mục:<?php the_category( ', ' ); ?></p>
    </article>

<?php get_footer(); ?>

Sao không dùng chung ruột với archive.php

Thấy là singular.php với archive.phpcó cái đoạn <article>... giống nhau thế thì sao không bóc tách ruột của chúng ra rồi ép thành một template để tái chế, dùng đi dùng lại. Bởi vì nó khá là khác:

  • tiêu đề ở singular không cần link vì đang mở chính tin ra rồi còn link đến chính nó làm gì nữa
  • chỗ ruột tin tức của singular là full còn của archive là một mẩu tóm tắt thôi
  • trang trí của hai trang khác nhau nên cùng là một thành phần đấy (tiêu đề, ngày tháng, nội dung...) lại cần gắn class khác nhau để còn css. (Nhưng mà để đơn giản hóa bài này vốn đã lằng nhằng, mình không gắn class nào cả)

the_post là bắt buộc

Bạn thắc mắc là ùng đẳng cấp với the_contentthe_excerpt lại có thể đứng một mình <p><?php the_excerpt(); ?></p> trong archive.php. Còn cái the_content thì không mà phải có thằng the_post ở trước nó. Vì mình bỏ the_post đi thì the_content coi như bơ vơ không nơi nương tựa và nội dung bài viết hoàn toàn không hiện ra được.

Còn thật ra không phải the_excerpt đứng một mình đâu, vì trên nó đã có the_post ở tít bên trên kìa:
alt text

style.css và script.js

alt text
Mấy file này cứ làm như bình thường thôi. Có điều không biết do wordpress hay do XAMPP hay do trình duyệt lưu cache... mà những thay đổi css phải mở Cửa sổ ẩn danh mới thấy. Bạn nào thấy sửa hoài không được thì khoan hãy chỉnh tùm lum trong functions.php mà thử mở tab ẩn danh xem đã nhé!

alt text

Hic vậy là xong sơ bộ cách làm theme Wordpress động rùi.

Cài Wordpress trên localhost

Để tạo môi trường nhái host, mình sẽ download phần mềm XAMPP ở đây về rồi cài XAMPP, quy trình cài không có gì xoắn, cứ thế Next thui. Cài xong bật lên thì bật ba cái Start trên cùng alt text Vô trình duyệt gõ http://localhost/phpmyadmin , nhảy vô tab Cơ sở dữ liệu alt text Điền tên cơ sở dữ liệu vào ô rồi nhấn Tạo alt text alt text Lục đục chạy vô ổ cài XAMPP, mò đến thư mục Xampp \ htdocs alt text Tạo 1 thư mục rỗng mới, thôi đặt cùng tên với cái cơ sở dữ liệu lúc nãy cho nhanh alt text Down bộ cài Wordpress CMS ở đây, quăng cái tệp zip vô thư mục rỗng ban nãy (landaucai) alt text Quăng vô rồi mới giải nén thì nhanh hơn là giải nén ở đâu đó rồi cóp vô vì nhiều file lắt nhắt làm tốc độ cóp giảm rõ rệt alt text Giải nén xong thì lôi hết ruột của thư mục wordpress ra, rồi xóa cái thư mục wordpress và file zip lúc nãy đi alt text Sao cho cấu trúc thư mục như này là được alt text Vô trình duyệt gõ localhost/landaucai alt text Enter thì nó tự nhảy ra cái link này và giao diện cài alt text Tốt nhất cứ để giao diện tiếng Anh đi cho đỡ lạc quẻ về sau. Cứ "Next" theo quán tính và đến đây: Điền tên cơ sở dữ liệu vô database name và quan trọng là username phải là root và mật khẩu phải bỏ trống alt text alt text

Cài wordpress trên Google Cloud

Đăng ký tài khoản Google Cloud

Cái này nó miễn phí năm đầu. Nhưng lúc đăng ký bắt nộp 1$ để xác minh, xác minh xong thì nó trả lại 1$. Nên bạn cần có thẻ Visa/Mastercard có ít nhất 1$ thì mới đăng ký được. Nếu bí quá không kiếm đâu ra thẻ thì có thể liên hệ với mấy người bán account cloud, hôm nọ vừa thấy anh Quốc Nguyễn rao bán. Bạn nào cần thử liên hệ anh ấy xem?

Cách đăng ký là vào cloud.google.com rồi chọn Try Free alt text Nó bắt Đăng nhập xong thì hiện ra màn hình này, hỏi gì cứ đồng ý hết rồi next alt text

Bước tiếp theo sau khi điền đầy đủ thông tin và mã số thẻ Visa thì bạn sẽ đăng ký thành công và tới màn hình Dashboard

Cài wordpress trên tài khoản Google Cloud

Sau khi đăng ký xong, trong màn hình Dashboard nhấn vào chỗ My First Project (là cái project mặc định khởi tạo ban đầu của Google cloud) alt text Trong hộp thoại hiện ra thì nhấn New Project alt text Nhập tên rổi Create alt text Nhấn vô biểu tượng Menu để mở ra, nhấn tiếp vào Marketplace alt text Lúc này sẽ hiện ra 1 đống, kéo kéo tìm tìm Wordpress mà có chữ Bitnami, rồi nhấn Launch on Compute Engine, rồi điền tên... rồi hỏi gì thì Accept hết. Deploy hoàn tất thì nó cho ta cái url và cái địa chỉ vào admin kèm theo username và password. Vậy là công cuộc đã hoàn thànhalt text

Xong rồi, chúc các bợn một năm mới An Khang Thịnh Vượng! :rose:

Registration Login
Sign in with social account
or
Lost your Password?
Registration Login
Sign in with social account
or
A password will be send on your post
Registration Login
Registration