Een aangepaste WordPress-plugin voor zoeken op categorie maken

Met een steeds grotere hoeveelheid content die voortbouwt op uw Wordpress-site, zullen uw gebruikers onvermijdelijk uw site moeten doorzoeken om dat specifieke nuttige artikel van oudsher te vinden. Om de zoekresultaten te verfijnen, laat ik u zien hoe u een plug-in codeert waarmee de gebruiker op basis van categorie kan zoeken.

Deze tutorial bevat een screencast die beschikbaar is voor leden van Tuts + Premium.

De eerste stap in de ontwikkeling van onze plug-in is om te beslissen over de functies die het zal hebben, plus de hoeveelheid beschikbare maatwerk. We willen dat onze plug-in de volgende functies heeft en voor volledige gebruikersaanpassing:

  1. Herconfigureer de zoekopdracht op basis van de geselecteerde categorie
  2. Vervolgkeuzelijst met categorieën
  3. Mogelijkheid om categorieën te verbergen zonder berichten uit de lijst
  4. Mogelijkheid om onderliggende categorieën uit te sluiten van lijst
  5. Kies om onze ingebouwde styling uit te schakelen
  6. Mogelijkheid om specifieke categorieën uit te sluiten van de lijst
  7. Mogelijkheid om aangepaste waarde te gebruiken in het zoekvak
  8. Mogelijkheid om aangepaste waarde te gebruiken voor selectie "In alle categorieën"

Het skelet maken voor de plug-in

Voordat we iets aan onze plug-in kunnen doen, moeten we eerst het skelet voor de plug-in bouwen om in te werken. We zullen beginnen met het maken van een nieuwe map in de WordPress "plug-ins" -directory (/ wp-content / plugins) en de titel ervan "Zoek-per-categorie" (Per conventie zouden alle plugin-mappen allemaal in kleine letters moeten zijn en streepjes gebruiken in plaats van spaties zodat wanneer linken naar bestanden in de map-URL's gemakkelijk leesbaar is voor het menselijk oog). Maak een nieuw PHP-bestand in de map met de titel "Sbc.php", dit bestand zal dienen als de basis voor onze gehele plugin-structuur. Vul vervolgens in de plug-in met de vereiste Wordpress-info in zodat deze in ons WP-beheerdersdashboard verschijnt.

 


Stel de pagina Opties in

Nu Wordpress onze plug-in herkent, kunnen we beginnen met onze ontwikkeling. Allereerst moeten we een pagina Opties instellen, zodat we de gebruiker onze plug-in naar eigen wens kunnen laten configureren. Hoe dit werkt is een proces in drie stappen:

eerste we creëren een klasse voor al onze configuraties om binnen te werken.

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

Tweede we voeren een functie uit om de configuratiepagina te maken.

 // invoegfunctie voor prep-opties pagina add_config_page () if (function_exists ('add_submenu_page')) add_options_page ('Zoeken op categorie-opties', 'Zoeken op categorie', 10, basename (__ FILE__), array ('SBC_Admin', ' config_page ")); 

De personalisatie instellen

Nu we onze configuratiepagina hebben, kunnen we beginnen met het toevoegen van onze configuratieopties zodat we deze later in de plug-in kunnen toepassen. Om onze configuratiepagina weer te geven, moeten we een nieuwe functie aanmaken genaamd "Config_page ()" die we zullen invullen met de rest van onze admin sectie code. Eerst gaan we door en schrijven we de HTML voor al onze secties.

 

Zoeken op categorie-opties

/>
/>
/> * Styling wordt niet correct weergegeven in IE7 en vroeger *

U zult merken dat we PHP al gebruiken om naar de variabelen te verwijzen: $ SEARCH_TEXT, $ aandacht, $ hide_empty, $ exclude_child, $ sbc_style, en $ raw_excluded_cats (in de functie "Wp_category_checklist"). We zullen deze variabelen in de volgende stap maken en uitbreiden.



Volledige screencast



Onze opties aan de database toevoegen

Nu de beheerpagina actief is, kunnen we deze gebruiken om opties aan de database toe te voegen. Om dit te doen, gaan we eenvoudigweg een variabele maken vóór de "if (! class_exists ('SBC_Admin')) " en gebruik vervolgens de Wordpress-functie "add_option ( 'entry-titel', 'waarde')"om het in te voegen in de wp_options tabel van de DB. Hier is de lijst met variabelen die we in onze plug-in zullen gebruiken:

  • $ aandacht - De standaardtekst die de kijker ziet in de vervolgkeuzelijst van de selectie
  • $ hide_empty - waar of niet waar, verwijdert categorieën met 0 berichten uit de vervolgkeuzelijst
  • $ excluded_cats - een door komma's gescheiden array van uitgesloten categorieën
  • $ raw_excluded_cats - reeks uitgesloten categorieën
  • $ SEARCH_TEXT - De standaardtekst in het zoekvak van het formulier
  • $ exclude_child - waar of niet waar, verwijdert onderliggende categorieën uit de vervolgkeuzelijst
  • $ sbc_style - waar of niet waar, gebruik de aangepaste SBC-stylesheet
 // Enkele standaard $ focus = 'In alle categorieën'; $ hide_empty = '1'; // 1 betekent true $ excluded_cats = array (); $ search_text = 'Zoeken naar ...'; $ exclude_child = '0'; // 0 betekent false $ raw_excluded_cats = array (); $ sbc_style = '1'; // Zet onze standaardwaarden in de tabel "wp-options" 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);

Nu we onze standaardinstellingen hebben ingesteld en aan de database hebben toegevoegd, kunnen we Wordpress '"gebruikenget_option ( 'entry-titel)"functie in onze config_page zodat onze waarden worden weerspiegeld in de formulieren.

 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"); // Voor checklist $ sbc_style = get_option ("sbc-style");

