Creazione di un plug-in WordPress personalizzato Ricerca per categoria

Con una quantità sempre crescente di contenuti che si accumulano sul tuo sito Wordpress, i tuoi utenti dovranno inevitabilmente cercare nel tuo sito per trovare quel particolare articolo utile di ritorno. Per aiutare a restringere i risultati della ricerca, ti mostrerò come codificare un plug-in che consente all'utente di effettuare ricerche in base alla categoria.

Questo tutorial include uno screencast disponibile per i membri Tuts + Premium.

Il primo passo nello sviluppo del nostro plugin è decidere il set di funzionalità che avrà, oltre alla quantità di personalizzazione disponibile. Vogliamo che il nostro plug-in abbia le seguenti funzionalità e per consentire la completa personalizzazione dell'utente:

  1. Riconfigurare la ricerca in base alla categoria selezionata
  2. Elenco a discesa di categorie
  3. Possibilità di nascondere le categorie senza messaggi dalla lista
  4. Possibilità di escludere categorie secondarie dall'elenco
  5. Opton per disabilitare il nostro stile integrato
  6. Possibilità di escludere categorie specifiche dalla lista
  7. Possibilità di utilizzare valori personalizzati nella casella di ricerca
  8. Possibilità di utilizzare il valore personalizzato per la selezione "In tutte le categorie"

Creazione dello scheletro per il plugin

