Adăugarea de câmpuri la elementele din meniul WordPress – Pagina de setări a pluginului

Publicat: 2021-07-08

Când utilizați orice plugin WordPress, probabil ați observat că autorul a furnizat unele setări pe care le puteți utiliza pentru a personaliza funcționalitatea pluginului. Din punct de vedere tehnic, autorul a creat un element de meniu și o pagină de setări către care vă redirecționează acest element de meniu. În acest articol veți parcurge pașii pe care trebuie să îi urmați pentru a face același lucru pentru propriul plugin.

Articolul necesită să aplicați deja codul furnizat în exemplul din articolul Adăugarea de câmpuri la articolele din meniul WordPress – Plugin personalizat. Vom relua de acolo și vom vedea cum putem face pluginul nostru mai ușor de utilizat, adăugând pagina sa de setări în zona de administrare, astfel încât să le permiteți utilizatorilor admin să își stabilească preferințele cu privire la modul în care va funcționa pluginul.

Pași inițiali

În scopul acestui articol, vom crea un meniu simplu de setări. După cum am văzut în articolul nostru anterior, folosind pluginul nostru, utilizatorul administrator poate adăuga un subtitrare la orice element de meniu. În următorii pași, vom oferi o opțiune astfel încât utilizatorul să poată alege tipul de element HTML în care va fi înfășurat câmpul de subtitrare.

În acest moment, fișierul PHP principal al pluginului arată astfel:

 <?php /* Plugin Name: Menu Item Field Creator Description: My custom plugin to create menu item fields */ class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); } public function menu_item_sub( $item_id, $item ) { $menu_item_sub = get_post_meta( $item_id, '_menu_item_sub', true ); ?> <div> <span class="subtitle"><?php _e( 'Subtitle', 'menu-item-sub' ); ?></span><br /> <input type="hidden" class="nav-menu-id" value="<?php echo $item_id; ?>" /> <div class="logged-input-holder"> <input type="text" name="menu_item_sub[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $menu_item_sub ); ?>" /> </div> </div> <?php } public function save_menu_item_sub( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_sub'][ $menu_item_db_id ] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_sub'][ $menu_item_db_id ] ); update_post_meta( $menu_item_db_id, '_menu_item_sub', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_sub' ); } } public function menu_item_sub_custom_walker( $args ) { if ( class_exists( 'My_Custom_Nav_Walker' ) ) { $args['walker'] = new My_Custom_Nav_Walker(); } else { echo 'DOES NOT EXIST'; } return $args; } } $mycp_menu_item_field_creator = new MyCP_Menu_Item_Field_Creator(); if ( ! class_exists( 'My_Custom_Nav_Walker' ) ) { class My_Custom_Nav_Walker extends Walker_Nav_Menu { public function start_el( &$output, $item, $depth=0, $args=[], $id=0 ) { $menu_item_sub = get_post_meta( $item->ID, '_menu_item_sub', true ); $output .= '<li class="' . implode( ' ', $item->classes ) . '">'; if ( $item->url && $item->url != '#' ) { $output .= '<a href="' . $item->url . '">'; } else { $output .= '<span>'; } $output .= $item->title; if ( $item->url && $item->url != '#' ) { $output .= '</a>'; } else { $output .= '</span>'; } if ( ! empty( $menu_item_sub ) ) { $output .= '<div class="menu-item-sub">' . $menu_item_sub . '</div>'; } } } }

Următorul lucru pe care îl vom face este să continuăm și să creăm un element de meniu pentru pagina de setări a pluginului nostru, precum și un exemplu simplu de ceea ce puteți include în pagina de setări ca conținut.

Va trebui să lucrăm cu două cârlige WordPress. Cârligul admin_menu pentru a înregistra elementul(ele) din meniul admin și cârligul admin_init pentru a înregistra opțiunile pluginului mai târziu, când vom adăuga pagina de setări a pluginului cu formularele acesteia. Desigur, vom profita la maximum de API-urile oferite de WordPress și vom folosi unele funcții încorporate. Să ne scufundăm mai adânc.

Creați elementul de meniu al paginii Opțiuni

Pentru a adăuga elementul de meniu, vom adăuga hook- admin_menu corespunzător în cadrul metodei __construct __construct() sub cârligele adăugate în prezent.

 class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); add_action( 'admin_menu', array( $this, 'plugin_settings_menu_page' ) ); } . . .

Am folosit cârligul admin_menu și am definit metoda plugin_settings_menu_page() (pe care o vom descrie mai jos) pentru a specifica informațiile pentru elementul de meniu și pagina de setări a pluginului.

 public function plugin_settings_menu_page() { add_menu_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

Metoda ar trebui pusă și în interiorul clasei de plugin principal. Rețineți că în cadrul metodei noastre plugin_settings_menu_page() am folosit funcția add_menu_page() de WordPress. Această funcție acceptă următoarele argumente:

 add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position )

Este necesar ca $page_title să fie definit și este, practic, prima parte a etichetelor de titlu ale paginii către care sunteți redirecționat când selectați acest element de meniu.
$menu_title asemenea necesar- este textul care trebuie folosit pentru meniu.
$capability este capacitatea necesară pentru ca acest meniu să fie afișat de utilizator. În cazul nostru, am ales permisiunea manage_options , deoarece este acordată numai Super Utilizatorilor și Administratorilor. Dacă doriți să înțelegeți ce rol sau capacitate se potrivește nevoilor dvs., puteți consulta documentația oficială aferentă.
$menu_slug este, de asemenea, necesar și ar trebui să fie unic. Este numele melcului prin care se face referire la acest meniu. Nu uitați că trebuie să utilizați numai caractere alfanumerice, liniuțe și caractere de subliniere cu litere mici, care sunt compatibile cu sanitize_key() .
$icon_url este un argument opțional și este adresa URL care trimite la fișierul pictogramă care va fi folosit pentru elementul de meniu.
Argumentul $function este locul în care definiți funcția de apel invers care va crea conținutul paginii de setări. În cazul nostru, este plugin_settings_page_content() , care nu are încă nicio funcționalitate. L-am adăugat la codul nostru folosind metoda plugin_settings_menu_page() .

 public function plugin_settings_page_content() { $html = "<p>Test content for our custom plugin</p>"; echo $html; }

În acest moment, ar trebui să vedeți elementul de meniu „Menu Item Field Creator” și conținutul de testare a paginii de conținut și să recunoașteți adresa URL a meniului pe care ați definit-o în argumente.

De asemenea, dorim să remarcăm că, dacă doriți să includeți opțiunea pluginului dvs. în meniul încorporat Setări și nu ca un element separat de meniu de nivel superior, puteți face acest lucru cu ușurință folosind în schimb funcția add_options_page() . În acest caz, ar trebui să înlocuiți acesta:

 public function plugin_settings_menu_page() { add_menu_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

cu asta:

 public function plugin_settings_menu_page() { add_options_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

Acest lucru va avea ca rezultat o locație de meniu aici:

În următoarea noastră secțiune, vom pune un conținut simplu în pagina de setări pe care utilizatorul administrator îl poate folosi pentru a seta comportamentul pluginului.

Adăugați funcționalități la pagina noastră de setări

Ceea ce am făcut până acum este să adăugăm elementul nostru de meniu și să definim funcția care va afișa pagina de conținut de setări. Dacă dorim funcționalitate în pagina noastră de setări va trebui să înregistrăm câteva câmpuri și apoi să le arătăm în pagina de setări a pluginului. De exemplu, vom crea un formular în care utilizatorul poate defini tipul de element HTML cu care să împacheteze câmpul de subtitrare.

Ieșirea

Înlocuiți codul plugin_settings_page_content cu acesta:

 public function plugin_settings_page_content() { ?> <form action="options.php" method="post"> <?php do_settings_sections( 'options_page' ); settings_fields( 'option_group' ); submit_button( __( 'Save Subtitle', 'oop-menu-item-sub' ) ); ?> </form> <?php }

În aceste linii folosim funcțiile do_settings_sections() și settings_fields() . do_settings_sections() va tipări toate secțiunile și câmpurile de setări care sunt înregistrate. Τhe settings_fields() va afișa câmpurile de intrare ascunse nonce, action și option_page pentru pagina de setări.

Acum să continuăm și să ne înregistrăm setările.

Înregistrați-vă setările

Pentru a înregistra câmpurile necesare, vom folosi hook-ul admin_init , deoarece se declanșează atunci când un ecran de administrare este inițializat.

 class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); add_action( 'admin_menu', array( $this, 'plugin_settings_menu_page' ) ); add_action( 'admin_init', array( $this, 'plugin_register_settings' ) ); } . . .

Vom insera metoda plugin_register_settings() în clasa noastră astfel:

 public function plugin_register_settings() { register_setting( 'option_group', 'option_name' ); add_settings_section( 'section_id', __( 'Settings Page Title', 'oop-menu-item-sub' ), array( $this, 'render_section' ), 'options_page' ); add_settings_field( 'html_element', __( 'Choose HTML Element:', 'oop-menu-item-sub' ), array( $this, 'render_field' ), 'options_page', 'section_id' ); }

Acum să facem un pas înapoi și să aruncăm o privire din nou la ceea ce am făcut până acum.

Pentru a înregistra o setare și datele acesteia, am folosit funcția register_setting () care conform documentației este structurată astfel:

 register_setting( $option_group, $option_name, $args )

$option_group este un parametru obligatoriu și ar trebui să se potrivească cu numele grupului folosit în settings_fields() .
$option_name este, de asemenea, necesar și este numele opțiunii care urmează să fie dezinfectată și salvată. Este valoarea din coloana option_name din tabelul bazei de date de opțiuni.
$args nu este necesar aici. Este o matrice de date opțională care descrie setarea atunci când este înregistrată. Ceea ce puteți specifica aici este tipul, descrierea, o funcție sanitize_callback() pentru valoarea opțiunii, o opțiune „ show_in_rest ” care definește dacă datele curente ar trebui incluse în API-ul REST și o opțiune implicită în care puteți defini valoarea implicită la apelarea get_option() .
Am introdus, de asemenea, funcțiile add_settings_section() și add_settings_field() care ne vor ajuta să finalizam acest pas.
Funcția add_settings_section() este folosită pentru a înregistra o secțiune cu un anumit nume de slug cu WordPress. Aici, $id este numele slug-ului pentru a identifica secțiunea și este folosit în atributul „id” al etichetelor.

 add_settings_section( $id, $title, $callback, $page )

$title este titlul formatat al secțiunii care va fi afișat ca titlu pentru secțiune, $callback este funcția care va ecou conținutul din partea de sus a secțiunii și $page este numele slug-ului paginii care ar trebui potrivește argumentul $page al do_settings_sections() , care în cazul nostru este „options_page”.

Toți parametrii de mai sus sunt necesari.

Funcția add_settings_field () pe care o oferă WordPress vă permite să adăugați un câmp nou la o secțiune.

 add_settings_field( $id, $title, $callback, $page, $section, $args )

$id , $title , $callback și $page sunt folosite așa cum sa explicat anterior. Secțiunea $section este numele slug-ului secțiunii din pagina de setări în care se afișează caseta, iar $args este folosit la ieșirea câmpului. Atât $section cât și $args sunt opționale.

În scopul acestui articol nu vom introduce o funcție suplimentară pentru a ne igieniza valorile. Cu toate acestea, vom reține că este foarte recomandat să igienizați întotdeauna câmpurile formularului.

Acum avem două metode publice care trebuie introduse, render_section() și render_field() .

Pentru metoda render_section() vom scoate doar un titlu pentru secțiunea noastră:

 public function render_section() { ?> <h2><?php _e( 'Section #1', 'oop-menu-item-sub' ); ?></h2> <?php }

Pentru metoda render_field() vom scoate 3 butoane radio cu opțiunile noastre pentru elementul HTML:

 public function render_field() { $stored_option = get_option( 'option_name' )['html_element']; ?> <input type="radio" name="option_name[html_element]" value="div" <?php checked( $stored_option, 'div' ); ?> /> div <input type="radio" name="option_name[html_element]" value="p" <?php checked( $stored_option, 'p' ); ?> /> p <input type="radio" name="option_name[html_element]" value="span" <?php checked( $stored_option, 'span' ); ?> /> span <?php }

Acesta ar trebui să fie rezultatul pe care îl vedeți acum:

Dacă alegeți un alt element, cum ar fi span, de exemplu, și salvați, ar trebui, de asemenea, să funcționeze corect.

Reflectați modificările paginii de opțiuni pe site-ul dvs. web

Ultimul pas care rămâne de explicat este modul de aplicare a elementului HTML pe care utilizatorii admin îl vor alege pentru elementul de subtitrare din elementul de meniu din partea frontală a site-ului.

Acest pas este foarte simplu, deoarece singurul lucru de care avem nevoie este să extragem câmpul selectat din tabelul cu opțiunile bazei de date și să modificăm clasa „ My_Custom_Nav_Walker ” din codul nostru. Mai exact, va trebui să înlocuim partea de cod în care adăugăm intrarea menu_item_sub la variabila $output .

 $output .= '<div class="menu-item-sub">' . $menu_item_sub . '</div>';

Vom obține mai întâi elementul cu get_option( 'option_name' )['html_element']; și păstrați-o într-o variabilă $stored_option și apoi aplicați-o la linia de mai sus. Clasa finală ar trebui să arate astfel:

 if ( ! class_exists( 'My_Custom_Nav_Walker' ) ) { class My_Custom_Nav_Walker extends Walker_Nav_Menu { public function start_el( &$output, $item, $depth=0, $args=[], $id=0 ) { $menu_item_sub = get_post_meta( $item->ID, '_menu_item_sub', true ); $output .= '<li class="' . implode( ' ', $item->classes ) . '">'; if ( $item->url && $item->url != '#' ) { $output .= '<a href="' . $item->url . '">'; } else { $output .= '<span>'; } $output .= $item->title; if ( $item->url && $item->url != '#' ) { $output .= '</a>'; } else { $output .= '</span>'; } $stored_option = get_option( 'option_name' )['html_element']; if ( ! empty( $menu_item_sub ) ) { $output .= '<'. $stored_option .' class="menu-item-sub">' . $menu_item_sub . '</'. $stored_option .'>'; } } } }

Uneori vă ajută să vizualizați modul în care funcționează funcțiile WordPress atunci când construiți o pagină de setări în timp ce vă uitați la codul pluginului nostru. Iată cum arată în exemplul nostru:

Concluzie

După cum sperăm că ați realizat, API-ul WP Settings este instrumentul principal aici care ne permite să creăm elementele pentru pagina de opțiuni a pluginului nostru. În afară de asta, este alegerea ta să decizi dacă vei folosi o abordare mai orientată pe obiecte cu Clasele sau dacă vei folosi ruta mai simplă în care doar lipiți funcțiile și cârligele în fișierul principal PHP al pluginului.

Să subliniem aici că traseul pe care l-am urmat pentru a reconstrui pluginul nu este chiar OOP, dar cu siguranță a făcut un pas în acea direcție. Într-o serie viitoare de articole despre POO vom aprofunda celelalte caracteristici care pot îmbunătăți gestionarea pluginului nostru.

Crearea unei pagini de setări pentru pluginul nostru personalizat poate deveni puțin confuză, dar sperăm că, după ce ați citit acest articol, înțelegeți ce este necesar. Codare fericită!

Citește și

Adăugarea de câmpuri personalizate la elementele de meniu WordPress
Adăugarea de câmpuri la elementele de meniu WordPress – Plugin personalizat