Nu onze Opties-pagina de gegevens uit de database gebruikt, kunnen we het updateproces instellen. Om te beginnen gaan we een nieuw if-statement starten om te controleren of onze submit-knop is ingesteld. Vervolgens zullen we onze vergelijken wpnonce om te controleren of de gebruiker de pagina heeft bezocht voordat hij probeerde de opties bij te werken. Vervolgens voeren we een andere if-opdracht uit om te controleren en controleren of de huidige toestemming is om de instellingen te wijzigen door de WP-functie uit te voeren "current_user_can ( 'manage_options')", als ze dat niet kunnen, dan zullen we het script doden.

 if (isset ($ _ POST ['submit'])) $ nonce = $ _REQUEST ['_ wpnonce']; als (! wp_verify_nonce ($ nonce, 'sbc-updateettings')) overlijdt ('Beveiligingscontrole mislukt'); if (! current_user_can ('manage_options')) sterven (__ ('U kunt de opties voor zoeken op categorie niet bewerken.')); check_admin_referer (SBC-updatesettings); 

Nu zullen we de variabelen die we eerder hebben gedefinieerd bijwerken met de invoerwaarde van het formulier. Aangezien we selectievakjes gebruiken voor de lijst met uitgesloten categorieën, is de beste manier om de gewenste return te krijgen, het declareren van een andere if-statement en te controleren of "post_category" (de id die door de WP-functie aan de lijst is gegeven) is ingesteld. Als het aanwezig is, dan gaan we zijn ruwe vorm aannemen en terug plaatsen in de "$ Raw_excluded_cats" variabele van vroeger, zodat de selectievakjes aangevinkt blijven. We gaan diezelfde retourwaarden ook gebruiken om een ​​"mooie" door komma's gescheiden array te maken voor later gebruik door een extra waarde toe te voegen aan het begin van de array (dit is een oplossing voor een glitch later in een andere functie) en vervolgens implodeer de array.

 // Ontvang onze nieuwe optiewaarden $ focus = $ _POST ['focus']; $ hide_empty = $ _POST ['hide-empty']; $ search_text = $ _POST ['zoek-tekst']; $ exclude_child = $ _POST ['exclude-child']; $ sbc_style = $ _POST ['sbc-style']; if (isset ($ _ POST ['post_category'])) $ raw_excluded_cats = $ _POST ['post_category']; // Fix onze uitgesloten categorieretourwaarden $ fix = $ raw_excluded_cats; array_unshift ($ fix, "1"); $ excluded_cats = implode (',', $ fix); 

