học thiết kế Website với WordPress Từ A

Đây là Serie đầu tiên của Blog và cũng là Serie mất nhiều thời gian nhất và đầy đủ nhất của Xuân Thức Blog, theo dự kiến thì 1 tuần mình sẽ lên tầm 2 – 3 bài mới riêng về serie này.

Serie thiết kế website bằng WordPress từ A – Z

Mình xin giới thiệu sơ qua về các nội dung chính trong Serie học thiết kế website với wordpress từ a – z này:

1. Giới thiệu về wordpress và các công cụ cần thiết để thiết kế một website bằng wordpress hoàn chỉnh.

2. Hướng dẫn cài đặt công cụ, website wordpress, plugin, theme, …

3. Hướng dẫn tích hợp SEO cho WordPress.

4. Hướng dẫn tự tạo theme cho WordPress từ căn bản nhất.

5. Hướng dẫn bảo mật cho WordPress.

6. Hướng dẫn tạo trang bán hàng bằng WordPress.

7. Các thủ thuật WordPress nâng cao.

Trong mỗi mục sẽ bao gồm một Serie con để tiện cho các bạn theo dõi.

Hy vọng rằng với đi đến nửa đoạn đường Serie này thì các bạn sẽ tự tạo cho mình một website với đầy đủ các tính năng phục vụ cho công việc và học tập của các bạn. Và đi hết Serie này bạn sẽ trở thành một Web Developer chuyên nghiệp, có thể tự thiết kế cho mình một website chuyên nghiệp và độc quyền với khả năng hỗ trợ SEO tốt.

Nào chúng tay hãy bắt đầu ngay để có được những kiến thức hữu ích từ Serie này.

Các công cụ cần thiết để học thiết kế website bằng WordPress

Bắt đầu học WordPress một mã nguồn mở lớn nhất thế giới, các bạn cần trang bị cho mình những thứ đồ nghề để chiến đấu với nó. Sau đây mình xin giới thiệu các bạn một số công cụ cần thiết nhất để bắt đầu với WordPress, những công cụ nâng cao hơn mình sẽ giới thiệu trong các bài chuyên về từng lĩnh vực đó.

Những công cụ hỗ trợ thiết kế web bằng wordpress

1. Một phần mềm Localhost như Xampp, Wamp, …

Ở đây mình dùng Wamp vì nó khá là dễ để sử dụng và nhẹ nữa, nếu bạn nào chưa biết Wamp là gì và cài đặt sử dụng như thế nào thì các bạn có thể đọc bài Hướng dẫn cài đặt sử dụng localhost wampserver 2.0 toàn tập của mình trên Blog.

Localhost dường như là một phần mềm không thể thiếu đối với dân lập trình web nói chung và dân cày WordPress nói riêng. Mình không giới thiệu về nó vì đã có một bài viết đã nêu ở trên.

2. Trình soạn thảo code:

Có khá nhiều trình soạn thảo code nhưng ở đây mình xin giới thiệu các bạn một công cụ khá là phổ biến đó là Notepad++, ưu điểm nhẹ dễ sử dụng.

Các bạn có thể download phần mềm tại đây

Thế là đủ điều kiện để cài đặt code wordpress lên máy tính, giờ đến phần đưa website wordpress lên internet để nhiều người có thể truy cập website của mình.

3. Domain (Tên miền):

Domain nó giống như là số nhà của mình vậy, để cho người khác biết được nhà mình ở đâu để đến thăm, các bạn có thể đăng ký với một bên cung cấp dịch vụ domain như Mắt bão, PAVietnam, … hoặc cũng có thể đăng ký miễn phí một domain tại dot.tk.

Có domain xong ta tiến hành trỏ domain về ip của host, sẽ được giới thiệu ở mục 4.

4. Hosting (Máy chủ):

Hosting nó giống như là mãnh đất của mình vậy khi có được mãnh đất mình có thể xây nhà để ở, thì Hosting nó dùng để đặt code và database của mình trên đó để người dùng có thể truy cập tới website của mình thông qua tên miền.

Hosting có 2 dạng là Hosting windows và linux, ở đây mình dùng WordPress là ngôn ngữ PHP nên dùng Hosting Linux để quản trị.

5. Filezilla:

Đây là phần mềm dùng để kết nối với Hosting thông qua giao tiếp FTP, giúp ta tiện lợi trong việc upload source code, chỉnh sửa ngay trên hosting bằng phần mềm thông qua notepad.

Bạn có thể download và cài đặt tại đây

Bài tiếp theo mình sẽ bắt đầu hướng dẫn các bạn cài đặt và sử dụng WordPress căn bản.

WordPress căn bản 1: Cài đặt wordpress lên Localhost và Hosting

Bài này mình sẽ hướng dẫn các bạn download và cài đặt wordpress lên Localhost và Hosting để chạy trên internet. Ở bài trước mình đã giới thiệu qua các công cụ cần để chiến đấu với WordPress, bây giờ mình bắt đầu sử dụng những đồ nghề này để cài đặt wordpress.

1. Cài đặt wordpress lên localhost:

Như mình đã nói thì mình sẽ dùng Wamp làm Localhost của mình, các bạn thực hiện theo các bước sau:

B1: Khởi động Wampserver lên và vào thư mục “C:\wamp\www” tạo một folder có tên là wordpress chẳng hạn.

B2: Vào trang chủ wordpress.org để down bản mới nhất của WordPress về hiện tại là bản 3.8.

B3: Giải nén ra ta sẽ có folder wordpress, tiến hành copy tất cả những file và folder trong thư mục wordpress mới down về sau đó paste vào thư mục wordpress mình mới tạo ở “C:\wamp\www”.

B4: Vào trình duyệt đánh địa chỉ “http://localhost/phpmyadmin/” tiến hành tạo database như mình đã hướng dẫn ở bài trước.

B5: Truy cập vào địa chỉ http://localhost/wordpress để tiến hành cài đặt wordpress trên localhost, click vào “Create a Configuration File” -> “Let’s Go” để bắt đầu cấu hình chowordpress: “Database name” là tên database mà bạn đã tạo ở bước 4, username là “root” (không bao gồm dấu ” nhé các bạn), password để trống (mặc định wamp là vậy) -> click Submit để chuyển qua bước tiếp theo.

B6: Điền thông tin cơ bản cho website như:
Site title: tiêu đề website.
Username: tài khoản để quản trị.
Password: Mật khẩu để đăng nhập vào quản trị.
Your Emai: Email cho website của bạn.

Hướng dẫn cài đặt wordpress lên localhost

Click vào “Install WordPress” để hoàn tất nhé.

Như thế là chúng ta đã hoàn tất việc cài đặt WordPress lên Localhost, để truy cập vào trang quản trị các bạn vào địa chỉ “http://localhost/wordpress/wp-admin” để đăng nhập bằng tài khoản lúc nãy nha.

Giao diện admin của WordPress 3.8

2. Cài đặt wordpress lên Hosting:

Bài này mình hướng dẫn các bạn cài đặt wordpress lên hosting cPanel, cPanel hiện tại đang là số một với tính bảo mật rất cao và khá dễ sử dụng.

