it-swarm-pt.tech

Mostrar um WP 3.0 Menu personalizado em um HTML Selecione com navegação automática?

Como parte de um tema para um cliente, eu quero ser capaz de mostrar um menu personalizado (definido através do admin) em uma caixa de seleção que altera automaticamente as páginas depois de alterar a seleção .

Existe um plugin (ou um trecho de código útil) que irá realizar isso?

3
Keith S.

O novo sistema de menu do WordPress é maravilhoso e infinitamente frustrante , dependendo do que você está tentando fazer e em que dia da semana está. :) É uma ótima idéia, mas longe de ser madura, então é um recurso que eu aplaudo que serei mais feliz quando a v3.3 ou v3.4 do WordPress for lançada e nós obtermos muito mais casos de uso diretamente suportados pela API do sistema de menu .

Dito isso, não tenho certeza se existe um plugin para fazer o que você está procurando, mas como sobre o código que você precisa escrever seu próprio plugin? Ou você poderia simplesmente incluí-lo no arquivo functions.php do seu tema; seja qual for sua preferência.

O que estou fornecendo é um exemplo totalmente autocontido que você pode salvar como test.phpno diretório raiz do seu site para testá-lo. Se o seu domínio fosse example.com, você carregaria para testar em:

http://example.com/test.php

Veja como é a aparência em ação:

Inactive drop down of Pages from WordPress 3.0 Menu
(fonte: mikeschinkel.com )
Active drop down of Pages from WordPress 3.0 Menu
(fonte: mikeschinkel.com )

A partir do código abaixo, deve ser fácil incorporar a função get_page_selector() ao seu tema e chamá-lo sempre que você precisar dessa funcionalidade:

<?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);
}

Então você pode se perguntar como isso funciona?

A função wp_get_nav_menu_items()

O WordPress 3.0 armazena seus menus na tabela wp_posts como post_type type de nav_menu_item. A wp_get_nav_menu_items() indiretamente apenas chama a função get_posts(). O primeiro parâmetro para wp_get_nav_menu_items() é 1.) um nome de menu (que é o que eu usei:"My Select Menu"), 2.) um ID de item de menu (ie o post do item de menu ID o banco de dados) ou 3.) um slug de menu (o slug do termo de taxonomia do menu; sim menus são implementados usando termos de taxonomia com uma taxonomia de 'nav_menu'.)

Menu Configuration in WordPress 3.0
(fonte: mikeschinkel.com )

Além do primeiro parâmetro, ele encaminha para get_posts() a maioria (se não todos?) Do $args que você passa para wp_get_nav_menu_items(), assim você pode tratá-lo como um tipo de post personalizado (mesmo que a longo prazo melhore a API do menu que provavelmente não será uma ótima idéia, mas hoje? Faça feno enquanto o sol brilha!)

Filtrando itens de menu com meta_key e meta_value

O uso subjacente de postagens do WordPress para itens de menu é o motivo pelo qual podemos consultar meta_key e meta_value; O WordPress usa uma série de meta_keys prefixado com _menu_item para as informações adicionais necessárias para cada item de menu. _menu_item_object conterá page para cada item de menu que corresponde a um tipo de WordPress"Page"post. (Se você quiser incluir itens além do Pages você precisará fazer um pouco mais de pesquisa do que eu fiz aqui, mas pelo menos eu te dei as ferramentas que você precisa para fazer a pesquisa.)

Aqui está uma captura de tela usando Navicat for MySQL de uma consulta mostrando os metadados de vários nav_menu_items:

Menu Item Configuration found in wp_postmeta with WordPress 3.0
(fonte: mikeschinkel.com )

Agarrando o URL da página com get_post_link()

Em seguida, mostrarei que obtém o URL da página da função get_post_link() e que estou configurando o value do HTML <option> para ser o URL ...

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

Usando o Javascript onchange para navegar até a nossa página selecionada

... para que eu possa pegá-lo da propriedade value do elemento 'page-selector'<select> e atribuí-lo a location.href. Atribuir location.href faz com que o navegador navegue imediatamente para o novo URL e, em poucas palavras, como tudo é feito:

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

Um value="" vazio como a opção padrão

Você pode notar que a opção"Selecionar uma Página"default possui um valor vazio; isso não é um erro, mas sim pelo design. Quando é selecionado e o "onchange" é acionado1 definir location.href para uma string vazia não terá efeito, o que é exatamente o que queremos e não exige que escrevamos um código de exceção.viola!

<?php
    $selector[] = '<option value="">Select a Page</option>';
  1. A seleção de"Selecionar uma página"trigger "onchange" só pode acontecer em uma navegação de volta do navegador para uma página que não acione um recarregamento de página onde outra opção tenha sido selecionada anteriormente , mas ainda pode acontecer, então devemos abordar isso.
8
MikeSchinkel