Thẻ HTML

Thẻ HTML là một trong các thành phần quan trọng nhất trong ngôn ngữ HTML. Mỗi thẻ được sử dụng để tạo ra một phần tử nhất định tạo ra trang web. Ví dụ với các phần tử dùng để tạo ra tiêu đề cho trang chúng ta sẽ sử dụng thẻ h1 với các phần tử dùng để tạo ra ảnh chúng ta sử dụng thẻ img, với các phần tử dùng để tạo ra các liên kết chúng ta sẽ sử dụng thẻ a..
Ở ví dụ trước bạn thấy có rất nhiều thẻ được sử dụng ví dụ như thẻ h1


<h1>Bắt Đầu Học HTML</h1>


Ngoài ra còn có các thẻ như thẻ html, body, head… Chúng ta sẽ lần lượt tìm hiểu cách sử dụng các thẻ này trong các bài học tiếp theo.

Thẻ Đóng, Thẻ Mở

Với mỗi thẻ HTML thường sẽ có 2 loại thẻ là thẻ đóng và thẻ mở. Thẻ đóng dùng để đánh dấu vị trí bắt đầu của phần tử và ngược lại thẻ mở dùng để đánh dấu vị trí kết thúc. Ở ví dụ trên chúng ta có các thẻ mở là html, body, h1, p Và các thẻ đóng tương ứng là /html, /body, /h1/p.

Thẻ Tự Đóng

Phần lớn các thẻ sẽ bao gồm thẻ đóng và thẻ mở. Tuy nhiên trong một số trường hợp đặc biệt có một số thẻ sẽ tự kết thúc mà không cần phải có thẻ đóng. Ví dụ như thẻ br để xuống dòng hay img dùng để tạo ra ảnh.

Ở trên bạn thấy chỉ khi có thẻ br thì việc xuống dòng mới được thực hiện. Ngược lại nếu trong mã lệnh HTML bạn bấm phím enter để tạo ra dòng mới giữa các câu thì khi hiển thị trình duyệt vẫn không thêm dòng mới chèn giữa các câu này.

Text Editor Trong Html

Bạn có thể chạy và chỉnh sửa mã HTML trực tiếp trên trang ở các đoạn code ví dụ được cung cấp sẵn trong mỗi bài học.

Tuy nhiên bạn cũng có thể tạo một trang HTML trên máy tính của chính mình sử dụng chương trình Text Editor.

Text editor là chương trình phần mềm sử dụng để hiệu chỉnh văn bản thuần tuý (plain text) và thích hợp trong việc chỉnh sửa mã code (bao gồm mã HTML).

Lưu ý: Văn bản thuần tuý là dạng văn bản không sử dụng bất cứ định dạng nào như in đậm, in nghiêng, tạo màu, thêm phông chữ… Ngược lại với văn bản thuần tuý là văn bản đã được định dạng (formatted text hay rich text). Các phần mềm text processor (khác với text editor) như Microsoft Word dùng để hiệu chỉnh loại văn bản này. Chúng ta không sử dụng văn bản đã được định dạng để tạo ra mã code nói chung và mã HTML nói riêng.

Hiện tại có nhiều phần mềm text editor khác nhau, tuy nhiên với mục đích học HTML thì bạn được kiến nghị sử dụng NotePad (Windows) hoặc TextEdit (Mac OSX).

NotePad (Windows)

Trên hệ điều hành Windows cung cấp sẵn text editor có tên là NotePad mà bạn có thể sử dụng để tạo và chỉnh sửa mã HTML.

Để mở NotePad:

  • Với Windows 8 hoặc mới hơn: Gõ phím Windows và nhập vào Notepad trong ô tìm kiếm. Click vào icon chương trình Notepad trong kết quả hiển thị để khởi động chương trình.
  • Với Windows 7 hoặc cũ hơn: Click chọn Start > chọn Programs > chọn Accessories > chọn Notepad.

TextEdit (Mac OSX)

Để mở TextEdit bạn khởi động chương trình quản lý file và tập tin Finder > đi đến thư mục Applications > nhấp đúp vào TextEdit trong thư mục.

Do Text Edit cũng cho phép chúng ta tạo văn bản rich text nên bạn cần thiết lập để TextEdit lưu văn bản dưới dạng plain text. Ở thanh menu bạn chọn Preference > nhấp chọn tab New Document > ở mục Format chọn Plain Text > nhấp chọn tab Open and Save > ở mục When Saving a File bỏ chọn Add “.txt” extention to plain text files.

Tạo Tập Tin HTML

Sau khi mở chương trình text editor trên máy bạn tạo một tập tin mới (phím tắt control + N với NotePad hoặc command + N với TextEdit)

Sao chép và dán đoạn văn bản sau vào phần nội dung của tập tin mới:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Tiêu đề trang</title>
    </head>
<body>
<h1>Đây là một đề mục.</h1>
Đây là một dòng văn bản thông thường.
</body>
</html>

Lưu Tập Tin HTML

Tập tin html được lưu với phần mở rộng là .html hoặc .htm (ít phổ biến hơn).

Bạn lưu tập tin mớ tạo ở trên với tên index.html, bạn cần lưu ý chọn encoding là UTF-8 và phần mở rộng là .html.

Với NotePad:

NotePad Lưu HTML File

Với TextEdit:

TextEdit lưu tập tin HTML

Phần mở rộng của các tập tin có thể sẽ bị ẩn đi khi bạn mở thư mục chứa chúng, do đó bạn cần chắc chắn rằng tập tin có phần mở rộng là .html thay vì .html.txt

Hiển Thị Trang HTML

Trong khi text editor được dùng để hiệu chỉnh code HTML, để hiển thị nội dung trang HTMl thì chúng ta cần sử dụng một phần mềm khác là trình duyệt web hay web browser.

Bạn có thể xem một trang HTML từ một tập tin HTML cho trước theo một số cách khác nhau ví dụ như:

  • Nhấp đúp lên biểu tượng của tập tin hoặc
  • Chuột phải lên tập tin và chọn Open with > chọn một trong các browser có trên máy.

Lúc này bạn sẽ thấy trình duyệt hiển thị nội dung trang HTML thay vì source code có trong text editor.

Giới Thiệu Về Html

HTML Là Gì

HTML là viết tắt của cụm từ Hyper Text Markup Language, dịch sang tiếng Việt là ngôn ngữ đánh dấu siêu văn bản:

  • HTML mô tả cấu trúc của một trang web (web page) sử dụng các thẻ đánh dấu (markup tag) hay còn gọi là thẻ HTML.
  • Thẻ là một phần quan trọng trong HTML.
  • Mỗi thẻ HTML được dùng để đánh dấu những nội dung khác nhau ví dụ như thẻ đề mục để đánh dấu đề mục, thẻ văn bản để đánh dấu văn bản thông thường, thẻ hình ảnh để đánh dấu hình ảnh…

Trình duyệt sẽ không hiển thị mã HTML thô (các thẻ) mà thay vào đó sẽ dựa trên từng loại thẻ để chuyển đổi sang các nội dung tương ứng của trang web.

Một trang HTML tương ứng sẽ tạo ra nội dung của một trang web. Các thuật ngữ trang HTML (HTML document) và trang web HTML đôi khi còn được sử dụng với ý nghĩa thay thế cho nhau.

Ví Dụ Về Trang HTML

Ví dụ về một trang HTML đơn giản như sau:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Tiêu đề trang</title>
    </head>
<body>


<h1>Đây là một đề mục.</h1>


Đây là một dòng văn bản thông thường.
</body>
</html>

Trong đó:

  • Khai báo  (document type) định nghĩa loại trang văn bản là HTML và phiên bản sử dụng là HTML5. Khai báo này không được coi là thẻ và cũng không được dùng để hiển thị bất cứ nội dung nào. Trình duyệt sử dụng khai báo này để biết phiên bản HTML nào được sử dụng để đánh dấu trang.
  • Thẻ là một thẻ gốc của trang và luôn phải được xuất hiện đầu tiên sau khai báo .
  • Thẻ  chứa các thông tin bổ sung về trang (meta data). Nội dung phần này cũng không được trình duyệt hiển ở phần nội dung trang mà thay vào đó trình duyệt thường dùng để xác định thông tin bổ sung như tiêu đề trang, bộ ký tự của trang (tương ứng với ngôn ngữ sử dụng, với tiếng Việt bộ ký tự thường là UTF-8), tiêu đề trang (hiển thị ở thanh tab)…
  • Thẻ <body> chứa nội dung trang sẽ được trình duyệt hiển thị.
  • Thẻ <h1> dùng đánh dấu phần tử đề mục của trang.
  • Thẻ <p> dùng đánh dấu các đoạn văn bản (văn bản thông thường).

Thẻ HTML

Thẻ HTML (HTML tag) dùng để đánh dấu các thành phần nội dung khác nhau của trang. Mỗi thẻ khác nhau sẽ đánh dấu nội dung với ý nghĩa khác nhau.

Thẻ gồm tên thẻ và bao quanh bởi cặp dấu <>:

<tag_name>Nội dung bên trong thẻ</tag_name>

Mỗi thẻ HTML thường đi theo cặp bao gồm thẻ mở (opening tag)  và thẻ đóng (closing tag)

Thẻ Tự Đóng

Thẻ tự đóng (self-closing tag) là thẻ HTML với chỉ thẻ mở và không có thẻ đóng đi kèm.
Ví dụ thẻ <br/> dùng để xuống dòng là một thẻ tự đóng:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Tiêu Đề Trang</title>
    </head>
<body>


<h2>Đây là một đề mục.</h2>


Đây là một dòng văn bản thông thường.
Một dòng mới vừa được tạo thêm vào phía trước câu văn này.
</body>
</html>

Hiển Thị Trang HTML

Hiển thị trang HTML (render HTML) là việc sử dụng một phần mềm như trình duyệt web để chuyển đọc và phần tích ý nghĩa các thẻ sau đó hiển thị ra nội dung trang tương ứng.

Ví dụ với đoạn mã HTML như trên sẽ được hiển thị như sau trên trình duyệt.

Ngược lại khi đang xem một nội dung một trang web trên trình duyệt thì để xem mã HTML của trang này bạn có thể bấm chuột phải và chọn View Source hay View Page Source hoặc sử dụng tổ hợp phím tắt control + U (trên Windows) hoặc command + opt + U nếu bạn dùng Mac OSX.

Hướng Dẫn Sử Dụng WordPress từ A tới Z

WordPress là một dự án nguồn mở nghĩa là bất cứ ai cũng có thể tùy chỉnh mã nguồn theo ý thích. Nó cũng có hàng ngàn Plugin miễn phí, nhiều theme chủ đề, cũng như widget và các công cụ khác. Tất cả các tính năng này cho phép bạn tạo bất kỳ loại trang web nào, bắt đầu từ các Blog đơn giản, các trang web cá nhân hoặc các trang giới thiệu cho các cửa hàng điện tử, các cơ sở tri thức hoặc các trang web về việc làm.

Một yếu tố nữa là WordPress hoàn toàn miễn phí, hỗ trợ tất cả các nền tảng hosting với PHP và MySQL. Trên hết, CMS này được cập nhật liên tục với các phiên bản mới nhằm nâng cao tính bảo mật, bao gồm các tính năng mới và cải thiện hiệu suất tổng thể.

CMS là gì?

Một hệ thống quản lý nội dung, viết tắt là CMS là một ứng dụng có khả năng tạo, sửa đổi và xuất bản nội dung số. Trong hầu hết các trường hợp, nó cũng hỗ trợ nhiều người dùng, cho phép họ hợp tác với nhau một các dễ dàng.

Ví dụ: trong WordPress có thể tạo ra một số người dùng quản trị, mỗi người có các đặc quyền khác nhau. Hệ thống quản lý nội dung cũng bao gồm các tính năng định dạng văn bản, khả năng tải lên video, hình ảnh, âm thanh, bản đồ hoặc thậm chí là mã code của riêng bạn.

Hệ thống quản lý nội dung bao gồm hai thành phần chính:

  • Một ứng dụng quản lý nội dung (CMA – Content Management Application): Một CMA có thể là một giao diện người dùng đồ họa GUI (Graphical User Interface) cho phép người dùng tạo, sửa đổi, xóa và xuất bản nội dung mà không cần phải biết gì về HTML hoặc các ngôn ngữ lập trình khác.
  • Một ứng dụng phân phối nội dung (CDA – Content Delivery Application): CDA chịu trách nhiệm về các dịch vụ “back-end” để quản lý và cung cấp nội dung sau khi nó được xử lý bởi CMA.

Các tính năng đặt biệt website wordpress:

  • URL thân thiện với SEO
  • Hỗ trợ trực tuyến và cộng đồng mạng
  • Các chức năng cho người dùng hoặc một nhóm người dùng
  • Nhiều kiểu mẫu (Themes) tạo sẵn khác nhau
  • Trình cài đặt cũng như cập nhật, nâng cấp hệ thống liên tục

Phân biệt WordPress.com so với WordPress.org

WordPress.com và WordPress.org là hai cách để lưu trữ một trang web WordPress.

Điều khác biệt giữa hai phương pháp này là máy chủ thực sự (host).

  • Sử dụng WordPress.org, bạn có thể tải xuống tập tin mã nguồn miễn phí và lưu trữ nó trên máy tính cá nhân hoặc với một nhà cung cấp dịch vụ hosting.
  • WordPress.com lưu trữ trang web cho bạn. Bạn không phải quản lý một máy chủ web, trả tiền để lưu trữ hoặc tải phần mềm, tuy nhiên, quảng cáo được hiển thị trên trang web của bạn

Cả WordPress.com và WordPress.org đều có những ưu và nhược điểm nhất định.

  • Nếu bạn không quan tâm đến việc lưu trữ hoặc quản lý một máy chủ web của riêng mình thì WordPress.com là một lựa chọn hàng đầu, nó miễn phí và có thể được thiết lập một cách nhanh chóng. Bạn cũng sẽ được cung cấp các tùy chọn khác nhau để tuỳ chỉnh trang web của mình. Trang web của bạn sẽ dùng subdomain của wordpress.com và bạn sẽ không thể tải lên các themes hoặc plugins tùy chỉnh, bạn cũng không thể chỉnh sửa hay thay đổi các mã nguồn PHP.
  • Tải mã nguồn từ WordPress.org để cài đặt và sử dụng mang lại tính linh hoạt và khả năng kiểm soát trang web của bạn nhiều hơn. Bạn sẽ có thể sử dụng tên miền của riêng, cài đặt Themes, Plugins. Bạn cũng sẽ có quyền truy cập vào các files của WordPress, cơ sở dữ liệu và mã code, có nghĩa là bạn sẽ có thể sửa đổi nó theo ý thích của bạn. Trong trường hợp bạn không sử dụng WordPress làm CMS thì việc có một hosting riêng cho phép bạn có thể cài đặt các CMS khác Drupal hoặc Joomla.

Bài hướng dẫn WordPress này sẽ tập trung vào phiên bản WordPress 5.0 tự cài đặt trên Hosting/Server.

Hướng dẫn sử dụng WordPress – Cài đặt CMS

Một trong những lý do tại sao WordPress rất phổ biến là vì các yêu cầu hệ thống cần thiết để chạy CMS này trên máy chủ web rất thấp:

  • PHP: phiên bản 5.2.4 trở lên
  • MySQL: phiên bản 5.0.15 trở lên hoặc bất kỳ phiên bản nào của MariaDB.

Sau khi cài đặt WordPress thành công, bạn đăng nhập vào quản trị website. (Bạn có thể login trực tiếp tại WordPress Toolkit hoặc đăng nhập với thông tin quản trị website với user và password).

Sau khi đăng nhập thành công, bạn sẽ vào Dashboard dành cho người quản trị. Nó được xây dựng để bạn có một cái nhìn tổng thể về toàn bộ website của mình, được chia ra làm 3 vùng chính.

  • Khu vực 1: Thanh công cụ thao tác nhanh thường dùng
  • Khu vực 2: Menu quản lý WordPress chi tiết
  • Khu vực 3: Khung hiển thị thông tin, nội dung thao tác, …

Khu vực 1

Thanh công cụ phía trên trang chứa đường dẫn tới các công cụ quản trị cũng như các tài nguyên thường dùng.

Ví dụ: khi di chuyển chuột tới vị trí tên website thì bạn sẽ được liên kết đến để xem website của mình hoặc dùng hiển thị các thông báo cập nhật hay số lượng comment mới.

1.1. Logo WordPress: Bên trong logo này sẽ là menu các link trỏ đến những trang giới thiệu và hỗ trợ của dịch vụ WordPress

1.2. Tiếp theo là tên site của bạn, ở ví dụ này là “My CMS” nên bạn sẽ thấy chữ My CMS trên thanh adminbar này. Nếu bạn ở bên trong bảng điều khiển thì nó sẽ có link cho bạn quay trở ra ngoài xem nội dung site, ngược lại nếu bạn ở bên ngoài thì nó có link cho bạn trở vào bảng điều khiển và một số link liên quan đến giao diện WordPress.

