it-swarm-vi.tech

Hiển thị một WP 3.0 Menu tùy chỉnh trong HTML Chọn với Tự động điều hướng?

Là một phần của chủ đề cho khách hàng, Tôi muốn có thể hiển thị menu tùy chỉnh (được xác định thông qua quản trị viên) trong hộp chọn tự động thay đổi các trang sau khi thay đổi lựa chọn .

Có một plugin (hoặc một đoạn mã tiện dụng) sẽ thực hiện điều này?

3
Keith S.

Hệ thống menu mới của WordPress vừa tuyệt vời vừa vô cùng bực bội , tùy thuộc vào những gì bạn đang cố gắng làm và ngày nào trong tuần. :) Đó là một ý tưởng tuyệt vời nhưng còn lâu mới hoàn thiện nên trong khi đó là một tính năng tôi hoan nghênh tôi sẽ hạnh phúc hơn khi v3.3 hoặc v3.4 của WordPress ra mắt và chúng tôi nhận được nhiều trường hợp sử dụng hơn được hỗ trợ trực tiếp bởi API của hệ thống menu .

Điều đó nói rằng, không chắc chắn nếu có một plugin hiện có để làm những gì bạn đang tìm kiếm, nhưng làm thế nào về mã bạn cần để viết plugin của riêng bạn? Hoặc bạn chỉ có thể bao gồm nó trong tệp functions.php của chủ đề của bạn; bất cứ sở thích nào của bạn.

Những gì tôi đang cung cấp là một ví dụ hoàn toàn khép kín mà bạn có thể lưu dưới dạng test.php trong thư mục gốc của trang web để kiểm tra nó. Nếu tên miền của bạn là example.com bạn sẽ tải để kiểm tra tại:

http://example.com/test.php

Đây là những gì nó trông giống như trong hành động:

Inactive drop down of Pages from WordPress 3.0 Menu
(nguồn: mikechinkel.com )
[.__.] Active drop down of Pages from WordPress 3.0 Menu
(nguồn: mikechinkel.com )

Từ mã bên dưới, có thể dễ dàng kết hợp chức năng get_page_selector() vào chủ đề của bạn và gọi nó bất cứ khi nào bạn cần chức năng này:

<?php

  include "wp-load.php";
  echo 'Jump to:';
  echo get_page_selector('My Select Menu');

function get_page_selector($menu) {
  $page_menu_items = wp_get_nav_menu_items($menu,array(
    'meta_key'=>'_menu_item_object',
    'meta_value'=>'page',
  ));
  $selector = array();
  if (is_array($page_menu_items) && count($page_menu_items)>0) {
    $selector[] =<<<HTML
<select id="page-selector" name="page-selector"
    onchange="location.href = document.getElementById('page-selector').value;">
HTML;
    $selector[] = '<option value="">Select a Page</option>';
    foreach($page_menu_items as $page_menu_item) {
      $link = get_page_link($page_menu_item->object_id);
      $selector[] =<<<HTML
<option value="{$link}">{$page_menu_item->title}</option>
HTML;
  }
    $selector[] = '</select>';
  }
  return implode("\n",$selector);
}

Vì vậy, bạn có thể tự hỏi làm thế nào nó hoạt động?

Hàm wp_get_nav_menu_items()

WordPress 3.0 lưu trữ các menu của nó trong bảng wp_posts dưới dạng post_type loại nav_menu_item. wp_get_nav_menu_items() gián tiếp chỉ gọi hàm get_posts(). Tham số đầu tiên cho wp_get_nav_menu_items() là 1.) tên menu (là tên tôi đã sử dụng: "Menu chọn của tôi"), 2.) ID của mục menu (tức là mục menu post ID cơ sở dữ liệu) hoặc 3.) một slug menu (sên từ thuật ngữ phân loại của menu; các menu có được thực hiện bằng cách sử dụng các thuật ngữ phân loại với phân loại 'nav_menu'.)

Menu Configuration in WordPress 3.0
(nguồn: mikechinkel.com )

Ngoài tham số đầu tiên, nó chuyển tiếp tới get_posts() nhất (nếu không phải là tất cả?) Của $args mà bạn chuyển đến wp_get_nav_menu_items() do đó bạn có thể coi nó như một loại bài đăng tùy chỉnh (mặc dù lâu hơn khi chúng cải thiện API menu thật là một ý tưởng tuyệt vời. Nhưng hôm nay? Hãy làm hay trong khi Mặt trời chiếu sáng!)

Lọc các mục menu với meta_keymeta_value

Việc sử dụng bài viết cơ bản của WordPress cho các mục trong menu là lý do tại sao chúng ta có thể truy vấn meta_keymeta_value; WordPress sử dụng một loạt meta_keys có tiền tố _menu_item cho thông tin bổ sung cần thiết cho mỗi mục menu. _menu_item_object sẽ chứa page cho mọi mục menu tương ứng với loại WordPress "Trang"bài đăng. (Nếu bạn muốn bao gồm các mục bên cạnh Trang, bạn sẽ cần thực hiện nghiên cứu nhiều hơn một chút so với tôi đã làm ở đây nhưng ít nhất tôi đã cung cấp cho bạn các công cụ bạn cần để tự nghiên cứu.)

Đây là một ảnh chụp màn hình bằng cách sử dụng Navicat cho MySQL của truy vấn hiển thị các bản ghi meta cho một số nav_menu_items:

Menu Item Configuration found in wp_postmeta with WordPress 3.0
(nguồn: mikechinkel.com )

Lấy URL của Trang bằng get_post_link()

Tiếp theo, tôi sẽ chỉ ra rằng lấy URL của trang từ hàm get_post_link() và tôi đang đặt HTML <option> 's value làm URL ...

<?php
    $link = get_page_link($page_menu_item->object_id);
    $selector[] =<<<HTML
<option value="{$link}">{$page_menu_item->title}</option>
HTML;

Sử dụng onchange của Javascript để điều hướng đến trang đã chọn của chúng tôi

... Để tôi có thể lấy nó từ thuộc tính value của phần tử 'page-selector'<select> và gán nó cho location.href. Việc gán location.href khiến trình duyệt ngay lập tức điều hướng đến URL mới và nói tóm lại, đó là cách tất cả được thực hiện:

<?php
  $selector[] =<<<HTML
<select id="page-selector" name="page-selector"
    onchange="location.href = document.getElementById('page-selector').value;">
HTML;

Một value="" trống làm tùy chọn mặc định

Bạn có thể lưu ý rằng tùy chọn "Chọn trang"mặc định có giá trị trống; Đó không phải là một sai lầm mà thay vào đó là do thiết kế. Khi được chọn và "onchange" được kích hoạt1 đặt location.href thành một chuỗi trống sẽ không có hiệu lực, đó chính xác là những gì chúng ta muốn và nó không yêu cầu chúng ta viết mã ngoại lệ. Viola!

<?php
    $selector[] = '<option value="">Select a Page</option>';
  1. Có lựa chọn "Chọn trang"kích hoạt "onchange" chỉ có thể xảy ra trên điều hướng quay lại trình duyệt đến một trang không kích hoạt tải lại trang nơi đã chọn tùy chọn khác trước đó, nhưng nó vẫn có thể xảy ra vì vậy chúng ta nên giải quyết nó.
8
MikeSchinkel