Tháng: Tháng Mười Hai 2023

WordPress Core là một con người, theme chính là bộ cánh của nó. Ngày nay, từ bộ cánh có vẻ ít được biết đến và nó cũng khó đảm bảo ý nghĩa làm sao, đành dùng outfit vậy. Ngày nay có những chợ bán theme rất phong phú, người làm web nghiệp dư lẫn chuyên nghiệp tiết kiệm kha khá thời gian để làm nên một website đẹp mỹ miều trong thời gian ngắn bằng cach đi chợ mua một bộ.

Để hiểu theme là gì, trăm nghe không bằng một thấy

Tui mở ngay WordPress của tui lên, đăng nhập vào Admin Dashboard, vào menu

Sao tui thấy theme hổng giống gì với hình giới thiệu?

Đây là chuyện hoàn toàn bình thường. Tui biết có một số bạn đến với WordPress vài tuần, hoặc chỉ vài ngày thôi, thường hay phàn nàn rằng cài một theme miễn phí thấy hình ở chỗ giới thiệu rất đẹp, nhưng sau khi cài xong, nhìn thấy xấu, thô sơ quá. Có người còn cho rằng họ vừa ăn một quả lừa. Họ tìm một theme khác, và cũng thử cài, lại ăn quả lừa thứ hai, thứ ba… Đến đây, nếu bạn là họ, họ là bạn, bắt đầu hiểu ra chuyện gì rồi chứ?

Làm cho theme được cài đặt giống với hình minh hoạ

Bài viết hướng dẫn nhanh, thực chiến việc cài đặt Plugin (trình cắm) cho WordPress CMS của bạn. Chỉ cần làm theo các bước bạn đã thực hiện xong việc cài đặt hết sức nhẹ nhàng, chuẩn chỉnh.

Plugin là gì? Vì sao phải cài đặt plugin cho WordPress?

Hãy cứ gọi là Plugin luôn, vì chữ “trình cắm” nghe tối nghĩa gì đâu. Để tui nói với ngôn ngữ đời thường cho bạn dễ hiểu, khi bạn diện đồ lên người, những thứ riêng lẻ trong các món sau đây: quần, áo, giày/ dép, tui xách, nữ trang,… bạn gọi là gì nhỉ? À, phụ kiện thời trang, đúng hông? Toàn bộ tập hợp cái đó thanh diện bộ để bạn ra đường, bạn gọi là gì? À há, outfit? Vậy, tui làm một bảng so sánh như sau, bạn nhìn vô, hiểu ngay & luôn mà khỏi cần giải thích.

WordPress ban đầu được tạo ra bởi những ngươi mê viết blog, những tay blogger. Dần qua thời gian, vì tính chất dễ sử dụng, ít tốn kém để thuê hosting đặt lên, cộng đồng người dùng đông đảo…. và may mắn nào đó mà WordPress trở thành hệ quản trị nội dung (CMS) thông dụng hàng đầu thế giới.

Giờ đây, khi nói đến WordPress, người ta nói đến một hệ sinh thái rất đông người dùng, nhà phát triển, đến mức trong 10 triệu trang web có lượt truy cập nhiều nhất thế giới, có đến 30% số trang web được làm trên nền WordPress.

Chưa cần làm bạn rối trí, tui chỉ nói rằng với WordPress, bạn cần biết đến hai khái niệm liên quan: plugin và theme. Dông dài thêm chút, để bạn kịp phân biệt:

Plugin liên quan đến chức năng, tác dụng. Nói cách khác, plugin giống như mấy thứ phụ kiện thời trang, đồ chơi xe hơi vậy. Hoặc gần gũi hơn, bạn có ly nước, nắp đậy ly, ống hút, đế lót ly được xem là plugin.

Theme thì sao? Theme là giao diện, diện mạo của WordPress. Quay trở về ví dụ cái ly: đó có thể là kiểu dáng thiết kế cái ly, ví dụ như miêng vuông, eo thon chính giữa, trên ly có hình nhân vật hoạt hình Walt Disney chẳng hạn.

WordPress Core + Plugin + Theme = Website giống như Quần áo + Phụ kiện + Trang sức = Outfit

Chú ý: trong thực tế những cái gọi là Theme (dùng cho WordPress thôi nha, không đi rộng ra các CMS khác) mà bạn mua, nó là một bộ, tức là ngoài thiết kế giao diện, nó còn tự ý hoặc gợi ý kèm theo các plugin để đầy đủ, hoạt động được. Thậm chí nó có thể là một phần mềm đa chức năng, được vận hành trên nền WordPress Core.

Plugin thiên về chức năng, hoạt động, theme thiên về màu sắc, kiểu dáng. Hai cái này thường xuyên phối hợp với nhau để tạo thành một “ứng dụng”, giúp cho WordPress như “hổ mọc thêm cánh”.

Xem thêm bài về Theme là gì? Tui làm gì với một bộ theme?

Thực hành cài đặt plugin như một ca sĩ nhạc Rock

Có 2 cách cài đặt plugin cho WordPress. Cả hai cách đều có cùng đích đến: kết quả cuối cùng là một plugin được cài đặt thành công. Trong thực tế, có những plugin khi cài sẽ tự cài hoặc yêu cầu cài bổ sung một số plugin khác kèm theo mới có thể hoạt động đúng chức năng.

Cách 1: tải plugin qua kho plugin ở trang web wordpress.org

Cách này thường áp dụng cho những plugin được phát hành dưới dạng open source theo giấy phép GPL, người dùng không phải trả phí cho các plugin có tại địa chỉ:

https://wordpress.org/plugins/

Truy cập trang kể trên, nhập từ khóa để tìm plugin, xem các thông tin về plugin một cách kỹ lưỡng để đánh giá về plugin có phù hợp, được người khác nhận xét thế nào, rồi ghi nhớ lại tên plugin, tác giả của nó để dùng chức năng cài plugin của WordPress Core.

Không cần phải download từ trang kể trên, mà thực hiện ngay ở WordPress Admin Dashboard, click Plugins -> Add New Plugin mở ra một cửa sổ:

Đơn giản không nào? Với tốc độ “thầy bói mù sờ voi” tui đã cài xong một plugin có tác dụng cấm mọi comment trên web vì tui ghét bọn spammer xả rác quá mà chưa tìm ra phương thức hữu hiệu để hạn chế. Áp dụng chính sách của các quan chức theo kiểu “không quản được thì cấm” nên tui đã cài plugin như bạn vừa thấy.

Các plugin khác bạn cũng thực hiện với các bước (1) đến (4) tương tự mà thôi. Nghe có vẻ là tới 4 bước, thức sự chỉ là vài cú click chuột, vài cú gõ phím và chờ đợi. Nếu là một plugin đặc biệt hoặc phải cần plugin xịn, bạn mất thêm chút thời gian đọc mô tả, xem đánh giá để hiểu thêm về plugin, so sánh những plugin cùng chức năng để mà chọn cái phù hợp nhất.

Ngay khi cài đặt hoàn tất, ngay nút Install Now sẽ đổi thành Activate, cần dùng plugin ngay, bạn click nút này để kích hoạt. Màn hình có thể đưa ngay bạn đến khu vực để thiết lập thông số, hầu hết các plugin thông dụng/ thông thường đều vậy.

Nếu nhỡ bỏ qua bước thiết lập thông số, bạn vẫn còn có cơ hội khi bên dưới menu Plugins có mục con Installed Plugins giúp liệt kê danh sách menu, và ngay dưới plugin bạn vừa cài có mục Settings:

Cách 1 không áp dụng được với các plugin dạng phải mua, trả tiền, được một số lập trình viên, nhóm, công ty tạo ra để bán. Lý do: WordPress Core không trang bị chức năng để kết nối trực tiếp đến các kho bên ngoài (có lẽ là để hạn chế người ta lợi dụng chèn mã độc, gây mất an toàn cho người dùng).

Cách 2: cài plugin bằng file nén ZIP chứa các file của plugin

Cách này có thể dùng cài được plugin tải về từ kho của WordPress.org như cách 1 và dùng chính là để cài đặt plugin theo dạng đóng gói được mua từ các nhà chuyên phát triển plugin cho WordPress.

Lúc này, bạn phải chắc rằng đã có file ZIP chứa plugin, đã đọc sơ qua tài liệu của bên bán plugin hướng dẫn cách cài đặt, sau đó click menu Plugins -> Add New Plugin -> hiện ra:

Ngay khi click nút Upload Plugin, một màn hình hiện ra trong nháy mắt:

Ở ví dụ này, tui cài đặt một plugin có tên Performance Lab, tui sẽ tìm đến lile mang tên performance-lab.2.7.0.zip , lúc này nút Install Now ở hình trên sẽ đổi màu, tui click nó ngay. Tùy kích thước của plugin mà bạn đợi bao lâu, với ví dụ đang, chỉ có 7 giây đã có thông báo:

Không do dự, click ngay nút Activate Plugin để bật (kích hoạt) plugin cho nó được hoạt động.

Những lưu ý về cài đặt plugin

Khi cài đặt plugin xong nhưng chưa Activate thì plugin nằm đó nhưng chưa có tác dụng gì. Trong danh sách plugin có các mục để bạn có thể quan sát để kiểm tra, bật/ tắt plugin khi cần thiết, những cái bộ lọc này trông như sau:

Có một số plugin để cài hoàn chỉnh bạn phải thực hiện đúng các bước theo tài liệu hướng dẫn. Tại sao lại như vậy? Tại vì có những thứ bản thân plugin không thôi không thể làm giúp bạn mọi thứ được, bạn cần phải làm một số thứ trước/ trong/ sau khi cài plugin.