Tại Thanh Admin bar  Tên site (My CMS)  Customize.

  • Activate theme: Hiển thị theme bạn đã cài đặt và kích hoạt. Bạn có thể thay đổi theme bằng cách nhấn vào Change.
  • Site Identity: Tại đây bạn có thể chèn logo, icon và thay đổi tên website. Sau khi thay đổi -> Pulished
  • Colors: Thực hiện thay đổi màu chủ đạo cũng như màu tiêu đề websites.
  • Header Media: Bạn có thể thêm tiêu đề bằng video hoặc hình ảnh. Nếu bạn thêm video, hình ảnh sẽ được sử dụng làm dự phòng trong khi video tải.
  • Menus: Chỉnh sửa vị trí của menu đã tạo ra trước đó trong admin website.
  • Widgets: Tùy chỉnh Widgets đã được cài đặt trong admin website
  • Homepage Settings: Thiết lập giao diện hiển thị trên trang chủ website.
  • Theme Options: tại đây bạn có thể thiết lập font chữ và màu chữ, màu liên kết.
  • Additional CSS: Thêm mã CSS của riêng bạn vào đây để tùy chỉnh giao diện và bố cục của trang web của bạn.

1.3. Menu hiển thị thông báo các bình luận chưa được kiểm duyệt, nếu trên trang của bạn có bình luận chưa được xét duyệt thì nó sẽ hiện thị lên ở menu này.

1.4. Menu tạo nội dung mới, bạn có thể tạo bài viết mới, tạo chuyên mục mới hoặc tạo tài khoản mới thông qua menu này.

1.5. Quản lý tài khoản người dùng (chỉnh sửa hồ sơ/đăng xuất).

Khu vực 2

Menu định hướng chính ở phía bên trái màn hình chứa tất cả các liên kết đến các mục quản lý khác nhau của WordPress, nếu bạn di chuyển chuột đến menu chính thì các menu con khác sẽ hiển thị.

Dashboard: Bảng điều khiển

Khu vực Dashboard này là tập hợp các công cụ liên quan đến việc theo dõi thống kê của website và cập nhật các phiên bản ThemesPluginsWordPress,….Nó có 2 phần như sau:

Home

Khu vực theo dõi các tiến trình của WordPress, cũng như báo cáo chi tiết về các bài viết, bình luận,…

Các modules khác như:

  • Welcome to WordPress!: Hiển thị những tin tức mới nhất về WordPress.
  • At a Glance: hiển thị số bài viết, số nhận xét, số trang mà website bạn hiện có. Nó cũng hiện phiên bản WordPress/Theme mà bạn đang dùng.
  • Quick Draft: Nhập nội dung vào đây sẽ bắt đầu một bài đăng blog mới. Tuy nhiên, bạn không thể xuất bản một bài viết từ đây vì nó chỉ dành cho việc đăng ý tưởng để bạn quay trở lại sau.
  • Activity: cung cấp cho bạn thông tin về các bài viết và nhận xét mới nhất. Nó cho thấy tình trạng của tất cả các nhận xét và một danh sách ngắn các nhận xét gần đây nhất.

Update

Nơi để bạn vào cập nhật những bản vá mới nhất của Themes, Plugins, WordPress đang sử dụng. Mỗi khi có bản mới nó sẽ hiển thị thông báo cho bạn thấy.

Posts: Bài biết

Đây là phần quan trọng nhất, đó chính là phần để bạn đăng bài viết lên cũng như quản lý nó.

Tại giao diện quản trị website  Posts.

All post: Hiển thị tất cả các bài viết đã được thiết lập trước đó.
Add new: Thêm bài viết mới.

1. Cho phép bạn thêm Block (khối mới). Khi click vào biểu tượng này, bạn có thể thêm cấu hình các trường ParagraphImageHeadingCoverGallery

2. Add title: Thêm tiêu để cho bài viết.

3. Document: truy cập phần document setting bao gồm category và tag, ảnh đại diện giống như phần sidebar trong WordPress editor hiện tại.

  • Categories: danh mục bài viết, bạn có thể tạo thêm bằng cách bấm “Add New Category”.
  • Tags: gắn thẻ nhanh cho bài viết.

4. Block: khi bạn chọn một khối, phần này cho phép truy cập setting (text setting, color setting, avantaged..) cho khối đang chọn.

5. Publish: xuất bản bài viết.

Categories: Danh mục bài viết

Danh mục bài viết để phân loại bài viết và giúp khách hàng dễ dàng tìm được bài viết cùng loại.

  • Name: Tên Category
  • Slug: url Category, bạn nên để trống. Mặc định WordPress sẽ lấy tên category để tạo đường dẫn cho bạn. Vì vậy bạn không cần quan tâm.
  • Parent category: Thư mục mẹ, nếu bạn để None thì nghĩa là nó sẽ không nằm trong category nào khác, Bạn chọn trong box xổ xuống category mẹ nếu muốn.
  • Description: Mô tả, cần thiết trong SEO.
  • Add new category: Sau khi điền xong bạn nhất Add new category để tạo category. Lúc này nó sẽ xuất hiện bên cột bên phải.

Sau khi click chọn nút Add New Category, chuyên mục mới được tạo sẽ hiển thị ở góc bên phải trang , tại đây bạn có thể chỉnh sửa, cũng như xóa Category.

Tags

Tag hay còn gọi là thẻ, từ khóa có chức năng phân loại bài viết theo hướng cụ thể hóa. Tương tự như Categories, bạn cũng nhập các thông tin như hình bên dưới.

Media: Quản lý Thư viện hình ảnh, video,…

Tất cả các hình ảnh/tập tin mà bạn tải lên trong lúc soạn nội dung bạn có thể dễ dàng quản lý tại khu vực Media  Library trong Dashboard.

