Plugin điều hướng Breadcrumb. Tại sao vụn và tại sao không có plugin? Thêm đường dẫn bằng cách sử dụng Plugin Breadcrumb NavXT
Hãy bắt đầu bằng cách cho bạn biết đường dẫn thường được sử dụng để làm gì khi thiết kế trang web.
Breadcrumbs là gì?
vụn bánh mì (mẩu bánh mì) là một thành phần điều hướng trang web. Chúng còn được gọi là đường dẫn, điều hướng trùng lặp, Chức năng điều hướng vân vân. Trong tài liệu tiếng Anh, bạn cũng có thể tìm thấy tên: “ vụn bánh quy"(vụn bánh quy). Ngoài ra, đôi khi đường dẫn có thể được gọi là đường dẫn điều hướng. Trên thực tế, tất cả những từ đồng nghĩa này đều mô tả cùng một đối tượng mà chúng tôi sẽ phân tích sâu hơn.
Breadcrumb hiển thị trực quan đường dẫn từ trang chính (gốc) của trang tới trang chứa khoảnh khắc này người dùng được định vị. Tại sao điều hướng này có được một cái tên lạ như vậy? Nếu bạn đã đọc truyện cổ tích “Hansel và Gretel” của anh em nhà Grimm, thì bạn sẽ biết rằng trong đó, những đứa trẻ tình cờ nghe được cha mẹ kể về việc bị bỏ lại trong rừng, đã cố gắng tích trữ trước những viên sỏi nhỏ mà chúng ném vào. đường để thoát ra ngoài. Lần đầu tiên nó thành công, nhưng lần thứ hai không thể thu thập được đá nên bọn trẻ đã ném vụn bánh mì xuống đường. Tuy nhiên, họ không lường trước được những mảnh vụn này sẽ bị chim ăn. Kết quả là bọn trẻ bị lạc và đi ngang qua nhà mụ phù thủy. Chẳng ích gì khi kể lại toàn bộ cốt truyện của câu chuyện cổ tích; rất có thể bạn đã đọc nó. Trên thực tế, tên của điều hướng đề cập đến sự kiện này.
Nhìn bề ngoài, breadcrumb thường là một menu nhỏ, thường nằm ở đầu trang. Các mục trong menu này là các siêu liên kết (ngoại trừ mục cuối cùng) và phản ánh cấu trúc phân cấp của tài liệu trên trang web.
Breadcrumbs được sử dụng bởi robot tìm kiếm. Với sự trợ giúp của điều hướng này, robot có thể nhanh chóng hiểu được kiến trúc trang web của bạn và phân tích nó. Theo đó, bạn không thể bỏ qua các đường dẫn hoặc cố tình từ chối chúng, vì điều này có thể gián tiếp ảnh hưởng đến việc lập chỉ mục trang web bị suy giảm (hoặc việc thu thập dữ liệu các trang tài nguyên không đầy đủ của robot).
Quan trọng hơn, vụn bánh mì có tác dụng tích cực đối với Kinh nghiệm người dùng tương tác. Người dùng luôn có thể hiểu chính xác vị trí hiện tại của mình trên trang web và có thể nhanh chóng chuyển sang cấp độ lồng vật liệu trước đó (hoặc đến một phần cụ thể), tức là. một người nhìn thấy trước mắt mình con đường mà anh ta đã đi từ trang chính của trang web đến trang hiện tại. TRONG kết quả của Google Breadcrumbs cũng được sử dụng và chúng được giới thiệu không phải để đơn giản hóa công việc của robot tìm kiếm mà chính xác là để người dùng có thể nhìn thấy cấu trúc của vật liệu.
Breadcrumbs là một hệ thống điều hướng đa cấp cho người dùng biết họ hiện đang ở vị trí nào trên trang web so với trang chính. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách hiển thị đường dẫn WordPress:
Breadcrumbs là gì và chúng dùng để làm gì?
Breadcrumbs là thuật ngữ dùng để mô tả menu điều hướng phân cấp được trình bày dưới dạng một chuỗi liên kết. Nó thường được sử dụng như thực đơn bổ sung dẫn đường.
Breadcrumbs khác với hệ thống menu Điều hướng WordPress, được sử dụng theo mặc định.
Mục đích của breadcrumbs là giúp người dùng điều hướng trang web. Chúng giúp hiểu người dùng hiện đang ở đâu. Điều này cũng giúp công cụ tìm kiếm xác định thứ bậc của các liên kết đến các trang web.
Các công cụ tìm kiếm như Google đã bắt đầu hiển thị đường dẫn trang web trong kết quả tìm kiếm. Điều này làm tăng khả năng hiển thị của trang web trong kết quả tìm kiếm và cải thiện tỷ lệ chuyển đổi:
Thêm đường dẫn bằng cách sử dụng Plugin Breadcrumb NavXT
Đây là một plugin breadcrumb WordPress linh hoạt và dễ sử dụng. Anh ấy có nhiều hơn các chức năng khác nhau hơn bạn có thể tưởng tượng. Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Breadcrumb NavXT. Sau khi kích hoạt nó, bạn cần truy cập trang cài đặt plugin: Cài đặt - Breadcrumb NavXT:
Đối với hầu hết các trang web, cài đặt mặc định sẽ ổn. Nhưng nếu cần, bạn có thể thay đổi cài đặt.
Trang cài đặt được chia thành nhiều phần. Trên tab Chung, bạn có thể xác định cách plugin sẽ hoạt động trên trang web.
Tại đây bạn có thể thay đổi mẫu liên kết. Các mẫu này sử dụng tham số Schema.org trong thẻ liên kết.
Trong phần "Loại bài đăng", bạn có thể đặt "đường dẫn" cho bài đăng, trang cũng như bất kỳ các loại tùy chỉnh Hồ sơ. Bạn có thể chọn hiển thị thứ bậc bản ghi. Theo mặc định plugin sẽ sử dụng hệ thống phân cấp " Tiêu đề trang web > Danh mục > Tiêu đề bài viết».
Bạn có thể thay thế các mục điều hướng bằng thẻ, ngày tháng hoặc phần tử cha Hồ sơ. Các tab Phân loại và Tác giả có các mẫu tương tự cho các liên kết menu. Đừng quên bấm vào " Lưu thay đổi».
Hiển thị Breadcrumb NavXT trên trang web của bạn
Để sử dụng plugin Breadcrumbs WordPress này, bạn phải chỉnh sửa các tệp chủ đề. Bạn cần thêm đoạn mã sau vào tệp header.php của chủ đề ở nơi hiển thị đường dẫn:
Đi đến trang web và mở một bài viết hoặc trang. Bạn sẽ thấy rằng bạn đã hiển thị đường dẫn.
Thêm Breadcrumbs bằng Plugin Yoast SEO
Cài đặt và kích hoạt SEO Yoast Cắm vào. Sau khi kích hoạt plugin bạn cần truy cập trang SEO > Nâng cao và chọn hộp cho tùy chọn " Kích hoạt đường dẫn»:
Sau đó, một số tùy chọn sẽ có sẵn để bạn có thể thay đổi tùy chọn hiển thị cho mẩu bánh mì. Cài đặt mặc định phù hợp với hầu hết các trang web nhưng có thể dễ dàng thay đổi nếu cần.
Khi bạn đã hoàn tất, hãy nhấp vào " Lưu thay đổi».
Tạo Breadcrumbs bằng Plugin Yoast SEO
Một số chủ đề đã hỗ trợ đường dẫn Yoast. Truy cập trang web và mở bất kỳ trang hoặc bài đăng nào để xem liệu nó có hiển thị đường dẫn WordPress hay không. Nếu không, bạn cần thêm một đoạn mã nhỏ vào chủ đề đang hoạt động.
Dán mã này vào header.php của chủ đề ở cuối tệp:
Vậy là xong, bây giờ bạn có thể truy cập trang web của mình, mẩu bánh mì sẽ được hiển thị ở đó.
Chúng tôi hy vọng bài viết này đã giúp bạn.
Dịch bài viết" Cách hiển thị liên kết điều hướng Breadcrumb trong WordPress"được chuẩn bị bởi nhóm dự án thân thiện.
Tốt xấu
Chào mọi người!. Hôm nay, trong bài viết này, tôi muốn cho bạn biết cách bạn có thể cải thiện khả năng sử dụng trang web của mình bằng cách sử dụng plugin Yoast SEO, điều mà tôi sẽ nói chi tiết trong một trong những bài viết tiếp theo của mình.
Chắc chắn nhiều người đã nghe nói về plugin này và biết rằng nó cần thiết để viết bài tối ưu SEO. Nhưng ít người nhận ra breadcrumbs WordPress Yoast SEO có thể làm được những gì khác.
Trước tiên, hãy để tôi giải thích “breadcrumbs” là gì và tại sao chúng lại cần thiết.
Vì thế, "mẩu bánh mì" là một phần bổ sung điều hướng trang, hiển thị bài viết nằm trong danh mục hoặc phần nào. Một khách truy cập, sau khi truy cập một số trang trên blog của bạn, phải hiểu anh ta đang ở phần nào và liệu anh ta có đang tìm kiếm thông tin mình cần trong đúng danh mục hay không. Điều hướng này có thể được tóm tắt như sau:
Trên trang web của chúng tôi nó trông như thế này:
Ngoài ra, sự hiện diện của điều hướng này giúp robot hiểu rõ hơn cấu trúc trang web và lập chỉ mục blog của bạn nhanh hơn. Và điều này rất quan trọng đối với các dự án trực tuyến.
"Tại sao?" - bạn hỏi, chúng tôi quyết định sử dụng plugin này. Câu trả lời ở đây sẽ đơn giản. tồn tại trên Internet một số lượng lớn dịch vụ tương tự, điều này sẽ giúp loại bỏ "mẩu vụn", nhưng đồng thời họ sẽ tải thêm trang web, điều này chắc chắn sẽ không làm cho nó tốt hơn chút nào. Và vì chúng tôi vẫn sử dụng Yoast SEO để tối ưu hóa bài đăng, nên sẽ thật tội lỗi nếu không tận dụng các khả năng của nó và không tạo ra khả năng sử dụng thuận tiện với sự trợ giúp của nó.
Thiết lập đầu ra breadcrumb bằng plugin Yoast SEO
Tôi sẽ không viết ở đây cách cài đặt Yoast SEO này. Nếu bạn chưa biết cách thực hiện thì hãy đọc bài viết này của tôi nhé “”. Trong đó tôi nói chi tiết và chỉ ra những cách bạn có thể cài đặt các plugin cần thiết cho công việc.
Trong cửa sổ mở ra, hãy chọn hộp kiểm “Bật đường dẫn”.
Chúng tôi rất vui vì tất cả các cài đặt sẽ mở ra bằng tiếng Nga và chúng rất trực quan. Trong video sắp xuất hiện của bài viết này tôi sẽ trình bày rõ hơn điều gì sẽ xảy ra khi bạn thay đổi một số điểm thực đơn này. Trong thời gian chờ đợi, bạn có thể dễ dàng thử nghiệm và thử tự mình thay đổi cài đặt. Không thể làm bất cứ điều gì khủng khiếp ở đây, vì đây chỉ là những điều chỉnh trực quan đối với “mảnh vụn” của chúng tôi.
Sau khi kích hoạt breadcrumb, bước tiếp theo là chèn mã kích hoạt tính năng này vào mẫu chủ đề của bạn. Để tìm hiểu mã nào cần được chèn, hãy nhấp vào liên kết sau cài đặt chuỗi của chúng tôi.
Sau khi truy cập trang web chính thức của plugin này, chúng tôi sao chép mã được yêu cầu và dán mã đó vào vị trí trong chủ đề nơi chúng tôi dự định hiển thị chúng.
Tôi không thể đề xuất một nơi phổ biến để chèn mã này vì nó phụ thuộc vào chủ đề bạn đang sử dụng. Bạn có thể cần phải viết nó trong tệp single.php hoặc trong page.php và trong một số trường hợp trong header.php.
Trong trường hợp của chúng tôi, chúng tôi đã chèn mã gần như ngay đầu tệp single.php, nằm ở www/wp-content/themes/your theme/.
Ghi chú: Xin lưu ý rằng tốt hơn là chèn mã qua máy khách FTP. Chúng tôi sử dụng Filezilla, công việc đã được viết chi tiết. Hãy nhớ đọc hướng dẫn của chúng tôi để tránh nhiều lỗi cho người mới bắt đầu.
Hơn nữa, xin lưu ý rằng mã chúng tôi có hơi khác so với mã được các nhà phát triển đề xuất cho chúng tôi. Cụ thể là chúng tôi đã gói chức năng breadcrumbs trong thẻ div. Điều này được thực hiện để bạn có thể đặt kiểu hiển thị của riêng mình.
Để làm điều này, trong tệp style.css, chúng tôi viết các kiểu mà chúng tôi yêu cầu. Trong đó, chúng ta có thể đặt màu sắc, nền, kích thước phông chữ, gạch chân, nghĩa là dẫn đến giao diện hoàn toàn phù hợp với sở thích của chúng ta hoặc được kết hợp với phong cách tổng thể của trang. Trong trường hợp của chúng tôi, nó trông như thế này:
Đến đây, việc thiết lập plugin gần như đã hoàn tất nhưng ở phiên bản này, sau khi hiển thị các tiêu đề thì tiêu đề của bài viết cũng sẽ được hiển thị. Điều này có thể dẫn đến việc gửi thư rác quá mức. Tôi nghĩ bạn sẽ đồng ý với tôi rằng điều này là không cần thiết, vì tiêu đề của bài viết đã hiển thị rõ ràng cho người dùng và không cần phải sao chép lại.
Để tránh điều này, bạn cần chèn thêm mã nhỏ vào tệp tin.php.
Hàm adjustment_single_breadcrumb($link_output) ( if(strpos($link_output, "breadcrumb_last") !== false) ( $link_output = ""; ) return $link_output; ) add_filter("wpseo_breadcrumb_single_link", " adjustment_single_breadcrumb");
Bây giờ tất cả các cài đặt của chúng tôi đã hoàn tất. Nếu bạn đã làm mọi thứ một cách chính xác, thì bạn sẽ nhận được kết quả gần giống như trên blog của chúng tôi.
Nếu bạn có bất kỳ câu hỏi nào, hãy viết trong phần bình luận!
Tạm biệt mọi người!
Anton Kalmykov đã ở bên bạn
Xin chào các độc giả thân mến của trang blog. Hôm nay tôi muốn nói về cách tôi triển khai các đường dẫn giúp người đọc hiểu bài viết này nằm trong cấu trúc nào. Có lẽ, chúng chủ yếu cần thiết cho các dự án có hệ thống phức tạp các danh mục lồng nhau (tiêu đề), nhưng cá nhân tôi thích chúng hoàn toàn ở bên ngoài.
Ngoài ra còn có một lý do tối ưu hóa cho việc sử dụng mẩu tin - chúng là một phần tử liên kết nội bộ, mà tôi đã viết cách đây không lâu. Một điều nữa là họ thêm trọng lượng tĩnh vào các tiêu đề và trang chủ, điều mà cá nhân tôi không cần chút nào. Tuy nhiên, tôi đã có một khoảng thời gian mà những mảnh vụn khá thời gian dài(hơn một năm và điều này trùng hợp với thời kỳ có lượng người tham dự tăng mạnh nhất).
Tại sao lại vụn và tại sao không có plugin?
Sau đó, chúng được triển khai trên cơ sở một plugin - khá chức năng nhưng khả năng khá kém thiết kế trực quan vụn bánh.
Tất nhiên, có thể dùng phong cách để tạo nên vẻ đẹp, nhưng lúc đó tôi không thân thiện lắm với anh ấy. Chỉ sau khi viết về các kiểu CSS, tôi mới bắt đầu hiểu được một chút về nó. Hóa ra giống như câu chuyện cười về một giáo viên phẫn nộ trước sự thiếu hiểu biết của học sinh, người đã giận dữ tuyên bố: “Tôi đã giải thích ba lần! Bản thân tôi đã hiểu điều đó! Và bạn...".
Chà, sau đó tôi đã loại bỏ những mảnh vụn và tôi thậm chí không nhớ chính xác lý do tại sao, nhưng chắc chắn không phải vì lý do tối ưu hóa. Nói chung, nếu bạn dựa vào các bài viết của tôi, thì những mẩu vụn sẽ trở nên thừa thãi trong vấn đề tế nhị là tạo ra sơ đồ lý tưởng liên kết. Nhưng, tuy nhiên, sau này tôi có nên tin điều đó không.
Có rất nhiều lý thuyết về vấn đề này. Nếu trong những bài viết đã đề cập, tôi cố tỏ ra thông minh và tìm kiếm sự thật trong những vấn đề cao cả (Ajax, sơ đồ đúng linking) thì người bạn này chẳng hạn sẽ hướng dẫn cách tối ưu hóa WordPress một cách tóm tắt, không có chi tiết nhưng khá dễ hiểu. Bạn phải đơn giản hơn và mọi người sẽ bị thu hút bởi bạn, và có thể các công cụ tìm kiếm sẽ theo dõi họ. Được rồi, quay lại với những mảnh vụn.
Việc tạo chúng hoàn toàn không khó và bạn không phải cài đặt plugin. Điều này có lợi thế của nó, bởi vì một plugin sai có thể áp đảo một máy chủ khá mạnh. Ví dụ: tôi gặp vấn đề tương tự sau khi cài đặt plugin liên kết nội bộ được mô tả trước đó một chút (một bảng bật lên ở khu vực bên phải xuất hiện trên blog của tôi khi bạn cuộn trang của nó để bắt đầu nhận xét).
Tôi, như bạn nhớ (mặc dù không rõ tại sao bạn cần nhớ điều này, nhưng vẫn vậy), hiện đang ngồi trên Hộp thông tin. Đó là một thứ tuyệt vời và rẻ tiền, nhưng cách đây hơn một tháng tôi đã có nó - như thể tôi đã trở lại bình thường.
Những cú phanh khủng khiếp cuộn thành từng đợt, điều khá thường xuyên xảy ra trên lưu trữ thường xuyên, nếu ai đó từ máy chủ của bạn bắt đầu ăn tài nguyên được chia sẻ sẽ không đo lường hoặc gây hại cho bất kỳ người hàng xóm ảo nào của bạn.
Tôi bắt đầu viết những lá thư giận dữ cho bộ phận hỗ trợ kỹ thuật, yêu cầu sự hài lòng và lắc họ với một liên kết đến bài báo được đề cập ở trên về Parallels của họ, điều mà tôi đã ca ngợi ở đó, nhưng hóa ra nó thật kinh tởm làm sao.
Họ trả lời tôi (một cách lịch sự nhưng khá thuyết phục) rằng khối lượng công việc của tôi rất cao. Tôi trả lời họ rằng kể từ đầu năm nó đã giảm đáng kể (nghĩa là lượng truy cập và số lượt xem). Chà, nói chung, họ đã thuyết phục tôi suy nghĩ theo hướng mà trên thực tế, Gần đây Tôi đã làm điều tương tự với blog của mình và điều đó có thể gây ảnh hưởng xấu đến công việc của anh ấy.
Do những khó khăn nảy sinh với lưu lượng tìm kiếm, tôi chủ yếu nghĩ đến cách lấy lại mọi thứ, hoặc chìm đắm trong nỗi u sầu, nhớ về những ngày huy hoàng trước khi sụp đổ. Nói chung, tôi rất khó nhớ rằng đó cũng là khoảng thời gian tôi cài đặt plugin upPrev này. Tôi đã đi vào cài đặt của nó và đọc chính xác cụm từ trên tab “Bộ nhớ đệm”:
Sử dụng trên các trang web lớn (hơn 1000 bài viết) có thể khiến trang web bị sập
Chính xác hơn, tôi chỉ đơn giản là đã không đọc nó đến cuối tại thời điểm thiết lập và tự động đánh dấu vào ô, quyết định rằng bộ đệm nói chung là tuyệt vời và so với WordPress, nó nói chung là một cimus hoàn chỉnh (hãy nhớ của tôi và nó cho phép bạn phải trả tiền cho việc lưu trữ ít hơn nhiều lần). Nói chung, tôi đã tắt bộ nhớ đệm trong upPrev và hệ thống phanh đã biến mất.
Tất nhiên, ví dụ này không chỉ ra rõ ràng rằng các plugin có hại, nhưng chúng có thể gây ra sự chậm lại (thậm chí ban đầu có thể không được chú ý). Nói chung, nếu ai đó cũng đã cài đặt upPrev, thì bạn biết phải làm gì nếu chủ nhà lưu trữ thông báo cho bạn rằng tải cho phép đã vượt quá hoặc chính bạn cảm thấy điều đó.
Đó là lý do tại sao, bất cứ khi nào có thể, tôi cố gắng làm càng ít càng tốt. Hơn nữa, nó khá thú vị khi sử dụng chức năng khác nhau, bởi vì bạn có vẻ thông minh hơn thực tế. Điều này đặc biệt tuyệt vời khi bạn biết PHP, hay đúng hơn là không biết gì về nó. Đó là khi một câu đố thực sự xuất hiện, chẳng hạn như câu đố mà tôi đã mô tả.
Chà, và trong số những thứ khác, những mẩu bánh mì này tạo ấn tượng thị giác rất dễ chịu:
Và để tùy chỉnh chúng theo thiết kế blog của bạn, bạn sẽ có sáu lựa chọn về cách phối màu.
Triển khai các đường dẫn đẹp mắt cho WordPress
Trước tiên, bạn sẽ cần kết nối với máy chủ của mình ( lưu trữ ảo) qua FTP. Ví dụ: sử dụng Filezilla được mô tả. Sau đó đi tới thư mục với chủ đề hiện tại thiết kế, thường tồn tại dọc theo con đường này:
/wp-content/themes/tên của nó
Nói chung, tôi đã mô tả các chủ đề WordPress, hay đúng hơn là cho biết chúng có thể bao gồm những tệp (mẫu) nào và chúng chịu trách nhiệm về những phần nào của bố cục blog. Tuy nhiên, ngoài việc thuần tuý giải pháp thiết kế trong thư mục chủ đề, bạn cũng sẽ tìm thấy tệp tin.php (nếu nó không tồn tại, chỉ cần tạo nó).
Nó được sử dụng để viết tất cả các loại chức năng hoặc bộ lọc cho phép bạn triển khai nhiều thứ hữu ích mà không cần đào sâu vào các tệp công cụ, những thay đổi trong đó sau này có thể bị mất. Và mọi thứ bạn thêm vào hàm.php sẽ tồn tại cho đến khi bạn thay đổi chủ đề.
Vì vậy, hãy thêm chức năng sau vào tệp tuyệt vời này:
//Breadcrumb giống như hàm Google the_breadcrumb() ( if (!is_home()) ( echo "
"; }Đừng đẩy cô ấy vào trong nữa. chức năng hiện có. Có lẽ cách dễ nhất là tìm từ function và chèn cấu trúc trên ngay trước nó (mặc dù sẽ tốt hơn nếu tách nó bằng dấu ngắt dòng cho rõ ràng).
Đây là khung. Bây giờ chúng ta cần thêm một số phong cách cho nó. Đầu tiên, bạn nên quyết định màu sắc nhưng bạn có thể điều chỉnh nó trong quá trình thực hiện.
Kho lưu trữ sẽ chứa sáu tệp đồ họa trong định dạng PNG, mỗi dải bao gồm các sọc có màu bạn chọn và mức độ sáng khác nhau:
Một trong các thanh sẽ được sử dụng theo mặc định, một thanh khác sẽ được hiển thị khi bạn di chuyển con trỏ chuột qua nó và thanh thứ ba sẽ được hiển thị khi bạn nhấp vào liên kết đường dẫn. Tất cả điều này được thiết lập một cách tự nhiên trong Kiểu CSS, mà bây giờ chúng ta sẽ viết ra.
Nhưng trước tiên, hãy giải nén kho lưu trữ có hình nền và tải chúng lên thư mục có chủ đề của bạn trong thư mục ở đó:
/wp-content/themes/thư mục chủ đề/hình ảnh
Bây giờ hãy mở để chỉnh sửa (tốt nhất là không phải trong bảng quản trị WordPress mà bằng cách kết nối với trang web qua FTP) tệp có kiểu style.css từ thư mục có chủ đề của bạn. Bạn có thể thêm đoạn mã sau vào cuối:
#breadcrumb (display:block;float:none;margin:0 0 40px 0;font-weight:600;) #breadcrumb ul (font-family: Helvetica, sans-serif;list-style: none;).crumbs (hiển thị : block;) .crumbs li.first (padding-left: 8px;) .crumbs li a, .crumbs li a:link, .crumbs li a:visited (color: #616d7e;display: block;float: left;font -size: 11px;margin-left: -13px;padding: 7px 17px 11px 25px;position:relative;text-trang trí: none;) .crumbs li a (background-image: url(images/bg-crumbs-blue.png ); vị trí nền: 100% 0%;lặp lại nền: không lặp lại;vị trí: tương đối;) .crumbs li a:hover (vị trí nền: 100% -48px;màu: #333;con trỏ: con trỏ;) .crumbs li a:active (background-position: 100% -96px;color: #333;) .crumbs li.first một span (border-left: 1px Solid #d9d9d9;height: 29px;left: 0;position: tuyệt đối ;trên cùng: 0;chiều rộng: 3px;)
Ở dòng Background-image:url (images/bg-crumbs-blue.png) bạn có thể thoải mái đổi tên tập tin đồ họa nền tảng của người có màu sắc phù hợp với thiết kế nhất blog của bạn. Về cách thức hoạt động cũng như về tất cả các biến thể có thể có của nó (màu sắc, vị trí, hình ảnh, lặp lại, tệp đính kèm). Thực sự thì nó thú vị đến mức đáng sợ, vì nó mở ra rất nhiều khả năng.
Hiển thị các mẩu vụn trong bài đăng WordPress và điều chỉnh chúng một chút
Trên thực tế, chúng tôi đã chuẩn bị phần đế và bây giờ tất cả những gì còn lại là quyết định chính xác vị trí mà du khách sẽ nhìn thấy vụn bánh mì của chúng tôi. Rõ ràng, trên trang chính chúng sẽ không cần thiết. Cá nhân tôi quyết định chỉ hiển thị chúng trong các bài đăng, điều đó có nghĩa là chúng tôi sẽ cần thêm mã để gọi chúng vào tệp (mẫu) của chủ đề chịu trách nhiệm cho việc này.
Trong hầu hết các trường hợp, đây sẽ là một tệp single.php, nhưng có thể thay vào đó bạn đã chạy index.php (xem liên kết ở trên tới bài viết về chủ đề WordPress). Khi đó, để chỉ hiển thị breadcrumbs trong các bài đăng, bạn sẽ phải tạo một file single.php bằng cách sao chép nội dung của file index.php vào đó, sau đó thêm đoạn mã để gọi breadcrumbs chỉ trong một bài viết.
Nó (mã) sẽ trông như thế này:
Không do dự, tôi đã đưa nó vào ngay từ đầu, ngay sau khi tải tiêu đề blog:
Trên thực tế, trên blog đã có những mẩu vụn, nhưng sau khi lang thang khắp các trang, tôi phát hiện ra một điều khó chịu - một số tiêu đề bài viết của tôi hóa ra dài hơn chiều rộng của nền đồ họa. Những chữ cái đã leo lên biên giới của nó và nó không phải là băng.
Tất nhiên, nó có thể được mở rộng đến biên tập đồ họa() dải chất nền, nhưng điều đó quá đơn giản và chúng tôi không tìm kiếm những cách dễ dàng. Hoặc ngược lại.
Nói chung là tôi hơi giảm số lượng ký tự(đã thay thế the_title() trong mã bằng Trim_title_chars (60, "...")), được hiển thị trong liên kết tới bài đăng hiện tại, vì tiêu đề của tôi quá dài và đơn giản là không vừa với khoảng trống nền:
Hàm the_breadcrumb() ( ... if(is_single()) ( echo "
Ở đây, nhưng để làm được điều này, chúng tôi phải thêm một hàm nữa vào tệp tin.php.
Hàm Trim_title_chars($count, $after) ( $title = get_the_title(); if (mb_strlen($title) > $count) $title = mb_substr($title,0,$count); else $after = ""; echo $title . $sau ;
Một điều tuyệt vời và có thể thay thế the_title() bằng Trim_title_chars (60, "...) bất cứ nơi nào bạn cần. Ví dụ: tôi đã triển khai tính năng này trong . Đương nhiên, số 60 có nghĩa là số lượng ký hiệu Taital được hiển thị và bạn có thể tự do thay thế nó bằng ký hiệu bạn cần.
Nhưng sau đó tôi không thích việc các từ bị cắt ở giữa hoặc có điều gì đó xấu xí, vì vậy cuối cùng tôi đã thay thế TRIM_title_chars (60, "...") bằng Trim_title_words (5, "..."). Đoán xem có gì 5? À, hiển nhiên là có từ rồi sẽ có dấu chấm lửng.
Tiếng vang"
Tuy nhiên, bạn cần thêm một hàm nữa vào hàm.php:
Hàm Trim_title_words($count, $after) ( $title = get_the_title(); $words = chia(" ", $title); if (count($words) > $count) ( array_splice($words, $count); $title = implode(" ", $words); else $after = ""; echo $title )
Đó là tất cả những gì tôi muốn nói trong dịp quan trọng này.
tái bút Tôi đã chuyển báo cáo nhỏ của mình sang phần bình luận cho bài viết về.
Chúc bạn may mắn! Trước hẹn sớm gặp lại trên các trang của trang blog
Bạn có thể xem thêm video bằng cách vào");">
Bạn có thể quan tâm
Cách tự động thêm Thuộc tính thay thế V. thẻ hình ảnh blog WordPress của bạn (nơi chúng không tồn tại) 
Tệp tin.php từ thư mục có chủ đề WordPress Và ví dụ thực tế công dụng của nó Gravatar - cách tạo hình đại diện toàn cầu và tùy chỉnh hiển thị biểu tượng Gravatar trong chủ đề WordPress 
Chúng tôi tạo cho một blog trên Nút WordPress bổ sung vào truyền thông xã hội và dấu trang (không có plugin và tập lệnh) Cách sử dụng Ajax để đóng liên kết và cách đặt điều kiện hiển thị nội dung nào đó trong các bài đăng thuộc danh mục WordPress mong muốn (in_category) 
Làm thế nào trong WordPress bạn có thể hiển thị các bài đăng từ một danh mục có hình thu nhỏ (tạo chúng trong Hình thu nhỏ tự động đăng và Catch_that_image)
Xin chào tất cả các bạn. Trong bài viết hôm nay tôi sẽ cho bạn biết breadcrumb là gì, chúng dùng để làm gì và làm thế nào để thêm chúng vào blog wordpress có hoặc không có plugin. Hãy bắt đầu nào!
Breadcrumbs - một cách thuận tiện để liên kết blog
Một trong những cách đơn giảnđồng thời đơn giản hóa việc điều hướng và liên kết trang web, đây là những đường dẫn. Nó được đặt tên để vinh danh cách mà các anh hùng trong truyện cổ tích Đức “Hansel và Gretel” cố gắng tìm đường ra khỏi khu rừng.
Đúng là những mảnh vụn không giúp được gì cho bọn trẻ - chúng bị chim mổ, nhưng trong quá trình phát triển trang web, chức năng, được đặt tên theo phương pháp giải cứu không thành công, đã bén rễ và được sử dụng trong các tài nguyên cho nhiều mục đích khác nhau, từ blog cá nhân đến trực tuyến cửa hàng.
Có lẽ bạn đã nhìn thấy đường dẫn breadcrumb này nhiều nhất internet khác nhau tài nguyên. Nó thường được đặt phía trên bài viết và trông giống như thế này:
Trang chủ> Danh mục > Danh mục con > Trang hiện tại
Hơn nữa, tất cả các “liên kết”, ngoại trừ liên kết cuối cùng, đều là liên kết nội bộ.
Nhờ chuỗi này, người đọc có thể hiểu bất cứ lúc nào mình đang ở cấp độ nào của trang web và có cơ hội xem qua toàn bộ chuỗi và ngay lập tức đi đến phần mình quan tâm hoặc quay lại trang chính của tài nguyên.
Lợi ích của breadcrumbs đối với một trang web và blog là gì?
Như đã nêu ở trên, thứ nhất, nó giúp việc điều hướng dễ dàng hơn. Ví dụ, một độc giả đến với một bài viết, đọc nó và quyết định đọc các bài viết khác trong chuyên mục. Nhờ có breadcrumbs, anh ấy không cần phải tìm kiếm sơ đồ trang web hoặc danh sách các danh mục. Anh ấy sẽ lùi lại một bước.
Bạn khéo léo mời người đọc nhấp vào các liên kết, cho họ một lý do khác để ở lại trang web của bạn. Điều này, đến lượt nó, lại cải thiện yếu tố hành vi, vậy thì để làm gì robot tìm kiếm, trước hết, blog và trang web khác nhau.
Cấu trúc trang web càng phức tạp thì việc cài đặt breadcrumbs trên đó càng quan trọng. Vì du khách, đặc biệt là những người lần đầu đến thăm, tài nguyên này, thật khó để hiểu tất cả các khối, trang, phần và tiểu mục. Nếu họ không có gợi ý nào, họ sẽ rời đi sau khi chỉ đọc một bài báo.
Nhiệm vụ thứ hai của yếu tố này, liên quan chặt chẽ với nhiệm vụ thứ nhất, là tối ưu hóa nội bộ trang web, hay đúng hơn là một cách khác để liên kết càng nhiều càng tốt số lượng lớn bài viết. Hơn nữa, không giống như liên kết thủ công, ở đây mọi thứ diễn ra tự động. Đường dẫn breadcrumb được yêu cầu ngay lập tức xuất hiện phía trên mỗi bài viết được xuất bản.
Chức năng này có thể được thêm vào các trang web và blog những cách khác. Hãy xem xét hai trong số nhiều nhất tùy chọn đơn giản dành cho WordPress - cài đặt bằng plugin và thực hiện các thay đổi nhỏ đối với mã.
Cách thêm đường dẫn vào blog bằng plugin
Cách dễ nhất để cài đặt breadcrumbs trên blog là cài đặt một plugin đặc biệt. Đối với WordPress, Breadcrumb NavXT thường được sử dụng.
Cách cài đặt chuẩn: vào blog admin -> Plugins -> Add new. Trong cửa sổ xuất hiện, hãy nhập tên của plugin và nhấp vào “Tìm plugin”.
Đây rồi, plugin của chúng tôi, hãy nhấp vào “Cài đặt ngay”, sau đó nhấp vào “Kích hoạt”.
và phía trên dòng này chèn đoạn mã sau:
Nếu bạn muốn đặt mẩu bánh mì ở một nơi khác, thì bạn đặt mã tương tự ở đó.
Sau đó vào “Cài đặt” -> “ Cài đặt đường dẫn NavXT" và trong cột "Tên liên kết", hãy đổi tên thành tên của bạn và lưu các thay đổi.
Tất cả những gì còn lại là vào blog và chiêm ngưỡng thành quả.
Cách thêm đường dẫn vào blog mà không cần plugin
Vì bất kỳ plugin nào cũng là một tải bổ sung trên blog, làm chậm hoạt động của blog, tốt hơn là bạn chỉ cần thay đổi mã một chút, đặc biệt là vì trong trường hợp này, việc này dễ dàng hơn việc cài đặt một plugin.
Đi tới bảng quản trị -> " Vẻ bề ngoài" -> "Trình chỉnh sửa" -> hàm.php. Ở đây, ở bất cứ đâu (điều chính không nằm trong hàm khác), hãy chèn đoạn mã sau:
Hàm the_breadcrumb() ( echo "Bạn đang ở đây: "; if (!is_front_page()) ( echo "Home"; echo " » "; if (is_category() || is_single()) ( the_category(" "); if (is_single()) ( echo " " "; the_title(); ) ) elseif (is_page()) ( echo the_title(); ) ) else ( echo "Home"; ) )
Và tiết kiệm. Nếu bạn lo lắng về việc bị nhầm lẫn, chỉ cần dán nó vào cuối, phía trên dấu ngoặc đơn cuối cùng.
Bây giờ bạn cần mã này:
đặt nó ở nơi bạn muốn đường dẫn xuất hiện, chẳng hạn như phía trên tiêu đề bài viết. Để thực hiện việc này, hãy truy cập single.php, tìm dòng có the_title và dán mã này lên trên nó rồi lưu các thay đổi.
Bạn có thể vào trang web và xem những gì đã xảy ra. Như bạn có thể thấy, You are here và Home rõ ràng không phù hợp ở đây và chúng cần được thay đổi thành thứ gì đó phù hợp hơn, chẳng hạn như Path và Home (hoặc tên của blog).
Ngoài ra, bạn cần đảm bảo rằng các thay đổi trông đẹp mắt như nhau trên các trình duyệt khác nhau– không trùng lặp với các phần khác của chủ đề, đồng thời hiển thị rõ ràng.
Thế là xong, Breadcrumbs giúp ích cho người đọc của bạn và bạn có thể tự hào rằng bạn đã tìm ra cách tự cài đặt chúng. Cảm ơn tất cả các bạn đã quan tâm!
tái bút Ở cuối bài viết có video hướng dẫn cách thêm breadcrumbs vào blog của bạn:
