[Kuinka] Lisää widget-alue mihin tahansa WordPress-teemaan (2021)

WordPress-oletusteema vuonna 2014 oli Kaksikymmentä viisitoista, malli, jossa on kiinteä sivupalkki vasemmalla ja joka muuttuu otsikoksi mobiilinäkymässä, minimaalinen alatunnistealue, upea typografia ja mukava esittelyalue. Siitä lähtien olemme nähneet TwentySixteen-, TwentySeventeen-, TwentyEighteen-, TwentyNineteen- ja nykyisen defualt-ilmaisen teeman julkaisun. Kaksikymmentäkaksi.

Nämä teemat ovat mahtavia, ne käyvät läpi koko prosessin saadakseen valita oletus WordPress-teeman, mutta voimme ymmärtää, että käyttäjät haluavat silti muokata sitä ja tehdä siitä oman. 

Koska nämä teemat tarjoavat tyypillisesti joitain rajoituksia, kuten yhden sivupalkin (jota WordPressissä kutsutaan widget-valmiiksi alueeksi), näytämme sinulle, kuinka voit lisätä widgetin alatunnisteeseen tai kuinka säätää minkä tahansa teeman koodia lisätäksesi lisää widget-alueita teema. 

Widget-alueen lisääminen TwentyFifteen - TwentyTwenty-alatunnisteeseen ei ole erilainen kuin widget-alueen lisääminen useimmissa WordPress-teemoissa.

Jos haluat nähdä muita WordPress -teemoja, suosittelemme tutustumaan muihin suosittuihin teemoihin, kuten Divi from Elegant Themes. Katso koko arvostelu täältä.

Sisällys[show]

wordpress-widget-alueen alatunniste ja muut sijainnit

Luo WordPress-lapsiteema

Kun muokkaat WordPress-teeman mallitiedostoja widget-alueen luomiseksi, on hyvä käytäntö luoda lapsi teema.

Lapsiteeman käsite on melko yksinkertainen - emme halua rikkoa mahdollisuutta päivittää teema uusiin versioihin.

Kun luot mukautuksia lapsiteemaan, muutokset lisätään lapsiteemaan alkuperäisen teeman sijaan. Kun alkuperäisen teeman päivitetty versio on poissa, voit päivittää alkuperäisen teeman kopion ja jättää muutokset ennalleen aliteemassa.

Jos haluat oppia lisää WordPressiin liittyviä vinkkejä ja temppuja, käy seuraavassa osiossa CollectiveRay.

1. Luo aliteemahakemisto ja tiedostot 

Luo ensimmäisenä kansio wp-sisältö> teemat kansio. Kutsu kansio kaksikymmentäviisi lapsi, kaksikymmentä kaksikymmentä lapsi. On kuitenkin tärkeää, että lapsiteema noudattaa vanhempiensa nimeämiskäytäntöä.

Joten jos vanhempi kutsutaan kaksikymmentätoista, lapsi on kutsuttava kaksikymmentäviitoista lasta. Vastaavasti, jos muokkaamaasi teemaa kutsutaan kaksikymmentäkymmentä, lapsiteemaa on kutsuttava t: ksikaksikymmentä lasta.

Kun olet luonut aliteeman, sinun on luotava kaksi uutta tiedostoa.

Tiedosto, jota käytetään muutoksiin CSS-tyyleissä, tulisi kutsua style.css. Tarvitsemme myös  functions.php tiedosto lapsiteemalle, johon voimme lisätä tiettyjä vaadittuja ominaisuuksia.

Nämä kaksi tiedostoa menevät lapsiteemalle luomasi XNUMX lapsen kansioon tai vastaavaan kansioon.

wordpress-lapsiteeman hakemistorakenne

Koska widget-alue on lisättävä teema-alatunnisteeseen, alatunnistekoodia varten sinulla on oltava tiedosto.

