Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Theme Development
Code

Việc tạo ra một chủ đề WordPress từ HTML tĩnh: thiết lập các tiêu đề

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Creating a WordPress Theme From Static HTML.
Creating a WordPress Theme From Static HTML: Adding a Loop

Vietnamese (Tiếng Việt) translation by Thùy Trang (you can also view the original English article)

Cho đến nay trong loạt bài này, bạn đã học được làm thế nào để tạo một chủ đề cơ bản từ HTML tĩnh. Bạn đã thực hiện những điều sau đây:

  • Chuẩn bị đánh dấu của bạn cho WordPress
  • Chuyển đổi HTML của bạn với PHP và chia tập tin của bạn vào mẫu tập tin
  • Chỉnh sửa các stylesheet và tải lên của bạn chủ đề cho WordPress
  • Thêm vào một vòng lặp của bạn tập tin chỉ mục

Trong hướng dẫn này, bạn sẽ làm việc trên file header.php mà bạn đã tạo trong phần 2. Bạn sẽ tìm hiểu làm thế nào để:

  • Thêm từ tự động tạo ra meta tags thay cho cái tĩnh hiện có trong các<head>phần</head>
  • Thay thế tiêu đề trang web tĩnh và mô tả với bạn (hoặc người dùng khác của chủ đề của bạn) có thể cập nhật thông qua WordPress admin
  • Thêm wp_head hành động móc vào tập tin tiêu đề của bạn để sử dụng bằng cách bổ sung

Những gì bạn cần

  • Biên tập mã của bạn lựa chọn
  • Một trình duyệt để kiểm tra công việc của bạn
  • Một cài đặt WordPress, địa phương hoặc từ xa
  • Nếu bạn đang làm việc tại địa phương, bạn sẽ cần MAMP, WAMP hoặc đèn bật WordPress để chạy
  • Nếu bạn đang làm việc từ xa, bạn sẽ cần truy cập FTP để trang web của bạn cộng với một tài khoản người quản trị trong cài đặt WordPress của bạn

1. cách thêm thẻ Meta vào tập tin tiêu đề của bạn

Bạn cần phải thêm hai meta tags cho chủ đề của bạn: Các<title>từ khóa và thẻ meta charset.</title>

Cập Nhật Charset Meta Tag

Tìm dòng mà đọc:

Thay thế nó với điều này:

Điều này tự động sẽ sử dụng thẻ meta charset như thiết lập thông qua màn hình quản trị cài đặt.

Cập nhật các<title>Từ khóa</title>

Tại thời điểm này, các chủ đề có một thẻ tiêu đề tĩnh được gửi thông qua các mã sau đây trong header.php:

Bằng cách thêm một thẻ tiêu đề được tạo động, bạn có thể tap vào chức năng bổ sung được cung cấp bởi WordPress cho này mà sẽ cung cấp cho bạn lợi ích SEO và khả năng sử dụng.

Xóa mã ở trên và thay thế nó với những điều sau đây:

Mã này thực hiện một vài điều:

  1. Lần đầu tiên nó sử dụng wp_title() mẫu thẻ để ra tiêu đề của trang hiện tại, theo sau là một tách bên tay phải
  2. Sau đó, nó sử dụng bloginfo() mẫu thẻ với tham số 'tên' để ra tên của trang web chính nó
  3. Nếu khách truy cập vào trang chủ (mà sẽ kiểm tra bằng cách sử dụng is_home() có điều kiện thẻ || is_front_page()), nó xuất ra mô tả trang web bằng cách sử dụng get_bloginfo() mẫu thẻ với tham số 'description'

Bây giờ lưu tập tin tiêu đề của bạn.


2. thêm một trang web tự động tạo ra tiêu đề và mô tả

Bước tiếp theo là để thay thế tiêu đề trang web tĩnh và mô tả của bạn với một trong những động.

Vẫn còn trong header.php, tìm đoạn mã sau:

Thay thế nó bằng mã dưới đây:

Mã này thực hiện như sau:

  • Kết thúc tốt đẹp một liên kết đến trang chủ xung quanh tiêu đề trang web bằng cách sử dụng echo home_url()
  • Hiển thị tiêu đề trang web bằng cách sử dụng bloginfo() mẫu thẻ với tham số 'tên'
  • Hiển thị trang web mô tả bằng cách sử dụng mẫu bloginfo() từ khóa một lần nữa, lần này với các tham số 'description'

Bây giờ bạn sẽ thấy rằng bạn có thể thay đổi tiêu đề trang web và các mô tả thông qua màn hình cài đặt trong quản trị của bạn, và nó sẽ thay đổi trên mỗi trang của trang web của bạn.

Tôi đã thay đổi tôi và bạn có thể xem kết quả dưới đây. Lưu ý rằng điều này cũng là phản ánh trong các tiêu đề như được hiển thị ở trên cùng của cửa sổ trình duyệt.

creating-wordpress-theme-from-static-html-meta-tags-site-title-description-added

3. Thêm wp_head hành động móc vào chủ đề của bạn

Wp_head hành động móc là một điều cần thiết để thêm vào mỗi chủ đề. Nó được đặt ngay sau khi thẻ đóng của bạn file header.php và nó được sử dụng bởi rất nhiều bổ sung để treo các chức năng của họ vào chủ đề của bạn. Nếu bạn không thêm nó, bạn sẽ tìm thấy các phần bổ trợ được kích hoạt trên các trang web bằng cách sử dụng chủ đề của bạn không thể làm việc.

Wp_footer hành động móc là tương tự và nằm trong footer.php file - chúng tôi sẽ đến đó tại phần 8 của loạt bài này.

Ngay lập tức trên thẻ đóng, hãy thêm mã sau đây:

Bây giờ lưu tập tin của bạn. Bạn đã hoàn tất!


Tóm tắt

Bạn đã thiết lập một số yếu tố thiết yếu của bạn file header.php, nên được bao gồm trong mỗi chủ đề.

Trong phần tiếp theo của loạt bài này, bạn sẽ tìm hiểu làm thế nào để thêm một trình đơn điều hướng đến tập tin tiêu đề của bạn, và sau đó trong phần 7 bạn sẽ tìm hiểu làm thế nào để thêm một widget để tiêu đề của bạn, do đó bạn có thể thêm chi tiết liên lạc, hoặc bất cứ điều gì bạn muốn, vào tiêu đề của bạn.


Tài nguyên

  • Wp_title() mẫu thẻ (Codex trang)
  • Bloginfo() mẫu thẻ (Codex trang)
  • WordPress có điều kiện tags (Codex trang)
  • Màn hình cài đặt (Codex trang)
  • Wp_head hành động móc (Codex trang)
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.