Tại đây, bạn có thể xem toàn bộ các tập tin mà bạn đã tải lên và có thể tùy chọn kiểu hiển thị dạng lưới hoặc kiểu phổ thông, bạn cũng có thể xem theo ngày tháng và có thể click vào liên kết Add New để upload tập tin lên mà không cần vào trang soạn nội dung.

Pages: Quản lý trang

Phần này không khác gì với phần Posts, nhưng nó sẽ không có Categories và Tags. Về công dụng của nó là để bạn đăng các trang nội dung có yếu tố chung chung và không được phân loại bởi một Category hay tag nào, ví dụ như trang giới thiệu, liên hệ,…

All pages: Tất cả trang

Hiển thị tất cả các trang bạn đã tạo trước đó. Tại đây bạn có thể chỉnh sửa, xem trước và xóa các trang.

Add new page: Thêm trang mới

Để tạo một trang WordPress mới, chọn Pages   Add New

Tại Pages thì các tính năng tương tự như Post. Tuy nhiên, Pages không sử dụng cấu trúc chuyên mục (categories) và thẻ (tags) như tại PostsPages sử dụng cấu trúc cha con (Parent Page) và thứ tự (order) để sắp xếp vị trí sắp xếp trang.

Appearance: Quản lý giao diện

Themes: Giao diện

Giao diện trang WordPress của bạn có thể thay đổi dễ dàng bằng cách cài đặt một Theme khác. Có rất nhiều Themes miễn phí và có phí, bạn có thể dùng nó trên bất cứ Themes của nhà cung cấp nào.

Việc cài đặt theme cho WordPress rất dễ dàng, chỉ tốn vài phút là bạn đã có thể cài đặt và áp dụng Theme cho website của mình rồi.

Chúng tôi sẽ hướng dẫn 2 cách cài đặt Theme trên WordPress như sau:

Cách 1: Cài Theme từ thư viện WordPress.Org

Có hàng ngàn Themes miễn phí Official WordPress themes directory. Các bước bên dưới cho phép tạo Theme miễn phí của trang WordPress.

Cách 2: Cài Theme WordPress Thủ công (upload file từ máy tính)

Sử dụng phương pháp này bạn sẽ cài Theme được cung cấp bỡi bên thứ 3 (Không phải WordPress.Org).

Lưu ý: File Theme cần ở dạng ZIP được tải lên máy tính của bạn trước.

Widget

Widget có thể gọi là một tính năng mà bất kỳ một website WordPress nào cũng phải cần dùng, nó là một tập hợp các chức năng; mỗi widget tương ứng với một chức năng để bạn chèn vào sidebar (thanh bên) của Theme.

  • Các Widget sẵn có (Available Widgets): Tức là các kiểu loại widget mà theme cung cấp, ngoài các widget phổ biến thì sẽ có rất nhiều widget khác nữa, nhất là các giao diện bạn đi mua sẽ có nhiều widget hơn hẳn đa số các theme miễn phí khác.
  • Vị trí của Widget: Tức là widget sẽ được đặt ở vị trí nào, thường thì là cột bên tay phải (sidebar) và phía chân trang (footer). Đôi khi sẽ là cột bên tay trái nếu thiết kế đặt nội dung chính ở bên tay phải. Các widget cũng thường không bị giới hạn vị trí, chẳng hạn, nếu theme cung cấp 3 vị trí, thì bất kỳ widget nào cũng có thể được đặt ở bất kỳ vị trí nào trong 3 nơi đó.
  • Widget không sử dụng (Inactive Widgets): Nếu có widget nào bạn đang sử dụng, rồi vì lý do nào đó bạn không muốn dùng nữa thì bạn nên đưa nó vào khu vực này. WordPress sẽ giữ các thiết lập của nó, và bất cứ khi nào bạn muốn sử dụng lại chỉ cần kéo nó từ khu vực này tới vị trí mong muốn, và bạn sẽ không phải mất côngchỉnh sửa các thiết lập. Ví dụ như fanpage, khi bạn tạo widget cho nó, bạn sẽ cần thiết lập đường link, chiều cao, chiều rộng. Nếu bạn bỏ nào phần Inactive Widgets này thì lần sau khi cần dùng lại, bạn sẽ không mất công thiết lập lại các thông tin đó nữa.

Để đưa các widget vào website bạn cần biết 2 thứ:

  • Widget mà bạn muốn là gì và nó nằm ở đâu trong khu vực Các Widget sẵn có.
  • Vị trí của Widget mà bạn muốn đặt, thường Sidebar nghĩa là Cột trái hoặc Cột phải, Footer nghĩa là chân trang

Sau đó bạn chỉ cần kéo thả widget vào khu vực mà bạn thích (click & giữ chuột trái rồi kéo):

Nếu việc kéo thả bất tiện, một cách khác bạn có thể làm đơn giản là click vào widget và bạn muốn rồi chọn vị trí cho nó từ cửa sổ nhỏ hiện ở bên dưới (widget bên dưới có 3 vị trí là Blog Sidebar, Footer 1 và Footer 2):

Cuối cùng nhấn vào Add Widget là xong.

Điểu chỉnh vị trí trên dưới của Widget, bạn có thể điều chỉnh vị trí trên dưới của chúng bằng cách kéo thả lên xuống:

Menu nghĩa là thanh trình đơn hiển thị các liên kết trên Theme, tùy vào mỗi Theme mà bạn sẽ có bao nhiêu menu, hiển thị ở trên hay ở dưới, bên trái hay bên phải chứ không phải chúng ta muốn cho nó hiển thị ra đâu cũng được.chúng ta có thể tạo ra nhiều menu nhưng chúng ta chỉ có thể chỉ định một menu được hiển thị ra trên mỗi Menu Location. Có nhiều Theme hỗ trợ nhiều Menu Location (Vị trí hiển thị một trong các Menu mà bạn đang có) khác nhau nhưng ở theme mặc định thì thường chỉ có một location.

Để truy cập vào trang quản lý Menu, bạn vào Appearance   Menus trong Dashboard.

Mặc định bạn sẽ chưa có một menu nào, bạn hãy nhập tên menu cần tạo rồi ấn Create Menu.

Sau đó, bạn nhìn cột bên tay trái là các đối tượng mà bạn có thể thêm vào menu như Pages, Posts, Custom Links, Categories. Bạn có thể chọn đối tượng mà bạn cần thêm vào và ấn nút Add to Menu để thêm nó vào menu đang mở.

Sau khi bạn đã thêm đầy đủ các liên kết vào menu như mong muốn, bạn có thể chọn Menu Location cần áp dụng cho Menu đang mở này ở phần Menu Settings phía dưới và ấn Save Menu

Bạn cũng có thể kéo và thả các liên kết trong menu để hoán đổi vị trí cho chúng. Hoặc tạo Menus con bằng cách kéo thả liên kết trong Menu cho nó nằm thụt vào một liên kết nào đó mà bạn muốn nó trở thành liên kết mẹ.

Editor

Editor trong WordPress giúp bạn thay đổi lại mã nguồn của giao diện website theo ý muốn

Tại Appearance    Editor   Select theme to edit   Select.

Sau khi chọn thành công, bạn thấy phần Templates phía cột bên phải sẽ xuất hiện các Themss của giao diện bạn chọn ở trên. Bạn nhấp chuột vào Themes cần chỉnh sửa → Update File để lưu lại thay đổi.

Plugins: Quản lý tiện ích

Mục đích chính của Plugins là mở rộng chức năng cho WordPress. Chỉ bằng cách cài đặt và kích hoạt plugin, bạn có thể thêm các tính năng mới vào trang web mà không cần biết lập trình. Có hàng ngàn plugin miễn phí và tính phí được xây dựng cho các mục đích khác nhau: Từ chia sẻ truyền thông xã hội sang bảo mật,… . Vì vậy, bạn chắc chắn sẽ tìm thấy một plugin phù hợp với nhu cầu của bạn.

Cài đặt WordPress Plugins là một công việc dễ dàng ngay cả đối với người mới bắt đầu. Các Plugins miễn phí có trên thư mục Plugins của WordPress.org. Cũng giống như các theme, chúng có thể được cài đặt bằng cách sử dụng trình cài đặt WordPress sẵn có. Để cài đặt Plugins WordPress, hãy nhấn nút Add New trong Plugins và nhập tên của plugin mà bạn muốn cài đặt vào trường tìm kiếm. Chọn plugin bạn cần và nhấn Install để cài và Activate để kích hoạt.

Có rất nhiều premium plugins (trả phí) không thể cài đặt tự động từ trang chủ của WordPress, nếu bạn đã mua một plugins thì bạn cần phải cài đặt thủ công nó bằng cách tải lên website WordPress của mình. Qui trình cài đặt cũng tương tự, bạn bấm chọn Add New dưới mục Plugins, bấm tiếp Upload Plugins, chọn file cài đặt từ máy tính của bạn để tải lên và cài đặt.

Các Plugins thiết yếu cho WordPress:

Có rất nhiều plugin WordPress, sẽ rất khó để có thể chọn đúng cái mà bạn thực sự cần. Trên thực tế, có rất nhiều plugin hỗ trợ cho cùng một mục đích, ví dụ như có hàng chục plugin WordPress Caching. Đó là lý do tại sao chúng tôi quyết định liệt kê các plugin WordPress tốt nhất cần thiết cho mỗi trang WordPress

  • Google XML Sitemaps: plugin này sẽ tự động tạo các bản đồ trang web dạng XML để tối ưu hóa công cụ tìm kiếm tốt hơn. Nó dễ sử dụng và thường xuyên cập nhật.
  • Yoast SEO: có lẽ là plugin SEO phổ biến nhất cho WordPress. Nó sẽ giúp bạn tối ưu hóa công cụ tìm kiếm. Từ thẻ meta đến các đề xuất – plugin Yoast SEO có tất cả.
  • Wordfence Security: plugin này sẽ giúp WordPress an toàn khỏi hacker và phần mềm độc hại. Nó có tường lửa và các module quét phần mềm độc hại được rất hữu ích.
  • Contact Form 7: đơn giản nhưng rất mạnh mẽ giúp bạn tạo bất kỳ form liên lạc nào hoặc thậm chí form chỉ dẫn hình thức với plugin này.

Lưu ý: Chúng tôi không khuyên bạn cài thật nhiều Plugins vào WordPress vì nó có thể làm giảm hiệu năng website của chính bạn, hãy cài những plugins thật sự thiết yếu và xóa đi những cái không cần thiết.

Users: Quản lý tài khoản

Để tạo thêm người dùng, bạn truy cập vào Dashboard   Users   Add New, ở đây bạn sẽ cần khai báo các thông tin cho người dùng muốn tạo ra. Các thông tin không có chữ required là không bắt buộc khai báo.

Khi tạo user, bạn có thể phân quyền cho từng user đó tại Role:

  • Administrator: Nhóm người dùng có quyền sử dụng toàn bộ các tính năng có trong một website WordPress, không bao gồm các website khác trong mạng website nội bộ.
  • Editor: Nhóm này có quyền đăng bài viết lên website (publish) và quản lý các post khác của những người dùng khác.
  • Author: Nhóm này sẽ có quyền đăng bài lên website và quản lý các post của họ.
  • Contributor: Nhóm này sẽ có quyền viết bài mới nhưng không được phép đăng lên mà chỉ có thể gửi để xét duyệt (Save as Review) và quản lý post của họ.
  • Subscriber: Người dùng trong nhóm này chỉ có thể quản lý thông tin cá nhân của họ.

Bạn có thể thay đổi EmailPassword quản trị WordPress trong Your Profile.