Turvallisin tapa koodata WordPress-mallitiedosto on aloittaa valmiista mallista, lisätä sitten haluamasi ja / tai poistaa mitä et halua.

Ota tässä tapauksessa footer.php Twenty Fifteen -teemasta tai Twenty Twenty -teemasta tai mitä tahansa muokkaamaasi teemaa kutsutaan ja liitä se lapsesi teemaan.

3. Luo widget lisäämällä koodi lapsiteeman tiedostoihin

Tällä hetkellä meillä on vain tyhjiä tiedostoja, joten lapsiteema ei sellaisenaan voi tehdä mitään.

Jotta voimme tehdä muutoksia, toimiva lapsi-teema tarvitsee joitain kommentteja sen yläosassa style.css. Avata style.css suosikkikoodieditorissasi ja lisää tämä bitti koodi. 

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyfifteenchild
*/

Todella tärkeä osa tässä on Sapluuna joten yllä olevassa esimerkissä se on Malli: kaksikymmentä viisitoista. Tämä opastaa WordPressiä pääteeman nimestä.

Varmista, että nimi on täsmälleen sama kuin pääteeman kansion nimi (kirjainkoko tai välilyönnit, viivat, alaviivat jne. Ovat tärkeitä: kaiken on vastattava täsmälleen pääteeman kansion nimeä).

Seuraavaksi avaa functions.php  ja lisää seuraava bitti koodia.

 

Vaikka tämä vaihe ei ole ehdottomasti pakollinen, se on erittäin suositeltavaa, koska tämän koodin avulla lapsiteema perii vanhempiensa ulkoasun.

Joten kirjoitetaan funktio, joka kiinnittyy wp_enqueue_scripts () toimintakoukku. Sisällä toiminto sinä enqueue pääteeman tyylitaulukko käyttämällä wp_enqueue_style () -toiminto

Tämä varmistaa, että lapsiteema perii vanhempiensa tyylit samalla kun se ohittaa minkä tahansa erityisen tyylisäännön omassa style.css tiedosto.

 

<?php 
//Import parent styles the right way and add other stylesheets if necessary.
function twenty_fifteen_child_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twenty_fifteen_child_styles' );

Lapsesi teema on enimmäkseen tehty!

Kirjaudu Teemat paneeli WordPress-asennuksessasi ja sinun pitäisi nähdä Twenty Fifteen Child -teemasi käyttövalmis. Klikkaus Aktivoida ja käy sivustollasi. Sen pitäisi näyttää täsmälleen samalta kuin pääteema.

Widget-alueen lisääminen

Nyt meidän on lisättävä koodi alatunnisteen widget-alueen määrittämiseksi. Tässä on katkelma, johon mennään functions.php

/ ** * Rekisteröi alatunnisteen widget-alue. * * @since Twenty Fifteen Child 1.0 * * @link https://codex.wordpress.org/Function_Reference/register_sidebar * / function twentyfifteen_child_widgets_init () {register_sidebar (array ('name' => __ ('Footer Widgets', 'kaksikymmentä) -fifteen-child '),' id '=>' sivupalkki-2 ',' description '=> __ (' Lisää tähän widgettejä, jotta ne näkyvät alatunnistealueellasi. ',' kaksikymmentäviisitoista-lapsi '),' before_widget ' => ' ',' after_widget '=>' ',' before_title '=>' ',' after_title '=>' ',)); } add_action ('widget_init', 'kaksikymmentäviisi_child_widgets_init');

Yllä oleva koodi lisää toiminnon, joka rekisteröi sivupalkin sivupalkin 2 tunnuksella (Twenty Fifteen -teemalla on jo sivupalkki sivupalkin 1 tunnuksella) ja kiinnittää tämän toiminnon sitten widget_init () toimintakoukku.

Seuraavaksi mennään eteenpäin ja lisätään uusi sivupalkki alatunnisteeseen. Avata footer.php koodieditorissa ja kirjoita tämä katkelma juuri tämän koodirivin alle: <footer id="colophon" class="site-footer" role="contentinfo">.

 
 
  
 
 
 

