Hai mươi mười bảy là chủ đề mặc định linh hoạt nhất của WordPress từng thấy. Tuy nhiên, các tùy chọn được xây dựng trong chủ đề để lại một cái gì đó được mong muốn.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn năm phương pháp để tùy chỉnh chủ đề này cho phù hợp. blog của bạn. Chúng ta sẽ bắt đầu với những điều cơ bản và chuyển sang những tùy chỉnh khó hơn và có tác động mạnh mẽ hơn.

Khi chúng tôi hoàn thành, bạn sẽ có thể biến Twenty Seventeen thành một trang web đẹp và hiện đại cho doanh nghiệp hoặc blog. Bạn không tin tôi? Hãy nhìn xem, đây là những gì bạn có thể tạo ra:

Hai mươi mười bảy tùy chỉnh

#1 Tạo menu liên kết xã hội

Chà, phần đầu tiên này không chỉ là một bản hack. Nhưng đó là việc cá nhân hóa chỉ làm trên Twenty Seventeen.

Twenty Seventeen có một menu hấp dẫn cho các liên kết xã hội trên chân trang.

Hai mươi mười bảy liên kết xã hội

Vấn đề là một số người dùng đã báo cáo rằng họ gặp khó khăn khi tìm cách thêm các liên kết mạng xã hội của họ vào menu này. May mắn thay, nó thực sự rất đơn giản một khi bạn biết cách làm điều đó.

Tất cả những gì bạn phải làm là tạo một menu với các liên kết đến mạng xã hội của bạn và gán nó vào vị trí Menu Liên kết Xã hội.

  • Hãy cùng khám phá trong suốt quá trình.
  • Bắt đầu bằng cách mở "Customizer" (Giao diện> Tùy chỉnh).
  • Chọn tùy chọn “Menu” rồi chọn “Menu liên kết xã hội”.
  • Đổi tên menu mới của bạn.
  • Thêm một liên kết đến mỗi mạng xã hội có sẵn.
  • Đánh dấu vào ô bên cạnh " Liên kết xã hội đơn '.

Khi hoàn thành, menu của bạn sẽ trông như thế này:

Trang cá nhân hóa hai mươi mười bảy

Bước cuối cùng là nhấp vào nút “Lưu và Xuất bản” trong Customizer để lưu menu mới. Các liên kết của bạn đến các mạng xã hội bây giờ sẽ được hiển thị trong menu ở cuối trang.

# 2 Thay đổi chữ ký "Tự hào được cung cấp bởi WordPress"

Tình hình wordpress

Có hai lý do tại sao bạn có thể muốn chỉnh sửa văn bản trên chân trang có nội dung rằng trang web của bạn là "Tự hào được cung cấp bởi WordPress". "

Có thể bạn muốn mở rộng nó, thêm văn bản bổ sung: “Tự hào được cung cấp bởi WordPress, được thiết kế bởi WebPress Designs và được lưu trữ bởi LAMPress Lưu trữ web. "

Có lẽ bạn muốn thay đổi hoàn toàn chữ ký của bạn cho một cái gì đó cá nhân hơn.

Điều đầu tiên bạn cần làm là tạo và kích hoạt một chủ đề con (gợi ý: nếu bạn muốn đơn giản hóa cuộc sống của mình, hãy tải xuống chủ đề con định trước cho điều đó).

Khi bạn đã tạo và kích hoạt chủ đề con của mình, hãy sao chép tệp "footer.php". Sau đó, mở tệp "footer.php" này và tìm đoạn mã này: get_template_part ('template-Parts / footer / site', 'info');.

Bây giờ bạn có hai lựa chọn. Bạn có thể chỉ cần nhận xét dòng này bằng cách thêm "//" ngay trước mã hoặc bạn có thể xem xét thay thế nó bằng văn bản chân trang tùy chỉnh của riêng bạn. Đây là mã để thêm vào để tạo văn bản của chân trang.

Chân trang tùy chỉnh

Menu điều hướng nâng cao #3

Ngoài việc tạo menu điều hướng chức năng trên trang điều hướng, chúng tôi cũng sẽ sửa hiệu ứng di chuột của menu điều hướng và thêm tính năng cuộn mượt để cải thiện trải nghiệm tổng thể.

Trước tiên, chúng tôi sẽ bắt đầu thêm mã sau vào chủ đề (con) của bạn:

/ * Mã điều hướng một trang * / jQuery (tài liệu) .ready (function () {/ * Thêm phần đệm và id vào mỗi phần trang đầu * / jQuery ("h2.entry-title") .each (function () {var panelId = jQuery (this) .html (). toLowerCase (). Replace (/ s + / g, "-"); jQuery (this) .wrapInner (function () {return " ";})}) / * Xóa đánh dấu liên kết điều hướng * / jQuery ('# top-menu li'). RemoveClass ('current-menu-item current_page_item'); / * Thêm đánh dấu khi nhấp vào * / jQuery ('# top -menu li a '). on (' click ', function (event) {jQuery (this) .parent (). parent (). find (' li '). removeClass (' current-menu-item '); jQuery (this) .parent (). addClass ('current-menu-item');}); / * Kiểm tra URL hiện tại và đánh dấu điều hướng cho trang hiện tại * / jQuery ('# top-menu li a'). each (function () {var pageUrl = jQuery (location) .attr ('href'); var navUrl = jQuery (this) .attr ('href'); if (navUrl == pageUrl) {jQuery (this) .parent (). addClass ('current-menu-item');}})})

Bạn có thể thêm này mã trên một tập tin JavaScript được tải bởi một chủ đề con (những gì được đề nghị) hoặc sử dụng một plugin cho phép bạn thêm JavaScript vào trang web của mình. Đảm bảo tải mã sau khi jQuery đã tải xong.

Hãy xem các nhận xét trong mã để có được bức tranh đầy đủ về những gì đang xảy ra.

Ngoài ra, chúng ta có thể giúp việc di chuyển đến từng phần mượt mà hơn nhiều bằng cách cài đặt và kích hoạt plugin tự do: jQuery Cuộn mượt mà.

Tất nhiên, bạn vẫn sẽ cần xây dựng menu điều hướng của mình bằng cách thêm liên kết tùy chỉnh vào từng phần bằng tên của trang được hiển thị trong phần này.

Ví dụ: để liên kết đến phần "Giới thiệu", bạn cần tạo một liên kết tùy chỉnh và sử dụng " #about Là mỏ neo của liên kết. Để biết thêm chi tiết, hãy xem Cách tùy chỉnh chủ đề " Hai mươi mười bảy WordPress '.

Với một chút nỗ lực, bạn sẽ đạt được một kết quả thuyết phục:

Kết quả điều hướng hai mươi mười bảy

Đây chắc chắn không phải là tất cả những gì chúng ta có thể làm với Twenty Seventeen, sau này chúng tôi sẽ cung cấp các hướng dẫn khác về Twenty Seventeen.