Vanwege de aard van selectievakjes hebben ze alleen een geretourneerde waarde als ze worden gecontroleerd, dus we moeten een vangst schrijven voor wanneer ze niet worden gecontroleerd. Om dit te doen gebruiken we een eenvoudige if-instructie die controleert of onze variabelen leeg zijn (omdat er geen retourwaarde van het formulier is om deze te vullen), als deze leeg is, gaan we de waarde instellen naar "0" (false).

 // Zorg ervoor dat "$ hide_empty" & "$ exclude_child" correct zijn ingesteld als (empty ($ hide_empty)) $ hide_empty = '0'; // 0 betekent false als (empty ($ exclude_child)) $ exclude_child = '0'; // 0 betekent onwaar als (empty ($ sbc_style)) $ sbc_style = '0'; // 0 betekent onwaar

Nu is onze laatste stap om de database bij te werken met onze nieuwe waarden met behulp van de Wordpress-functie "update_option ( 'entry-titel', 'new-value')". We gaan ook de waarden die we invoegen in de database plaatsen met de functie mysql_real_escape_string () om SQL-injecties te voorkomen.

 // Update de DB met de nieuwe optiewaarden 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));

Onze code Tot nu toe:

  

Zoeken op categorie-opties

/>
/>
/> * Styling wordt niet correct weergegeven in IE7 en vroeger *


Het formulier maken

Nu we onze back-end helemaal klaar hebben staan ​​om te implementeren, is het tijd om het front-end formulier te schrijven dat alle bezoekers zullen zien en gebruiken. Om ervoor te zorgen dat onze gebruiker overal op zijn site zijn vorm kan plaatsen die hij wil, gaan we ons formulier insluiten in een nieuwe functie met de titel "SBC ()"geplaatst net buiten onze klassenverklaring.De eerste bytes van code die we moeten toevoegen, verklaren een globale $ wp_query en $ post, zodat we toegang tot die functies kunnen hebben als we dat later wensen, maar voor onze doeleinden hebben we geen behoefte aan De volgende stap is het opnieuw verkrijgen van onze variabelenwaarden uit de database.

 // Base function function 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"); 

