Adicionando atributos personalizados aos menus do WordPress
São tantos tutoriais na web para explicar “como adicionar um campo personalizado aos menus do WordPress”, mas a maioria deles trata sobre como usar o campo CSS padrão do campo Descrição padrão. Nenhum deles fornece um método real para adicionar um novo campo real aos menus. Então, hoje vamos criar um plugin simples que adicionará um campo “legenda” a qualquer menu do WordPress.
Aqui está o resultado final na administração do WordPress:
Etapa 1: a criação do plug-in
Vamos lá, como vimos em um dos meus posts anteriores, criar um plugin não é complexo. Você só precisa criar uma nova pasta em wp-content/plugins e chamá-la de “sweet-custom-menu”, e criar dentro dela um arquivo chamado “sweet-custom-menu.php”. Em seguida, abra este arquivo e adicione este código:
<?php
/*
Plugin Name: Sweet Custom Menu
Plugin URL: http://remicorson.com/sweet-custom-menu
Description: A little plugin to add attributes to WordPress menus
Version: 0.1
Author: Remi Corson
Author URI: http://remicorson.com
Contributors: corsonr
Text Domain: rc_scm
Domain Path: languages
*/
Este código é tudo o que precisamos para definir um novo plugin. Agora vamos criar uma classe PHP customizada contendo um construtor e as funções que precisaremos para que o plugin funcione bem.
Veja como criar a classe:
class rc_sweet_custom_menu {
/*——————————————–*
* Constructor
*——————————————–*/
/**
* Initializes the plugin by setting localization, filters, and administration functions.
*/
function __construct() {
} // end constructor
/* All functions will be placed here */
}
// instantiate plugin’s class
$GLOBALS[‘sweet_custom_menu’] = new rc_sweet_custom_menu();
A última linha instancia a classe e adiciona a classe inteira em uma variável global.
Etapa 2: adicionar filtro de campos personalizados
Agora que temos nossa classe, vamos criar funções personalizadas. A primeira função a adicionar é aquela que registrará o campo personalizado “subtítulo” que queremos incluir como atributo de menu avançado. Para isso, aqui a função a ser criada, coloque este código ao invés de /* Todas as funções serão colocadas aqui */ :
/**
* Add custom fields to $item nav object
* in order to be used in custom Walker
*
* @access public
* @since 1.0
* @return void
*/
function rc_scm_add_custom_nav_fields( $menu_item ) {
$menu_item->subtitle = get_post_meta( $menu_item->ID, ‘_menu_item_subtitle’, true );
return $menu_item;
}
Então, precisamos dizer ao WordPress para levar nossa função em consideração, então coloque o código abaixo na função __construct():
// add custom menu fields to menu
add_filter( ‘wp_setup_nav_menu_item’, array( $this, ‘rc_scm_add_custom_nav_fields’ ) );
Etapa 3: salvar campos personalizados
Mesmo que o campo “subtítulo” personalizado não exista realmente, devemos criar uma função que salve seu valor na edição do menu. Os elementos do menu estão em dois tipos de postagem personalizados, para que possamos usar as APIs de tipo de postagem personalizadas e o método post_meta. Portanto, para salvar o valor do campo de menu personalizado, adicione esta função em rc_scm_add_custom_nav_fields():
/**
* Save menu custom fields
*
* @access public
* @since 1.0
* @return void
*/
function rc_scm_update_custom_nav_fields( $menu_id, $menu_item_db_id, $args ) {
// Check if element is properly sent
if ( is_array( $_REQUEST[‘menu-item-subtitle’]) ) {
$subtitle_value = $_REQUEST[‘menu-item-subtitle’][$menu_item_db_id];
update_post_meta( $menu_item_db_id, ‘_menu_item_subtitle’, $subtitle_value );
}
}
Nesta função, estamos verificando se o valor do campo personalizado é enviado do formulário que estamos prestes a criar e então simplesmente armazenamos seu valor. Agora temos que adicionar a função ao gancho apropriado. Para fazer isso, adicione estas linhas a __construct():
// save menu custom fields
add_action( ‘wp_update_nav_menu_item’, array( $this, ‘rc_scm_update_custom_nav_fields’), 10, 3 );
Etapa 4: o formulário
Se você seguiu este tutorial passo a passo, provavelmente vai adivinhar que não criamos o formulário que deve conter nosso campo de subtítulo. Esta parte é um pouco mais complexa do que as anteriores. Desta vez temos que lidar com Walker . Eu realmente encorajo você a ler o códice sobre a aula de andador, isso realmente vai te ajudar a entender o que é e o que faz.
A propósito, há muitos tutoriais ótimos em toda a internet para fornecer mais detalhes sobre essa aula, então confira! Na maior parte do tempo, os walkers são usados para modificar a saída HTML de um menu. Aqui, estamos trabalhando no formulário de saída do menu admin. Basta adicionar esta função à sua classe principal:
/**
* Define new Walker edit
*
* @access public
* @since 1.0
* @return void
*/
function rc_scm_edit_walker($walker,$menu_id) {
return ‘Walker_Nav_Menu_Edit_Custom’;
}
e, em seguida, isso para o construtor:
// edit menu walker
add_filter( ‘wp_edit_nav_menu_walker’, array( $this, ‘rc_scm_edit_walker’), 10, 2 );
O que isso faz é substituir o formulário de menu de edição do administrador padrão por um personalizado. Agora que o filtro foi adicionado, copie estas duas linhas na parte inferior do arquivo sweet-custom-menu.php, fora da classe rc_sweet_custom_menu:
include_once( ‘edit_custom_walker.php’ );
include_once( ‘custom_walker.php’ );
Estamos prestes a incluir dois arquivos. O primeiro “edit_custom_walker.php” é aquele que modificará o formulário padrão para editar o menu. É neste arquivo que vamos adicionar o campo de subtítulo.
O segundo é o welker usado no frontend do site, este é o arquivo que modificará a saída do menu para seus visitantes.
Como o “edit_custom_walker.php” é um pouco longo, não vou colar todo o código. Você pode ver todo o código aqui . O único código que adicionei a ele é da linha 174 à linha 185. Aqui está o código adicionado:
<p class=”field-custom description description-wide”>
<label for=”edit-menu-item-subtitle-<?php echo $item_id; ?>”>
<?php _e( ‘Subtitle’ ); ?><br />
<input type=”text” id=”edit-menu-item-subtitle-<?php echo $item_id; ?>” class=”widefat code edit-menu-item-custom” name=”menu-item-subtitle[<?php echo $item_id; ?>]” value=”<?php echo esc_attr( $item->subtitle ); ?>” />
</label>
</p>
Se você quiser adicionar mais alguns campos ao menu, basta duplicar essas linhas e copiá-las e colá-las. Feita essa etapa, o menu deve estar funcionando na administração. Agora você deve poder ver o novo campo “subtítulo” ao adicionar um novo elemento a um menu. Se não for o caso, faça você seguir o tutorial passo a passo. Agora é hora de enviar o valor da legenda no frontend.
Etapa 5: saída de campo personalizada
Se tudo estiver funcionando bem na administração, provavelmente agora você deseja exibir a legenda no frontend. Abra custom_walker.php e adicione este código nele:
<?php
/**
* Custom Walker
*
* @access public
* @since 1.0
* @return void
*/
class rc_scm_walker extends Walker_Nav_Menu
{
function start_el(&$output, $item, $depth, $args)
{
global $wp_query;
$indent = ( $depth ) ? str_repeat( “\t”, $depth ) : ”;
$class_names = $value = ”;
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = join( ‘ ‘, apply_filters( ‘nav_menu_css_class’, array_filter( $classes ), $item ) );
$class_names = ‘ class=”‘. esc_attr( $class_names ) . ‘”‘;
$output .= $indent . ‘<li id=”menu-item-‘. $item->ID . ‘”‘ . $value . $class_names .’>’;
$attributes = ! empty( $item->attr_title ) ? ‘ title=”‘ . esc_attr( $item->attr_title ) .'”‘ : ”;
$attributes .= ! empty( $item->target ) ? ‘ target=”‘ . esc_attr( $item->target ) .'”‘ : ”;
$attributes .= ! empty( $item->xfn ) ? ‘ rel=”‘ . esc_attr( $item->xfn ) .'”‘ : ”;
$attributes .= ! empty( $item->url ) ? ‘ href=”‘ . esc_attr( $item->url ) .'”‘ : ”;
$prepend = ‘<strong>’;
$append = ‘</strong>’;
$description = ! empty( $item->description ) ? ‘<span>’.esc_attr( $item->description ).'</span>’ : ”;
if($depth != 0)
{
$description = $append = $prepend = “”;
}
$item_output = $args->before;
$item_output .= ‘<a’. $attributes .’>’;
$item_output .= $args->link_before .$prepend.apply_filters( ‘the_title’, $item->title, $item->ID ).$append;
$item_output .= $description.$args->link_after;
$item_output .= ‘ ‘.$item->subtitle.'</a>’;
$item_output .= $args->after;
$output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args );
}
}
Este código é bastante padrão. A única coisa importante aqui é esta linha:
$item_output .= ‘ ‘.$item->subtitle.”;
Passo 6: Ligue para o Walker!
Na última etapa, você precisará abrir o arquivo header.php na pasta do seu tema. É onde na maioria das vezes o menu é chamado. Caso contrário, entre em contato com o criador do tema para saber onde ele é chamado.
Encontre a função wp_nav_menu() .
Em seguida, basta adicionar o parâmetro walker:
‘walker’ => new rc_scm_walker
É isso ! Espero que você tenha gostado de adicionar um campo personalizado a um menu do WordPress. Agora você pode modificar um pouco este código para adicionar outros campos como checkboxes, select dropdown, textareas etc… Sinta-se à vontade para adicionar um comentário na seção de comentários. Se você encontrou um bug, se você o melhorou etc…
Plugin de menu personalizado doce
Se você deseja implementar este tutorial, você pode baixar o “Sweet Custom Menu Plugin” que criei para você começar. Aproveitar!
