Bỏ qua đến nội dung chính

3 chủ đề mới tùy chỉnh Hai mươi Seventeen

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 701.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

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 cách để tùy chỉnh chủ đề này cho phù hợp với blog của bạn. Chúng tôi sẽ bắt đầu với những điều cơ bản và chuyển sang các tùy chỉnh khó khăn và tác động 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í của 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:

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

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 phần sau, bằng cách 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 Hosting. "

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 đó).

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

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.

Bên cạnh đó, chúng ta có thể làm cho việc di chuyển đến từng bộ phận rất nhiều mượt mà bằng cách cài đặt và kích hoạt một plugin miễn phí: 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 '.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

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.

Bài viết này chứa comments 5

  1. lạ,

    ký tự có dấu không được chấp nhận! Tôi kết thúc với dấu hỏi thay vì bất kỳ ý tưởng?

    ps: cảm ơn cho những lời khuyên này anyway!

  2. Bonjour,

    Tôi đã làm theo hướng dẫn của bạn nhưng các biểu tượng của tôi chỉ xuất hiện trên phiên bản di động của blog của tôi chứ không phải trên phiên bản máy tính, nếu bạn có thể giúp tôi thì điều đó thật tuyệt!
    cảm ơn bạn,
    Julie

    1. Bonjour,
      bạn nên kiểm tra xem phong cách trình đơn được thực sự nạp. Bạn cũng có thể kiểm tra mã đơn để đảm bảo rằng các thẻ mà chịu các biểu tượng có mặt.

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
14 cổ phiếu
cổ phiếu8
tweet1
Enregistrer5