De lettertypen van uw WordPress wijzigen - Deel 2 Thema-integratie

WordPress toont zichzelf voortdurend de tijd, de tijd en nogmaals dat het zeer weinig beperkingen heeft en zich er snel op toelegt de beste, maar zeker de meest veelzijdige CMS te zijn die er is. Out of the box is het zeker niet perfect, maar je kunt het veranderen zoals je wilt. In de vorige zelfstudie hebben we besproken hoe u lettertypen aan uw thema kunt toevoegen via een plug-in. Nu integreren we lettertype-opties rechtstreeks in de opties van het thema.

Nogmaals, we zullen Google Web Fonts gebruiken omdat het gemakkelijk, snel en vooral gratis is. Met Google Web Fonts hoeft u zich geen zorgen te maken over het gebruik van de juiste lettertypeformaten, alles wordt afgehandeld door Google.

Stap 1 Voeg een pagina met instellingen toe

Zorg eerst dat u een pagina met thema-opties heeft. Als je niet weet hoe je er een moet maken, raad ik aan om een ​​instellingenpagina van Jarkko Laine te lezen. In deze zelfstudie ga ik ervan uit dat je de basiskennis kent en vanaf daar kunt bouwen. Laten we dus naar ons functions.php-bestand gaan en een eenvoudige pagina voor typografie-instellingen toevoegen:

 add_action ('admin_menu', 'mijn_fonts'); function my_fonts () add_theme_page ('Fonts', 'Fonts', 'edit_theme_options', 'fonts', 'fonts'); 

Stap 2 Voeg het formulier toe

Nu we een instellingenpagina hebben toegevoegd, moeten we de callback-functie coderen die we gebruiken om de pagina zelf te renderen, wat zou zijn typografie. Alles wat we nodig hebben, is een basisformulier met een vervolgkeuzelijst van alle lettertypen waaruit gebruikers kunnen kiezen en waarmee ze deze kunnen wijzigen.

 functie lettertypen () ?> 
 

 
fonts
 
     
 
  
Oké, we hebben ons lettertypenformulier aan de pagina toegevoegd, slechts een klein beetje basis settings_fields, maar WordPress heeft geen idee. Nu gebruiken we de admin_init actie om onze instellingen te initialiseren en de callbacks toe te voegen:
 
 add_action ('admin_init', 'font_init'); function font_init () register_setting ('fonts', 'fonts'); // Instellingen velden en secties add_settings_section ('font_section', 'Typography Options', 'font_description', 'fonts'); add_settings_field ('body-font', 'Body Font', 'body_font_field', 'fonts', 'font_section'); 
 
Het enige wat we hier doen, is het maken van een instellingensectie voor onze lettertypeformulieren en het veld voor een enkel lettertype, u kunt er meer toevoegen als u wilt, in deze tutorial ga ik alleen over de body-tag. Voeg gewoon meer toe door dat veld te kopiëren en body te vervangen door iets anders zoals h1. We hebben nu ook een instelling met de naam lettertypen, waar we onze fontgegevens / opties opslaan. Laten we doorgaan en de callback-functies definiëren, font_description en body_font_field.
 
 function font_description () echo 'Gebruik het onderstaande formulier om lettertypen van uw thema te wijzigen.';  function body_font_field () $ options = (array) get_option ('fonts'); $ fonts = get_fonts (); if (isset ($ options ['body-font'])) $ current = $ options ['body-font']; else $ current = 'arial'; ?>   $ lettertype):?>  value ="">    
