Quest cho trình đơn hoàn hảo ...
Đây là Phần 1 của hướng dẫn
Phần 2 của hướng dẫn này dạy làm thế nào để xây dựng menu dọc + bảng màu tối cho ngang
Tôi quyết định để có được chủ đề luận án , bởi vì một trong những khách hàng của tôi thông báo với tôi về vấn đề tương thích giữa các luận án của tôi thành viên wordpress trang web plugin MemberWing. Tôi cố định nó và sau đó quyết định để có một cái nhìn gần hơn tại Thesis và thực sự làm phiền để xem video trên trang đầu của trang web Thesis chính - Diythemes.com .
Những gì tôi ấn tượng nhất là chú ý đến chi tiết thân thiện với người dùng, và hầu hết tất cả. SEO tính năng được suy nghĩ của
MemberWing cắm thành viên được thiết kế từ mặt đất lên cho các trang web thành viên sẽ cần phải kéo SEO càng nhiều nước càng tốt. Vì vậy, tôi trả tiền rất nhiều sự chú ý của vô số các SEO cải tiến và hoàn hảo trong MemberWing. Nhiều người trong số khách hàng của riêng tôi được hỏi về chủ đề khác nhau để sử dụng và có chủ đề SEO tối ưu hóa từ sâu bên trong sẽ là một sự phù hợp tuyệt vời cho các doanh nghiệp cổng thông tin thành viên.
Kết hợp SEO quyền hạn của MemberWing với SEO quyền hạn của chủ đề Luận án sẽ cung cấp cho tốt nhất của bảng xếp hạng cơ hội để khách hàng của tôi. Vì vậy, tôi đã nhận Luận văn tốt nghiệp và chơi với nó trong một ngày.
Đây là một chủ đề tuyệt vời trong tất cả các cách. Phần chuyển hướng của nó mặc dù là một chút giới hạn trong chức năng. Bắt đầu từ Thesis 1.5 + nó chỉ là một trong những cấp độ menu. Mong muốn thông thường của tôi là có thể tùy chỉnh chuyển hướng càng nhiều khi cần thiết. Một số trang web có các trang chỉ có vài, nhiều người khác đã tấn của các trang tĩnh + zillions của bài báo / bài viết + rất nhiều các loại.
Vì vậy, trong thế giới lý tưởng có một cơ hội để tạo ra tốt đẹp sử dụng phân cấp tổ chức menu điều hướng thân thiện phải là một. Luận án phải off the bat có chuyển hướng tìm kiếm tốt nhưng tôi nhận thấy rằng tất cả các trang web dựa trên Thesis đang tìm kiếm cái như anh em sinh đôi. Tùy chỉnh Thesis chuyển hướng trình đơn là không thực sự dễ dàng vì vậy hầu hết mọi người chỉ để lại nó như là. Không có cách nào để thay đổi thứ tự của danh mục trong trình đơn, hoặc vị trí của chúng trong giữa các trang. Và một lần nữa, khả năng để tạo ra các cấu trúc đơn lồng nhau là mất tích. Vì vậy, tôi quyết định xem những gì có thể được thực hiện về nó.
Sau khi thử khoảng nửa tá menu / chuyển hướng bổ sung liên quan đến sự lựa chọn của tôi trên Wordpress Plugin NAVT Navigation Danh sách .
Plugin NAVT cơ bản không có thứ tự máy phát điện danh sách ưa thích siêu và khó khăn để tìm phi truyền thống bit giao diện quản trị. Những gì gây hiểu lầm về nó là nó không thực sự tạo ra các menu tìm kiếm ưa thích của chính nó. Nó thực hiện phần khó nhất của công việc mặc dù cung cấp cho bạn một khả năng kéo lại với nhau, và tạo ra không có thứ tự danh sách, bộ xương của trình đơn của bạn được. Và bạn có thể tạo các menu nhiều quá. Bạn có thể kéo tất cả các loại công cụ của Wordpress vào đơn điều hướng: trang, bài viết, bài báo, chủng loại, người sử dụng, khối mã, liên kết bên ngoài, chia, tách và trộn và kết hợp và làm tổ và sắp xếp và chỉnh sửa chúng trong bất kỳ cấu trúc cây giống như bạn muốn.
NAVT tạo ra cho bạn kết quả HTML danh sách có thứ tự. Thứ hai vẻ đẹp của NAVT là nó giúp bạn chèn các trình đơn mới của bạn vào chủ đề của bạn thông qua logic dựa trên JQuery nổi tiếng nhưng không cần phải thay đổi bất kỳ mã! NAVT cho phép bạn chỉ định: "thay thế phần tử này # với trình đơn NAVT mới của tôi". # Yếu tố có thể là một id hoặc lớp học của các đường dẫn của trình đơn hiện hành hoặc thẻ phần tử div đang được tạo ra bởi chủ đề hiện tại của bạn. Vì vậy, NAVT thực hiện điều này thay thế cho bạn mà không buộc bạn phải đi vào mã chủ đề và làm cho nó rắc rối hơn nó đã là. Nếu mà tất cả các âm thanh như vô nghĩa - không lo lắng - tôi sẽ hướng dẫn bạn từng bước. Phần thách thức của NAVT cho tất cả mọi người là bạn sẽ có để đến với thực tế CSS + hình ảnh + mã javascript cho thực đơn của bạn mình. Và đó là vào bạn để tìm ra ở đâu và làm thế nào để tích hợp các tập tin và làm cho công cụ này đúng được kết nối với nhau.
+ Một số PHP chân thành mà không biết JQuery + CSS + có kinh nghiệm phong nha với Wordpress - điều này là khó khăn để kéo.
Vui vẻ, tôi biết công cụ này một chút vì vậy tôi quyết định cắn đạn và hướng dẫn nhân loại đến sự tự do trong việc xây dựng tốt nhất của các trình đơn điều hướng tốt nhất cho Wordpress. Tôi chỉ cần tìm ra nguồn cho một số cái nhìn tốt đẹp ngang menu CSS. Tôi chọn trang web của các ổ đĩa động lựa chọn tốt nhất của họ, trình diễn và các nguồn.
Tôi dành riêng một ngày để nghiên cứu luận án và chơi với các plugin NAVT. Cuối cùng, tôi tự hào tạo ra tùy chỉnh, linh hoạt, SEO tối ưu hóa, đa cấp, cơ cấu Nagivation lồng nhau cho Wordpress trang web + dựa trên luận án của tôi.
Danh sách các tính năng đa cấp, trình đơn lồng nhau chuyển hướng Wordpress Thesis
(GOT để yêu thích công cụ này):
- Chuyên nghiệp, sạch sẽ cái nhìn và cảm nhận.
- Hỗ trợ cho tất cả các trình duyệt hiện đại, bao gồm 6,7 MSIE, Opera, Safari, Firefox 3.x, Google Chrome ở cả hai javascript và javascript chế độ không.
- Gracefully downgradable cho trình duyệt không javascript. Bạn trình đơn sẽ có thể sử dụng, trực quan tương tự và làm việc ngay cả đối với các trình duyệt javascript tàn tật (mặc dù chỉ trên mức độ chuyển hướng sẽ được hiển thị và không có flyouts sẽ xảy ra Tất nhiên, khi họ được thực hiện bằng javascript).
- SEO tính năng thân thiện - không có thứ tự danh sách các mã trình đơn được tạo ra trong mã HTML. Google và nhện công cụ tìm kiếm khác sẽ có thể chỉ mục cấu trúc menu của bạn và tìm thấy các liên kết đến các trang bên trong.
- Hỗ trợ cho các mức độ làm tổ và các menu phụ không giới hạn.
- Hỗ trợ cho bất kỳ thứ tự hoặc các trang, bài viết (thông qua người dùng xác định URI), chủng loại, người sử dụng, các khối mã tùy chỉnh và các liên kết bên ngoài trong trình đơn.
- Hỗ trợ văn bản cũng như các yếu tố trình đơn dựa trên hình ảnh. (Tôi chưa thử này mặc dù).
- Trình đơn cấu trúc và nội dung trực quan có thể điều chỉnh thông qua khu vực admin NAVT.
- Nhỏ gọn dựa trên flyouts: JQuery cho các cấp lồng nhau.
- Nhanh: JQuery cho menu được tải từ máy chủ Google (tôi thích Thesis chính nó làm như vậy thay vì kéo nó tại địa phương). Điều này sẽ tăng tốc độ một chút.
- Khả năng mở rộng - Đây là kiểu của menu có thể chỉnh sửa và cấu hình bất cứ lúc nào thông qua cài đặt các plugin NAVT mà không cần bất kỳ mã hóa bất cứ nơi nào.
Tôi sử dụng menu này xuất sắc từ ổ năng động cổng thông tin như một cơ sở. Tôi đã để tùy chỉnh mã javascript một chút cũng như bao gồm đoạn PHP vào custom_functions.php để làm cho nó làm việc với Thesis. Ngoài ra số lượng tồn tại từ trước trang, chuyên mục và bài viết từ trang web của tôi đã được sử dụng để lắp ráp cấu trúc menu. Chi tiết cụ thể trang web của bạn sẽ là khác nhau - nhưng khái niệm sẽ là như vậy.
Vì vậy, hãy tiến hành, thì chúng tôi?
Từng bước hướng dẫn để thiết lập dựa trên NAVT lồng nhau, tùy biến, đa cấp, thân thiện với SEO
và chỉ là đồng bằng mát mẻ tìm kiếm điều hướng menu cho Wordpress Thesis Theme
- Bảng điều khiển Wordpress quản trị. Plugins-> Thêm mới, tìm kiếm cho "navt". Plugin này sẽ được hiển thị. Nhấn [Cài đặt], [Cài đặt], "Activate Plugin".
- Tools-> NAVT Lists, khu vực Bên trong "Danh mục Group" tìm thấy "tên nhóm" và nhập vào: "Menu1" trong lĩnh vực này, báo chí [Tạo] nút. "Menu1" khu vực hình chữ nhật đã tạo ra.
Khu vực này "Menu1" sẽ là sân chơi chính xây dựng trình đơn. Bạn sẽ được kéo và thả ở đây yếu tố thực đơn của bạn. - Trong khu vực "tài sản" tìm thấy "khác" hộp danh sách và nhấn vào lựa chọn "Home". Thingie "Home" sẽ xuất hiện bên trong khu vực "không được gán". Kỳ lạ, phải không? Không có lo lắng, miễn là nó hoạt động - và nó sẽ cho chúng ta.
- Kéo này thingie "Home" từ khu vực "tài sản" vào "Menu1" khu vực hình chữ nhật. Nó sẽ trở thành mục "Home" trong trình đơn.
- Lặp lại các bước 3-4 cho một số trang từ khu vực "Trang", cũng như các loại trong khu vực "loại". Kéo bất kỳ mặt hàng khác mà bạn muốn trên thực đơn của bạn bên trong hình chữ nhật "Menu1". Bạn có thể click vào các trang, chuyên mục, người sử dụng và một số yếu tố tùy chỉnh như "chia danh sách" và "khối mã". Mã khối là mát mẻ cách nào để thêm các đoạn tùy chỉnh bên trong trình đơn.
- Bạn có thể kéo các mục menu bên trong khu vực "Menu1" để sắp xếp lại thứ tự của chúng.
- Bạn có thể điều chỉnh vị trí thứ bậc của mỗi mục trình đơn "<" và ">" mũi tên.
- Nhấp chuột vào tên văn bản của mỗi mục trình đơn sẽ mở ra hộp thoại tùy biến tâm boggling thêm cho mặt hàng này. Tôi chủ yếu sử dụng mặc định nhưng về mặt kỹ thuật bạn có thể đi điên và bắt đầu làm cho sự lựa chọn thực đơn dựa trên hình ảnh và thêm các đoạn mã HTML vào nó. Tiến hành thận trọng.
- Đối với các menu con linkless unclikable sẽ phục vụ như là "cha mẹ" cho "sub-trẻ em" sử dụng "Mã khối" loại. Ví dụ khi tùy biến mục khối mã vào "Menu mục bí danh" MemberWing "và" khối mã: "=" <a href='#'> MemberWing </ a> ". Có href = "#" sẽ làm cho nó không thể nhấp nhưng hành động như là một sự lựa chọn "cha mẹ" trình đơn hợp lệ.
- Đây là NAVT cấu trúc xây dựng Menu1 'trông giống như gần như hoàn thành:
- Kết thúc xây dựng ban đầu và sau đó nhấp vào biểu tượng "bánh" để tùy chỉnh cấu trúc menu của bạn:
- Nó sẽ mở ra hộp thoại với 4 tab Options, Hiển thị, CSS, Theme.
- "Tùy chọn" tab và chắc chắn rằng tất cả mọi thứ là không được kiểm soát và "tên nhóm" nói: "Menu1"
- Đi đến "Hiển thị" tab và chắc chắn mọi thứ vào "nhóm Hiển thị chuyển hướng ..." khu vực được kiểm tra [x]. Để phần còn lại mặc định.
- "CSS" tab và chọn nút radio (x) "không áp dụng CSS lớp học".
- Tới tab "Theme" và điền nó vào như thế:
Chèn vào "Thêm thẻ trước khi ..." khu vực mã này:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Chèn vào "Thêm thẻ sau khi ..." khu vực mã này:
<br style='clear: left' /></div> - Báo chí lưu / đóng] nút
- Tại thời điểm xây dựng đơn từ trong các tùy chọn Plugin NAVT là hoàn tất.
Bây giờ là lúc để làm một điều chỉnh nhỏ cho chủ đề luận án để có được nó đã sẵn sàng. Cho rằng chúng ta cần thêm một vài tập tin tùy chỉnh CSS và javascript thuộc vào trình đơn và custom_functions.php cập nhật Luận văn tốt nghiệp ' - Tải về bộ hoàn chỉnh các tập tin ở đây .
- Giải nén kho lưu trữ. Nếu bạn đã cập nhật custom_functions.php của bạn với các tùy chỉnh của bạn - bạn cần phải kết hợp chúng với công cụ của tôi. Tôi sẽ để lại cho bạn.
Nếu bạn không chạm vào nó - cảm thấy miễn phí để ghi đè lên nó với tôi. Xin lưu ý: Tôi thích vị trí trình đơn theo các tiêu đề trang web (mặc định là ở trên) - do đó, điều chỉnh của tôi bao gồm ưu đãi này là tốt. - Tải lên kho lưu trữ bao gồm tất cả các thư mục con và các tập tin theo thư mục của bạn chủ đề luận án 'tuỳ chỉnh', như thế này:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
Tôi đã không chạm custom.css - Tôi muốn giữ CSS menu cụ thể theo vị trí của mình để tránh tạo ra lộn xộn bên trong custom.css - Tại thời điểm này, bạn có thể tải lại trang web của bạn và xem đẹp mới đa cấp, lồng nhau, SEO tối ưu hóa trình đơn.
- Bạn luôn luôn có thể quay trở lại NAVT thiết lập và tùy biến trình đơn với nhiều sự lựa chọn hoặc đặt lại vị trí bất cứ điều gì. Nó sẽ tự động được phản ánh trên trang web sống.
Các ... con đường phía trước
Hướng dẫn này bao gồm ví dụ sáng tạo của một loại của trình đơn. Tôi chơi với một số khác chỉ để xem cách trình đơn tối màu sẽ giống như thế:
Thesis chủ đề - CSS lồng nhau đa cấp trình đơn bảng màu tối
Tôi nghĩ rằng đó là khá tốt đẹp. Có rất nhiều mẫu điều hướng có sẵn ở ổ động - tất cả chúng đều có thể tùy chỉnh cho luận án và Wordpress chủ đề khác với một số nỗ lực:
Dynamic Drive menu ngang
Tôi hy vọng bạn sẽ tìm thấy hướng dẫn này mang lại lợi ích và hữu ích. Như tôi đã nói, nó có thể tùy chỉnh các menu cho luận án được đưa ra thời gian và mong muốn làm cho nó xảy ra.
Tôi có thể làm công việc này cho bạn trên cơ sở hợp đồng. Chỉ cần chọn menu mà bạn thích, liên hệ với tôi và tôi sẽ làm việc trên các mã và hướng dẫn cho website của bạn.
$ 20
Và tất nhiên nếu bạn đang xây dựng siêu SEO tối ưu hóa cao cấp cổng thông tin thành viên wordpress - giải pháp tốt nhất cho việc này:
Thesis Theme + MemberWing plugin thành viên + Wordpress tự lưu trữ trên máy chủ của khóa học.