Ví dụ luôn để bạn rõ: giả sử bạn cần cài đặt một plugin kết nối tới Gmail để gửi email, lúc này, bạn phải có địa chỉ email Gmail, bật xác thực 2 bước trong tài khoản Google của bạn, đạt mật khẩu ứng dụng rồi mới cung cấp các thông số này vào mục thiết lập thông số/ cấu hình plugin . Một số plugin còn có chức năng kiểm tra lại, khi thấy tick màu xanh lá cây và/ hoặc hàng loạt OK mới đạt. Đến lúc ấy, việc cài đặt mới được xem là hoàn tất.

Việc đưa dữ liệu vào một phần mềm là việc rất thường xảy ra khi làm việc với máy tính. Nếu việc đó thực hiện bằng cách tạo mới thông qua thiết bị đầu vào input, người ta gọi chung là nhập liệu, nhập dữ liệu, hoặc tạo mới dữ liệu. Trong khi đó, một khi dữ liệu đã có sẵn ở dạng file hoặc cơ sở dữ liệu, khi đưa vào một phần mềm khác người ta gọi là import.

Bài viết này hướng dẫn cách bạn nhập dữ liệu có sẵn vào WordPress, sử dụng công cụ được WordPress trang bị sẵn. Đây chỉ là bài cơ bản, làm quen với việc import khá thô sơ, đơn giản. Mục đích chính để có cái nhìn import là gì, công cụ có sẵn tiện dùng, nhanh. Trong thực tế, có những lúc import khá phức tạp, mất nhiều thời gian hơn. Khi nắm căn bản, mọi thứ sẽ dễ dàng hơn rất nhiều.

Chuẩn bị đồ nghề: cài đặt WordPress Importer

Ban đầu tui cũng cảm thấy ngơ ngác khi tính năng này được giới thiệu là của WordPress Core (tức là đi kèm sẵn với WordPress) nhưng lại không có sẵn dùng ngay mà phải mất khoảng chục giây để cài đặt. Khi khám phá WordPress sâu hơn, tui hiểu rằng những người phát triển WordPress có lý của họ: không ôm đồm mọi thứ vào khiến WordPress Core trở nên nặng nề, rối rắm mà để người dùng linh động cài đặt thêm khi cần dùng.

Việc cài đặt một Plugin cho WordPress không có gì khó với những plugin bình thường, cứ theo đúng bài mà làm thôi. Tui mách nước cho bạn: WordPress Importer nằm ở địa chỉ web:

https://vi.wordpress.org/plugins/wordpress-importer/

Bạn đã biết các cách cài plugin rồi, trong tình huống này bạn áp dụng cách nào là tuỳ bạn. Tui chỉ bổ sung thêm làm bạn rối trí chơi: cái WordPress Importer này do đội ngũ phát triển WordPress Core làm nên, nó cũng có cách cài đặt đặc biệt hơn (gà nhà mà, phải ưu tiên chứ 😳 ), bạn cũng cần biết qua, như hình sau:

Đến đây, xem như bạn đã có sẵn đồ nghề WordPress Importer, sẵn sàng cho bước tiếp theo.

Tải về dữ liệu mẫu (có tồn tại ở đâu đó?) để thực hành

Ngay khi cài đặt xong WordPress Importer, đang ở trình duyệt, bạn mở một tab mới, truy cập vào địa chỉ sau:

https://codex.wordpress.org/Theme_Unit_Test

Thấy hiện lên một trang rất chi là dành cho dân công nghệ thông tin? Không, nó rất dễ hiểu và bạn chỉ quan tâm đến cái cần, tránh đi lạc vào rừng, cần chú tâm nhìn cái mà tui khoanh đỏ:

Click nút chuột phải vào link như hình minh hoạ, ở menu chọn Save Link As… để lưu lại trên máy tính của bạn một file có tên themeunitestdata.wordpress.xml, đây chính là dữ liệu bạn sẽ import vào.

Nhắc nhỏ luôn, đừng quên đường dẫn thư mục bạn vừa lưu lại file trên máy, vì nếu quên thì bước kế tiếp bạn không biết file nằm ở đâu để mà browse đến (việc đó là một sự thất bại về sử dụng máy tính căn bản đấy nhé, cần bổ sung gấp vì thời đại 4.0 mà như vậy là… hỏng bét).

Thực hiện việc import file XML vào WordPress

Còn chần chừ gì nữa mà không import ngay và luôn trong 1/2 nốt nhạc? Tui sẽ chỉ đưa ra các hình ảnh mà không giải thích gì thêm để xem bạn làm thế nào nhé?

Xuất hiện ngay ra một màn hình có thông báo gì đó trông gần như này:

Quay về màn hình ở trên, giờ nó có nút tên là Upload file and import (tiếng Việt là gì nhỉ?), chỉ cần click vào nút đó xem chuyện gì xảy ra?

Tui biết làm gì với màn hình đối thoại này? Bạn có biết không? Không biết à? Nhớ tui nó gì không, cứ quậy tưng lên, máy tính của bạn không cháy nổ khiến bạn bị thương đâu, WordPress của bạn cũng đang trống trơn, bạn sẽ mất gì nếu phạm sai lầm ở bước này? Chẳng mất gì, sao không thử click gì đó?

Vậy là xong rồi đó, bạn đã có một số bài viết toàn là tiếng Anh mà thôi. Những thứ vừa nhập vào kém hữu ích, gần như không phục vụ cho việc gì mang tính truyền tải thông tin đến người truy cập web. Chúng có tác dụng làm trang web của bạn bớt trống trải, giúp bạn hình dung được một số thứ về giao diện, cách hiển thị trang có ổn hay không, thay vì bạn phải đợi ngồi tạo nội dung khi chưa kịp có.

Không dừng ở cơ bản trên, tui làm gì tiếp theo?

Trong thực tế, khi mua theme, người ta có dữ liệu để bạn import vô nhằm xem được bản trình diễn demo thực sự hoạt động đẹp lung linh như thế nào.

Bạn chẳng có theme nào để mua nhưng vẫn có những nội dung “um tùm” hơn, điều này có gì mà khó đâu, hãy thử khám phá một plugin có cái tên nghe rất đáng sợ: FakerPress by Gustavo Bordoni.

Đến đây bài viết đã hết mất rồi!

Giả sử bạn đã đọc các bài khác chủ đề WordPress ở website này rồi. Nếu chưa, có thể sử dụng chức năng tìm kiếm với từ khóa WordPress để ra các bài viết liên quan đến WordPress. Bài này đưa ra một số hình ảnh kèm vài lời gì đó để bạn phần nào hình dung được màn hình quản trị WordPress ra sao.

[sc name=”index_of_wp”][/sc]

Đăng nhập với tư cách Admin (người quản trị)

Để có thể quản trị WordPress, người quản trị sẽ phải đăng nhập (log in/ sign in). Giả sử web bạn được cài đặt ở địa chỉ:

http://localhost/thuchanh/

thì bạn sẽ truy cập đăng nhập, bạn gõ thêm wp-login.php hoặc wp-admin nối vào đoạn trên (xem thanh địa chỉ ở hình dưới), ra cửa sổ để nhập tên đăng nhập, mật khẩu, trông như này:

Sau khi đăng nhập thành công, một màn hình khác sẽ mở ra, đó được gọi là trang chủ của Admin Dashboard (tạm dịch: bảng điều khiển dành cho nhà quản trị), từa tựa:

Tất nhiên, không phải chỉ có Admin (người có tư cách quản trị toàn bộ website) mới có quyền đăng nhập vào WordPress, mà bất cứ người dùng nào có tài khoản ở website làm bằng WordPress đang đề cập đều có thể đăng nhập.

Admin Dashboard (bảng điều khiển dành cho người quản trị)

Nhìn kỹ hơn vào màn hình bày ra trước mắt, tạm chia làm 4 vùng:

• (1): vùng chứa menu (còn gọi là nav, navigation) dùng để truy cập các chức năng hiện có để tương tác với WordPress
• (2): vùng chính, sẽ là cửa sổ để làm việc, thay đổi tùy theo menu được chọn là gì mà đây có thể là vùng hiển thị thông báo, soạn thảo văn bản, chỉn sửa hình ảnh,…
• (3): menu hiển thị một số tùy chọn để khi cần có thể ẩn/ hiện giúp cho việc thao tác trên WordPress được thuận tiện hơn, ví dụ: số dòng hiển thị mỗi lần trên một bảng dữ liệu, các tùy chỉnh liên quan đến chức năng hiện đang sử dụng.
• (4): một menu ngang giúp truy cập nhanh một số chức năng tương ứng với chức năng đang được sử dụng mà nếu dùng menu bên trái có thể truy cập ở cấp 2, 3 khiến thao tác rối rắm, rườm rà.

Giờ đây, ta có thể lần mò theo dải menu bên trái để khám phá từng chức năng có trên WordPress nguyên bản (tức chưa cài cắm thêm các phụ kiện bổ sung gì khác, và cũng dùng các mẫu giao diện mặc định do WordPress cung cấp sẵn).

10 việc cần làm ngay sau khi cài đặt WordPress thành công

Nào, nếu bạn cảm thấy sợ máy tính phát ra tiếng nổ rộn ràng “bùm bùm bùm”, bốc khói nghi ngút nên bạn co rút cả tay chân không dám khám phá gì thêm, chúng tui đi cùng bạn. Sự thực, nghịch web, chỉ là việc vọc chơi thôi, không có gì ghê gớm xảy ra đâu. Bạn có biết? Bạn chỉ có thể thành thạo cái gì đó khi bạn dám tháo tung nó ra để nhìn ngắm, tìm hiểu, thực hành lặp đi lặp lại để được lưu vào nếp nhăn của não.