Bạn đăng nhập vào host (link đường dẫn vào cPanel sẽ được nhà cung cấp hosting cấp cho bạn thường nó sẽ là http://123.123.123.123:2082 hoặc http://123.123.123.123:2083 – 123.123.123.123 ở đây là ip của host của bạn tùy vào máy chủ mà có ip khác nhau), click vào File Manager để vào trình quản lý file, tiến hành up source code của wordpress lên host bằng cách là các bạn vào thư mục wordpress giải nén ra ban nãy, bấm ctrl + A để chọn tất cả các file trong thư mục -> click chuột phải lên vùng đã chọn -> add to archive … -> chọn dạng zip và click Ok để tiến hành nén source lại file zip.

Tiếp theo quay lại trang File Manager bạn sẽ thấy nút “Upload” click vào để bắt đầu up source, click “Browse…” và chọn file zip vừa nén lúc nãy, đợi upload xong, click back to …. để trở lại trang File Manager.

Tiếp đến chọn file vừa up lên host bấm nút Extract hoặc click chuột phải chọn Extract -> click Extract file như hình bên dưới.

Giải nén file zip trên host cpanel

Xong phần up source lên host giờ đến phần tạo database trên host để bắt đầu cài đặt wordpress trên hosting.

Các bạn quay lại trang chủ lúc nãy “http://123.123.123.123:2082″ click vào “MySQL® Databases” -> điền tên database vào “New Database:” -> Click create database. Xong kéo xuống dưới tại box “Add New User” điền thông tin Username và Passwords của database (thay vì trên localhost của ta là Root và Khoảng trắng thì ở đây ta tự tạo Username và Password để bảo mật cho website.) Click vào “Create User” để tạo User cho database.

Tiếp đến là add username vào database vừa tạo, các bạn kéo xuống dưới tí nữa có phần “Add User To Database” bạn chọn username và database mới tạo và bấm nút “Add”.

Vậy là ta đã hoàn tất việc tạo database và username cho database đó, cuối cùng ta vào địa chỉ tên miền của bạn có trên host mới up source lúc nãy để tiến hành cài đặt như cài đặt trên localhost. Ví dụ tên miền của mình là xuanthuc.com thì mình sẽ đánh xuanthuc.com trên trình duyệt giống như lúc nãy bạn đánh localhost/wordpress ở localhost vậy.

Chú ý: đối với một số host khác cPanel như Directadmin, Kloxo, … thì bạn sẽ gặp một số lỗi như không thể tạo được file wp-config, đối với trường hợp này thì wordpress sẽ báo cho bạn trong lúc cài và cho bạn nội dung file đó bạn chỉ cần vào File Manager lúc nãy bấm create file với tên là wp-config và paste nội dung lúc nãy vào save lại, hoặc tạo ở dưới máy tính rồi up lên ngang hàng với file index.php là được (là ở ngoài root luôn). Trong lúc sử dụng sẽ gặp một số lỗi đối với các loại host này, mình sẽ hướng dẫn khắc phục vào các bài cụ thể.

Bài tiếp theo mình sẽ hướng dẫn các bạn thiết lập một số thông số cần thiết, hướng dẫn sử dụng để tạo nội dung cho website.

Có bất cứ thắc mắc gì các bạn cứ việc comment bên dưới mình sẽ giải đáp giúp các bạn.

WordPress căn bản 2: Phát triển nội dung WordPress

Chào các bạn, ở bài viết này mình sẽ hướng dẫn các bạn thiết lập một số thứ cần thiết cho wordpress cũng như cách phát triển nội dung cho WordPress.

Các bạn truy cập vào http://localhost/wordpress/wp-admin (như bài trước mình đã hướng dẫn cài wordpress)

1. Thiết lập cơ bản cho website:

Setting -> General: tại đây có các thuộc tính như sau:
Site title: Tiêu đề của website nó là thẻ <title> trong html và được hiển thị trên trình duyệt, phần này khá là quan trọng cho SEO website.
Tagline: Đây chính là phần mô tả của website nó là thẻ meta Description trong html, chiều dài tốt nhất là dưới 140 ký tự, cố gắng chèn những từ khóa chính vào thẻ này nha.
WordPress Address: đây chính là địa chỉ website, nó dùng để thay đổi tên miền mỗi lần chuyển tên miền.
New User Default Role: đây chính là quyền hạn của thành viên đăng ký trên website của bạn, mặc định là người dùng bình thường, Author có thể Post bài, Administrator có toàn quyền giống tài khoản bạn tạo ban đầu.
Date Format: đây là định dạng ngày tháng khi hiển thị ra trang web.

Setting -> Reading: Tại đây có các thuộc tính như sau:
Front page displays: Đây là lựa chọn trang làm trang chủ, mặc định là các bài viết mới nhất, nếu muốn một Page cụ thể nào đó làm trang chủ ví dụ Page giới thiệu chẳng hạn thì click vào “A static page (select below) ” chọn Front Page là Page bạn muốn ra trang chủ.
Blog pages show at most: Đây là số lượng bài viết trên 1 trang trên trang chủ, mặc định là 10 bạn có thể tùy chỉnh.

Thiết lập căn bản cho WordPress

Setting -> Permalink: Đây là thiết lập đường dẫn cho bài viết, mặc định localhost không có Rewrite URL nên ta không thể thiết lập được trên localhost, nếu bạn dùng trên host thì có thể chọn những lựa chọn ở đây, mình thì mình chọn “Custom Structure” với nội dung thế này “/%postname%.html” thì bài viết của bạn sẽ có dạng thế này:http://xuanthuc.com/ten-bai-viet.html, link quá chuẩn đúng không các bạn :D.

2. Hướng dẫn tạo chuyên mục, đăng bài post, page lên WordPress:

Posts -> Categories: Add New Category dùng để tạo mới chuyên mục, với các thuộc tính như Name (Tên chuyên mục), Slug (Đường dẫn chuyên mục ví dụ: xuanthuc.com/ten-chuyen-muc), Parent (Chuyên mục cha), Desciption (Mô tả cho chuyên mục đó), Click “Add new category” để hoàn tất. Rê chuột vào từng chuyên mục bấm Edit để sửa chuyên mục, Delete để xóa chuyên mục đó.

Posts -> All Posts: Đây là danh sách tất cả các bài Posts của bạn, rê chuột vào bấm Edit để sửa bài viết.

Posts -> Add new: Dùng để thêm bài viết mới, điền tiêu đề bài viết, nội dung bài viết, muốn thêm hình ảnh cho bài viết thì các bạn click vào Add Media -> Upload files -> Select files chọn hình ảnh cần upload vào bài viết từ máy tính, ở đây có các thuộc tính như Caption (Là mô tả dưới hình ảnh), Alt Text (là thẻ mô tả hình ảnh, giúp công cụ tìm kiếm hiểu hơn về hình ảnh của bạn), chọn Alignment là Center, Size là Full size để hiển thị tốt hơn nhé. cuối cùng click “Insert to post” để chèn vào website.

Chọn chuyên mục cho bài viết tại Box Categories, thêm tag để giúp tạo liên kết nội tốt hơn cho website giúp SEO tốt hơn.

Cuối cùng thêm Featured Image để làm hình đại diện cho bài viết, Click Publish để hoàn tất việc đăng bài viết mới.

Ở đây thêm một tí là bạn có thể điều chỉnh lại ngày giờ post trong tương lai để hẹn giờ Posts bài bằng cách click vào nút Edit ngay sau “Publish immediately” để sửa.

Đối với Pages cũng tương tự như Post.

3. Một số thiết lập khác như:

Users: dùng để quản lý tài khoản quản trị, thành viên.

Comments: dùng để quản trị các bình luận trên website.

Plugins: Quản trị và thêm các Plugin cần thiết cho website (phần này mình sẽ hướng dẫn ở các bài sau).

Appearance: Đây có thể là phần mà bạn sẽ đụng đến nhiều nhất khi cài đặt và thiết lập cho wordpress, nó bao gồm các Theme (giao diện), Widget (các thành phần thêm vào cho website), Menu dùng để tạo Menu và quản lý vị trí menu trên trang web tùy vào từng giao diện, Editor là nơi quản lý code của các file trong giao diện như header.php, style.css, footer.php, …

Bài tiếp theo mình sẽ hướng dẫn các bạn cài đặt Theme, Plugin, Menu cho website.

WordPress căn bản 3: Cài đặt Themes, Plugin, Menu, Widget

Ở bài trước mình đã hướng dẫn các bạn Phát triển nội dung cho WordPress, ở bài này mình sẽ hướng dẫn tiếp các bạn về cài đặt Themes (Giao diện), Plugin (Các chức năng), Menu cho WordPress.

1. Cài đặt giao diện cho WordPress:

a. Đầu tiên mình sẽ hướng dẫn các bạn cài đặt giao diện có sẳn trên wordpress trong admincp luôn:

Phần này thì khá là đơn giản các bạn chỉ cần click vào Appearance -> Themes -> Add new -> Click vào nút Search (Ô đằng trước nó để trống để nó hiển thị tất cả các theme cho mình lựa chọn), click vào Preview để xem trước Themes đó, Click Install để bắt đầu cài đặt Theme -> Đợi ……….. -> Click Activate để kích hoạt theme, thế là xong quá trình cài đặt theme bằng theme có sẳn trên WordPress rồi, rất đơn giản đúng không nào.

Hướng dẫn cài đặt Theme cho WordPress

b. Hướng dẫn cài đặt Theme bằng file zip giao diện: Có 2 cách

C1. Đầu tiên các bạn down file giao diện tại đây, lưu ý rằng file giao diện luôn luôn là file zip chưa thư mục giao diện nhé, sau đó vào Appearance -> Themes -> Click tab Upload -> Click Browse chọn File Zip giao diện lúc nãy tải về, Click Install Now để bắt đầu cài đặt -> Click Activate để kích hoạt giao diện. Thế là xong cũng cực kỳ đơn giản đúng không nào. Tuy vậy có một số giao diện cài đặt khá phức tạp phải cần đến file document để có thể biết được cách cài đặt cho từng giao diện, thường là giao diện trả phí, nếu có khó khăn trong lúc cài giao diện các bạn cứ liên hệ mình nhé.

Cài đặt theme wordpress bằng file zip

C2. Cài đặt bằng cách giải nén file zip ra và copy folder vừa được giải nén vào thư mục sau: wp-content/themes/ sau đó vào admincp -> Appearance -> Themes tìm đến theme vừa copy vào và click Activate để kích hoạt theme.

2. Cài đặt Plugin cho wordpress:

Plugin một thứ không thể thiếu khi sử dụng WordPress, bây giờ mình sẽ hướng dẫn các bạn cài một plugin tiêu biểu để các bạn biết cách cài đặt plugin cho wordpress, mình sẽ có một bài viết riêng về các plugin cần thiết cho WordPress.

Bây giờ ta bắt đầu cài đặt Plugin cũng khá là phổ biến đó là “WP No Category Base”, plugin này có chức năng là làm mất đi “category” trong đường dẫn, nhằm tạo đường dẫn đẹp hơn cho website, ví dụ mặc định chuyên mục WordPress trên xuanthuc.com sẽ có link thế này http://xuanthuc.com/category/thu-thuat-wordpress nếu muốn link đẹp hơn thì cài plugin này vào sau khi cài nó sẽ như thế này http://xuanthuc.com/thu-thuat-wordpress quá chuẩn đúng không nào.

Nào chúng ta bắt đầu cài đặt plugin này thôi, nó rất đơn giản các bạn à, đầu tiên vào Admincp -> Plugins -> Add new -> Đánh vào ô tìm kiếm chữ “WP No Category Base” enter sẽ hiện ra danh sách các plugin chọn plugin đầu tiên, click Install Now để bắt đầu cài đặt -> Click Activate Plugin để kích hoạt plugin vừa cài, thế là xong rồi đó các bạn.

3. Cài đặt Menu cho website wordpress:

Menu là thứ cực kỳ quan trọng trong một trang web, nó không thể thiếu, nó giúp điều hướng người dùng cũng như giúp người dùng dễ dàng tìm kiếm những thứ mình cần trên website của bạn.

Tùy vào từng giao diện mà sẽ có 1 hoặc nhiều vị trí đặt menu khác nhau, các bạn vào Appearance -> Menus bạn sẽ thấy các thông số như Menu name (Tên menu), Menu Structure (đây chính là nơi chưa các item của menu), Page (là nơi chứa các page), Links (là nơi giúp bạn tạo các link tùy chỉnh ví dụ như bạn muốn thêm link của xuanthuc.com vào menu của bạn chẳng hạn :D), Categories (Đây là nơi quan trọng nhất của Menu, chứa các chuyên mục bạn đã tạo ở bài trước) việc của các bạn chọn các thứ mà bạn cần thêm vào Menu và click “Add to menu” để đưa qua menu, bạn có thể điều chỉnh vị trí của item bằng cách kéo thả lên xuống. Cuối cùng click vào Create Menu để hoàn tất tạo menu.

Hướng dẫn tạo menu cho wordpress

Dù vậy menu của bạn vẫn chưa được hiển thị, bạn phải thực hiện thêm một bước nữa đó là Click qua tab Manage Locations, chọn menu vừa được tạo và click Save Changes để hoàn tất.

Hướng dẫn thêm vị trí menu

4. Cài đặt Widget cho wordpress:

WordPress cũng là một phần không thể thiếu trên WordPress, hầu hết các theme của wordpress đều có phần sidebar cho phép chèn widget vào, với mục đích như thêm quảng cáo, mục bài viết mới, liên kết web, …

Cài đặt Widget cho wordpress cũng khá đơn giản để thực hiện, đầu tiên vào Appearance -> Widgets, bên trái là các widget có sẳn của WordPress và Theme hiện hành, bên phải là các vị trí Sidebar do theme quy định (phần này mình sẽ nói rõ hơn trong phần tự lập trình theme cho wordpress sắp tới). Việc còn lại của các bạn là cần gì thì kéo nó từ bên trái sang bên phải để hiển thị nó ra trang chủ mà thôi, ví dụ như mình kéo phần Calendar vào và click Save để hoàn tất như hình bên dưới.

Hướng dẫn tạo widget cho wordpress

Và đây là kết quả:

Xong, bài tiếp theo mình sẽ hướng dẫn các bạn Cài đặt các plugin cần thiết cho WordPress để có thể hoạt động tốt nhất, hỗ trợ SEO tốt nhất giúp trang web của bạn có được thứ hạng tốt trên Google và các công cụ tìm kiếm khác

WordPress căn bản 4: Những plugin hỗ trợ SEO tốt nhất cho WordPress

SEO (Search Engine Optimization) một thuật ngữ đã trở nên quen thuộc với các Webmaster Việt Nam trong thời gian vừa qua, SEO là một việc không thể thiếu đối với một trang web từ một blog cá nhân đến một website doanh nghiệp đều cần đến nó. Ở đây mình sẽ giới thiệu một số Plugin cần thiết cho WordPress để hỗ trợ SEO Onpage tốt nhất cho WordPress.

1. SEO Ultimate:

Đây là một Plugin khá phổ biến và gân như đầy đủ các tính năng SEO onpage cho một website WordPress, đôi khi chỉ cần nó là đủ để SEO. Các bạn download và cài đặt tại đây.

Đây là Plugin SEO chính mà Xuân Thức Blog đang sử dụng, vì những ưu điểm mà nó mang lại nên mình sẽ tập trung vào giới thiệu các tính năng của nó.

Khi các bạn cài đặt và kích hoạt plugin xong, thì admincp sẽ xuất hiện thêm một menu đó là SEO với hàng loạt các menu con với các tính năng hấp dẫn của Plugin này. Mình sẽ giới thiệu một số tính năng phổ biến và cần thiết nhất của Plugin.

Modules là nơi quản lý các tính năng của Plugin bạn có thể bật tắt tùy ý theo nhu cầu sử dụng của bạn. Mình bật hầu hết các tính năng chỉ riêng “Meta Keywords Editor” là mình không dùng, vì cái này không cần thiết cho SEO hiện tại.

404 Monitor là trang quản lý các link gảy (link không tồn tại), nó có một thuộc tính là trang giới thiệu đến link gảy đó để mình có thể biết được và khắc phục link gảy đó.

Deeplink Juggernaut một tính năng khá thú vị của SEO Ultimate, nó dùng để tạo liên kết tự động dựa vào dữ liệu mình nhập vào (ví dụ mình tạo một anchor text là seo và link là http://xuanthuc.com/thu-thuat-seo, thì khi mình tạo bài viết mới có từ khóa SEO nó sẽ tự động chèn link đó vào từ khóa đó, tuy nhiên bạn không nên lạm dụng quá việc này mà hãy sử dụng một cách khôn ngoan nhé.).

Tự động chèn link đã chỉ định vào nội dung WordPress

File Editor dùng để quản lý nội dung file Robots.txt và .htaccess, hai file này mình sẽ có một bài viết riêng nói rõ hơn về công dụng của nó và cách tối ưu tốt nhất cho WordPress.

Meta Description Editor là một trong những tính năng quan trọng nhất của Plugin này, chức năng của nó là hỗ trợ thêm Description vào Homepage, Posts, Page, Tag, Category hầu như tất cả mọi thứ, giúp công cụ tìm kiếm có thể cache bài viết nhanh hơn, chèn keyword chính vào mô tả cũng là cách SEO khôn ngoan.

Title Tag Rewriter cũng là một tính năng cực kỳ hữu ích cho website của bạn, nó hỗ trợ tùy chỉnh tiêu đề của hầu hết mọi thứ trên website WordPress của bạn.

Một tính năng rất tiện lợi nữa của WordPress đó là Plugin hỗ trợ bạn trong lúc tạo Posts có thêm một box là SEO Settings, giúp bạn tạo Title, Description một cách nhanh nhất bao gồm bộ đếm giúp bạn có được tiêu đề và mô tả tối ưu.

Tính năng Plugin SEO Ultimate cho WordPress

Cuối cùng là một chức năng thầm lặng và rất lợi hại của SEO Ultimate đó là nó tự động tạo cho mình các thẻ meta property, thẻ canonical giúp định danh đường dẫn chính cho webpage.

2. Simple Google Sitemap XML:

Đây là plugin hỗ trợ tạo sitemap.xml để add vào Google Webmaster Tools giúp Google index các link trên website nhanh hơn.

Các bạn tải và cài đặt plugin này tại đây, sau khi cài đặt và kích hoạt plugin thì admincp sẽ có thêm “Google Sitemap XML” tại Settings, các bạn thiết lập các thông số lại như sau:

– “Where do you want to store your XML file ?” chọn “In my website’s root folder” để đưa file sitemap.xml ra ngoài root nhằm tạo đường dẫn sitemap như thế này http://xuanthuc.com/sitemap.xml, để tiện cho việc sử dụng, ở một số lĩnh vực website đòi hỏi phải dấu kín các file sitemap.xml nhằm đảm bảo độ bảo mật của thông tin website thì ta không thực hiện bước này.

– Nếu bạn muốn tạo sitemap cho cả category và tag thì các bạn chọn “include” cho các mục tương ứng bên dưới, cuối cùng click “Save changes” để hoàn tất.

3. Nofollow for external link:

Plugin này giúp tạo thẻ rel=”nofollow” cho các link ngoại (không phải link trang web của bạn), nhằm ngăn các công cụ tìm kiếm đi theo liên kết đó giúp giảm tị lệ link out cho website của mình, và các bot tìm kiếm lưu lại trên site lâu hơn.

Các bạn chỉ cần cài Plugin này vào là xong, download và cài đặt tại đây

Và một số Plugin có chức năng tương tự như: All in One SEO Pack, WordPress SEO by Yoast, …

Kết luận: Plugin chỉ là công cụ hỗ trợ, cái cốt ở đây là bạn sử dụng nó như thế nào để có được kết quả tốt nhất, các bạn nên tìm hiểu về thêm về SEO từ căn bản đến nâng cao tại Thủ thuật SEO

Bài tiếp theo mình sẽ giới thiệu các bạn các Plugin cần thiết cho một website WordPress và công dụng của nó.

Tạo Theme WordPress: Giới thiệu tạo Theme WordPress Responsive

Chào các bạn đã trở lại với Serie học WordPress từ A – Z của Xuân Thức Blog, Trong serie con lần này mình xin hướng dẫn các bạn tự thiết kế theme dành cho wordpressdạng Responsive.

Theme Responsive dường như nó đã quá quen thuộc với một số Developer, nó là một dạng giao diện hỗ trợ trên các loại màn hình khác nhau từ Mobile, Tablet đến Desktop. Vì nhu cầu sử dụng các loại Smart Phone, Tablet ngày càng nhiều và dẫn chiếm lĩnh thị tường internet nên việc thiết kế ra một giao diện Responsive là một điều hết sức cần thiết đối với một người thiết kế web.

Trong Serie này mình sẽ hướng dẫn các bạn tạo một Theme responsive wordpress từ căn bản nhất giúp các bạn chưa biết gì về lập trình cũng có thể tự tạo Theme wordpressđộc quyền cho mình.

Nếu bạn cảm thấy Serie này hấp dẫn thì bạn có thể share cho nhiều người cùng đọc nha, đăng ký theo dõi Blog Xuân Thức để không bỏ qua bài viết nào trong Serie này nha, các bạn có thể xem hướng dẫn đăng ký nhận bài mới trên Xuân Thức Blog để dễ dang hơn trong việc đăng ký.

Tự tạo theme wordpress responsive

Mục lục bài viết trong Serie này:

1. Cài đặt và cấu hình SubLime Text 2 và Prepros.

2. Dựng trang HTML cho Theme WordPress.

3. Tạo CSS tổng quan cho Theme.

4. Tạo CSS cho màn hình Mobile.

5. Tạo CSS cho màn hình Tablet.

6. Tạo CSS cho màn hình Desktop.

7. Giới thiệu về cấu trúc WordPress và cách vận hành của WordPress.

8. Nhúng Theme vào Website WordPress (sẽ được chia làm nhiều phần nhỏ).

Bài tiếp theo mình sẽ giới thiệu và hướng dẫn các công cụ cần thiết để tự tay thiết kế một theme wordpress responsive hoàn chỉnh và chuẩn SEO.

Worpress căn bản 5: Những plugin cần thiết cho wordpress

Ở bài trước mình đã giới thiệu qua 3 plugin hỗ trợ cho SEO tốt nhất dành cho WordPress, bài này cũng là bài cuối trong phần WordPress căn bản mình sẽ giới thiệu thêm một sốPlugin cần thiết dành cho WordPress.

Những plugin cần thiết cho WordPress

1. Limit Login Attempts:

Đây là Plugin cần thiết để giúp website của bạn bảo mật tốt hơn, nhờ vào việc tạo một lớp bảo vệ trang admincp của bạn bằng cách giới hạn số lần đăng nhập sai trên trang admin. Bạn có thể tùy chỉnh số lần cho phù hợp tùy ý bạn.

Các bạn có thể download và cài đặt tại đây

2. WP No Category Base:

Đây là Plugin giúp bạn tạo một đường dẫn chuyên mục đẹp hơn, mặc định WordPress sẽ có đường dẫn chuyên mục thế này http://xuanthuc.com/category/thu-thuat-wordpress khi cài Plugin này vào thì đường dẫn bạn sẽ trở nên đẹp hơn là http://xuanthuc.com/thu-thuat-wordpress.

Các bạn có thể download và cài đặt tại đây

3. Facebook Comments:

Facebook mạng xã hội lớn nhất hiện nay, việc thêm một comment facebook đối với một số website nó thực sự cần thiết ví dụ như trang bán hàng chẳn hạn, nó giúp người dùng không cần phải đăng nhập cũng có thể comment nhờ có tài khoản facebook.

Các bạn có thể download và cài đặt tại đây

4. Sharebar:

Đây cũng là một plugin tiện ích và khá hiệu quả cho website của bạn, giúp tạo một thanh gồm các nút +, share, like chạy trượt theo website, giúp cho người dùng tiện trong việc +, like nhằm tăng điểm SEO cho website.

Các bạn download tại đây

5. Askimet:

Mặc định nó được cài sẳn khi cài đặt WordPress rồi, vì nó rất quan trọng cho một website WordPress, nó giúp cho website của bạn tránh các spam comment từ các công cụ auto spam của nước ngoài đặc biệt là nước Nga, cái nôi của Spam :D.

Bạn cần phải có Key API của WordPress để kích hoạt Plugin này, bạn vào đây để đăng ký và nhận Key nhé hoàn toàn miễn phí nhé.

6. WP-PageNavi:

Là một Plugin cũng khá quan trọng đối với WordPress, mặc định wordpress phân trang dạng (trang trước, trang sau), Plugin này giúp bạn tạo các trang cụ thể như trang 1, 2, 3 với các định dạng khá đẹp.

Các bạn có thể download tại đây

7. Breadcrumb NavXT:

Plugin này giúp tạo Breadcrumb cho bài viết dạng như thế này “Trang chủ >> WordPress >> Hướng dẫn cài đặt WordPress” cái này cũng khá quan trọng trong SEO.

Các bạn download tại đây

Các Plugin trên cộng với 3 Plugin mình đã giới thiệu ở bài trước, mình tin là đã khá đầy đủ để website bạn hoạt động một cách hiệu quả, còn tùy vào đặc thù của mỗi lĩnh vực mà cần những plugin khác nhau, các bạn hãy cân nhắc và sử dụng plugin cho phù hợp nhé, vì cài nhiều plugin quá sẽ dẫn website của bạn trở nên nặng nề hơn đây.

Chúc các bạn thành công, bài viết tiếp theo của “Đại Serie” này là một Serie nhỏ nữa đó là tự tạo theme cho wordpress, phần mà hứa hẹn sẽ rất thú vị, các bạn đón theo dõi nhé.

Tạo Theme WordPress 1: Hướng dẫn cài đặt Sublime Text 2 và PrePros

1. Giới thiệu Sublime Text 2:

Sublime Text 2 là một công cụ hỗ trợ lập trình mà mình nghĩ là hỗ trợ tốt nhất để viết WordPress nhờ các plugin đi kèm, ưu điểm của nó là nhẹ khởi động nhanh và dễ sử dụng.

Nó có thể tự hoàn thành hàm trong hầu hết các hàm của wordpress nhờ vào Plugin WordPress của Sublime Text 2, ngoài ra nó còn tự động sinh ra các hàm hỗ trợ trên nhiều trình duyệt cho một số hàm trong css mình sẽ giới thiệu kỹ hơn trong phần hướng dẫn về Plugin.
2. Hướng dẫn cài đặt Sublime Text 2:

Trước tiên các bạn truy cập vào trang download của sublime text 2 tại đây và tiến hành download phù hợp với hệ điều hành mà bạn đang sử dụng, có thể download bản portable về chạy luôn khỏi cài đặt.

Hướng dẫn download Sublime Text 2

Và đây là giao diện khi khởi động Sublime Text 2:

Phần mềm Sublime Text 2

Các bạn có thể thiết lập lại màu nền của trình soạn thảo bằng cách: Preferences -> Color Scheme -> Chọn màu nền phù hợp với mắt nhìn của mình sao cho cảm thấy dễ nhìn nhất là được.
3. Hướng dẫn cài đặt Plugin cho Sublime Text 2:

Đầu tiên ta cài đặt plugin cực kỳ quan trọng đó là Package Control, Plugin này dùng để cài đặt các Plugin cần thiết khác lên Sublime Text 2, bằng cách vào menu View -> Show Console và chèn đoạn code này vào textbox vừa xuất hiện.

1
import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

Click Enter và đợi cho hoàn tất việc cài đặt khi nào các bạn thấy thông báo “Sublime Text to finish installation’) Please restart Sublime Text to finish installation” nghĩa là đã thực hiện cài đặt thành công Plugin, các bạn khởi động lại Sublime Text 2 để Plugin có hiệu lực.

Thứ 2 là cài đặt các Plugin bằng Package Control: Để cài đặt plugin cho Sublime Text 2 thông qua Package Control ta vào Tool -> Command Palette… hoặc bấm tổ hợp phím Ctrl + Shift + P, một hộp thoại sẽ xuất hiện các bạn đánh install và enter để vào trang danh sách các plugin hiện có, đánh tên các plugin cần thiết enter để cài đặt.

WordPress: Đây là Plugin quan trọng nhất để viết WordPress, nó hỗ trợ gần như đầy đủ các hàm trong WordPress, ví dụ như bạn gõ “wp_nav_menu” gõ chưa xong bạn đã thấy nó gợi ý rồi và chỉ cần enter là coi như tất tần tật các tham số đều được show ra hết bạn chỉ việc sửa lại giá trị là xong, quá tiện lợi đúng không nào, phpDesigner cũng có hỗ trợ gợi ý nhưng ko có tự liệt kê danh sách các tham số như thằng Sublime Text 2.

Plugin WordPress Trong Sublime Text 2

Prefixr: Plugin này giúp các bạn tự hoàn thiện các đoạn code css giúp hỗ trợ thuộc tính đó trên nhiều trình duyệt, bằng cách bôi đen đoạn lệnh css đó và bấm tổ hợp phím “Ctrl + Alt + X” để hoàn thành. Ví dụ như đoạn code sau:

1
2
-webkit-box-shadow: 3px 3px 3px #dcdcdc;
box-shadow: 3px 3px 3px #dcdcdc;

Color Picker: Đây là Plugin giúp bạn tạo một bảng mã màu hỗ trợ ngay trên Sublime Text 2 giúp bạn không phải mất thời gian lên mạng tìm mã màu hoặc là dùng Photoshop để lấy mã màu. Khi cài đặt xong các bạn muốn lấy mã màu chỉ cần click tổ hợp phím “Ctrl + Shift + C” và chọn màu mình muốn thêm click ok là xong.

Hướng dẫn Plugin Color Picker Sublime Text 2

Với 3 Plugin trên thì mình nghĩ cũng đủ để làm một theme wordpress một cách nhanh chóng rồi.
4. Giới thiệu phần mềm PrePros:

Đây là phần mềm giúp hỗ trợ viết css bằng ngôn ngữ Less, nó giúp cho chúng ta viết CSS một cách nhanh và chuẩn nhất, ví dụ như ta có khá là nhiều các class con trong các thẻ div mỗi lần muốn viết class con cho một div nào đó ta lại phải đánh dạng như thế này: “.class1 .class2 .class3 ul li a{color: #fff}” như thế chúng ta có tầm 10 class con thì ta phải copy dán 10 lần như thế, thay vì đối với ngôn ngữ PrePros thì chúng ta chỉ cần đánh như sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.class1{
.class2{
.class3{
ul{
list-style: none;
li{
a{
color: #fff;
&:hover{
color#F9156A;
}
}
}
}
}
.class3-1{
a{
text-decoration: none;
}
}
}
}

Như vậy khi ta muốn viết bất cứ một lớp con nào thì chỉ cần chèn ngay trong lớp mẹ tự động thằng PrePros nó biên dịch ra css cho các bạn.

Ngoài ra phần mềm này còn có thể bắt lỗi cú pháp, biên dịch ra CSS theo chuẩn SEO.
5. Hướng dẫn cài đặt PrePros:

Các bạn download Prepros tại đây và cài đặt vào máy tính, sẽ có giao diện như thế này

Phần mềm PrePros
6. Hướng dẫn sử dụng phần mềm PrePros:

Khởi động PrePros lên và click vào dấu “+” (Add new Project) trên menu của phần mềm để bắt đầu chọn đường dẫn đến folder chưa các file .less mà chúng ta tạo ra để viết CSS.

Lưu ý: Khi đang mở phần mềm PrePros nếu như bạn thêm bất cú file .less nào vào folder đã add project thì bạn vào PrePros click Refresh để file đó được thêm vào PrePros nha, bằng cách click vào hình mũi tên xoay vòng ở góc trái dưới cửa sổ PrePros.

Hướng dẫn sử dụng phần mềm Prepros

Xong phần chuẩn bị 2 phần mềm hỗ trợ đắc lực cho việc viết một Theme WordPress, bài tiếp theo chúng ta sẽ bắt tay vào việc viết HTML cho một Theme WordPress.

Tạo Theme WordPress 2: Dựng trang HTML cho Trang Web

Trong bài viết này mình sẽ hướng dẫn các bạn dựng sườn của theme wordpress bằng html cho trang chủ, trang con ta có thể lấy lại trang chủ và sửa phần nội dung lại.

Mình sẽ dựa vào chính trang chủ của mình để làm ví dụ cho các bạn dễ hình dung nha.

Một trang web thông thường có 3 phần chính đó là header, wrapper, footer. Các thành phần con như sau:
Header: Site Title hoặc Logo, Header Banner, Menu.
Wrapper: Nội dung chính, Sidebar.
Footer: Thông tin trang web.

Trong theme sẽ sử dụng các thẻ <div> để chứa các thành phần của trang web kèm theo các class hoặc id của nó. Dựa vào các thông tin trên ta có một sườn như sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html>
<head>
<title>Xuân Thức Blog</title>
</head>
<body>
<header id="header">
<div class="top-menu">

</div>
<div class="site-title">
<div class="logo"></div>
<div class="top-banner"></div>
</div>
<div class="header-menu">

</div>
</header>
<div id="wrapper">
<div class="main-content">

</div>
<div class="sidebar">

</div>
</div>
<footer class="footer">
<div class="footer-logo"></div>
<div class="footer-info">

</div>
</footer>
</body>
</html>

Giờ ta bắt đầu xây dựng HTML đầy đủ cho theme.

Code phần header gồm có top menu, site-title và header-menu trong đó header-menu là dạng menu đa cấp trong trường hợp này thì menu WordPress có các menu con làWordPress Development, …:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<header id="header">
<div class="top-menu">
<ul>
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Giới thiệu</a></li>
<li><a href="#">Liên hệ</a></li>
<li><a href="#">Gửi bài</a></li>
</ul>
</div>
<div class="site-title">
<div class="title"><h1>Xuân Thức Blog</h1></div>
<div class="top-banner"><img src="http://xuanthuc.com/images/banner/dang-ky-feedburner.jpg"></div>
</div>
<div class="header-menu">
<a href="#" class="mobile-menu">Menu</a>
<ul>
<li><a href="#">Trang chủ</a></li>
<li>
<a href="#">Wordpress</a>
<ul>
<li><a href="#">Wordpress Development</a></li>
<li><a href="#">Wordpress Theme</a></li>
<li><a href="#">Wordpress Plugin</a></li>
</ul>
</li>
<li><a href="#">Design</a></li>
<li><a href="#">Dịch vụ</a></li>
</ul>
</div>
</header>

Dựng HTML cho theme wordpress

Phần Wrapper gồm có 2 phần chính đó là main-content và sidebar, trước tiên ta tạo code cho phần main-content (trong phần này gồm có featured-posts và danh sách các bài mới):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<div class="main-content">
<div class="featured_cont">
<div class="featured_posts">
<div class="featured-title">Thủ Thuật WordPress</div>
<div class="posts-title">Giới thiệu lịch sử WordPress</div>
<div class="thumb"><img src="images/wordpress.jpg"></div>
<div class="posts-exceprt">WordPress xuất hiện đầu tiên vào năm 2003 chỉ với mục đích là để cho người dùng viết Blog với số lượng người dùng lúc bấy giờ chỉ vọn vẹn đếm trên đầu ngón tay và ngón chân, và nó đã phát triển mạnh cho đến ngày nay và trở thành mã nguồn lớn nhất</div>
<div class="posts-item">
<ul>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
</ul>
</div>
</div>
</div>
<div class="featured_cont">
<div class="featured_posts">
<div class="featured-title">Thủ Thuật WordPress</div>
<div class="posts-title">Giới thiệu lịch sử WordPress</div>
<div class="thumb"><img src="images/wordpress.jpg"></div>
<div class="posts-exceprt">WordPress xuất hiện đầu tiên vào năm 2003 chỉ với mục đích là để cho người dùng viết Blog với số lượng người dùng lúc bấy giờ chỉ vọn vẹn đếm trên đầu ngón tay và ngón chân, và nó đã phát triển mạnh cho đến ngày nay và trở thành mã nguồn lớn nhất</div>
<div class="posts-item">
<ul>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="posts">
<div class="post-title"><a href="#">Giới thiệu lịch sử WordPress</a></div>
<div class="thumb"><a href="#"><img src="images/wordpress.jpg"></a></div>
<div class="posts-exceprt">WordPress xuất hiện đầu tiên vào năm 2003 chỉ với mục đích là để cho người dùng viết Blog với số lượng người dùng lúc bấy giờ chỉ vọn vẹn đếm trên đầu ngón tay và ngón chân, và nó đã phát triển mạnh cho đến ngày nay và trở thành mã nguồn lớn nhất</div>
</div>
<div class="posts">
<div class="post-title"><a href="#">Giới thiệu lịch sử WordPress</a></div>
<div class="thumb"><a href="#"><img src="images/wordpress.jpg"></a></div>
<div class="posts-exceprt">WordPress xuất hiện đầu tiên vào năm 2003 chỉ với mục đích là để cho người dùng viết Blog với số lượng người dùng lúc bấy giờ chỉ vọn vẹn đếm trên đầu ngón tay và ngón chân, và nó đã phát triển mạnh cho đến ngày nay và trở thành mã nguồn lớn nhất</div>
</div>
<div class="posts">
<div class="post-title"><a href="#">Giới thiệu lịch sử WordPress</a></div>
<div class="thumb"><a href="#"><img src="images/wordpress.jpg"></a></div>
<div class="posts-exceprt">WordPress xuất hiện đầu tiên vào năm 2003 chỉ với mục đích là để cho người dùng viết Blog với số lượng người dùng lúc bấy giờ chỉ vọn vẹn đếm trên đầu ngón tay và ngón chân, và nó đã phát triển mạnh cho đến ngày nay và trở thành mã nguồn lớn nhất</div>
</div>
<div class="posts">
<div class="post-title"><a href="#">Giới thiệu lịch sử WordPress</a></div>
<div class="thumb"><a href="#"><img src="images/wordpress.jpg"></a></div>
<div class="posts-exceprt">WordPress xuất hiện đầu tiên vào năm 2003 chỉ với mục đích là để cho người dùng viết Blog với số lượng người dùng lúc bấy giờ chỉ vọn vẹn đếm trên đầu ngón tay và ngón chân, và nó đã phát triển mạnh cho đến ngày nay và trở thành mã nguồn lớn nhất</div>
</div>
</div>
</div>
[/htnl]

Những thẻ html trên cũng khá là dễ hiểu nên mình không giải thích qua nữa. Giờ đến phần Sidebar:

[html]
<div class="sidebar">
<div class="sidebar-item">
<div class="widget-title">Bài viết mới nhất</div>
<div class="textwidget">
<ul>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
</ul>
</div>
</div>
<div class="sidebar-item">
<div class="widget-title">Bài viết mới nhất</div>
<div class="textwidget">
<ul>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
</ul>
</div>
</div>
</div>

Ở đây mình dùng thẻ div class=”textwidget” vì mặc định thằng WordPress khi tạo Widget là nó chưa thẻ này trong phần nội dung của widget đó. Mình định dạng trước cho tiện.

Tiếp theo là phần cuối cùng, phần Footer cho trang web, phần này chủ yếu là để chứa thông tin website, liên hệ …

1
2
3
4
5
6
7
<footer class="footer">
<div class="footer-logo">Xuân Thức Blog</div>
<div class="footer-info">
XuanThuc Blog Copyright© 2013 - Chuyên trang chia sẻ kiến thức về Thiết Kế Web và Lập Trình Ứng Dụng<br>
(Nếu copy bất kỳ bài viết nào trên XuanThuc Blog vui lòng để lại nguồn để tôn trọng tác giả)
</div>
</footer>

Tạm thời để cái trang giao diện nó xấu vậy nhé, bài sau mình sẽ hướng dẫn trang điểm cho em nó đẹp hơn lộng lẫy hơn, các bạn có thể download source của bài này tại đây.

Tạo Theme WordPress 3: Viết CSS thành phần chính cho HTML

Ở bài trước chúng ta đã hoàn thành xong sườn của theme bằng html rồi, bây giờ chúng ta bắt đầu xác định các thành phần chính của website và viết css cho những phần chung cho các kích thước màn hình khác nhau.

Các bạn nhìn vào trang chủ Xuân Thức Blog sẽ thấy các phần chung dành cho các loại màn hình như sau:
Màu background, màu chữ, màu hover, border.
Màu Background của Site Title.
Màu background của trang web.
Màu background của Featured Posts và các posts.
Sidebar.
Màu background của Footer, màu chữ, màu hover.

Nào chúng ta bắt đầu vào xây dựng CSS thôi, trước tiên các bạn tạo một file style.less ngang hàng với file index.html và bổ sung thêm vào thẻ <head> của index.html đoạn sau để gọi file style.css (style.css được sinh ra khi bạn save file style.less – với điều kiện là phần mềm Prepros phải được mở nha).

1
2
<link rel="stylesheet" href="normalize.min.css" /> 
<link rel="stylesheet" type="text/css" href="style.css" media="screen, projection" />

Bắt đầu viết nội dung cho file style.less, trước tiên bạn thêm đoạn này vào đầu file style.less:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
body {
font-size: 93.8%;
line-height: 1.5em;
background-color: #EFEFEF;
font-family: Helvetica, Arial, sans-serif;
margin: 0;
}
a {
color: #1e4684;
text-decoration: none;
}
a:hover {
color: #ed1b2d;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

Một số thông giải thích như sau:
font-size: 93.8%; ở đây nghĩa là ta đưa tỷ lệ của đơn vị em = 15px cho dễ tính, mặc định nó là 16.
line-height: 1.5em; là khoảng cách giữa các dòng văn bản với nhau.
background-color: #EFEFEF; là màu nền của trang web.
a và hover chắc các bạn cũng đã biết đó là thiết lập cho link và khi rê chuột vào link.
before, after là để set cho các trình duyệt khác như IE chẳng hạn khỏi bị tràn chữ ra ngoài khung.
Tiếp đến ta viết CSS cho phần Header:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#header{
width: 100%;
.top-menu{
margin: 0;
height: 2em;
background: #000;
ul{
margin: 0;
list-style: none;
li{
display: inline;
a{
color: #fff;
}
}
}
}
.site-title{
background: #49B3EB;
.title{
h1{
margin: 0;
a{
color: #FF8040;
}
}
}
}
.header-menu{
background: #858585;
}
}

Ở phần này có một số thông số đáng chú ý đó là:
margin: 0; trong thẻ ul để canh lề lại cho thẻ này vì thẻ này mặc định nó bị đẩy vào.
list-style: none; lệnh này dùng để bỏ các dấu chấm đen đằng trước mỗi item của list.
display: inline; lệnh này dùng để đưa các phần từ về cùng một hàng thay vì nó dạng cột như mặc định.
Tiếp đến là viết CSS cho phần Wrapper:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
#wrapper{
.main-content{
.featured_cont{
margin: 5px;
border: 1px solid #d6d6d6;
border-radius: 3px;
box-shadow: 3px 3px 3px #dcdcdc;
.featured_posts{
background: #fff;
margin: 2px;
border-radius: 2px;
.featured-title{
background: #3C78E8;
text-align: center;
font-weight: bold;
color: #fff;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.posts-title{
padding-left: 5px;
font-weight: bold;
}
.thumb{
img{
border: 1px solid #dcdcdc;
}
}
.posts-exceprt{
padding: 5px;
}
.posts-item{
ul{
margin: 0;
list-style: none;
li{
padding-left: 18px;
background: url("images/list-icon.png") left no-repeat;
}
}
}
}
}
.content{
.posts{
background: #fff;
border: 1px solid #d6d6d6;
border-radius: 3px;
margin: 5px;
box-shadow: 3px 3px 3px #dcdcdc;
padding: 5px;
.post-title{
a{
font-weight: bold;
font-size: 18;
}
}
.thumb{
img{
border: 1px solid #dcdcdc;
}
}
.posts-exceprt{
padding: 5px;
}
}
}
}
.sidebar{
.sidebar-item{
background: #fff;
border-radius: 4px;
border: 1px solid #dcdcdc;
.widget-title{
background: #3C78E8;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
text-align: center;
font-weight: bold;
color: #fff;
}
.textwidget{
ul{
margin: 0;
list-style: none;
li{
padding-left: 18px;
background: url("images/list-icon.png") left no-repeat;
}
}
}
}
}
}

