Share
In het laatste artikel hebben we een eenvoudige methode gedefinieerd voor alles wat nodig is om een nieuwe sectie, instellingen en besturingselementen in te stellen binnen de thema-aanpasser.
In dit artikel gaan we door met meer van hetzelfde te doen; We gaan echter nieuwe instellingen en besturingselementen toevoegen aan de bestaande sectie, maar we gaan verschillende opties bekijken, zoals keuzerondjes, selectievakjes en invoervakken..
Dus met dat gezegd, laten we doorgaan.
Bedenk uit het laatste artikel dat onze methodologie als volgt is:
Accentsconagua
get_theme_mod We doen dit voor elk van de nieuwe besturingselementen in de volgende instellingen en besturingselementen. Indien nodig zullen we waar nodig praten over gegevensvalidatie en -zuivering.
Zodra we het einde van het artikel hebben bereikt, is er ook een versie van de code van dit artikel beschikbaar om te downloaden van GitHub.
Laten we een nieuwe optie toevoegen aan de thema-aanpasser waarmee de gebruiker kan kiezen tussen kleurenschema's - een is het standaard zwart op wit kleurenschema, het andere is het omgekeerde.
Om dit te doen, moeten we eerst een instelling en een controle toevoegen aan onze tcx_register_theme_customizer functie. Voeg de volgende twee functieaanroepen hieronder toe:
$ wp_customize-> add_setting ('tcx_color_scheme', array ('default' => 'normal', 'transport' => 'postMessage')); $ wp_customize-> add_control ('tcx_color_scheme', array ('section' => 'tcx_display_options', 'label' => 'Kleurenschema', 'type' => 'radio', 'keuzes' => array ('normaal' => 'Normaal', 'omgekeerd' => 'Omgekeerd'))); Merk hierboven op dat we een nieuwe instelling toevoegen geïdentificeerd door de tcx_color_scheme ID en we gebruiken de postMessage transporttype.
Ten tweede, merk op dat we ook een standaard waarde die is ingesteld op normaal. Deze waarde brengt ons bij de add_control telefoontje.
Merk op dat we het verbinden met de tcx_display_options die we in het laatste artikel hebben gedefinieerd. We hebben het het label gegeven Kleurenschema want dat is duidelijk wat het is dat we veranderen en we bepalen de type van controle als een radio- knop.
Om dit te doen, moeten we een reeks keuzes doorgeven waarbij de eerste sleutel de waarde van de optie is en de tweede waarde het label voor het keuzerondje..
Deze is de reden waarom de standaardwaarde voor de add_setting oproep is ingesteld op normaal.
Nu moeten we ons werk kunnen opslaan, de Theme Customizer kunnen vernieuwen en de nieuwe optie kunnen bekijken.
Maar op dit punt zal het nog steeds niet veel doen.
Nu moeten we er overheen springen js / thema-customizer.js en voeg het volgende blok code toe:
wp.customize ('tcx_color_scheme', function (value) value.bind (function (to) if ('inverse' === to) $ ('body') .css (background: '# 000', kleur: '#fff'); else $ ('body') .css (background: '#fff', color: '# 000'););); Dit geeft de Theme Customizer de opdracht om de lichaamachtergrondkleur en de letterkleur op basis van de instelling van de keuzerondjes.
Door deze code te implementeren, moet u de Thema-aanpasser kunnen vernieuwen en vervolgens zien dat de wijzigingen optreden. Het punt is dat de waarden niet daadwerkelijk in de database worden opgeslagen.
get_theme_mod Het laatste dat we moeten implementeren om ervoor te zorgen dat de gegevens uit de database worden gelezen om het kleurenschema te wijzigen, is een stijl toevoegen aan de stijl blokkeren in de tcx_customizer_css functie:
achtergrond: # 000; kleur: #fff; achtergrond: #fff; kleur: # 000;
Makkelijk genoeg om te begrijpen, toch? Het werkt op precies dezelfde manier als onze JavaScript-code, behalve dat het feitelijk van toepassing is op het thema wanneer de pagina wordt geladen in plaats van alleen wanneer het wordt bekeken.
Nu gaan we verder met het proces door een andere instelling en een ander besturingselement te introduceren met onze methodologie, zodat onze gebruikers een algemeen lettertype voor hun thema kunnen selecteren.
Om dit te doen, gebruiken we een kiezen element met een reeks opties waaruit de gebruiker de gewenste voorkant kan kiezen.
Op dit punt zou de methodiek heel vertrouwd moeten worden.
Eerst definiëren we een instelling voor de tcx_font die we later in de code gebruiken om te verwijzen:
$ wp_customize-> add_setting ('tcx_font', array ('default' => 'times', 'transport' => 'postMessage')); Net als bij de vorige instelling zijn we voorzien standaard waarde die we binnenkort definiëren wanneer we een nieuwe controle implementeren.
Zoals eerder vermeld, zullen we de gebruikers de mogelijkheid geven om een lettertype te selecteren met behulp van een kiezen element. Dit lijkt erg op hoe radiotoetsen werken doordat we een array met sleutels en waarden opgeven die het lettertype bepalen; echter, de werkelijke type van het element zal anders zijn.
Dus met dat gezegd, voeg de volgende code toe aan de tcx_register_theme_customizer functie:
$ wp_customize-> add_control ('tcx_font', array ('section' => 'tcx_display_options', 'label' => 'Theme Font', 'type' => 'select', 'choices' => array ('tijden' => 'Times New Roman', 'arial' => 'Arial', 'koerier' => 'Courier New'))); Dit zal een introduceren kiezen element in de Thema-aanpasser met de volgende drie opties voor lettertypen:
En nu moeten we de lettertype-opties schrijven zodat ze het lettertype van het thema dynamisch veranderen.
Om dit te doen, open js / thema-customizer.js en voeg vervolgens het volgende blok code toe. Merk op dat dit een beetje ingewikkelder zal zijn dan wat we gewend zijn te doen in de Theme Customizer JavaScript.
Zorg eerst dat je dat hebt gedaan var sFont gedefinieerd boven aan het JavaScript-bestand net boven de eerste oproep naar wp.customize.
Voeg vervolgens het volgende codeblok toe:
wp.customize ('tcx_font', function (value) value.bind (function (to) switch (to.toString (). toLowerCase ()) case 'times': sFont = 'Times New Roman'; pauze; case 'arial': sFont = 'Arial'; pauze; case 'koerier': sFont = 'Courier New, Courier'; pauze; case 'helvetica': sFont = 'Helvetica'; pauze; standaard: sFont = 'Times New Roman '; break; $ (' body ') .css (fontFamily: sFont););); Hoewel de functie iets langer is, is het eigenlijk vrij simpel: we nemen de inkomende waarde en gebruiken dan een switch / case om te bepalen welk lettertype is geselecteerd. Gebaseerd op de geselecteerde waarde, wijzen we het toe aan de sFont veranderlijk.
En, voor defensieve codering doeleinden, als een niet is gedefinieerd of er iets mis gaat tijdens het transport, dan gaan we standaard in Times New Roman.
Eindelijk, dan geldt de waarde van sFont naar de font-family attribuut van de lichaam element met behulp van jQuery's css functie.
get_theme_mod Nu, in overeenstemming met onze methodologie, moeten we onze tcx_customizer_css zodat het lettertype op de juiste manier op het lichaam wordt toegepast.
Dit is eigenlijk een simpele oproep:
font-family:
Gedaan.
Laten we ten slotte toestaan dat de gebruiker het auteursrechtbericht aanpast dat wordt weergegeven onder aan de voettekstsjabloon.
Laten we de sjabloon nu aanpassen. Momenteel zou het er zo uit moeten zien:
© Alle rechten voorbehouden
Maar laten we het bijwerken om er zo uit te zien:
©
Hoewel dit gaat een beetje vooruitlopend op onze methodologie, moeten we het definiëren zodat de Thema-aanpasser van het nieuwe gebruik kan maken span element, en zodat we het auteursrechtbericht kunnen weergeven zoals gedefinieerd door de gebruiker.
Eerst introduceren we onze definitieve instelling:
$ wp_customize-> add_setting ('tcx_footer_copyright_text', array ('default' => 'Alle rechten voorbehouden', 'sanitize_callback' => 'tcx_sanitize_copyright', 'transport' => 'postMessage')); Maar merk hier op, er is één ding dat anders is dan de vorige ingangen en dat is de sleutel "" en de waarde "sanitize_callback". Dit definieert een functie om af te vuren wanneer de gegevens in een database worden geserialiseerd - we maken tenslotte geen illegale inhoud die de database binnenhaalt.
Dus, hiertoe, zullen we een functie definiëren genaamd tcx_sanitize_copyright die alle tags, schuine strepen en andere illegale tags die in de database moeten worden geserverteerd, verwijdert:
functie tcx_sanitize_copyright ($ input) return strip_tags (stripslashes ($ input));
We geven gewoon de waarde van de gezuiverde invoer terug.
Vervolgens is het tijd om het eigenlijke besturingselement voor de instelling toe te voegen.
$ wp_customize-> add_control ('tcx_footer_copyright_text', array ('section' => 'tcx_display_options', 'label' => 'Copyrightbericht', 'type' => 'tekst')); Ook hier binden we het aan de tcx_display_options sectie en we geven het het label "Copyrightbericht" zodat de gebruikers de tabel kunnen lezen. Ten slotte hebben we dit gedefinieerd als een tekst invoer.
Op dit moment weet u natuurlijk dat we niet echt iets met de besturing kunnen doen totdat we het met JavaScript hebben verbonden.
Het JavaScript hiervoor is heel eenvoudig, vooral als je het hebt gegeven span element een unieke ID zoals we hierboven hebben gedaan.
wp.customize ('tcx_footer_copyright_text', function (value) value.bind (function (to) $ ('# copyright-message') .text (to););); In wezen is het de waarde van de naar argument en stelt het vervolgens in als de waarde van de spande tekst.
get_theme_mod En tot slot, hoewel we het al in de sjabloon hebben gedaan, gaan we verder en bekijken we de code hier:
©
Merk op dat we de waarde van lezen tcx_footer_copyright_text en dan drukken we die waarde naar het scherm.
En voor nu, dat is alles! We hebben een aantal basiscontroles bekeken, omdat de gebruiker veel invloed heeft gehad op het uiterlijk en het gevoel van dit, zij het zeer basale thema, en we hebben besproken hoe data-sanitisatie kan worden geïntroduceerd samen met het serialisatieproces..
Het enige dat overblijft om te dekken zijn enkele van de geavanceerdere, ingebouwde besturingselementen die WordPress biedt. Dus in het volgende artikel zullen we een aantal van die functies bekijken en hoe ze ook kunnen worden geïmplementeerd.
!