Để xóa User người dùng, bạn truy cập vào Dashboard → Users → All User, tại đây bạn sẽ thấy danh sách các User.

Danh sách User.

Tiếp theo, di chuyển con trỏ chuột lên tới Tên User cần xóa và bấm chọn Delete, website sẽ chuyển hướng sang trang xác nhận thao tác  nhấn Confirm Deletion để hoàn tất xóa User.

Màn hình xác nhận xóa User.

Lưu ý: Có 2 tùy chọn trước khi xác nhận Xóa User mà bạn cần phải kiểm tra.

  • Delete all content: Xóa tất cả các nội dung từ User này đăng tải trên website.
  • Attribute all content to: Chuyển tồn bộ nội dung được đăng tải của User bị xóa tới User đang tồn tại (Chúng tôi khuyến khích các bạn lựa chọn phương án này để bảo tồn dữ liệu website).

Tools: Công cụ

Available Tools: Các công cụ có sẵn

Tính năng này chứa ứng dụng Press This giúp bạn cắt những nội dung (đoạn văn bản, video, hình ảnh) từ các trang web khác. Tiếp đến, bạn chỉnh sửa và thêm trực tiếp các nội dung đó. Lựa chọn lưu lại và đăng bài trên Website của bạn.

Import: Cài đặt nhập dữ liệu

Nhập nội dung (bài viết, bình luận) từ các hệ thống website khác tới Website WordPress một cách tự động.

  • Blogger: Công cụ này giúp bạn đẩy nội dung (các chuyên mục, các bài viết, các hình ảnh và bình luận) từ trang Blogspot của bạn tới Website WordPress này.
  • Tương tự, Bạn có thể đẩy các bài viết (Posts) từ tài khoản LiveJournal, RSS của bạn tới Website WordPress này. Bạn cũng có thể đẩy các bài viết và các bình luận từ tài khoản Movable Type, TypePad. Nếu bạn có một tài khoản trên Tumblr, bạn có thể đẩy các bài viết và các tệp tin đa phương tiện được đăng trên tài khoản Tumblr tới Website WordPress.
  • Categories and Tags Converter: Công cụ giúp bạn chuyển đổi các chuyên mục (Categories) thành các thẻ Tags và ngược lại.
  • WordPress: Bạn có 2 Website WordPress, trong đó 1 Website mới và 1 Website cũ. Bạn muốn đẩy các nội dung (bài viết, bình luận, chuyên mục, thẻ Tags) từ Website cũ sang Website mới, bạn cần sử dụng công cụ WordPress này.
Export: Cài đặt xuất dữ liệu

WordPress lưu lại các bài viết, các trang, bình luận, các chuyên mục (Categories) và thẻ Tags vào một tệp tin định dạng XML (được gọi là WordPress extended RSS hay là định dạng WXR).

  • All Contents: Xuất toàn bộ nội dung liên quan tới Posts và Pages, Menus, Custom field và Custom post type.
  • Posts: Xuất toàn bộ nội dung liên quan tới Posts.
  • Pages: Xuất toàn bộ nội dung liên quan tới Pages.
  • Media: Xuất toàn bộ nội dung liên quan tới Media.

Chọn loại nội dung xong bạn có thể ấn vào nút Download Export File, nó sẽ tải về máy một tập tin có định dạng .xml chứa dữ liệu mà bạn xuất ra. Tập tin này có lớn hay không tùy thuộc bạn có nhiều nội dung hay không.

Settings: Cài đặt

General: Cài đặt tổng quan

Khu vực này là nơi chứa các thiết lập quan trọng về cấu hình website của bạn.Trong phần Settings   General chúng ta có các thiết lập sau:

  • Site Title: Tên của website, tên này sẽ hiển thị mặc định trên tiêu đề website.
  • Tagline: Mô tả – slogan của website.
  • WordPress Address (URL): Địa chỉ của website WordPress hiện tại của bạn. Địa chỉ này sẽ tác động đến đường dẫn của Post và Page trên website.
  • Site Address (URL): Địa chỉ của website trang chủ của bạn, nếu bạn cài website WordPress làm trang chủ thì nên để giống với WordPress Address.
  • E-mail Address: Địa chỉ email của người quản trị website, các thông báo quan trọng về website sẽ gửi về đây.
  • Membership: Nếu đánh dấu vào mục Anyone can register, khách có thể tự đăng ký tài khoản người dùng trên website của bạn tại địa chỉ http://domain/wp-login.php?action=register.
  • New User Default Role: Nhóm người dùng mà những người dùng mới đăng ký sẽ được đưa vào mặc định sau khi họ đăng ký xong.
  • Timezone: Múi giờ mà bạn muốn sử dụng trên website, Việt Nam là GMT + 7.
  • Date Format: Định dạng ngày tháng năm bạn muốn hiển thị trên website.
  • Week Start On: Ngày mà bạn muốn nó là ngày đầu tiên của tuần.
  • Site Language: Ngôn ngữ mà bạn muốn dùng trên website, hiện tại chưa có tiếng Việt trong đây.

Đó là các thiết lập trong phần này, hãy đọc kỹ giải thích và thiết lập phù hợp với mình nhé.

Writing: Cài đặt soạn thảo

Các thiết lập trong phần này sẽ tác động trực tiếp đến quy trình soạn và đăng nội dung của bạn trên website.

  • Default Post Category: Category mặc định của một bài Post nếu bạn quên chọn category khi đăng.
  • Default Post Format: Loại định dạng post mặc định khi đăng nếu bạn quên chọn.
  • Post via e-mail: Tính năng đăng bài thông qua e-mail.
  • Update Service: Các dịch vụ ping mà bạn muốn WordPress tự động gửi tín hiệu ping khi có bài mới.

Chèn Code Vào Trước Và Sau Nội Dung Bài Viết