Các thông số đáng chú ý trong phần Wrapper:
border: 1px solid #d6d6d6; lệnh này dùng để tạo đường viền độ dày 1 pixel cho div với màu là #d6d6d6.
border-radius: 3px; thẻ này dùng để bo góc 3px cho div đó.
box-shadow: 3px 3px 3px #dcdcdc; lệnh này dùng để đổ bóng cho div.
background: url(“images/list-icon.png”) left no-repeat; lệnh này trong li dùng để tạo background bên trái cho item.
Cuối cùng là viết CSS cho phần Footer:

1
2
3
4
5
6
7
8
9
10
11
#footer{
background: #5C5C5C;
border-top: 3px solid #FF0606;
.footer-logo{
color: #fff;
font-size: 18;
}
.footer-info{
color: #272727;
}
}

Hoàn tất ta sẽ được tương tự như thế này:

Hướng dẫn Viết CSS cho HTML

Ở bài trước mình có nhầm tí là id=”footer” nhưng mình để là class=”footer” các bạn sửa lại nhé, mời các bạn download bản mới dành cho bài này tại đây, phần sau mình sẽ hướng dẫn viết CSS dành cho giao diện mobile.

Tạo Theme WordPress 4: Viết CSS cho giao diện Mobile
Lời đầu tiên cho mình xin cáo lỗi với các bạn là trong thời gian nghỉ tết do ăn chơi dữ quá nên không biết bài mới được, bây giờ mình mới tiếp tục viết bài cho Serie WordPress Toàn Tập này.

