Share
Idag vill jag visa dig hur du enkelt kan lägga till anpassade sidfält att använda inom dina inlägg och sidor. Det kan vara användbart att visa olika widgets enligt din sida eller postens ämne.
Vi ser hur du använder WordPress-metakassor för att lagra och hämta ett valt sidofält för ett visst inlägg. Anpassade sidfält kommer att läggas till i avsnittet om temaalternativ.
Jag brukade hantera den stora widgetlogikpluggen för att visa olika widgets på olika sidor, men widgetsidan blev väldigt fuzzy och svår att underhålla. Så varför inte använda flera sidfält och välj vilken som ska visas på ett visst inlägg? Det är vad jag ska täcka i denna handledning.
I den här handledningen använder jag det stora WordPress-standardtematet tjugo elva för att visa hur man använder egna sidfält i ditt tema.
Först ska vi lägga till en ny inställning i Utseende -> Tema alternativ. Du kan hänvisa till den här bra handledningen för att se hur du lägger till inställningar.
Öppna theme-options.php fil, som finns i twentyeleven / inc och lägg till den här koden i slutet av twentyeleven_theme_options_init () fungera:
Accentsconagua
add_settings_field ('custom_sidebar', __ ('Custom sidebars', 'twentyeleven'), 'twentyelev_settings_field_custom_sidebar', 'theme_options', 'general'); Lägg sedan till ett standardvärde (en tom matris) till standardvärdena för temanalternativ, i slutet av twentyeleven_get_default_theme_options () fungera:
$ default_theme_options = array ('color_scheme' => 'light', 'link_color' => twentyeleven_get_default_link_color ('light'), 'theme_layout' => 'content-sidebar', 'custom_sidebar' => array ()); Nu ska vi skapa återuppringningsfunktionen som hanterar inställningens display.
Låt oss lägga till några jQuery för att hantera interaktioner som att lägga till och ta bort sidfält, som i grunden är några listelement som innehåller en dold ingång. Vi genererar också dessa listelement från redan sparade sidfält.
funktion twentyeleven_settings_field_custom_sidebar () // Hämta tematillval $ opts = twentyeleven_get_theme_options (); // En bit av jQuery för att hantera interaktioner (lägg till / ta bort sidor) $ output = ""; $ output. =""; $ output. =""; echo $ output;"; $ output. ="
"; // Visa varje anpassad sidofält om (isset ($ opts ['custom_sidebar'])) $ i = 0; foreach ($ opts ['custom_sidebar'] som $ sidobar) $ output. ="
"; $ output. ="- "$ Sidofältet." ".__ (" delete ", $ themename)."
"; $ i ++; $ output. ="
Till sist lägger du till den här koden i twentyeleven_theme_options_validate () funktion för att sanera och validera formuläringång:
om (isset ($ input ['custom_sidebar'])) $ output ['custom_sidebar'] = $ inmatning ['custom_sidebar'];
Vid denna tidpunkt bör du kunna hantera och spara egna sidfält inom ditt tema. Låt oss till exempel skapa en ny anpassad sidovägg som heter "Mitt anpassade sidovägg". Din teman Alternativ sida ska se så här ut:
Nu kan vi lägga till anpassade sidor, vi behöver Registrera dem så att de kan visas på administratörssidan för widgets.
I Twenty Eleven-temat görs detta inom twentyeleven_widgets_init () fungera. Så lägg till i slutet av den här funktionen:
$ options = twentyeleven_get_theme_options (); om isset ($ options ['custom_sidebar']) && sizeof ($ options ['custom_sidebar'])> 0) föreach ($ options ['custom_sidebar'] som $ sidobar) register_sidebar (array ('name' => __ ($ sidebar, 'tjugo tjugo'), 'id' => generateSlug ($ sidofält, 45), 'before_widget' => '"," before_title '=>'',' after_title '=>'
',)); Vi hämtar temaalternativ, kontrollera att det finns minst en anpassad sidovägg och registrera den. Vi använder en snabb funktion till generera en slug ur sidofältet som ska användas som sidfältet ID.
funktion generateSlug ($ fras, $ maxLength) $ result = strtolower ($ fras); $ result = preg_replace ("/ [^ a-z0-9 \ s -] /", "", $ resultat); $ result = trim (preg_replace ("/ [\ s -] + /", "", $ resultat)); $ result = trim (substr ($ resultat, 0, $ maxLength)); $ result = preg_replace ("/ \ s /", "-", $ result); returnera $ resultat; Gå nu till Utseende -> Widgets och du bör se vår nya anpassade sidofält.
Nu är våra anpassade sidfält tillgängliga, vi lägger till en metakassa för att visa en lista över alla sidfält som finns i postredigeringsformuläret.
Om du inte är bekant med meta-rutor kan du referera till dessa länkar:
add_meta_box på WordPress codexLåt oss nu gräva i koden.
Först lägger vi helt enkelt till våra metakasser. Vi måste deklarera två metakasser, en för inlägg och en för sidor. Vi måste också registrera två krokar, en för att lägga till metakasser och den andra för att spara dem.
Så öppna din functions.php fil och lägg till det här:
/ * Definiera anpassningsrutan * / add_action ('add_meta_boxes', 'add_sidebar_metabox'); add_action ('save_post', 'save_sidebar_postdata'); / * Lägger till en ruta i sidokolumnen på skärmen Post och Sidredigering * / funktion add_sidebar_metabox () add_meta_box ('custom_sidebar', __ ('Custom Sidebar', 'twentyeleven'), 'custom_sidebar_callback', 'post' sida' ); add_meta_box ('custom_sidebar', __ ('Custom Sidebar', 'twentyeleven'), 'custom_sidebar_callback', 'sida', 'sida'); Nu, låt oss skapa custom_sidebar_callback funktion, som kommer att skriva ut metakassornas markup.
Det finns flera viktiga steg i den här funktionen:
$ wp_registered_sidebars variabel./ * Skriver ut innehållet i rutan * / funktion custom_sidebar_callback ($ post) global $ wp_registered_sidebars; $ custom = get_post_custom ($ post-> ID); om (isset ($ custom ['custom_sidebar'])) $ val = $ custom ['custom_sidebar'] [0]; annars $ val = "default"; // Använd nonce för verifiering wp_nonce_field (plugin_basename (__FILE__), 'custom_sidebar_nonce'); // De faktiska fälten för datainmatning $ output = ''; $ output. = ""; echo $ output;
Låt oss nu spara vår postmeta. Återigen flera steg här:
/ * När posten sparas sparar vi vår anpassade data * / funktion save_sidebar_postdata ($ post_id) // verifiera om det här är en automatisk räddningsrutin. // Om det är vår formulär inte har skickats in så vill vi inte göra någonting om (definierat ('DOING_AUTOSAVE') && DOING_AUTOSAVE) returnera; // verifiera detta kom från vår skärm och med rätt behörighet, // eftersom save_post kan utlösas vid andra tillfällen om (! wp_verify_nonce ($ _POST ['custom_sidebar_nonce'], plugin_basename (__FILE__)) returnerar; om (! current_user_can ('edit_page', $ post_id)) returnera; $ data = $ _POST ['custom_sidebar']; update_post_meta ($ post_id, "custom_sidebar", $ data); Nu borde du nu kunna se den här rutan på postredigeringssidan, i den högra kolumnen. Om inte, kontrollera att den anpassade sidfältet visas på skärmmenyn.
Nu är allt korrekt inställt, det som finns kvar är att uppdatera våra templerande filer så att de kan visa egna sidfält.
Låt oss skapa en ny sida baserad på sidofältmall (finns i rutan Sidattribut). Denna mall bygger på sidofält-page.php fil. Redigera den här filen och lägg till dessa rader högst upp (under mallens kommenterade rubrik):
$ options = get_post_custom (get_the_ID ()); om (isset ($ options ['custom_sidebar'])) $ sidebar_choice = $ alternativ ['custom_sidebar'] [0]; else $ sidebar_choice = "default";
Vi hämtar aktuell post-metadata för att få valt sidfält.
Till växla mellan en anpassad sidofält och standard en, ändra get_sidebar () ring längst ned i samma fil till detta:
om ($ sidebar_choice && $ sidebar_choice! = "default") get_sidebar ("custom"); annat get_sidebar (); De get_sidebar ($ snigel) efterfrågar sidofält-slug.php. Så vad vi måste göra är att skapa en fil med namnet sidofält-custom.php och lägg till det här inuti:
$ options = get_post_custom ($ post-> ID); $ sidebar_choice = $ alternativ ['custom_sidebar'] [0]; ?>
Nu ska din sida visa sidofältet du valde. Till exempel lade jag till två widgets i mitt anpassade sidofält:
Jag kommer inte att täcka hur man applicerar detta på inlägg eftersom det är exakt samma beteende, du behöver bara uppdatera innehålls single.php fil för att hantera anpassade sidfält.
Det är alla folk! Nu kan du använda obegränsade sidofält för dina sidor och inlägg. Det här är bara en lösning bland andra, men det är en snabbt och enkelt sätt att implementera egna sidfält, tveka inte att lämna en kommentar, dela med dig av dina idéer och ge feedback!