Bài hôm nay chúng ta sẽ  chèn thêm code vào trước và sau nội dùng bài viết… Chỉ là đoạn code nhỏ thôi nhưng thực sự nó rất cần thiết và hữu ích.

Chức Năng Chính

  • Chèn quảng cáo vào trước sau nội dung bài viết
  • Chèn Bình chọn (Votes) vào trước sau nội dùng bài viết
  • ……

Chèn Code Vào Trước Sau Nội Dung

Để chèn được code vào trước sau nội dung bài viết ta dùng add_filter và bộ lọc (hooks) là the_content. Bạn hãy chèn đoạn code sau vào file functions.php

CODE: 

add_filter( 'the_content', 'add_something_to_content_filter', 10 );// 10 và thứ tự xuất hiện
 
function add_something_to_content_filter( $content ) {
 
$original_content = $content ; // Nội dung bài viết
$add_before_content = ' 


<div style="border: 1px solid red; padding: 10px;">Nội dung được chèn vào trước nội dung bài viết</div>



 ' ;//Nội dung bạn muốn chèn vào trước
$add_after_content = ' 


<div style="border: 1px solid green; padding: 10px;">Nội dung được chèn vào sau nội dung bài viết</div>



 ' ;//Nội dung bạn muốn chèn vào sau
$content = $add_before_content . $original_content . $add_after_content ;
 
// trả về giá trị $content.
return $content;
}

Mở rộng

Bạn có thể truyền tham số của bài viết vào bằng cách thêm global $post, $posts; Ví dụ sau sẽ lấy thêm ID của bài viết. Bạn cũng chèn code sau vào file functions.php nhé

function the_content_replacer($content)
{
global $post, $posts;
$content .= "\n


<div>text here $post->ID</div>



";
return $content;
}
add_filter('the_content', 'the_content_replacer',20);

Chúc các bạn thành công ^^

Hiển Thị Google Maps Trong WordPress

Hôm nay Thủ Thuật Website sẽ hướng dẫn cho các bạn 2 cách để hiển thị google maps trên website. Cách đầu tiên sẽ là nhúng iframe, cách thứ 2 sẽ dùng google maps API.

Hiển thị google maps trong wordpress đặc biệt cần cho những website giới thiệu địa diểm như: Website bất động sản, nhà hàng, khách sạn… Giúp website của bạn trở nên chuyên nghiệp hơn, tăng trải nghiệm của khách khi ghé thăm website bạn.

Hiển Thị Google Maps Trong WordPress Bằng iframe

Cách này mình sẽ hướng dẫn cho các bạn nhúng google maps vào nội dung bài viết từ website google.com/maps.

Bước 1: Truy cập vào website google.com/maps search 1 địa chỉ cần hiển thị trong website.

Hiển thị google maps trong wordpress

Mình search địa chỉ “Thiết kế website wordpress“, chọn đúng địa chỉ mình mong muốn hiển thị. Các bạn có thể search số đường, tên đường, hoặc địa điểm có sẵn nha!

Bước 2: Ở vị trí hiển thị địa điểm, click chọn menu sau đó chọn Share or embed map hoặc biểu tượng share nhé! Nếu bấm vào biểu tương share sẽ ra ngay popup để bạn copy mã nhúng

Click chọn vào menu (Dấu 3 gạch)

Nhúng google maps trong wordpress

Click chọn vào “share or embed map” có thể bên trình duyện của bạn hiển thì là “Chia sẽ hoặc nhúng bản đồ

Bước 3: Ngay lúc này website google maps sẽ hiển thị một popup, các bạn click chọn tabs embed a map và copy mã nhúng

google maps wordpress

Copy mã nhúng

Bước 4: Dán mã nhúng vào khung soạn thảo nội dung của bạn. Các bạn chọn chế độ “văn bản” và dán mã vừa copy vào nhé!

Chú ý các bạn để chiều dài là 100% để không bị vỡ trên mobile nhé.

Bạn dán bất kỳ chổ nào trong văn bản mà bạn muốn hiển thị nhé, như vậy việc hiển thị google maps trong wordpress đã hoàn thành cùng xem kết quả thôi!

Tổng Kết

Bài viết này mình đã hướng dẫn cho các bạn cách hiển thị google maps trong wordpress. Không chỉ google maps và còn nhiều dịch vụ khác cũng tương tự như… youtube, zing mp3 …

Bài viết này mình sẽ chia ra nhiều phần để các bạn dễ theo dõi. Cách nhúng iframe hơi cùi chuối nhưng rất hiệu quả… Nếu bạn cần 1 cái maps pro hơn, có nhiều chức năng hơn thì hãy theo dõi phần sau của mình nhé:

  • Phần 2: Hiển thị google maps trong wordpress bằng Google maps API. Hiển thị 1 và nhiều marker trên maps
  • Phần 3: Hướng dẫn chức năng chỉ đường, vẽ đường tròn với 1 bán kích cho trước trong google maps (Bài này mình cũng đang viết nha!)

Mình sẽ update những bài viết khi nó hoàn thành, các bạn hãy like page Lê Ngọc Quyền để theo dõi những bài viết hay ho về wordpress nhé!

Hướng Dẫn Google Maps Với API

Bài viết này mình sẽ tiếp tục hướng dẫn cho các bạn sử dụng google maps API để làm những tính năng hay ho hơn.

Các chức năng mình sẽ giới thiệu trong bài này đó là:

  • Chỉ đường giữa 2 điểm
  • Vẽ đường tròn trong google maps
  • Lấy vị trí hiện tại

Hướng dẫn chức năng chỉ đường, vẽ đường tròn, get vị trí hiện tại trong google maps API

Các bạn chú ý, trước khi xem bài viết này các bạn vui lòng xem bài viết: Hiển thị marker google maps để hiểu hơn cách thức sử dụng google maps API và những điều cần thiết để google maps api hiển thị được trên website nhé.