Để có thể review trang web trên các loại thiết bị như mobile, tablet, … ta dùng công cụ sau đây để test trang web ngay trên trình duyệt Firefox. Vàohttp://lab.maltewassermann.com/viewport-resizer/ click và giữ chuột button “CLICK OR BOOKMARK” kéo vào bookmark toolbar của Firefox, sau đó vào website cần kiểm tra và bấm vào Bookmark vừa được tạo là “<->Resizer” để kiểm tra từng kích thước màn hình khác nhau.

Nào chúng ta bắt đầu Viết CSS cho Mobile, trước tiên bạn thêm đoạn code sau vào trước thẻ </head> của file index.html.

1
2
3
4
5
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="css/mobile.css" media="screen and (min-width: 18.750em)" />
<link rel="stylesheet" type="text/css" href="css/small-tablet.css" media="screen and (min-width: 600px)" />
<link rel="stylesheet" type="text/css" href="css/tablet.css" media="screen and (min-width: 768px)" />
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="screen and (min-width: 1024px)" />

Dòng đầu tiên là để kích hoạt chế độ Responsive của giao diện, các dòng tiếp theo là chèn lần lượt các file css cho riêng từng loại màn hình vào giao diện.

Tiếp đó ta tạo file mobile.less trong thư mục css ta tạo lúc ban đầu, đừng quên bật Prepros nhé, tạo xong quay lại Prepros bấm Refresh để file mobile.less được cập nhật vào phần mềm.