Bỏ qua mục Bảng tin, Trang chủ, Cập nhật đứng đầu bảng liệt kê của menu dải bên trái (Left sidebar, navigation) đi vì ở đó gần như không có gì để khám phá hoặc chỉ cần lưu ý đó là nơi để quay lại trang chính của Admin Dashboard. Mục quan tâm giờ đây được bắt đầu từ:

Posts (Bài viết) – nhà tổ chức nội dung chính

Mục này khi click mục con đầu tiên All Posts (Tất cả bài viết), (1) ở hình dưới, nhìn rõ như sau:

Khi click (1) hiện ra một danh sách liệt kê các bài viết dạng bảng để có thể xem, sửa, xuất bản bài viết:

Quả thực, bạn vừa cài WordPress mới toanh, theme mặc định, chưa có nội dung nào dạng trình diễn, đi kèm theme thì cái danh sách trên trống trơn, không ra một danh sách nào cả. Đừng hoang mang, rồi bạn sẽ học đến mục import dữ liệu vào WordPress như thế nào.

Hoặc bạn có thể làm ngay khi đọc nhảy cóc qua bài đó (Import dữ liệu định dạng XML vào WordPress) để thực hiện nhằm có những bài viết trong danh sách giúp dễ hình dung danh sách thực sự như thế nào hơn.

Tuỳ số lượng bài viết đang có mà danh sách trên dài hay ngắn, được tổ chức thành 1 trang hoặc được phân thành nhiều trang, bạn chỉ cần quan sát một lượt, chậm chậm quét mắt là sẽ rõ.

Tui đánh số từ (1) đến (7) và làm biếng giải thích để xem tự bạn nhìn nhận và tự gọi tên hoặc tra cứu để biết những thứ này được gọi là gì hoặc được hiểu như thế nào, có tác dụng/ tính năng/ chức năng/ công năng nào, hoặc sử dụng nó để làm việc gì.

Nếu bạn cảm thấy lạ lẫm, mới mẻ vì bạn vốn không phải là người sử dụng máy tính như dân văn phòng, bạn có thể dùng chức năng comment để trao đổi hoặc ghé qua bên diễn đàn.

Để dễ dàng tra cứu được trên mạng, khuyên bạn nên sử dụng tiếng Anh vì tiếng Việt có vẻ là dễ dàng ban đầu khi nhìn vào menu, nhưng khi tra cứu Google bạn sẽ ngập trung các nội dung hướng dẫn rác rưởi, sai lạc.

Nhìn chung, những thứ thuộc về nội dung dọc menu trái trong WordPress đều khá giống nhau đó là liệt kê danh sách, thêm mới, phân nhóm. Riêng mục Bài viết (Post) có thêm Tags (gắn thẻ).

Khi thao tác với một Post, bạn cần có cái nhìn tổng thể, không sợ mắc sai lầm trong quá trình làm quen bởi vì chẳng có gì nghiêm trọng xảy ra. Máy tính không dễ nổ hoặc hỏng khi bạn thao tác trên trang web đâu. Bạn cứ click vào các mục bạn nhìn thấy, thử thay đổi, chỉnh sửa, xoá, thêm mới,… để hiểu từng chức năng.

Công cụ soạn thảo mặc định của WordPress gần đây được gọi là Gutenberg. Công cụ này được xem là hiện đại, có những ưu điểm hơn trình soạn thảo cũ, nay được gọi là Classic Editor. Nhưng với những người từng quen với soạn thảo văn bản Word từ hồi giờ, Gutenberg có thể là cái gì đó khiến họ cảm thấy “ở thế giới khác”, số người như vậy không phải ít đâu, đó là lý do mà nhiều plugin Classic Editor trở thành một trong những plugin có số lượng cài đặt nhiều nhất, luôn trong top 10 trên trang WordPress.Org.

Nếu bạn thuộc hàng bảo thủ, sợ điều mới lạ, bạn có thể cài đặt plugin Classic Editor để cảm thấy thân thuộc, dễ sử dụng. Nó nằm ở đây:

https://wordpress.org/plugins/classic-editor/

Gutenberg xem mọi thứ là khối (block). Các khối chính là hình chữ nhật được xếp nối tiếp nhau dọc theo chiều đứng màn hình cửa sổ duyệt web. Mỗi khối chữ nhật này có thể là đơn nhất hoặc chứa bên trong những khối chữ nhật khác, để nó sẽ trở thành khối “cha mẹ” hoặc khối “ông bà”. Bạn có từng chơi trò xếp hình brick game trên máy Gameboy thuở nào? Các khối trong Gutenberg giống như vậy nhưng hình dáng không chữ L, chữ Z mà chỉ là hìnhh cây, hìn vuông mà thôi.

Tóm lại, với người soạn thảo văn bản bình thường, kiểu truyền thống, họ rất ghét Gutenberg, nhưng nếu họ có ý niệm về thiết kế, bố trí giao diện linh hoạt, họ sẽ ủng hộ Gutenberg. Và cũng nói thêm rằng tuy có thể khác nhau gì đó nhưng việc gì bạn làm được với Classic Editor, bạn cũng làm được với Gutenberg và ngược lại.

Trong màn hình soạn thảo bài viết, nhìn về góc phải ngay bên cạnh nút Publish (xuất bản/ đăng bài), thấy có cái gì đó như là hình chữ nhật xẻ dọc/ cánh cửa, click vào đó để bật tắt thanh lề phải, một thanh hiển thị các tuỳ chọn, chức năng mạnh mẽ mà bạn cần khám phá, nó trông như này:

Cứ thử xem lần lượt từng mục một ở thanh lề phải, có những mục tối nghĩa, bạn hầu như không hiểu, hãy bỏ qua, mục nào thấy phần nào hình dung được nó là gì, bạn có thể chỉnh, nhập chữ, click chọn,… gì đó để xem những gì xảy ra với bài viết.

Cho đến lúc này, cho tui thử hỏi bạn đã soạn thảo thử một bài viết và đăng nó lên thành công chưa? Nếu chưa, xem ra bạn cần năng vọc thêm, vì có vẻ thụ động đó nghen.

Một bài viết khi được viết dở dang có thể lưu lại làm bản nháp, sau đó sửa hoàn thiện rồi xuất bản. Bài cũng có thể từ xuất bản (Published), rút về lại trở thành bản nháp (Draft). Người viết bài cũng có thể đặt lịch xuất bản vào một ngày ở tương lai thay vì xuất bản ngay sau khi viết hoàn chỉnh.

Ngoài ra, WordPress là vốn một nền tảng cho phép nhiều tác giả cùng viết bài, người dùng có các cấp độ, phân quyền khác nhau nên còn có bài viết ở dạng Private (riêng tư), Password protected (bảo vệ bằng mật khẩu).

Mục Bài viết là một trong những mục được dùng nhiều nhất khi bạn quản trị một website dùng WordPress, đặc biệt là nếu đó là một trang tin điện tử, mỗi ngày/ mỗi tuần đều có bài viết mới.

Media (Thư viện đa phương tiện) – nơi quản lý hình ảnh, video, file

Đây là chức năng quản lý các file đưa lên WordPress, thông dụng nhất là file hình ảnh và video, thi thoảng có file văn bản. Trường hợp đặc biệt, bạn có thể đưa thêm các loại file khác lên nhưng thuộc loại nâng cao vì một số loại file tiềm ẩn nguy hiểm về bảo mật, virus. Nào, xem qua Media có gì?

Click vào những vùng khoanh đỏ hình chữ nhật, quan sát để khám phá, hiểu được tác dụng của những công cụ, chức năng đối với thư viện đa phương tiện. Cũng thử nhập từ khoá vào ô tìm kiếm để tìm một hình ảnh nào đó dựa trên tên file hoặc mô tả.

Khi click vào một hình ảnh cụ thể trong Media thì ảnh đó sẽ được phóng to lên, hiển thị thêm một số chức năng để thao tác với ảnh như thay đổi kích thước, cắt cúp, chọn một kích cỡ khác, nhìn xem:

Bạn thấy đó, có mục Alternative Text, mục đó cần điền vào để web bạn được Google đánh giá cao, hỗ trợ tốt cho SEO. Mục này được hiểu là với những trình duyệt dạng “đọc trang web” thường dùng cho những người khiếm thị, nó sẽ đọc lên đoạn này để người nghe hiểu rằng họ đang lướt trên một trang web có hình ảnh minh hoạ, dù không thấy nhưng vẫn biết thông qua dòng chữ của bạn.

Plugin(s) – phụ kiện thời trang hoặc đồ chơi xe hơi của bạn

Có cả nguyên bài viết về cài đặt plugin, bạn qua đó đọc cho nhanh nhé.

Đừng ủa ủa, có sự nhầm nhọt gì? Tui cố tình ghi caption tráo đổi cho nhau để bạn hiểu plugin là gì, hổng hiểu nữa có lẽ là bạn nên tìm trang web khác vì tui thường viết theo kiểu ví von, so sánh những thứ gần như hổng liên quan gì nhau, trật khỏi logic suy nghĩ của nhiều người nên hổng kết nối được các thứ tui viết. Ngược lại, một số người rất thích, cảm thấy dễ hiểu.

Một trong những plugin được dùng nhiều, nhất là trang web bán hàng, đó là WooCommerce. Hầu hết plugin trên kho của WordPress.Org đều có phiên bản miễn phí, cài vào dùng được các chức năng cơ bản. Trước khi cài đặt một plugin nào đó, bạn cần đọc thông tin mô tả, xem qua phần đánh giá xem người ta nói gì về plugin đó. Hoặc