Yllä oleva koodi tarkistaa ensin, onko sivupalkissa 2 widgettejä, jos se näyttää sivupalkin div: n sisällä luokan "widget-alue" kanssa. 

Seuraava asia, mitä sinun on tehtävä, on siirtyä WordPress-taustakuvan Widgetit-paneeliin, etsiä Alatunnisteen widgetit -sivupalkki ja lisätä siihen joitain widgetejä. Tallenna widgetit, kun lisäät ne ja tarkistat tuloksen.

Wordpress-alatunnisteen widget
Alatunnisteen widgetit kaksikymmentä viisitoista -teemassa

Edellä on esitetty pari widgetiä Twenty Fifteen Child -alatunnisteen sivupalkissa ja näet, että teksti oli liian lähellä säiliön yläosaa ja widgetien alamarginaali oli liian korkea. Tämä pieni katkelma style.css parantaa ulkonäköä huomattavasti. 

.site-footer .widget {marginaali: 0; pehmuste: 10% 20% 0; } .site-footer .widget: last-child {marginaali-pohja: 10%; }	

Tässä on toinen esimerkki toisen sivupalkin lisäämisestä:

if (is_active_sidebar ('sivupalkki-2') 
|| is_active_sidebar ('sivupalkki-3')):
?>
">
<?php
if (is_active_sidebar ('sidebar-2')) {?>


<?php }
if (is_active_sidebar ('sidebar-3')) {?>






Käytettävä koodi riippuu todellisuudessa käyttämästäsi teemasta.

Tässä viestissä olemme nähneet, kuinka uusi widget-alue lisätään Twenty Fifteen WordPress -teeman alatunnisteeseen. Vaikka sijoitimme widget-alueen teeman alatunnisteeseen, voit käyttää tätä logiikkaa lisätäksesi widget-alueita melkein kaikkialle teemaan seuraamalla vastaavia vaiheita.

Lataa luettelo 101 WordPress-temppusta, jonka jokaisen bloggaajan tulisi tietää

101 WordPress-temppua

Napsauta tätä ja lataa nyt

kirjailijasta
David Attard
Kirjoittaja: David AttardVerkkosivu: https://www.linkedin.com/in/dattard/
David on työskennellyt verkko- / digitaalialalla tai sen ympäristössä viimeiset 18 vuotta. Hänellä on laaja kokemus ohjelmisto- ja verkkosuunnitteluteollisuudesta WordPressin, Joomlan ja niitä ympäröivien markkinarakojen käytöstä. Digitaalisena konsulttina hän keskittyy auttamaan yrityksiä saamaan kilpailuetua käyttämällä verkkosivustonsa ja tänään saatavilla olevien digitaalisten alustojen yhdistelmää.

Yksi asia vielä... Tiesitkö, että ihmiset, jotka jakavat hyödyllisiä juttuja, kuten tämä viesti, näyttävät myös mahtavilta? ;-)
Ole hyvä Jätä hyödyllinen kommentoi ajatuksiasi ja jaa tämä sitten Facebook-ryhmissäsi (ryhmissä), jotka pitävät tätä hyödyllisenä, ja hyödynnetään yhdessä. Kiitos jakamisesta ja mukavuudesta!

Disclosure: Tämä sivu voi sisältää linkkejä ulkoisille sivustoille tuotteille, joita rakastamme ja kannatamme sydämestämme. Jos ostat suosittelemiamme tuotteita, saatamme ansaita viittausmaksun. Tällaiset maksut eivät vaikuta suosituksiimme, emmekä hyväksy maksuja positiivisista arvosteluista.

Kirjoittaja (t) esillä:  Inc-lehden logo   Sitepoint-logo   CSS Tricks -logo    webdesignerdepot-logo   WPMU DEV -logo   ja paljon muuta ...