Ta vừa làm vừa mở tool Resizer để check cho tiện, hiện tại giao diện nó sẽ như thế này:

Giao diện hiện tại chạy trên Mobile

Bắt đầu viết những dòng code đầu tiên trong file mobile.less, sau đây là đoạn code dùng để thiết lập một số thuộc tính chung cho giao diện mobile, các bạn sẽ viết code tại /* Viết code CSS tại đây */

1
2
3
@media screen and (min-width: 18.75em) {
/* Viết code CSS tại đây */
}

Ta bắt đầu viết CSS cho phần Header trước, code phần header như sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#header{
.top-menu{
ul{
padding-top: 3px;
li{
padding-right: 5px;
}
}
}
.site-title{
.title{
text-align: center;
padding: 5px 0;
}
.top-banner{
text-align: center;
padding-bottom: 3px;
img{
width: 98%;
}
}
}
.header-menu{
padding-top: 10px;
min-height: 3em;
a.mobile-menu{
background: #dcdcdc;
margin-left: 40%;
border: 2px solid #FF0000;
padding: 5px;
border-radius: 3px;
}
}
}

Ở phần này đáng chú ý đó là phần Header Menu, tại giao diện Mobile thì không thể nào làm menu với nhiều thuộc tính như vậy được nên ta tạo một nút Menu và sẽ viết một đoạn jQuery đơn giản để ẩn đi danh sách các menu để lại nút Menu khi click vào nút Menu sẽ hiển thị danh sách các item của Menu. jQuery được thực hiện như sau.

Trước tiên ta tạo một folder ngang hàng với index.html tên là “js” và tạo một file jquery.js với nội dung như sau:

1
2
3
4
5
6
$(document).ready(function(){
$('.header-menu > ul').hide();
$('a.mobile-menu').click(function(){
$('.header-menu > ul').slideToggle(100);
});
});

Thêm code sau vào trước thẻ :

1
2
3
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/jquery.js"></script>

Phần Wrapper không thay đổi, Code Footer có nội dung như sau:

1
2
3
4
5
#footer{
.footer-logo{
text-align: center;
}
}

Giao diện cuối cùng sẽ như thế này:

Viết CSS cho giao diện Mobile

Các bạn download code đầy đủ tại đây
Bài tiếp theo mình sẽ hướng dẫn các bạn viết CSS cho giao diện Tablet.

Tạo Theme WordPress 5: Viết CSS cho giao diện Tablet

Ở bài trước chúng ta đã làm xong Viết CSS cho giao diện mobile đến bài này mình sẽ hướng dẫn các bạn viết CSS cho Tablet.

Ở đây mình xét 2 loại thiết bị đó là Small Tablet (600×800) và Tablet (ipad 2, 3, mini) (768×1024).

Đối với Small Tablet ta không có chỉnh sửa gì vì với kích thước chiều ngang như thế không thể đổ sidebar lên được, ta sẽ tiến hành viết css cho Tablet, trước tiên tạo file tablet.less trong thư mục css (nhớ vào prepros để Fresh project lại nhé các bạn).