We moeten de lettertype-opties krijgen die we zojuist hebben gemaakt in de actie init en de lettertypen die we beschikbaar hebben, get_fonts (). Stel het huidige lettertype in het formulier in op wat zich in de opties bevindt, anders wordt het standaard ingesteld op Arial. Gebruik vervolgens een foreach-lus om door onze reeks beschikbare lettertypen te bladeren. U kunt ook een beschrijving toevoegen of een korte zelfstudie maken over hoe u deze moet gebruiken.
 
 
 Stap 3 De lettertypen ophalen
 
 Zoals je hebt gemerkt in het vorige codefragment, moeten we het get_fonts () functie om de lettertypen op te halen die we nodig hebben. U kunt de Google Webfonts opnemen of gewoon bij de standaard CSS-lettertypen blijven. We gebruiken gewoon een array om alle lettertypen op te slaan en ze vervolgens te onderscheiden op basis van hun lettertype. U kunt dit doen met elk lettertype, maar voor de doeleinden van deze zelfstudie gebruiken we alleen Arial, Ubuntu en Lobster.
 
 functie get_fonts () $ fonts = array ('arial' => array ('name' => 'Arial', 'font' => ", 'css' =>" font-family: Arial, sans-serif; " ), 'ubuntu' => array ('name' => 'Ubuntu', 'font' => '@import url (https://fonts.googleapis.com/css?family=Ubuntu);', 'css' => "font-family: 'Ubuntu', sans-serif;"), 'lobster' => array ('name' => 'Lobster', 'font' => '@import url (https: // fonts. googleapis.com/css?family=Lobster); ',' css '=> "font-family:' Lobster ', cursive;")); return apply_filters (' get_fonts ', $ fonts);
 
Notitie: U bent niet beperkt tot het alleen gebruiken van Google Webfonts. Als u een aangepast lettertype wilt gebruiken dat wordt gehost op uw FTP of op Amazon S3, vervang dan @importeren met @ Font-face en verander de URL naar waar uw lettertype-bestand wordt gehost.
 
 
 Stap 4 Voeg de CSS toe
 
 Voordat u lettertypen in uw CSS toepast, moet u alle exemplaren van Google Webfonts of in uw CSS-bestanden verwijderen. Op deze manier verspillen we geen extra 100 ms om het Lobster-lettertype te verspillen als we de importeeroproep doen om het Ubuntu-lettertype te krijgen.
 
 Nu we al onze lettertypen hebben ingesteld, moeten we een wp_head actie die de stijl toevoegt aan uw WordPress. Als u dit script gebruikt voor meerdere tags, dupliceert u gewoon de code, waarbij u "body" wijzigt in de tag die u bewerkt.
 
 add_action ('wp_head', 'font_head'); function font_head () $ options = (array) get_option ('fonts'); $ fonts = get_fonts (); $ body_key = 'arial'; if (isset ($ options ['body-font'])) $ body_key = $ options ['body-font']; if (isset ($ fonts [$ body_key])) $ body_font = $ fonts [$ body_key]; print_ ''; 
 
We beginnen met het controleren of een lettertype is gekozen in onze opties, zo niet, stel dan het lettertype in op onze standaard, Arial. Nu drukken we de stijltag, de importverklaring en onze CSS-code af. 
 
Wat krijg je op het einde
 
Dit is wat je had moeten eindigen met:
  
De laatste pagina met lettertype-opties.
 
 
Volledige broncode
 
Voor iedereen die moeite heeft alles bij elkaar te brengen. Hier is de volledige broncode, klaar om gewoon in het functions.php-bestand te plakken:
 
  
 

 
fonts
 
     
  
  array ('naam' => 'Arial', 'font' => ", 'css' =>" font-family: Arial, sans-serif; "), 'ubuntu' => array ('name' => ' Ubuntu ',' font '=>' @import url (https://fonts.googleapis.com/css?family=Ubuntu); ',' css '=> "font-family:' Ubuntu ', sans-serif; "), 'kreeft' => array ('name' => 'Lobster', 'font' => '@import url (https://fonts.googleapis.com/css?family=Lobster);', 'css '=> "font-family:' Lobster ', cursive;")); return apply_filters (' get_fonts ', $ fonts); function body_font_field () $ options = (array) get_option (' fonts '); $ fonts = get_fonts (); $ current = 'arial'; if (isset ($ options ['body-font'])) $ current = $ options ['body-font'];?>   $ lettertype):?>  value ="">      $ lettertype):?>  value ="">   '; echo $ body_font ['font']; echo 'body '. $ body_font ['css']. ''; echo '';  $ h1_key = 'arial'; if (isset ($ options ['h1-font'])) $ h1_key = $ options ['h1-font']; if (isset ($ fonts [$ h1_key])) $ h1_key = $ fonts [$ h1_key]; echo ''; ?>
 
 
Conclusie
 
U moet nu weten hoe u een pagina met lettertype-instellingen kunt toevoegen, lettertypen kunt ophalen uit de Google Webfonts-directory en deze lettertypen kunt toepassen op het thema. Als u nog meer suggesties of vragen heeft met betrekking tot aangepaste typografie, kunt u een reactie achterlaten!



		
			
	   
	




Code