Zodra we dat hebben gedaan, kunnen we nog een variabele creëren met de naam "$ lijst"met zijn waarde als de WP-functie wp_dropdown_categories ($-instellingen) (lees hier meer over deze functie). Die variabele "$ instellingen"is waar de meeste van onze maatwerk wordt toegepast.

 $ settings = array ('show_option_all' => $ focus, 'show_option_none' => ", 'orderby' => 'naam', '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, 'naam' => 'cat', 'class' => 'postform', 'depth' => $ exclude_child); $ list = wp_dropdown_categories ($ settings);

Nu de vervolgkeuzelijst van het formulier is geconfigureerd, kunnen we nog een variabele maken, "$ form"die onze formulier-HTML zal bevatten via een hypertekst-preprocessor, dan zullen we onze nieuwe variabele in $ -vorm volgen.

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

Toevoegen in de Custom Styling

Eerder hebben we de gebruiker een optie gegeven om onze aangepaste styling voor het formulier te gebruiken. Als ze deze optie hebben ingeschakeld in het instellingenmenu, moeten we ons stylesheet aan de kop toevoegen. De eenvoudigste manier om dit te doen is om een ​​nieuwe if-verklaring te maken voor onze variabele "$ sbc_style"om waar te zijn (in onze code: 1). Binnen die controle voegen we een nieuwe functie toe"style_insert ()"die de URL naar onze stylesheet weergalmt. Ook in de if (maar buiten de functie) zullen we schrijven in een nieuwe actie voor "Wp_head" om in onze functie toe te voegen "style_insert ()".

 if ($ sbc_style == '1') // Voeg onze stylingfunctie toe style_insert () $ current_path = get_option ('siteurl'). '/ wp-content / plugins /'. basename (dirname (__ FILE__)); ?>   

Voor wat betreft onze styling, maak een nieuw bestand met de naam sbc-style.css vul het met:

 form # sbc-search clear: both; form # sbc-search * margin: 0px; form # sbc-search input # s background: # f5f5f5; rand: 1px vast #bbbbbb; opvulling: 4px 10px; breedte: 80%; margin-bottom: 10px; form # sbc-search select # cat display: block; achtergrond: #fbfbfb; hoogte: 30 px; breedte: 63%; rand: 1px vast #bbbbbb; zweven: links; opvulling: 4px 20px; border-right: geen; -khtml-uiterlijk: geen; / * standaard safai-styling * / 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; form # sbc-search select # cat optie opvulling: 2px 4px; vorm # sbc-zoekinvoer # sbc-submit display: block; hoogte: 30 px; breedte: 37%; rand: 1px vast #bbbbbb; f lolat: right; grensradius: 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 zult u merken dat de standaard neerwaartse driehoek ontbreekt in onze vervolgkeuzelijst, dit is omdat we hebben gebruikt -khtml-uiterlijk: geen op de vervolgkeuzelijst om de safari te stoppen, zodat het 'sneeuw'-thema erop wordt gedwongen. een manier om dit op te lossen is om een ​​HTML-teken te gebruiken om de driehoek te simuleren, en er is er waarschijnlijk één vergelijkbaar met "∇ Nabla". We gebruiken een combinatie van spaties, niet-openbrekende spaties en deze nabla in de vervolgkeuzemenu's om dit probleem op te lossen.

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


De zoekresultaten retourneren

Zodra we ons formulier hebben ingevoerd, kunnen we eindelijk de zoekresultaten krijgen die we onze bezoekers willen geven. Om ons te starten, zullen we een nieuwe functie aanmaken genaamd return_only_selected_category (), waarin we een nieuw if-statement maken dat controleert of onze knop Zoeken verzenden is ingesteld. Binnenin moeten we een nieuw maken globale $ wp_query. Vervolgens nemen we de geselecteerde categorieretour en plaatsen deze in een variabele met de naam $ desired_cat. Als de gebruiker de optie voor alle categorieën heeft geselecteerd, moeten we een controle uitvoeren op de waarde "*" en deze opnieuw instellen op "".

 // Krijg alleen resultaten van de geselecteerde categoriefun return_only_selected_category () if (isset ($ _ POST ['sbc-submit'])) global $ wp_query; $ desired_cat = $ _POST ['cat']; if ($ desired_cat == '*') $ desired_cat = ";

Nu moeten we nog een variabele maken, $ uitgesloten, waarvan de waarde de WP-functie is get_categories (). We zullen 2 argumenten aan deze functie toevoegen. De eerste is "hide_empty = false", zodat alle categorieën in de lijst worden geplaatst en ten tweede "exclude = $ desired_cat", zodat alle categorieën waaruit de gebruiker berichten wil bekijken, uit de lijst worden verwijderd.

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

Zodra die variabele is ingesteld, kunnen we het uiteindelijk zo maken dat alleen berichten uit de geselecteerde categorie in de resultaten verschijnen. Voor dit effect gaan we de query's wijzigen zodat WordPress berichten verwijdert uit elke categorie die we aanbieden (en het is net zo dat we een variabele vol categorieën hebben om uit te sluiten).

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

Door een streepje voor de lijst met categorieën toe te voegen, vertellen we Wordpress om die uit de query te verwijderen. Een zeer effectieve methode voor ons. Nu hoef je alleen nog een nieuw WP-filter toe te voegen "Pre_get_posts" toevoeging van onze nieuwe functie.

 // Highjack de zoekopdracht add_filter ('pre_get_posts', 'return_only_selected_category');

Hoe ons formulier in te voegen

 ... uw standaardformuliercode hier ... 

Onze afgewerkte code

  

Zoeken op categorie-opties

/>
/>
/> * Styling wordt niet correct weergegeven in IE7 en vroeger *

$ Focus.' ∇ ',' show_option_none '=' ',' orderby '=>' naam ',' volgorde '=>' 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 $ vorm; // Krijg alleen resultaten van de geselecteerde categoriefun 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 ($ sbc_style == '1') // Voeg onze stylingfunctie toe style_insert () $ current_path = get_option ('siteurl'). '/ wp-content / plugins /'. basename (dirname (__ FILE__)) ; echo ''; // insert custom stylesheet add_action ('wp_head', 'style_insert'); // Highjack de zoekopdracht add_filter ('pre_get_posts',