Đây là danh mục bài viết mà nếu bạn đọc lần lượt, thực hành theo từng bài bạn sẽ từ mức zero cho đến mức độ thợ đụng, đụng đâu hư hỏng đó về WordPress.

Thực sự mà nói, người viết bài đến với WordPress theo kiểu không theo một bài bản nào. Anh ta dùng WordPress từ khá lâu rồi. Nếu tui nhớ không nhầm, đó là năm 2008. Ở thời điểm đó, anh ta hầu như không chỉnh chọc gì, chỉ cài WordPress lên, viết một số bài dạng entry cho blog.

Hồi đó tui còn chưa biết domain, hosting thực sự là gì nên được một người bạn, một bà già như quả cà tặng một gói hosting để đặt WordPress lên đó. Một ngày đẹp trời, những bài viết được đọc quá nhiều (theo cách hiểu hiện nay đó là nó vô tình bắt trend nào đó), người truy cập quá đông, vượt quá mức cung cấp của gói hosting, quá tải, hết băng thông gì đó tui không rõ cho lắm. Kết quả, bên cho thuê hosting đâu đó tận bên Mỹ đã suspend trang web. Khi hỏi bà bạn, tui được bà ấy nói bả cũng không biết làm sao, chỉ nhìn thấy đỏ lòm khi login vào cPanel. Tui dẹp luôn, không dùng WordPress nữa, trang web cũng vô định, còn domain chẳng trỏ vào đâu vì hồi đó cũng không biết trỏ domain mà nhờ bên cung cấp domain làm giúp.

Vài năm gần đây, có chút thời gian rảnh rỗi trong ngày vào buổi chiều nên anh ta bắt đầu sử dụng lại WordPress để viết blog, và cũng làm web dạo cho một số khách kiếm chút tiền mọn mua bột cà phê. Tuy còn ít kinh nghiệm về WordPress nhưng từng “chiến đấu” với những CMS kinh khủng hơn WordPress (như DotNetNuke, Joomla!, Drupal, Umbraco) nên khi đụng đến WordPress tui cảm thấy không tốn quá nhiều thời gian làm quen, để học cách sử dụng.

Giờ đây, bài viết này sẽ ghi lại những gì anh ta đã thực hành, chỉnh chọc với WordPress. Bạn có thể đọc bài và làm theo, làm như con vẹt cũng được.

[sc name=”index_of_wp”][/sc]

Tốt hơn, bạn cần comment bên dưới mỗi bài viết để trao đổi khi chưa rõ, muốn đào sâu thêm, muốn sử dụng WordPress phục vụ cho công việc nào đó mà khỏi phải bỏ tiền túi. Xa hơn, bạn có thể kiếm cơm thông qua việc chia sẻ những gì bạn làm được với WordPress và người khác thuê bạn.

Tui thường đọc đâu đó người ta hay tranh cãi với nhau nên bắt đầu với What, với Why hoặc với How, blah blah gì đó. Trong thực tế, tui thường bắt đầu với sự tò mò, hoàn toàn hổng có ý niệm gì về một thứ gì đó theo kiểu… khoanh tay đứng nhìn người ta làm. Một khi tui đi ngoài đường thấy có gì đó lạ (lạ với tui, và cái gì cũng lạ hết trơn, người khác thấy sao kệ họ), tui thường ghé vào xem, đặt câu hỏi tui muốn chơi/ làm cùng có được hông… nên rất nhiều lần “lãnh giáo” (ăn đòn) trời ơi đất hỡi, và cũng nhiều lần được ăn cỗ miễn phí.

Nói dông dài trên để làm gì vậy cà? Để ý rằng: tui viết bài trên trang web này theo cái kiểu đó, tinh thần nhảy vào quẫy đạp lung tung 😳 đó đó đó.

Cũng nói thêm luôn là bài viết khá lộn xộn, bởi vì tui tiếp cận theo cách đó, mới đầu hoàn toàn như lạc vào rừng, cho đến một ngày kia, một cảm giác như… bừng tỉnh, khiến tui cảm thấy: à há, cũng hiểu chút chút.

Bài viết này được viết với sự ngớ ngẩn cao độ, kèm theo sự mơ mộng hão huyền rằng người viết cũng sắp trở thành một DevOps đến nơi. Nếu nghiêm chỉnh con đường kỹ sư công nghệ, ngay từ lúc đầu quân vào một công ty công nghệ hoặc chuyên về lập trình, phát triển phần mềm vào thời điểm được tuyển làm kỹ sư,… có thể bạn sẽ hổng có bài viết này để đọc. Người viết bài nhiều năm vẫn không trở nên chuyên nghiệp bởi gã chỉ sử dụng công nghệ thông tin để làm công việc văn phòng, giải trí, chứ hiếm khi chuyên tâm làm việc như lập trình viên, kỹ sư phần mềm.

Để hình dung con đường DevOps tự học, đi loanh quanh chơi

DevOps có tiếp xúc với nhiều nhóm công cụ, hệ sinh thái phát triển phần mềm khác nhau như: JAMStack, LAMP stack, LEMP stack, MEAN stack, Jam stack, .NET stack,…

Khi đi dạo một lát bạn thấy rằng thực ra một ông DevOps làm công việc khá giống như việc san lấp mặt bằng, xây dựng hạ tầng kiểu điện, đường, trường, trạm cho một khu đô thị mới vậy, chỉ khác là hạ tầng này về công nghệ thông tin, phần mềm.

Trong lĩnh vực phần mềm hoặc giải pháp (thiên về phần mềm) công nghệ thông tin, công việc DevOps chính là một công việc mới nảy sinh khoảng sau năm 2006, khi mà điện toán đám mây hiện đại như chúng ta thấy ngày nay được khởi đầu với Amazon Web Services.

Trước đó, một người hoặc nhóm người gọi là lập trình viên, kỹ sư phần mềm thường làm luôn công việc của DevOps. Dần dần, hệ thống trở nên phức tạp, các dự án lớn cần nhiều người phối hợp nên độ chuyên môn hoá cao, vậy là nảy sinh ra DevOps.

DevOps có một phần của lập trình viên, một phần của SysAdmin mạng máy tính, đôi khi còn có một phần của IT HelpDesk.

Tóm lại, DevOps khá giống bịch bông, trên đe, dưới búa đập ình ình. Nghe có vẻ buồn cười nhưng nếu DevOps không giỏi, họ có thể bị các đám còn lại coi khinh, nhưng nếu họ giỏi, thì họ lại là bệ đỡ vứng chắc giúp cho những thành phần còn lại toả sáng.

Tui đi dạo vì có nhiều thứ về DevOps tui chưa biết

Tui có biết vài thứ mà sau khi nhìn vào các stack thông dụng được liệt kê tui tự đánh giá bản thân có kiến thức, kỹ năng gần với LAMP Stack nhất.

Tui hãy còn biết quá ít ỏi về các công cụ như Git, Docker, Chef, Jenkins, AWS, Google Cloud Platform, Microsoft Azure,… dù thi thoảng có sử dụng đến vài món khi triển khai một phần mềm ứng dụng chạy trên nền PHP hoặc Perl.

Thảng hoặc tui cũng có đụng đến Odoo, Django Framework, app trên nền Microsoft SharePoint, hoặc app trên nền IBM WebSphere… nhưng rồi cũng chỉ dừng ở mức mang tính biểu diễn chơi, kiếm chút chi phí cà phê khi mentor cho vài “IT man”, không mang tính nghề ngỗng gì.

Với đoạn viết bên dưới, tui bắt đầu cuộc dạo chơi của mình để dần dần thử làm một gã DevOps cho vài dự án kiểu lính đánh thuê xem sao. Dám cá rằng nếu bạn là dân trong nghề, bạn thấy bài viết này hoàn toàn vớ vẩn, bậy bạ, kiến thức lởm khởm,… nhưng mặc kệ bạn, blog của tui tui cứ viết 😜

Cài một web panel tên Virtualmin để dễ quản lý web server ảo

SSH thẳng vô Ubuntu server của tui sẵn sàng ở dấu nháy lệnh như bên dưới:

Truy cập ngay vào website chính chủ của Virtualmin, một web panel nguồn mở, để điều khiển một con VPS hoặc server họ Linux thông qua giao diện web. Tui đang nhìn thấy có cái gì trông như thế này:

Gõ lại dòng (1) ở hình trên vào Terminal để tải file script về Ubuntu Server máy ảo của tui để sẵn sàng cho việc cài đặt. Mất chừng 5 giây script đã tải xong, nằm ngay trên thư mục hiện tại. Tui nhảy dựng lên, phát ngay một lệnh sau:

sudo sh virtualmin-install.sh

Script cài đặt Virtualmin đáp lại tui, nó hiện lên vài thông tin thông báo để bạn hiểu được chuyện gì sắp xảy ra. Trông giông giống như sau:

Chỉ cần Yes là script thực hiện việc cài đặt. Sau khi tui bấm Yes, mọi chuyện cứ ngỡ đầu xuôi đuôi lọt, hoá ra không hoàn toàn suôn sẻ chút nào hết trơn, hiện lên mớ gì đó:

Tui còn biết làm gì hơn ngoài việc cố đọc hiểu lỗi là gì để chỉnh sửa nhằm đáp ứng yêu cầu của Virtualmin trước khi thử lại. Tui đã làm như gợi ý, phát ngay lệnh:

sudo dpkg --configure -a

Một mớ cái gì đó chạy chạy, mất gần 10 phút, hiện lên những dòng cuối cùng trước khi xuất hiện lại dấu nhắc lệnh, trông tím lim trời mây như này:

Tui quất ngay lệnh sudo reboot để khởi động lại ngay và luôn không chậm trễ một giây nào. Ngay sau khi máy khởi động lại, tui tiếp tục SSH vào nó để trở lại với lệnh chạy script cài đặt Virtualmin.

Lần này, liệu có may mắn nào xảy ra? Tui đang rất mong chờ, gõ dòng này trong lúc máy ảo đang khởi động.

Nhập tên vô y chang server đang chạy với một địa chỉ IP dạng public có thể truy cập từ Internet vậy, rồi Enter xem chuyện gì tiếp theo? Hoá ra Virtualmin tải về những thành phần của nó, trước đó nó dự kiến tới 2GB chỗ trống. Tui ngồi đợi mất hơn bốn chục phút, mạng mẽo Việt Nam ra quốc tế quá hẻo, tốc độ gì đâu có 300Mbps mà thôi. Rồi cũng thấy kết quả:

Mở trình duyệt ra, gõ địa chỉ như gợi ý ở hình trên, tức là địa chỉ:

https://lamp.ubuntu2204.local:10000
hoặc https://10.0.2.15

Người khác làm theo tui? Họ sẽ nhìn thấy dòng địa chỉ khác với ở tên chứ hổng thể nào y chang đươc trừ khi họ có VPS có địa chỉ IP nội bộ hoặc cài mạng LAN có máy ảo đặt IP giống của tui. Enter một phát, những gì xuất hiện trên màn hình làm tui không tin vào mắt mình:

Chỉ cân bấm nút Advanced như trên hình để bung ra một khung, giúp cho việc đi tiếp có thể thực hiện được. Khung cũng có nút bấm:

Màn hình đăng nhập Virtualmin với tư cách ông trùm quản trị hiện lên:

Lập tức điền username và mật khẩu rồi bấm nút Sign in để được Virtualmin cho phép vào màn hình tiếp theo. Vì mới cài đặt xong, nên sẽ hiện lên các bước “hậu cài đặt”, ta lần lượt đi qua để những lần sau Virtualmin đã có thông số, không hỏi lại nữa:

Qua một màn hình kế tiếp cũng có nút Next:

Một màn hình khác lại hiện ra, liên quan đến trình quét virus nguồn mở danh tiếng ClamAV:

Lại có thêm một màn hình mới, cho phép bạn chọn cơ sở dữ liệu dùng trên hệ thống:

Các bước còn lại tui cũng chủ yếu bấm Next mà thôi. Nhưng sẽ có một bước tui phải check vào mục Skip check for resolvability vì máy của tui hổng phải là máy public ra Interne, nếu không check vào đó, báo lỗi, tui không thể bấm Next đi tiếp.

Khi thấy xuất hiện dòng chữ Virtualmin post-installation configuration is now complete! là hoàn tất. Lúc này có thể khám phá Virtualmin.

Tạo một server ảo để làm nơi cho một ứng dụng PHP chạy

Trên menu chính của Virtualmin, click mục Create Virtual Server sẽ ra một màn hình để điền thông số:

Trong vòng 1 phút server ảo sẽ được tạo xong dựa trên domain mà bạn cung cấp vào (2) ở hình bên trên. Khi xong, thử nhập địa chỉ đó lên thanh địa chỉ trình duyệt, hình ảnh tui nhìn thấy:

Click nút Login to Virtualmin, nhập username (là card), và mật khẩu để đăng nhập. Lúc này màn hình không phải của trùm quản trị nên đơn giản hơn, ít chức năng hơn:

Chú ý: tui đã vọc khá thuộc bài nên tui phân biệt được trình quản lý hosting vơi lại website tuy cùng địa chỉ URL nhưng khác port. Cụ thể trong ca đang xử lý như sau:

http://card.ubuntu2204.local : đây là địa chỉ website
còn https://card.ubuntu2204.local:10000 : đây là địa chỉ để truy cập vào Virtualmin, địa chỉ này user card không có quyền sudo để thực hiện các tác vụ hệ thống, mà chỉ làm được một số việc của user bình thường, và thư mục của user này là /home/card
địa chỉ https://lamp.ubuntu2204.local:10000 là địa chỉ có thể truy cập với quyền root của server hoặc quyền của user gọi là sudoer, đánh lệnh Terminal để cấu hình này nọ là dùng với user này.

Vì server là của tui nên tui có thể luân chuyển các quyền qua lại khi cần thiết. Nhưng tui cũng luôn dựng tóc gáy lên (không phải do sợ hãi, 😳 mà tui đang nghĩ mình là một bác… cự đà Nam Mỹ ) để kịp nhìn nhận đang ở vai trò user nào trên hệ thống.

Không được nhầm lẫn để rồi cảm thấy… ủa ủa gì đó là hổng phải. Cũng từ nay khi đã cài Virtualmin, khi truy cập địa chỉ lamp.ubuntu2204.local (tương đương địa chỉ IP 10.0.2.15) với quyền trùm, tui có thể click vào menu Terminal để gõ lệnh mà không còn cần SSH từ của số Putty hoặc Ubuntu Terminal của máy tính desktop tui đang nữa.

Thử vào File Manager, upload một file lên, xả nén ra thành một số file, thư mục con:

Vậy là truy cập vào mục docs xem có gì trong đó, nhập như sau lên thanh địa chỉ trình duyệt của tui:

http://card.ubuntu2204.local/docs/docs/index.html

Hiện ra một màn hình trông khá đẹp mắt của một phần mềm vCard:

Click ngay nút Get start màu xanh lá sáng khá bắt mắt để xem chi tiết tài liệu:

Cái vùng khoanh đỏ ô-van này mới làm tui cảm thấy chột dạ quá chừng. Lý do: mặc định khi cài Virtualmin, phiên bản PHP sẽ là 7.4.x theo như tui được biết cách đây vài tuần. Dù gì đi nữa, kiểm tra lại cho chắc ăn. Quay lại File Manager, tui tạo một file check-php-ver.php có thông tin:

<?php
phpinfo();
?>

Nhập lại đường dẫn đẩy đủ lên thanh địa chỉ trình duyệt, tức như sau:

http://card.ubuntu2204.local/check-php-ver.php

Hiện thông tin về PHP ra màn hình cái nào… Màu tím xám nhạt của PHP khiến tui bất an quá:

Ui, may mắn làm sao, Virtualmin phiên bản vừa cài đặt đây đã mặc định PHP 8.1. Tui mừng quá, đỡ vất vả hẳn. Nếu không lại phải loay hoay với cái gọi là multi-version, cài cắm mệt bở hơi tai chưa chắc đã chạy được.

Nhưng vẫn còn một lăn tăn nhỏ đó là trên hệ thống của tui là MariaDB, trong khi phần mềm ghi là MySQL. Mặc dù 2 phần mềm cơ sở dữ liệu này rất giống nhau, có cùng nguồn gốc nhưng không luôn luôn phần mềm có thể chạy được nếu lập trình viên có sử dụng cái gì đó đặc trưng của riêng một trong hai phần mềm này.

Dù sao, tui cũng cứ thử xem thế nào, lúc đó mới biết được chứ ngồi phỏng đoán sẽ không đi đến đâu.

Cài đặt InfyVCards-SaaS phiên bản 8.2.0

Đây là một ví dụ thực tế khách hàng thuê tui cài đặt một ứng dụng được họ mua từ trang CodeCanyon.net – một thành viên của hệ sinh thái Envato. Đây gọi là DevOps sẽ khiến những bạn DevOps cười khúc khích bởi nó trông quá “múa rìu qua mắt thợ”, hoàn toàn là một ca quá sơ khai, kiểu như… lùa gà ☺ 😊

Đúng, tui đến với DevOps theo kiểu “dân chơi nhạc rừng”, không tranh cãi với các bạn làm gì. Kiến thức, kỹ năng DevOps của tui hoàn toàn tự học dựa trên nền…. cài Win dạo trong chục năm 2002-1012. Cái sở học tui thấm đẫm không theo mô thức nào.

Bài viết này cũng mang tính chất đọc chơi, không phải là một tech blog, dân trong nghề cố đọc để rồi phát bực mình, âu đó là sự nhầm nhọt vậy.

Xem thử gói cài đặt InfyVCards-SaaS version 8.2.0 có gì?

Một file ZIP gồm có: 1 thư mục docs và một file dist.zip. Trong thư mục docs có nhiều file, thư mục con, còn khi giải nén file dist.zip ra được nhiều thư mục khác, theo cấu trúc của một ứng dụng PHP được viết trên nền Laravel.

Phỏng đoán ban đầu của tui hệ thống (web server và PHP) phải đáp ứng được yêu cầu cho cả Laravel và yêu cầu riêng của InfyVCards-SaaS.

Lần lượt chúng ta phải giải quyết các yêu cầu này trước khi InfyVCards-SaaS có thể chạy được.

Thiết lập môi trường cho Laravel, InfyVCards-SaaS

Tui di chuyển thư mục docs vào public_html rồi gõ lên trình duyệt:

http://card.ubuntu2204.local/docs

Ra một trang hướng dẫn đầy đủ do người cung cấp InfyVcards-SaaS cung cấp, hình hài trang trông như sau:

Click nút Get started tui được dẫn đến một trang khá dài, được bố trí theo kiểu chương phần như một tài liệu học thuật hoặc cuốn sách. Tui không định liệt kê hết mọi thứ ra đây, chỉ tập trung vào việc làm sao cài được phần mềm.

Vậy là kiểm đếm lại xem hệ thống đã có gì? Trên hệ thống đã có PHP 8.1, MySQL 5.6+ thì tui có MariaDB 10.6. Hai món jQuery, Ajax phía client, tức dùng bất cứ trình duyệt web thông dụng nào chạy trên Windows 10 đều đáp ứng.

Đọc tiếp đoạn docs dở dang ngay bên dưới đoạn Technologies Used đề cập bên trên, tui đến đoạn Installation Guide → System Requirement thấy có các thông tin:

Giải quyết (1): Laravel Requirements (tạm hiểu là những yêu cầu để có thể đáp ứng được hoạt động của framework Laravel – được xem là một trong những nền tảng mạnh nhất trong làng PHP). Tui đã thực hiện lệnh ở Terminal (giờ đây dùng của Virtualmin tại lamp.ubuntu2204.local) như sau:

Khi đã có Composer rồi, cài Laravel là việc gõ lệnh, ngồi vuốt râu đợi mà thôi! Có phải dzậy hông? Đơn giản vậy có thể một nhóc học lớp 4 cũng trở thành một tay DevOps cả rồi. tui thử tạo một project Laravel với lệnh:

composer create-project laravel/laravel app-cua-tui

Nó sẽ hiện lên những thông báo thú vị trông đến là bối rối như sau:

Tui đành copy lại cái danh sách những PHP Extension được yêu cầu ra một trình soạn thảo văn bản text thô, trên máy của tui là GNOME Text Editor, rồi biến nó thành:

sudo apt-get install -y php8.1-mysqlnd php8.1-opcache php8.1-pdo php8.1-xml php8.1-calendar php8.1-ctype php8.1-dom php8.1-exif php8.1-ffi php8.1-fileinfo php8.1-ftp php8.1-gettext php8.1-iconv php8.1-mbstring php8.1-mysqli php8.1-pdo_mysql php8.1-phar php8.1-posix php8.1-readline php8.1-shmop php8.1-simplexml php8.1-sockets php8.1-sysvmsg php8.1-sysvsem php8.1-sysvshm php8.1-tokenizer php8.1-xmlreader php8.1-xmlwriter php8.1-xsl

Lòng mừng khấp khởi, phen này lệnh chạy vun vút như quái xế đua xe. Ngay khi Enter, nhìn lại thấy… hơi ơi là:

Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
Note, selecting 'php8.1-mysql' instead of 'php8.1-mysqlnd'
Note, selecting 'php8.1-common' instead of 'php8.1-pdo'
Note, selecting 'php8.1-common' instead of 'php8.1-calendar'
Note, selecting 'php8.1-common' instead of 'php8.1-ctype'
Note, selecting 'php8.1-xml' instead of 'php8.1-dom'
Note, selecting 'php8.1-common' instead of 'php8.1-exif'
Note, selecting 'php8.1-common' instead of 'php8.1-ffi'
Note, selecting 'php8.1-common' instead of 'php8.1-fileinfo'
Note, selecting 'php8.1-common' instead of 'php8.1-ftp'
Note, selecting 'php8.1-common' instead of 'php8.1-gettext'
Note, selecting 'php8.1-common' instead of 'php8.1-iconv'
Note, selecting 'php8.1-mysql' instead of 'php8.1-mysqli'
Note, selecting 'php8.1-common' instead of 'php8.1-phar'
Note, selecting 'php8.1-common' instead of 'php8.1-posix'
Note, selecting 'php8.1-common' instead of 'php8.1-shmop'
Note, selecting 'php8.1-xml' instead of 'php8.1-simplexml'
Note, selecting 'php8.1-common' instead of 'php8.1-sockets'
Note, selecting 'php8.1-common' instead of 'php8.1-sysvmsg'
Note, selecting 'php8.1-common' instead of 'php8.1-sysvsem'
Note, selecting 'php8.1-common' instead of 'php8.1-sysvshm'
Note, selecting 'php8.1-common' instead of 'php8.1-tokenizer'
Note, selecting 'php8.1-xml' instead of 'php8.1-xmlreader'
Note, selecting 'php8.1-xml' instead of 'php8.1-xmlwriter'
E: Unable to locate package php8.1-pdo_mysql
E: Couldn't find any package by glob 'php8.1-pdo_mysql'
E: Couldn't find any package by regex 'php8.1-pdo_mysql'

Đành ngồi mà sửa thủ công lại câu lệnh theo như gợi ý lẫn báo lỗi trên, giờ đây câu lệnh trông có vẻ gọn gàng, ngắn hơn:

sudo apt-get install -y php8.1-mysql php8.1-opcache php8.1-common php8.1-xml php8.1-mbstring php8.1-readline php8.1-xsl

Khi câu lệnh chạy, hoá ra trên hệ thống đã khá đầy đủ rồi, thông báo như sau:

Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
php8.1-common is already the newest version (8.1.2-1ubuntu2.14).
php8.1-common set to manually installed.
php8.1-mbstring is already the newest version (8.1.2-1ubuntu2.14).
php8.1-mbstring set to manually installed.
php8.1-mysql is already the newest version (8.1.2-1ubuntu2.14).
php8.1-mysql set to manually installed.
php8.1-opcache is already the newest version (8.1.2-1ubuntu2.14).
php8.1-opcache set to manually installed.
php8.1-readline is already the newest version (8.1.2-1ubuntu2.14).
php8.1-readline set to manually installed.
php8.1-xml is already the newest version (8.1.2-1ubuntu2.14).
php8.1-xml set to manually installed.

Chạy lại lệnh composer tạo một project Laravel xem sao. Hy vọng lần này Laravel đã sẵn sàng làm việc. Nào xem thông báo có gì?

Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - spatie/laravel-ignition[2.0.0, ..., 2.3.2] require ext-curl * -> it is missing from your system. Install or enable PHP's curl extension.
    - Root composer.json requires spatie/laravel-ignition ^2.0 -> satisfiable by spatie/laravel-ignition[2.0.0, ..., 2.3.2].

Vẫn còn lỗi, tui bồi thêm câu lệnh: sudo apt-get install php8.1-curl xem sao, rồi lại tạo project. Lần này chạy cái gì đó mất chừng 1 phút, và thấy có màu xanh lá cây, tui cho rằng đã ổn, với thông báo sau:

83 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force

   INFO  No publishable resources for tag [laravel-assets].  

No security vulnerability advisories found.
> @php artisan key:generate --ansi

   INFO  Application key set successfully.  

OK, giờ thì đã có thể nạp App InfyVcards-SaaS kia vào chạy được rồi. Nào, thực hiện các bước:

Giải quyết (2): rất đơn giản mà thôi, chắc chắn trong Virtualmin tồn tại đâu đó, tui liền tìm kiếm và thấy ngay:

Hình minh hoạ trên có được bằng cách vào menu Web Configuration → PHP-FPM Configuration → Edit Configuration Manually (icon cuối, có hình cây bút viết trên cuốn sổ). Ba dòng 18-20 chính là dòng tui vừa thêm.

Sau khi đã ổn với Composer, tui di chuyển thư mục vcards có được từ file dist.zip giải nén đã đề cập vào thư mục /home/card

Tui bắt đầu làm biếng nên hỏi khách hàng là thư mục web root có nhiều site hay chỉ có mỗi cái ứng dụng vcards này, được đáp rằng chỉ có mỗi nó. Vậy là khoẻ cho tui gì đâu.

Tui liền xoá thư mục web root mặc định /home/card/public_html đi, tạo ngay một soft link mang tên public_html ở ngay trong /home/card để Apache HTTP Server vẫn nhìn nhận thư mục gốc web root (tức tương đương htdocs nếu cài Apache mặc định) vẫn y như cũ. Tất nhiên, soft link này trỏ đến /home/card/vcards/public để phần mềm nạp lên đúng.

Tiếp theo, chỉnh sửa nội dung file .env , file này có đường dân cụ thể đầy đủ như sau:

/home/card/vcards/.env : đây là file ẩn, cho nên nếu không nhìn thấy nó, cần phải chỉnh trên Virtualmin để hiện file ẩn, hoặc dùng chức năng Terminal của Virtualmin gõ lệnh ls -a /home/card/vcards

Nạp các thông số cấu hình như hướng dẫn trong docs của phần mềm:

Vì khách hàng chỉ muốn xem qua phần mềm, chưa cần phải cài đặt đầy đủ chức năng nên tui bỏ qua phần cấu hình mail. Chỉ cần như hình trên đã tạm đủ để chạy.

Tiếp theo, dùng Virutualmin tạo cơ sở dữ liệu (trong MariaDB) có tên vcards, gán người dùng tên card và mật khẩu như hình thông số .env kể trên.

Ta có cơ sở dữ liệu ban đầu của phần mềm được đặt tại file:

/home/card/vcards/database/infy-vcards.sql

Tất nhiên là tui có thể chọn 2 phương án là gõ lệnh trực tiếp từ command line ngay trên Virtualmin hoặc từ máy tính client của tui vì khách đã gửi cho tui file, và tui dễ dàng upload qua phpMyAdmin.

Vì file dữ liệu chỉ có 2,1 Megabyte mà thôi nên tui dùng phpMyAdmin cho trực quan một chút. Kết quả import vào trông như sau:

Đến đây, tui đã thiết lập xong mọi thứ. Giờ chỉ còn giống như đợi cắt băng khánh thành mà thôi.

Truy cập InfyVCards-SaaS lần đầu tiên

Mặc dù triển khai hàng trăm dự án CNTT từ đơn giản đến phức tạp khác nhau nhưng tui luôn có cảm giác hồi hộp mỗi khi mở màn một cái mới như hiện đang. Để bớt hồi hộp, tui đành phải mở trình duyệt web lên, gõ dòng:

http://card.ubuntu2204.local

rồi nhắm mắt lại trước khi bấm Enter. 5 giây sau, tui mở mắt lại, có cái gì hiện trên màn hình? Đây là cái mà tui nhìn thấy:

Lúc này tui đành quay lại đọc docs xem có tài khoản mặc định nào không để mà đăng nhập xem như một người quản trị hệ thống. Không cần phải lăn tăn, tài khoản đó luôn có, và tui đã login thử:

Ngay sau Enter chừng 2 giây, hiện ra như này:

Đến đây, xem như tui tạm xong thoả thuận với khách hàng, việc còn lại để him vọc.

Cái trang web này vậy mà ngày nào cũng có vấn đề xảy ra. Luôn luôn là như vậy. Khi bạn duy trì một trang web, đăng nhập vào làm việc với nó mỗi ngày, cảm giác giống như tui có một cây cảnh, con thú cưng vậy đó. Chiều ngày hôm qua tưới cây, tui không thấy có một con sâu nào. Sáng nay, vừa mới xịt phun sương được vài cái bỗng nhìn thấy cái gì đó như là một… con sâu, chó cưng bỗng có vài con ve.

Login vào Admin Dashboard (bảng điều khiển dành cho người quản trị) WordPress

Mới cách đây chưa lâu, khi tui login vào trình quản lý website này để xem lại bài ngày hôm qua viết dở dang, có chút thời gian rảnh nên muốn hoàn thành nó, bỗng nhiên thấy có cái thông báo như sau:

Có phải ngày hôm nay mới hiện lên màn hình này? Không, tui chắc rằng nó đã thông báo từ trước đó rất lâu rồi. Thực lòng mà nói, lâu nay tui cũng ít chú ý bởi vì thấy rằng trang web mình đã nạp với một tốc độ không tệ tí nào nên thấy chưa cần phải chỉnh chọc.

Hôm nay, bỗng nhiên cái thông báo này gây… ngứa mắt làm sao, tui muốn dẹp nó đi, không hề muốn chậm trễ hơn.

Như trên cửa sổ có thể thấy có cái link tài liệu hướng dẫn để xem nó là cái gì, nó nói cái gì trong đó liệu tui có hiểu chút nào chăng?

Sau khi đọc một lát thì thấy rằng khi cài đặt PHP bị thiếu mất Extension, còn gọi với từ khác là phần mở rộng, mô-đun, trình cắm,… Nhưng thực sự, khi hiểu đúng, chúng dạng thư viện, mục đích hỗ trợ PHP thực hiện một số công năng nào đó mà bản thân PHP không, hoặc chưa được trang bị.

Thực hiện theo gợi ý của WordPress ngay và luôn

Sau khi đọc một hồi, tui hiểu rằng WordPress yêu cầu có 2 vấn đề được cải tiến, vấn đề thứ nhất liên quan đến cài đặt một mô-đun để xử lý hình ảnh sang xịn mịn hơn. Vấn đề thứ hai liên quan đến chức năng gửi email của WordPress, cụ thể ở đây là để email đáng tin cậy, bớt rơi vào thư mục rác.

Xử lý cải tiến thứ nhất: cài đặt, kích hoạt mô-đun imagick

Vì sao phải có mô-đun Imagick? Trước đây, và ngay cả hiện nay, GD là một thư viện xử lý ảnh mà các ứng dụng PHP thường sử dụng vì nó gọn nhẹ, phổ biến. WordPress cũng sử dụng GD. Nhưng những phiên bản WordPress gần đây thấy rằng tận dụng sức mạnh của ImageMagick cũng rất đáng giá về hiệu suất nên gợi ý người dùng cài thêm để sử dụng.

Mô-đun imagick cài cho PHP (tức một PHP Extension) này sẽ có nhiệm vụ gọi đến thư viện xử lý đồ hoạ nguồn mở rất nổi tiếng mang tên ImageMagick.

Với sự hiểu biết của tui từng vọc nhiều thứ, tui biết rằng có 2 việc phải làm: 1. Cài thư viện ImageMagick cho hệ điều hành, đây chính là công cụ để xử lý hình ảnh; 2. Cài mô-đun imagick cho PHP, đây chính là chiếc cầu nối để kết nối gửi lệnh xử lý hình ảnh đến ImageMagick.

Nếu thiếu một trong hai thứ vừa kể trên chắc chắn hệ thống không làm việc được đúng như mong đợi. Tui gom lại bằng các câu lệnh sau:

Lỗi chụp màn hình trên có lỗi, cần sửa php2nmod thành phpenmod.

Ổn rồi thì nhớ restart lại web server để web server và php-fpm nhận ra có sự thay đổi ở PHP. Kiểm tra với một file php có gọi hàm phpinfo() tui thấy như sau:

Cài đặt được rồi nhưng giờ WordPress có hoạt động với cái chức năng cải tiến này hay không cần phải có phép thử nghiệm. Không cần phải kích hoạt này nọ, tui đọc thấy nếu WordPress phát hiện ra có PHP imagick nó sẽ tự động ưu tiên thay vì GD. Nhưng Imagick có hoạt động hay không lại là chuyện khác, cần thực hiện việc kiểm tra.

Tui thực hiện như sau:

Một cửa sổ bung lên, nó là như sau:

Click ngay vào nút Sửa ảnh, hiện lên một cửa sổ chỉnh sửa khác:

Tui chỉ có thể thốt lên: ui, hổng ổn rồi. Nhưng vẫn cứ cố thêm một lần khi click vào nút Image Rotation, chọn một kiểu xoay trong menu xổ xuống xem có chuyện gì xảy ra? Nó hiện ngay lên:

Vậy là phải tìm lỗi do đâu. Cái này nếu tui chỉ mới vọc PHP, máy chủ Linux một thời gian ngắn e rằng tui “khóc tiếng Mán”, thiệt sự là như vậy. Trong trường hợp này, tui cũng có chút kinh nghiệm về quản trị server học mót từ hồi đi triển khai các dự án, nên hơi bối rối chút xíu… để nghĩ đến việc phải xem nhật ký lỗi trên hệ thống để tìm nguyên nhân.

Theo tra cứu người ta nói rằng có thể thông số memory_limit trong cấu hình php.ini hơi thấp nên chỉnh cao hơn. Tui vô chỉnh thông số này lên 128MB (hiện đang có 64MB) mà thôi. Giờ thì kết quả đã ổn rồi:

Như vậy, cải tiến thứ nhất đã được xử lý xong sau một hồi loay hoay.

Xử lý cải tiến thứ hai: chỉnh chọc DMARC:

Cái này nghe có vẻ gì đó rất gì đó nhưng tui đã xử lý gọn nhẹ, nhanh hơn tui có thể tưởng tượng bởi vì trước đây đã từng làm cho nhiều khách hàng nên nói là thuộc nằm lòng có vẻ hơi quá, nhưng không cần phri tra cứu cũng biết cách làm.

Tui lập tức vào trong dịch vụ email của tui là Zoho, kiểm tra xem đã bật app password trong đó hay chưa? Thông số của Easy SMTP của tui đã khớp hay chưa?

Gửi email test thử đến một email Gmail của tui xem thế nào. Chắc chắc đến 90% rơi vào mục Spam. Đó chính là lý do để mà chỉnh DMARC.

Việc này mất 30 giây mà thôi nhưng phải đợi ít nhất 5 phút mới có thể gửi email test lại để xem có vào Inbox hay chưa? Các bước làm như sau:

Login vào trình quản lý domain của tui tạo một record có kiểu là TXT với giá trị sau:

v=DMARC1; p=reject; rua=mailto:info@khoancatbetong.com; pct=100; adkim=s; aspf=s

Sau chừng 5 phút tui mở trang mxtoolbox.com lên để kiểm tra xem DMARC đã ổn hay chưa? Kết quả:

Vậy là xong rồi đó. Hai cải tiến đã được chỉnh theo gợi ý của WordPress

Đời không như mơ: sự kinh hoàng của plugin lạ xuất hiện

Sau khi xong xuôi, bỗng nhiên nhìn dải menu bên trái Admin Dashboard xuất hiện 2 plugin ở đâu lạ hoắc, tui nghi do Easy SMTP hoặc một plugin nào đó trên hệ thống có đoạn mã tải về kèm. Vì tui dám cá 100% rằng không có chuyện cài WPForms Lite và All in One SEO làm gì.

Chán thật, đã từ bỏ Windows bởi vì bloatware, giờ đây WordPress cũng lại dính phải cái nạn này. Hổng lẽ tương lai tui phải “Create Your Own CMS” chứ?

Đang cơn bực tức, tui mở wp-config.php ra thêm dòng này:

define( 'DISALLOW_FILE_EDIT', true );

Cười ngoác cả mồm miệng ra khi kiểm tra lại Site Health Screen thì thấy như sau:

Coác boạn thấy rùi đoá, cái ni được người ta gọi là “từ trâu lành chữa thành trâu què”. Tui hết biết làm gì luôn. Hẹn trở lại trong một bài chỉnh chọc khác.

Khi tui kiểm tra trang web của tui trên trang PageSpeed Insights, nó đã báo điểm SEO thấp lè tè, đâu đó 90 mà thôi. Tui cũng không phải hạng quá khích về SEO, chủ yếu thích là trang web nạp nhanh hơn mà thôi.

Nguyên nhân của lỗi này là gì?

Ở đây tui sử dụng WordPress làm trang web này nên chỉ bàn đến WordPress mà thôi. Trong thực tế, những trang web sử dụng mã nguồn khác hoặc “code bằng tay” thì cũng không khác mấy về mặt lý thuyết.

Việc này là sao? Là trong phần HEAD của HTML thiếu mất dòng sau:

Tui ngạc nhiên tột độ về việc này khi tự biến mình thành… niu bai 😢. Khi tui nghĩ về thứ huyền thoại (thực ra tui cho rằng đó là hoax) đâu đó hổng nhớ rõ cho lắm: rằng những tay mơ trong làng web, đám nghiện WordPress từng nghĩ rằng WordPress là một phần mềm làm Web được xem là “hỗ trợ SEO tốt nhất”. Vậy mà, nhảy ngay vào trang home page dính ngay lỗi ngớ ngẩn như này.

Ui, bàn về việc “tưởng dzậy mà hổng phải dzậy” có khi phải viết cả kho sách, tui chỉ muốn làm sao cho có cái dòng này vào WordPress mà thôi.

Kiểm tra thêm các trang con xem sao?

Tui mở đại một trang trên này, cụ thể nó là trang nói về tự học nhưng kết quả hổng ngon để xem thử có dòng đó không? Lần nữa, tui lại ngạc nhiên… thích thú khi cũng hổng có dòng này luôn. Hahaha, vậy mới kinh dị làm sao chứ!?

Vậy là hổng có dòng mô tả nào như vậy trong tất cả các trang, bài trên web của tui. Phải chăng, do vậy mà điểm SEO thấp? Chưa biết được, tui cứ thử áp dụng, vài tuần sau kiểm tra lại xem sao.

Thực ra, những cái về meta này Google nói gì tui cũng chưa bao giờ tra cứu thử xem nó có tác dụng gì hay không.

Trong quá khứ tui có đọc đâu đó rằng kể từ ngày X, tháng Y, năm Z nào đó Google sẽ bỏ qua những mô tả trong phần meta để tránh bị dân làm SEO nhồi nhét những thứ vớ vẩn, mô tả chỉ cốt để lên top mà không phản ánh đúng nội dung của trang. Google vẫn chú trọng nội dung bên trong hơn là phần mô tả này.

Đợi gì mà không tham khảo lại xem những thẻ meta nào Google vẫn còn tham khảo đến.

Làm nhanh một Google tìm kiếm, thấy một trang từ đất nước Kangaroo nói rằng:

It was 21 September 2009 when Google published an article stating they would no longer use meta keywords in ranking web search results.

Trích từ https://www.sitecentre.com.au/blog/meta-keywords

Thực ra, tui vốn là thủ thư nên tui có kiến thức về Metadata trước cả khi Google trở thành một đế chế. Cái thời mà tui tìm kiếm trên những công cụ như WebCrawler, AltaVista, Lycos,… và sục sạo trong những cơ sở dữ liệu học thuật, tra cứu phát minh sáng chế là tui đã hiểu metadata để làm gì, có tác dụng ra sao. Rồi ngay cả “web ngữ nghĩa” là cái gì tui cũng biết từ thời bình minh của World Wide Web.

Cũng đừng nhầm nhọc là Google hoàn toàn phớt lờ các meta đâu nhé. Bằng chứng tui tra cứu thấy như sau:

Tham khảo đầy đủ: https://developers.google.com/search/docs/crawling-indexing/special-tags

Túm lại, biết là một chuyện, có áp dụng hay không lại là chuyện khác. Tui thừa nhận tui biết rất nhiều thứ, nhưng tui biết chỉ để mà biết, hiếm khi xài tới kiến thức đó. Phải chăng đó là một loại… bịnh?

iHihi, aHaha, vậy là Google cũng nhất quán đó chứ, nó báo không tìm thấy meta description content thì nó có hỗ trợ thẻ meta và các thuộc tính này.

Bắt tay vào sửa lỗi ngay và luôn

Đầu tiên, tui cũng bật mí luôn rằng tui rất ít khi cài plugin cho WordPress khi làm web cho khách. Ngay cả trang tui cũng hiếm khi dùng đến vì càng cài plugin càng khiến website của tui giống như mấy gã đeo vàng, phụ kiện thời trang, xăm trổ, đeo khuyên,…. đầy người.

Vậy thì cứ mở file functions.php trong theme lên mà viết thêm code thôi. Đoạn mã có thể trông như sau:

Như vậy là xong rồi đó. Đoạn mã tự lấy những từ đầu tiên trong bài viết để làm mô tả trong phần description của thẻ meta.

Nếu bạn có sự hiểu biết hơn về SEO, bạn có thể tự tạo phần description này hoặc lấy một đoạn khác trong bài viết thay vì những chữ của đoạn văn đầu tiên của bài.

Hưởng thành quả của một chút chỉnh chọc

Giờ thì có thể vào trang pagespeed chấm web chấm dev (tức là trang PageSpeed Insights của Google trước đây) và nhập địa chỉ của website này vào. Và bùm bùm bùm:

Bài học rút ra ở bài viết này là gì? Nghĩa là khi tui chỉnh chọc một chút xíu thôi, website của tui đã cải thiện SEO so với một tá những website khác.

Tui dám chắc rằng bạn dùng Ubuntu trước sau gì cũng đụng đến công cụ dòng lệnh dù ít dù nhiều. Bởi vì nếu không dùng đến dòng lệnh thì chẳng có lý do gì để chọn dùng Ubuntu. Bài này chỉ viết một công cụ ngắn tên Nala.

Nala có cú pháp lệnh giống y chang công cụ APT quen thuộc trên các hệ điều hành trong gia đình Debian. Vì thế, bạn sử dụng APT thế nào, giờ sử dụng Nala như vậy.

Cài đặt nala bằng apt quen thuộc nếu bạn dùng Ubuntu 22.04 trở đi:

sudo apt install nala
hoặc
sudo apt-get install nala

Nếu gặp thông báo: Unable to locate package nala nghĩa là Ubuntu của bạn không tìm thấy nala bởi vì bạn chưa bật các repository dạng universe. Không sao, đánh ngay lệnh sau:

Tất nhiên, sau khi thêm mới repository, bạn luôn phải kèm lệnh: sudo apt update mà không đợi nhắc nhở? Đúng hông?

À há, mà nhớ xem lại sau lệnh apt update vừa rồi xem có báo lỗi gì về key không đấy? Nếu bạn thấy gần gần như này:

Thì cần phải giải quyết với lệnh sau:

Dĩ nhiên, không thể quên sudo apt update lần nữa để cập nhật repository.

Rồi, giờ thì cài nala trong một nốt nhạc: sudo apt install nala

Từ nay trở đi thay vì cài phần mềm với sudo apt instal tên-phần-mềm, bạn chỉ cần gõ sudo nala tên-phần-mềm

Thử ngay lệnh nala đầu tiên: sudo nala fetch để cập nhật các repository của Ubuntu.

Việc cài thấy có vẻ gì đó nhìn ngon lành hơn, thay vì mớ hiển thị rôi rắm của APT.

Bài này sẽ học thêm một số thứ CSS được xem là khó hiểu, đôi lúc như là bí truyền hoặc nó được những người thích đào xới, chỉnh chọc thử nghiệm để tạo ra những thứ khác lạ, ấn tượng. Trong thực tế, nếu không thực sự yêu thích, luyện tập CSS đỉnh cao, tui chỉ cần biết tra cứu để có thể tìm ra những thứ khó, copy vào website mình để dùng mà thôi.

Ở bài 9 này không sử dụng file ở bài 8 mà sử dụng file mẫu để học đã từng đề cập, save as nó lại thành bai9.html, sử chỗ stylesheet trỏ tới css/bai9.css. Sau đó tạo một file css/bai9.css

Đề bài này không cần phải giải thích dài, bạn cũng hiểu những đoạn mã được trình bày nên được đặt vào đâu trong file HTML, CSS của bạn. Nếu vẫn chưa biết, quay lại các bài trước để ôn lại.

Làm chữ in hoa với text-transform

Mở file bai9.html lên, làm nội dung giống như này:

Tiếp tục, mở file css/bai9.css lên, có nội dung như sau:

Kết quả cho ra như sẽ trông như này:

Tui nhận ra ngay có sự sai sót ở mã HTML, CSS với kết quả. Đó là kết quả ở dòng chữ cuối cùng chữ viết hoàn toàn là chữ thường. Trong khi đó, nhìn trong HTML lại có lẫn một số chữ hoa. Dụi mắt nhìn lại vào file CSS thấy rằng không tồn tại rule nào có .thuong-tat-cat hết trơn. Vậy thì viết rule cho nó chứ sao nữa:

Gọn lại, thuộc tính text-transform có 3 giá trị thường dùng: capitalize, upercase và lowercase.

Chuyển cảnh với transition

Thuở CSS mới sơ khai, việc làm hiệu ứng với các nút cực kỳ nan giải, phải dùng đến JavaScript, người mới học khó có thể hiểu được các đoạn mã. Ngày nay, bạn chỉ cần nhập như sau:

Kết quả thì tui tự bấm nút Save 2 file và bấm F5 trên trình duyệt để nạp lại rồi rà chuột lên nút để xem hiệu ứng.

Làm thêm cái gì đó, thử đoạn mã sau:

Tinh thần học tập là cứ tra cứu, thử thay đổi HTML, CSS và bấm F5 để xem. Sau đó thử áp dụng vào một, vài khối nào đó để hiểu rõ, nhằm có thể áp dụng được vào trang web khi cần.

Thay đổi element với transform

Gõ đoạn HTML bên dưới vào file bai9.html:

Gõ tiếp đoạn CSS sau vào file bai9.css:

Tiếp tục thêm một loại transform (biến hình) mới, lại vẫn gõ:

CSS giả cách Pseudo-class và Pseudo-element