Các bạn viết CSS vào trong đoạn code sau:

1
2
3
@media screen and (min-width: 768px) {
/* Viết code CSS tại đây */
}

Phần header ta vẫn giữ nguyên, ta bắt đầu xử lý phần Wrapper ở giao diện Tablet ta sẽ chia phần này thành 2 phần đó là danh sách các bài viết mới và sidebar.

Sau đây là đoạn code css cho phần Wrapper và Footer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@media screen and (min-width: 768px) {
/* Viết code CSS tại đây */
#wrapper{
.main-content{
width: 69%;
float: left;
.featured_cont{
width: 48%;
float: left;
}
.posts{
clear: both;
}
}
.sidebar{
width: 29%;
float: right;
margin: 6px;
.sidebar-item{
margin-bottom: 4px;
box-shadow: 3px 3px 3px #dcdcdc;
}
}
}
#footer{
clear: both;
}
}

Đa số các thuộc tính css này mình đã giải thích ở các bài trước nên chắc nó cũng đơn giản dễ hiểu phải không nào.

Giao diện kết quả sẽ như thế này:

Viết CSS cho giao diện Tablet

Các bạn download code đầy đủ của bài này tại đây

Ở bài viết sau mình sẽ hướng dẫn các bạn viết phần cuối đó là viết phần css cho giao diện Desktop với menu đa cấp xổ xuống.

Tạo Theme WordPress 6: Viết CSS cho giao diện Desktop

Bài này là bài cuối cùng của phần dựng Theme bằng HTML và CSS, ở bài này mình sẽ hướng dẫn các bạn viết CSS cho Desktop với Menu đa cấp xổ xuống và tạo giao diện cho bài con.
Viết CSS cho Desktop

Mình sẽ lấy kích thước thông dụng nhất của Desktop hiện nay đó là 1366×768, cho nên ta cần phải tạo file desktop.less với nội dung ban đầu như sau:

1
2
3
@media screen and (min-width: 1366px) {
/* Viết code CSS tại đây */
}

Viết CSS cho Header

Tiếp theo ta viết css cho phần header, ở phần này ta sẽ chia 2 phần là site name và top banner, 2 phần này sẽ được float:left với nhau để chúng nằm cùng một hàng vì lúc này màn hình ta đã đủ rộng để chứa nó, code như sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@media screen and (min-width: 1366px) {
/* Viết code CSS tại đây */
#header{
.site-title{
.title{
float: left;
width: 30%;
padding-top: 30px;
text-align: left;
margin-left: 10%
}
.top-banner{
width: 50%;
float: left;
margin-right: 10%;
text-align: right;
img{
width: 80%;
height: auto;
}
}
}
}
}

Lưu ý: thêm đoạn code này sau thẻ div top-banner để các phần sau không bị đẩy lên trên các phần trước đó: <div style=”clear: both;”></div>
Viết CSS cho Menu

Tiếp theo ta đến phần Menu, trên màn hình Desktop ta sẽ làm menu dạng xổ xuống đa cấp, code của phần này như sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
@media screen and (min-width: 1366px) {
/* Viết code CSS tại đây */
#header{
.header-menu{
clear: both;
background-color: #007f74;
border-top: 1px solid #fff;
border-bottom: 3px solid #e0e0e0;
padding-bottom: 3px;
a.mobile-menu{
display: none !important;
}
> ul{
width: 80%;
margin: auto;
display: block !important;
height: 40px;
margin-bottom: 10px;
li{
position: relative;
display: inline-block;
padding: 10px 10px;
border-left: solid 1px #006b62;
a{
overflow: auto;
padding: 10px;
border-left: solid 1px #019e90;
border-right: solid 1px #019e90;
height: 40px;
color: #fff;
&:hover{
color: #ed1b2e;
}
}
&:hover{
background-color: #00665d;
ul{
display: block;
}
}
ul{
position: absolute;
top: 42px;
left: -30px;
z-index: 999;
width: 230px;
margin: 0;
padding: 0;
display: none;
background-color: #ed1b2e;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
li{
display: list-item;
border: none !important;
a{
border: none !important;
padding: 10px;
}
}
}
}
}
}
}
}

Mình xin giải thích một số phần trong css tạo menu:

– Đầu tiên display none nút menu có ở giao diện di động đi và display:block toàn bộ thẻ <ul> của menu lên.

– Tại thẻ <li> của chuyên mục cha ta thiết lập thuộc tính position:relative, thẻ <ul> của chuyên mục con sẽ thiết lập position:absolute để định vị trí ngay dưới chuyên mục cha khi người dùng rê chuột vào chuyên mục cha.

– Ban đầu ta ẩn các chuyên mục con đi, khi nào người dùng rê chuột vào chuyên mục cha (thuộc tính hover xử lý việc rê chuột) thì sẽ display:block thẻ<ul> tương ứng.
Viết CSS cho Wrapper (Thân trang web)

Tiếp đến ta đến phần Wrapper của trang web, ở phần này ta thiết lập một số thuộc tính như code sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
@media screen and (min-width: 1366px) {
/* Viết code CSS tại đây */
#wrapper{
width: 80%;
margin: 0 auto;
.main-content{
.content{
width: 98.5%;
.posts{
overflow: hidden;
.post-title{
margin-bottom: 5px;
}
.thumb{
width: 20%;
float: left;
img{
width: 100%;
}
}
.posts-exceprt{
width: 80%;
float: left;
}
}
}
}
}
}

Giải thích phần Wrapper:

– Đặt chiều rộng 80% và margin: 0 auto để đưa Wrapper vào giữa.

– Thuộc tính overflow:hidden là để chiều cao của thẻ div.posts tự động fix theo nội dung bên trong, nếu không có phần này thì phần background của posts sẽ không bao trọn được nội dung, các bạn cứ thử thì sẽ biết.
Viết CSS cho Footer

Cuối cùng là phần Footer, ở phần này mình chỉ có chỉnh sửa chút xíu như code sau các bạn xem nhé:

1
2
3
4
5
6
7
8
9
@media screen and (min-width: 1366px) {
/* Viết code CSS tại đây */
#footer{
.footer-info{
width: 80%;
margin: 0 auto;
}
}
}

Trang chủ khi hoàn tất
Dựng Theme cho trang Danh Mục và Trang Con

Và bây giờ mình sẽ hướng dẫn bạn phần cuối cùng trong công đoạn dựng Theme bằng HTML, CSS đó là thiết kế trang con và trang danh mục cho trang web.

Phần này nó sẽ đơn giản hơn nhiều nếu như ta đã thiết kế xong trang chủ.
Dựng theme cho trang danh mục

Bước 1: Bây giờ ta tạo thêm một file html với tên gọi là category.html

Bước 2: Sau đó tiến hành copy toàn bộ code của file index.html

Bước 3: Ở giao diện chuyên mục gần như khong khác gì trang chủ cho lắm, chỉ cần bỏ đi phần div.featured_cont là xong.

Bước 4: Vì code hơi nhiều nên các bạn down trực tiếp file ở cuối bài để xem nhé.
Dựng theme cho trang con

Bước 1: Tạo một file html với tên gọi là single.html

Bước 2: Copy toàn bộ code của trang category.html vào.

Bước 3: Ở giao diện trang con thì ta sẽ bỏ đi các phần div.featured_cont và div.content

Bước 4: Tạo div mới cho phần hiển thị nội dung bài viết, code của phần div.wrapper như sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id="wrapper">
<div class="main-content">
<div class="breadcrumbs"><a href="#">Trang chủ</a> > <a href="#">Wordpress</a> > <a href="#">Wordpress Development</a> > Tạo Theme WordPress 5: Viết CSS cho giao diện Tablet</div>
<div class="single">
<h1>Giới thiệu lịch sử WordPress</h1>
<div class="content-single">
Wordpress xuất hiện đầu tiên vào năm 2003 chỉ với mục đích là để cho người dùng viết Blog với số lượng người dùng lúc bấy giờ chỉ vọn vẹn đếm trên đầu ngón tay và ngón chân, và nó đã phát triển mạnh cho đến ngày nay và trở thành mã nguồn lớn nhất thế giới với gần 80 triệu trang web được viết từ WordPress trên toàn thế giới.

Điểm ưu thế của <a title="wordpress" href="http://xuanthuc.com/thu-thuat-wordpress" target="_blank">Wordpress</a> ở đây là nó hoàn toàn miễn phí và bạn có thể dùng nó để tạo website đơn giản hoặc là website doanh nghiệp.

Chỉ cần lên trang chủ của WordPress down bản mới nhất về và cài đặt là bạn đã sở hữu 1 website có thể tùy biến rất dễ dàng, và yêu cầu của nó là phải có một máy chủ, 1 tên miền. Tuy vậy WordPress vẫn có một dịch vụ hoàn toàn miễn phí mà không cần những thứ đó, wordpress.com giải quyết vấn đề đó cho bạn với một số hạn chế đó là ít tùy biến, và phải lệ thuộc vào máy chủ của WordPress (đăng bài spam sẽ bị khóa tài khoản ngay và luôn).

<a href="http://xuanthuc.com/wp-content/uploads/wordpress-toan-tap.jpg"><img class="size-medium wp-image-40" src="http://xuanthuc.com/wp-content/uploads/wordpress-toan-tap-300x300.jpg" alt="Giới thiệu mã nguồn mỡ WordPress" width="300" height="300" /></a>

Wordpress bắt đầu chỉ là một Blog nhưng đã phát triển rất mạnh đến ngày nay với đầy đủ các tính năng chuyên nghiệp nhất nhờ vào hệ thống hàng ngàn plugin, widget và theme do chính wordpress phát triển hoặc cộng đồng đóng góp cũng như các công ty thương mại.

Wordpress được viết bằng ngôn ngữ PHP và hệ quản trị cơ sở dữ liệu phổ biến nhất hiện nay MySQL, và được cấp phép theo GPLv2.

Kết lại một câu là WordPress là mã nguồn mà mình thích nhất bởi ở tính năng, tính dễ sử dụng và đặc biệt là nó nhẹ.

Bài tiếp theo mình sẽ giới thiệu các công cụ cần thiết để thiết kế website với wordpress.
</div>
</div>
</div>
</div>

Bước 5: Viết css cho phần wrapper: Tại file style.less mình thêm phần css định dạng cho trang con như sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#wrapper{
.main-content{
.single{
width: 98%;
margin: 0 auto;
padding: 10px;
margin-top: 5px;
background: #fff;
overflow: hidden;
border: 1px solid #dcdcdc;
border-radius: 3px;
box-shadow: 3px 3px 3px #dcdcdc;
margin-bottom: 10px;
h1{
margin: 0;
padding-bottom: 10px;
font-size: 20px;
}
}
.breadcrumbs{
width: 98%;
margin: 0 auto;
padding: 10px;
margin-top: 5px;
background: #fff;
overflow: hidden;
border: 1px solid #dcdcdc;
border-radius: 3px;
box-shadow: 3px 3px 3px #dcdcdc;
margin-bottom: 10px;
font-size: 13px;
}
}
}

Tới đây chúng ta đã hoàn tất việt dựng Theme bằng HTML, CSS, ở bài sau mình sẽ hướng dẫn các bạn ráp Theme vừa thiết kế xong vào Worldpress.

Các bạn có thể down full code của bài hôm nay tại đây, hãy chờ đón xem bài tiếp theo nhé, bạn có thể thể Đăng Ký Nhận Tin Mới từ Xuân Thức Blog để cập nhật bài mới nhanh nhất, chúc các bạn thành công.