Các nhiệm vụ cho các menu dọc hoàn hảo ...
Phần 1 của hướng dẫn này mô tả từng bước của quá trình xây dựng ngang đa cấp trình đơn lồng nhau cho Thesis Wordpress chủ đề . Phần 2 sẽ tiếp tục tăng cường các chức năng này. Ở đây chúng ta sẽ thêm "tối" phiên bản của trình đơn menu ngang và tôi sẽ dạy bạn làm thế nào để chuyển đổi giữa các "sáng" và "đen tối". Phần 2 là siêu của Phần 1. Nó bao gồm tất cả các từ Phần 1 + thêm công cụ mát hơn.
Ý tưởng chính mà tôi muốn trình bày thêm menu dọc đến chủ đề Luận văn tốt nghiệp (và Wordpress nói chung). Tôi đang tìm kiếm thực sự linh hoạt, SEO thân thiện và đa trình duyệt tương thích menu dọc sẽ cho phép tạo ra các mức không giới hạn làm tổ.
WEB đã tấn của các trang về đề tài này, nhưng khi tôi bắt đầu thử tất cả các mẫu này - hoặc là họ bị phá vỡ, bị sụp đổ, chỉ hỗ trợ số lượng hạn chế của các cấp hoặc misbehaved trong Gates + junksplorer Ballmer 6. Cuối cùng tôi đã trở lại để cố gắng và tin cậy menu ổ động mẫu theo chiều dọc của họ tỏ ra là một trường hợp tốt đẹp mà phù hợp với yêu cầu nghiêm ngặt của tôi. Tôi có đáng kể thay đổi chúng mặc dù để đảm bảo rằng nó phù hợp với mô hình Thesis.
Các nhiệm vụ cho sự hoàn hảo tiếp tục ...
Tôi đã dành khoảng 16 giờ tìm kiếm, lắp ráp, kiểm tra, sửa chữa, đánh bóng và điều chỉnh trình đơn dọc CSS và mã js và 3/4 thời gian đã được chi làm cho nó để làm việc trong MSIE 6.
Anyways, tôi đã hài lòng với kết quả cuối cùng. Dẫn đến trình đơn điều hướng thẳng đứng có tất cả các lợi ích tương tự mà ngang đơn.
Có khả năng thêm vào menu dọc là rất quan trọng để khoảng 70-80% các cổng thông tin trên web. Menu ngang có giới hạn "không gian" để chứa nhiều sự lựa chọn trình đơn nhưng đứng đơn không có giới hạn này và sẽ giúp đỡ vô cùng. Vì vậy, ở đây chúng tôi đi.
Rất nhiều các bước để làm cho nó xảy ra đã được mô tả trong phần 1 của hướng dẫn này sẽ làm cho nó một chút ngắn hơn, nhưng với kết quả tính năng phong phú hơn nhiều.
Ở đây nó đi:
Xây dựng SEO thân thiện, thẳng đứng, đa cấp, phân cấp lồng nhau trình đơn cho Wordpress và theme Thesis . Bước của Bước
(... Bạn không bao giờ nghĩ rằng có thể ...)
- Cài đặt exec php plugin và kích hoạt nó. Chúng tôi sẽ cần nó vì tôi sẽ sử dụng PHP bên trong widget văn bản để phát ra mã HTML dọc menu '.
- Làm các bước 1 - 6 từ phần 1 của hướng dẫn . Về cơ bản bạn cần cài đặt và kích hoạt sử dụng các plugin NAVT + trực quan xây dựng thực đơn của bạn. Hãy chắc chắn rằng menu tên nhóm của bạn là 'Menu1. Tên này là hardcoded trong custom_functions.php
- Nhắp chuột vào biểu tượng 'bánh' cho nhóm của bạn Menu1 'để chỉnh sửa thuộc tính của nó:
- Sau bước 7,1 -7,3 Phần 1 của hướng dẫn thiết lập "Tùy chọn", "Hiển thị" và "CSS" tab thiết lập.
- Bây giờ bấm vào tab "Chủ đề" của hộp thoại này. Chúng tôi sẽ ghi đè lên số thiết lập ở đó (nếu bạn được theo bước 1). Điều này là ok - bạn sẽ không mất bất cứ điều gì - nhưng những thay đổi này là cần thiết bởi vì tôi đã thay đổi một số mã từ bước 1.
Đây là hộp thoại này cần phải được điền vào:- Bên trong "Theme xpath:" khu vực nhập mã này (lệnh để thay thế bất kỳ thẻ với các lớp này):
.jquerycssmenu, .jqueryslidemenu - Thiết lập "hành động" để "Thay thế bằng"
- Bên trong của "Thêm thẻ trước khi chuyển hướng nhóm" khu vực nhập mã này:
<div class='jquerycssmenu' style='margin-top:5px;'> - Bên trong của "Thêm thẻ sau khi chuyển hướng nhóm" khu vực nhập mã này:
<br style='clear: left' /></div> - Click vào [lưu / đóng] nút.
- Bên trong "Theme xpath:" khu vực nhập mã này (lệnh để thay thế bất kỳ thẻ với các lớp này):
- Bây giờ đi đến bảng điều khiển Wordpress quản trị -> Appearance -> Widgets.
- Kéo widget "Văn bản" (từ khu vực lớn "các vật dụng có sẵn") vào khu vực "Sidebar 1" trên bên phải. Chúng tôi sẽ có thêm mã vào các widget văn bản sẽ giúp chúng tôi thực menu dọc.
Chú ý: Tôi đoán bạn có "Sidebar 1" trong sự tồn tại. Tùy chọn luận án cho phép bạn tắt nó đi nhưng vì lợi ích của hướng dẫn này chúng ta hãy làm cho nó được. - Một khi bạn kéo và thả widget này - nó sẽ mở ra như một bông hoa (tôi cảm thấy lãng mạn rằng cuộc đấu tranh MSIE).
- Trong khu vực "Tiêu đề" nhập "menu tốt nhất thế giới theo chiều dọc" ... Vâng, cảm thấy tự do sử dụng sáng tạo của bạn - đó văn bản sẽ đi trên menu dọc của bạn vừa được sinh ra.
- Trong khu vực lớn cho văn bản nhập mã PHP:
<?php
if (function_exists('navt_getlist'))
$menu_html = navt_getlist ('menu1', false, '', 'ul id="dd_vertical"');
else
$menu_html = "";
$menu_html = preg_replace ('#class=[\'\"]jquery(css|slide)menu[\'\"]#', 'class="dd_vertical"', $menu_html);
echo $menu_html;
?> - Nhấn [Lưu] nút, nhấp chuột vào liên kết "Close".
- Tải về cập nhật các tập tin ở đây .
Kho lưu trữ này bao gồm:- Cập nhật phiên bản của "sáng" code menu ngang
- "Dark" phiên bản của trình đơn ngang
- Dọc trình đơn mã
- Cập nhật phiên bản của custom_functions.php
- Bây giờ bạn cần phải giải nén lưu trữ và tải nó vào thư mục tùy chỉnh của bạn chủ đề luận án .
Lưu ý: nếu bạn đã thực hiện bất kỳ tùy chỉnh bên trong custom_functions.php - bạn sẽ cần phải hợp nhất chúng. Nếu không cảm thấy tự do để ghi đè lên nó với phiên bản của tôi. - Thì đấy! Bây giờ bạn có thể tải lại trang web của bạn và xem "sáng" menu ngang + neato dọc trình đơn trong thanh bên trái.
- BONUS nhiệm vụ: thay đổi "sáng" menu ngang vào Đề án "tối màu".
- Bên trong custom_functions.php tập tin:
thay thế mã này:
echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
với mã này:
//echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
Về cơ bản chúng ta đang cho ý kiến ra một dòng và uncommenting khác. - Bây giờ hãy vào Wordpress quản trị-> Tools-> Danh sách NAVT và nhấp chuột vào biểu tượng nêu trên "bánh" để chỉnh sửa các thuộc tính của nhóm của bạn Menu1 '.
- Nhấp vào tab "Theme".
- Bên trong của "Thêm thẻ trước khi chuyển hướng nhóm" khu vực nhập mã này:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Bây giờ tải lại trang web của bạn - và trình đơn menu ngang của chính bạn "kỳ diệu" đã trở thành bóng tối, một cái gì đó như thế:
Thesis chủ đề - CSS lồng nhau đa cấp trình đơn bảng màu tối
Bảng màu tối có thể là phù hợp hơn cho các trang web nhất định hơn so với một màu ánh sáng. Vì vậy, bây giờ bạn có một sự tự do của sự lựa chọn trong cuộc sống của bạn!
- Để có được trở lại chương trình "sáng" màu sắc - chỉ cần lùi lại trên "Bonus" bước.
- Bên trong custom_functions.php tập tin:
- Kết luận:
Tôi yêu Theme Luận văn tốt nghiệp , tôi yêu Wordpress và tôi thích thực tế là chúng ta có một cách để thêm các menu định hướng phong nha để cổng thông tin của chúng tôi.
$ 20
Tận hưởng!
Gleb Esman
