Các nhiệm vụ cho các trình đơn 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 thực đơn đa ngang lồng nhau cho chủ đề Thesis Wordpress . 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 phiên bản "đen tối" của menu điều hướng theo chiều 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 Phần 1. Nó bao gồm tất cả từ phần 1 + thêm công cụ mát mẻ 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 trình đơn theo chiều dọc thân thiện và đa trình duyệt tương thích rằng sẽ cho phép tạo ra các mức làm tổ không giới hạn.
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, họ hoặc là bị phá vỡ, bị sụp đổ, được hỗ trợ chỉ số giới hạn của các cấp hoặc misbehaved Gates + junksplorer Ballmer 6. Cuối cùng tôi đã trở lại để cố gắng và tin cậy menu ổ động như 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 đã sửa đổi đáng kể mặc dù để đảm bảo rằng nó phù hợp với mô hình Thesis.
Các tìm kiếm sự hoàn thiện vẫn 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 theo chiều 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.
Dù sao, tôi đã hài lòng với kết quả cuối cùng. Kết quả 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 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" để thích ứng với nhiều lựa chọn menu nhưng thẳ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ó cho một ngắn hơn một chút, nhưng với kết quả tính năng phong phú hơn nhiều.
Vì vậy, ở đâ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 menu cho Wordpress và chủ đề Luận văn tốt nghiệp . Step by Step
(... 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 nó bởi 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 phải cài đặt và kích hoạt sử dụng NAVT Plugin + 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
- Click vào biểu tượng 'bánh' cho nhóm của bạn Menu1 'để chỉnh sửa các thuộc tính của nó:
- Theo các bước 7,1 -7,3 Phần 1 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ờ hãy nhấp vào tab "Theme" 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 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 vào đoạn mã (các 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 "Add 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 "Add 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 vào đoạn mã (các lệnh để thay thế bất kỳ thẻ với các lớp này):
- Bây giờ hãy vào bảng điều khiển Wordpress admin -> 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" ở bên phải. Chúng tôi sẽ có thêm mã vào Text widget 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 tại cuộc đấu tranh MSIE).
- Trong khu vực "Tiêu đề" nhập "trình đơn thẳng đứng tốt nhất của thế giới" ... 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 mới được sinh ra.
- Trong khu vực lớn đối với 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;
?> - Báo chí [Save] nút, click 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" mã đơn ngang
- "Dark" phiên bản của trình đơn ngang
- Dọc đơ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 "Đặt chủ đề Thesis của bạ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à thấy "sáng" menu ngang + neato dọc trình đơn trong thanh bên trái.
- BONUS nhiệm vụ: Hãy 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 tôi ý kiến ra một dòng và uncommenting khác. - Bây giờ đi đến Wordpress quản trị-> Tools-> Danh sách NAVT và click vào biểu tượng nêu trên "thiết bị để 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 "Add 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ế:
Luận văn chủ đề đa trình đơn CSS lồng nhau - dark bảng
Bảng màu tối có thể 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!
- Để lấy lại Đề án "sáng" màu sắc - chỉ cần lùi lại trên "Tiền thưởng" 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 điều hướng phong nha để cổng thông tin của chúng tôi .
$ 20
Tận hưởng!
Gleb Esman
comments } { 5 }