Prima di poter fare qualsiasi cosa per il nostro plugin, per prima cosa abbiamo bisogno di costruire lo scheletro per il plugin in cui lavorare. Inizieremo creando una nuova cartella nella directory "plugins" di Wordpress (/ wp-content / plugins) e intitolandola "Ricerca-per-categoria" (per convenzione, tutte le cartelle di plug-in devono essere tutte in minuscolo e utilizzare i trattini al posto degli spazi in modo che quando si collegano ai file nella cartella gli URL siano facilmente leggibili all'occhio umano). Crea un nuovo file PHP nella cartella intitolata "Sbc.php", questo file servirà da base per la nostra intera struttura di plugin. Prossimo riempimento, nel plugin con le informazioni necessarie su Wordpress in modo che appaia nel nostro pannello Amministratore WP.

 


Imposta la pagina Opzioni

Ora che Wordpress riconosce il nostro plugin, possiamo iniziare il nostro sviluppo. La prima cosa che dobbiamo fare è impostare una pagina Opzioni in modo che possiamo consentire all'utente di configurare il nostro plug-in a loro piacimento. Come funziona questo è un processo in tre fasi:

primo creiamo una classe per tutte le nostre configurazioni per operare all'interno.

 if (! class_exists ('SBC_Admin')) class SBC_Admin 

Secondo eseguiamo una funzione per creare la pagina di configurazione.

 // Opzioni di inserimento pagina di inserimento funzione add_config_page () if (function_exists ('add_submenu_page')) add_options_page ('Ricerca per categoria Opzioni', 'Cerca per categoria', 10, basename (__ FILE__), array ('SBC_Admin', ' config_page ')); 

Impostazione della personalizzazione

Ora che abbiamo la nostra pagina di configurazione, possiamo iniziare ad aggiungere nelle nostre opzioni di configurazione per applicarci successivamente nel plugin. Per visualizzare la nostra pagina di configurazione dovremo creare una nuova funzione chiamata "Config_page ()" che riempiremo con il resto del nostro codice della sezione di amministrazione. Per prima cosa andremo avanti e scriveremo l'HTML per tutte le nostre sezioni.

 

Seach By Category Options

/>
/>
/> * Lo stile non viene visualizzato correttamente in IE7 e versioni precedenti *

Noterai che stiamo già usando PHP per fare riferimento alle variabili: $ search_text, $ fuoco, $ hide_empty, $ exclude_child, $ sbc_style, e $ raw_excluded_cats (nella funzione "Wp_category_checklist"). Creeremo e espanderemo queste variabili nel prossimo passaggio.



Screencast completo



Aggiunta delle nostre opzioni al database

Ora che la pagina di amministrazione è attiva, possiamo iniziare a usarla per aggiungere opzioni al Database. Per fare ciò, stiamo semplicemente creando una variabile prima del "if (! class_exists ('SBC_Admin')) " e quindi utilizzare la funzione di Wordpress "add_option ( 'entry-titolo', 'valore')"per inserirlo nel wp_options tabella del DB. Ecco l'elenco delle variabili che utilizzeremo nel nostro plugin:

  • $ fuoco - Il testo predefinito visualizzato dal visualizzatore nel menu a discesa della selezione
  • $ hide_empty - vero o falso, rimuove le categorie con 0 post dal menu a discesa
  • $ excluded_cats - una matrice separata da virgole delle categorie escluse
  • $ raw_excluded_cats - matrice delle categorie escluse
  • $ search_text - Il testo predefinito nella casella di ricerca del modulo
  • $ exclude_child - vero o falso, rimuove le categorie figlio dal menu a discesa
  • $ sbc_style - vero o falso, usa il foglio di stile SBC personalizzato
 // Some Defaults $ focus = 'In tutte le categorie'; $ hide_empty = '1'; // 1 significa vero $ excluded_cats = array (); $ search_text = 'Cerca per ...'; $ exclude_child = '0'; // 0 significa false $ raw_excluded_cats = array (); $ sbc_style = '1'; // Inserisci i valori predefiniti nella tabella "opzioni wp" add_option ("sbc-focus", $ focus); add_option ("sbc-hide-empty", $ hide_empty); add_option ("sbc-excluded-cats", $ excluded_cats); add_option ("sbc-search-text", $ search_text); add_option ("sbc-selected-excluded", $ raw_excluded_cats); add_option ("sbc-exclude-child", $ exclude_child); add_option ("sbc-style", $ sbc_style);

Ora che abbiamo i nostri valori predefiniti impostati e aggiunti al database, possiamo usare Wordpress ""get_option ( 'entry-titolo')"funzione nel nostro config_page funzione in modo che i nostri valori siano riflessi all'interno delle forme.

 function config_page () $ focus = get_option ("sbc-focus"); $ hide_empty = get_option ("sbc-hide-empty"); $ search_text = get_option ("sbc-search-text"); $ excluded_cats = get_option ("sbc-excluded-cats"); $ exclude_child = get_option ("sbc-exclude-child"); $ raw_excluded_cats = get_option ("sbc-selected-excluded"); // Per Checklist $ sbc_style = get_option ("sbc-style");

Ora che la nostra pagina Opzioni utilizza i dati dal database, configuriamo il processo di aggiornamento. Per cominciare inizieremo una nuova istruzione if controllando se il nostro pulsante di invio è impostato. Ora confronteremo il nostro wpnonce per verificare che l'utente abbia visitato la pagina prima di provare ad aggiornare le opzioni. Quindi eseguiremo un'altra istruzione if per verificare che la corrente sia autorizzata a modificare le impostazioni eseguendo la funzione WP "current_user_can ( '') manage_options"Se non possono, allora uccideremo la sceneggiatura.

 if (isset ($ _ POST ['submit'])) $ nonce = $ _REQUEST ['_ wpnonce']; if (! wp_verify_nonce ($ nonce, 'sbc-updatesettings')) die ('Controllo sicurezza fallito'); if (! current_user_can ('manage_options')) die (__ ('Non è possibile modificare le opzioni di ricerca per categoria.')); check_admin_referer ( 'SBC-updatesettings'); 

Ora aggiorneremo le variabili che abbiamo definito in precedenza con il valore di input dal modulo. Poiché utilizziamo le checkbox per l'elenco delle categorie escluse, il modo migliore per ottenere il ritorno che vogliamo è dichiarare un'altra istruzione if e controllare che sia impostato "post_category" (l'id dato alla lista dalla funzione WP). Se è presente, prenderemo la sua forma grezza e rimettiamo nel "$ raw_excluded_cats" variabile da precedente in modo che le caselle di controllo rimangano controllate. Utilizzeremo anche questi stessi valori di ritorno per creare un array "carino" separato da virgole per un uso futuro aggiungendo un valore extra all'inizio dell'array (questa è una correzione per un glitch in seguito in un'altra funzione) e quindi implodere l'array.

 // Ottieni i nostri nuovi valori di opzione $ focus = $ _POST ['focus']; $ hide_empty = $ _POST ['nascondi-vuoto']; $ search_text = $ _POST ['search-text']; $ exclude_child = $ _POST ['exclude-child']; $ sbc_style = $ _POST ['sbc-style']; if (isset ($ _ POST ['post_category'])) $ raw_excluded_cats = $ _POST ['post_category']; // Corregge i valori restituiti della categoria esclusa $ fix = $ raw_excluded_cats; array_unshift ($ fix, "1"); $ excluded_cats = implode (',', $ fix); 

A causa della natura stessa delle checkbox, hanno un valore di ritorno solo se sono spuntate, quindi dobbiamo scrivere un catch per quando non sono spuntate. Per fare questo useremo una semplice istruzione if che controlla se le nostre variabili sono vuote (dal momento che non c'è alcun valore di ritorno dal modulo per riempirlo), se è vuoto, imposteremo il valore su "0" (falso).

 // Assicurati che "$ hide_empty" e "$ exclude_child" siano impostati correttamente if (empty ($ hide_empty)) $ hide_empty = '0'; // 0 significa false if (vuoto ($ exclude_child)) $ exclude_child = '0'; // 0 significa false if (vuoto ($ sbc_style)) $ sbc_style = '0'; // 0 significa falso

Ora il nostro ultimo passo è aggiornare il database con i nostri nuovi valori usando la funzione di Wordpress "update_option ( 'entry-titolo', 'new-value')"Abbiamo anche intenzione di avvolgere i valori che stiamo inserendo nel DB con la funzione mysql_real_escape_string () per aiutare a prevenire qualsiasi iniezione SQL.

 // Aggiorna il DB con i nuovi valori opzione update_option ("sbc-focus", mysql_real_escape_string ($ focus)); update_option ("sbc-hide-empty", mysql_real_escape_string ($ hide_empty)); update_option ("sbc-selected-excluded", mysql_real_escape_string ($ raw_excluded_cats)); update_option ("sbc-excluded-cats", mysql_real_escape_string ($ excluded_cats)); update_option ("sbc-search-text", mysql_real_escape_string ($ search_text)); update_option ("sbc-exclude-child", mysql_real_escape_string ($ exclude_child)); update_option ("sbc-style", mysql_real_escape_string ($ sbc_style));

Il nostro codice Finora:

  

Seach By Category Options

/>
/>
/> * Lo stile non viene visualizzato correttamente in IE7 e versioni precedenti *


Creazione del modulo

Ora che abbiamo tutto il nostro back end pronto e pronto per la distribuzione, è tempo di iniziare a scrivere il modulo front-end che tutti i visitatori vedranno e utilizzeranno. In modo che il nostro utente possa posizionare la nostra forma ovunque sul suo sito che desidera, inseriremo la nostra forma all'interno di una nuova funzione intitolata "SBC ()"posizionati appena al di fuori della nostra dichiarazione di classe. I primi byte di codice che dobbiamo aggiungere stanno dichiarando un $ globale wp_query e $ post in modo che possiamo avere accesso a tali funzioni se lo desideriamo in seguito, ma per i nostri scopi non avremo bisogno Il passo successivo è quello di ottenere nuovamente i valori delle nostre variabili dal database.

 // Funzione della funzione di base sbc () $ focus = get_option ("sbc-focus"); $ hide_empty = get_option ("sbc-hide-empty"); $ excluded_cats = get_option ("sbc-excluded-cats"); $ search_text = get_option ("sbc-search-text"); $ exclude_child = get_option ("sbc-exclude-child"); 

Una volta fatto, possiamo creare un'altra variabile chiamata "$ lista"con il suo valore è la funzione WP wp_dropdown_categories (impostazioni $) (leggi di più su questa funzione qui). Quella variabile "impostazioni $"è dove la maggior parte della nostra personalizzazione viene applicata.

 $ settings = array ('show_option_all' => $ focus, 'show_option_none' => ", 'orderby' => 'name', 'order' => 'ASC', 'show_last_update' => 0, 'show_count' => 0, 'hide_empty' => $ hide_empty, 'child_of' => 0, 'exclude' => "'". $ Excluded_cats. "'", 'Echo' => 0, 'selected' => 0, 'hierarchical' => 1, 'name' => 'cat', 'class' => 'postform', 'depth' => $ exclude_child); $ list = wp_dropdown_categories ($ settings);

Ora che il menu a discesa del modulo è configurato, possiamo creare un'altra variabile, "modulo $"che manterrà il nostro modulo HTML tramite un preprocessore ipertestuale, quindi echeggeremo la nostra nuova variabile $ form.

 $ blog_url = get_bloginfo ("url"); $ form = <<< EOH 
$ List
EOH; echo $ form;

Aggiunta nello stile personalizzato

In precedenza abbiamo dato all'utente la possibilità di utilizzare il nostro stile personalizzato per il modulo. Se hanno lasciato questa opzione abilitata nel menu delle impostazioni, dobbiamo aggiungere il nostro foglio di stile all'intestazione. Il modo più semplice per farlo è creare una nuova istruzione if per verificare la nostra variabile "$ sbc_style"per essere vero (nel nostro codice: 1). All'interno di questo controllo, aggiungeremo una nuova funzione"style_insert ()"che riecheggia l'URL del nostro foglio di stile. Anche nel caso (ma al di fuori della funzione), scriveremo una nuova azione per "Wp_head" aggiungere nella nostra funzione "style_insert ()".

 if ($ sbc_style == '1') // Aggiungi la nostra funzione di stile style_insert () $ current_path = get_option ('siteurl'). '/ wp-content / plugins /'. basename (dirname (__ FILE__)); ?>   

Per quanto riguarda il nostro stile, crea un nuovo file chiamato SBC-style.css riempilo con:

 modulo # sbc-search clear: both; modulo # sbc-search * margin: 0px; modulo # sbc-search input # s background: # f5f5f5; border: 1px solid #bbbbbb; imbottitura: 4px 10px; larghezza: 80%; margin-bottom: 10px; form # sbc-search select # cat display: block; sfondo: #fbfbfb; altezza: 30 px; larghezza: 63%; border: 1px solid #bbbbbb; fluttuare: a sinistra; imbottitura: 4px 20px; border-right: none; -khtml-aspetto: nessuno; / * corregge lo stile safai predefinito * / border-radius: 15px 0px 0px 15px; -webkit-border-bottom-left-radius: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius: 15px 0px 0px 15px; modulo # sbc-search select # cat option padding: 2px 4px; modulo # sbc-search input # sbc-submit display: block; altezza: 30 px; larghezza: 37%; border: 1px solid #bbbbbb; f loat: giusto; border-radius: 0px 15px 15px 0px; -webkit-border-bottom-right-radius: 15px; -webkit-border-top-right-radius: 15px; -moz-border-radius: 0px 15px 15px 0px;

In Safari noterai che manca il triangolo standard verso il basso dal nostro menu a tendina, perché è stato usato -aspetto khtml: nessuno nel menu a tendina per impedire al safari di forzare su di esso il tema "neve". un modo per risolvere questo problema è usare un carattere HTML per simulare il triangolo, e ce ne può essere uno molto simile chiamato "∇ Nabla". Utilizzeremo una combinazione di spazi, spazi senza interruzione e questa nabla nelle impostazioni a discesa per risolvere questo problema.

 $ settings = array ('show_option_all' => $ focus. '∇', 'show_option_none' => ", 'orderby' => 'name', 'order' => 'ASC', 'show_last_update' => 0, ' show_count '=> 0,' hide_empty '=> $ hide_empty,' child_of '=> 0,' exclude '=> "'". $ excluded_cats. "'",' echo '=> 0,' selected '=> 0 , 'hierarchical' => 1, 'name' => 'cat', 'class' => 'postform', 'depth' => $ exclude_child);


Restituzione dei risultati di ricerca

Una volta ottenuto il nostro modulo, possiamo finalmente iniziare a ottenere i risultati di ricerca che stiamo cercando di offrire ai nostri visitatori. Per iniziare, creeremo una nuova funzione chiamata return_only_selected_category (), in cui creeremo una nuova istruzione if controllando che il nostro pulsante di invio della ricerca sia impostato. Dentro questo dobbiamo creare un nuovo globale $ wp_query. Quindi prenderemo il ritorno della categoria selezionata e lo inseriremo in una variabile chiamata $ desired_cat. Nel caso in cui l'utente abbia selezionato l'opzione per tutte le categorie, è necessario eseguire un controllo per il valore "*" e reimpostarlo su "".

 // Ottieni risultati solo dalla funzione di categoria selezionata return_only_selected_category () if (isset ($ _ POST ['sbc-submit'])) global $ wp_query; $ desired_cat = $ _POST ['cat']; if ($ desired_cat == '*') $ desired_cat = ";

Ora dobbiamo creare un'altra variabile, $ esclusi, il cui valore è la funzione WP get_categories (). Stiamo per aggiungere 2 argomenti a questa funzione. Il primo è "hide_empty = false" in modo che tutte le categorie siano inserite nell'elenco, e il secondo è "exclude = $ desired_cat" in modo che qualsiasi categoria dalla quale l'utente vuole visualizzare i post venga rimossa dall'elenco.

 $ excluded = get_categories ('hide_empty = false & exclude = $ desired_cat');

Una volta impostata la variabile, possiamo finalmente fare in modo che solo i post della categoria selezionata vengano visualizzati nei risultati. Per questo, modificheremo il Query Vars in modo che Wordpress rimuova i post di ogni categoria che elenchiamo (e così accade che abbiamo una variabile piena di categorie da escludere).

 $ wp_query-> query_vars ['cat'] = '-'. $ Esclusi;

Aggiungendo un trattino davanti all'elenco delle categorie, stiamo dicendo a Wordpress di rimuovere quelli dalla query. Un metodo molto efficace per noi. Ora l'unica cosa che resta da fare è aggiungere un nuovo filtro WP per "pre_get_posts" aggiungendo nella nostra nuova funzione.

 // dirotta la ricerca add_filter ('pre_get_posts', 'return_only_selected_category');

Come inserire il nostro modulo

 ... il tuo codice di forma standard qui ... 

Il nostro codice finito

  

Seach By Category Options

/>
/>
/> * Lo stile non viene visualizzato correttamente in IE7 e versioni precedenti *

$ Focus '. ∇ ',' show_option_none '=> ",' orderby '=>' name ',' order '=>' ASC ',' show_last_update '=> 0,' show_count '=> 0,' hide_empty '=> $ hide_empty, 'child_of' => 0, 'exclude' => "'". $ excluded_cats. "'", 'echo' => 0, 'selected' => 0, 'hierarchical' => 1, 'name' => ' cat ',' class '=>' postform ',' depth '=> $ exclude_child); $ list = wp_dropdown_categories ($ settings); $ blog_url = get_bloginfo ("url"); $ form = <<< EOH
$ List
EOH; echo $ form; // Ottieni risultati solo dalla funzione di categoria selezionata return_only_selected_category () if (isset ($ _ POST ['sbc-submit'])) global $ wp_query; $ desired_cat = $ _POST ['cat']; if ($ desired_cat == '*') $ desired_cat = "; $ excluded = get_categories ('hide_empty = false & exclude = $ desired_cat'); $ wp_query-> query_vars ['cat'] = '-'. $ excluded; if