ændring af skrifttyper af din wordpress

, ændrer skrifttyper af din wordpress - del 2: tema integration,,,,, andel,,,,,,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss. denne post er en del af en serie kaldet ændrer skrifttyper af din wordpress sted. ændrer skrifttyper af din wordpress site - del 1: ved hjælp af en stik af, wordpress hele tiden viser sig med tiden, og at det har meget få begrænsninger og er hurtigt at skubbe sig at være, hvis ikke den bedste, men det mest alsidige cms, der er til rådighed.ud af kassen, det er bestemt ikke perfekt, men du kan ændre det, som du vil.i den forrige lektion, talte vi om, hvordan at tilføje skrifttyper, at temaet via et stik af.nu skal vi integrere skrifttype valgmuligheder direkte til temaet er valgmuligheder.,,, igen, vil vi bruge google web skrifttyper, fordi det er let, hurtigt og, vigtigst af alt, gratis.med google web skrifttyper, er der ingen grund til at bekymre sig om ved hjælp af passende skrifttype formater, alt er behandlet af google.,, trin 1, tilføje en indstillinger side, være sikker på, at du har et tema muligheder side.hvis du ikke ved, hvordan man laver en, foreslår jeg at læse skabe miljøer side af jarkko laine.i denne lektion, jeg vil gå ud fra, at du ved det basale og bygge videre derfra.så lad os gå ind i vores functions.php fil og tilføje en enkelt typografi indstillinger side:, add_action ('admin_menu "," my_fonts); funktion my_fonts() {add_theme_page ("skrifttyper, skrifttyper, edit_theme_options, skrifttyper, skrifttyper)}, trin 2 tilføje form, nu at vi har tilføjet en indstillinger side, er vi nødt til at kode, det bør fungere, vi bruger til at gøre den side, som vil være typografi,.vi har brug for, er en grundlæggende form, der viser en dropdown af alle skrifttyper, at brugerne kan vælge imellem, og give dem mulighed for at ændre det, funktion fonts() {?> < div klasse = "pakke" > < div > < br > < /div > < h2 > skrifttyper < /h2 > < form metode = "post" action = "muligheder. på" > <?folkesundhedsprogrammet aspektet wp_nonce_field ("ajourføring skrifttyper)?> <?folkesundhedsprogrammet aspektet settings_fields ("skrifttyper)?> <?folkesundhedsprogrammet aspektet do_settings_sections ("skrifttyper)?> <?folkesundhedsprogrammet aspektet submit_button();?> < /form > < /div > <?php}, okay, vi har tilføjet vores skrifttyper form til side, bare nogle grundlæggende, settings_fields,, men wordpress har ingen idé.nu bruger vi den, admin_init, foranstaltninger til at nulstille vores indstillinger og tilføje callbacks:, add_action ('admin_init "," font_init); funktion font_init() {register_setting ("skrifttyper, skrifttyper); //indstillinger områder og dele add_settings_section (' font_section", "typografi muligheder", "font_description", "skrifttyper); add_settings_field (" organ skrifttype, krop skrifttype, body_font_field, skrifttyper, font_section)}, alt, hvad vi gør her, er at skabe en indstillinger afdeling for vores skrifttyper former og inden for en enkelt skrifttype, du kan tilføje flere, hvis du vil, i det jeg går kun i resten af kroppen mærker.bare tilføje mere ved at kopiere det område og erstatte lig med noget andet som h1.vi har nu også en fastsættelse af kaldet skrifttyper, hvor vi vil være lagring af vores skrifttype data /muligheder.lad os gå videre og fastlægge en callback - funktioner, font_description, og body_font_field,., funktion font_description() (echo 'bruge skemaet nedenfor for at ændre skrifttyper af temaet.'} funktion body_font_field() {$muligheder = (array) get_option ("skrifttyper) $skrifttyper = get_fonts(); hvis (isset ($muligheder ['body-font ']) $nuværende = $muligheder ['body-font']; andre $nuværende = arial"?> < udvælge navn = "skrifttyper [organ skrifttype]" > <?folkesundhedsprogrammet for hvert ($skrifttyper som $nøgle = > $skrifttype):?> < alternativ <?folkesundhedsprogrammet aspektet om ($nøgle = = $nuværende), echo "udvalgt"?> værdi = "<?php echo $nøgle?> "> <?php echo $skrifttype ['name ']?> < /mulighed > <?folkesundhedsprogrammet aspektet endforeach;?> < /udvælge > <?php}, er vi nødt til at få den skrifttype muligheder, som vi gjorde i lokalitet aktion og skrifttyper, vi har til rådighed, get_fonts(),.den nuværende skrifttype i form at alt, hvad der er i muligheder, ellers er det standard til ariel.så brug en hver sløjfe til at gennemgå vores vifte af disponible skrifttyper.du kan også tilføje en beskrivelse og gøre det til en kort lektion i, hvordan det anvendes.,, trin 3, at skrifttyper, som du har bemærket i de foregående indlæg af kode, er vi nødt til at definere, get_fonts(), funktion for at hente skrifttyper, vi har brug for.du kan enten være google webfonts eller bare holde os til det grundlæggende css skrifttyper.vi skal bare bruge et system, hvor alle af skrifttyper, og skelne dem fra deres skrifttype navn.du kan gøre det med en skrifttyper, men i forbindelse med denne forelæsning, vi skal bare bruge arial, ubuntu og hummer, funktion get_fonts() {$skrifttyper = system ("arial = > system (" navn "= > arial", "fuld" = > "", "forskning" = > font familie: arial, uden serif; "), ubuntu = > system (" navn "= >" ubuntu "," fuld "= > @ import url (https://fonts.googleapis.com/css?familie = ubuntu); "," forskning "= > font familie:" ubuntu, uden serif; ")," hummer "= > system (" navn "= > hummer", "fuld" = > @ import url (https://fonts.googleapis.com/css?familie = hummer); "," forskning "= > font familie:" hummer, skråskrift. "); tilbage apply_filters ('get_fonts, $skrifttyper)}, note: du er ikke begrænset til kun at bruge google webfonts.hvis du ønsker at bruge en sædvane i en skrifttype, der er indlagt på jeres ftp eller på amazon. s3, så erstatte @ import med @ skrifttype ansigt, og ændre adressen til din skrifttype fil er vært.,, løntrin 4 tilføje css, før du anvender ingen af skrifttyper i din forskning, skal du fjerne alle tilfælde af google webfonts af i din css filer.denne vej, når vi foretager import til at få ubuntu skrifttype, vi spilder ikke et ekstra 100 ms får hummer skrifttype. nu, hvor vi har alle vores skrifttyper, er vi nødt til at skabe en, wp_head, foranstaltninger, der øger den på vej til din wordpress.hvis du bruger det her manuskript for flere mærker, simpelthen kopiere den kode, skiftede bare "organ", uanset hvilket mærke, du er redigering. add_action ('wp_head "," font_head); funktion font_head() {$muligheder = (array) get_option ("skrifttyper) $skrifttyper = get_fonts(). $body_key = ariel, hvis (isset ($muligheder ['body-font']) $body_key = $muligheder ['body-font ']; hvis (isset ($skrifttyper [$body_key])) ($body_font = $skrifttyper [$body_key] print_ (< stil > « echo $body_font ['font"] echo' organ {".$body_font ['css "].}; echo '< /stil > «), starter vi med at kontrollere, om en skrifttype, er valgt i vores muligheder, hvis ikke, så sæt den skrifttype til vores standard, ariel.vi udskriver stil - import erklæring og vores css - kode.hvad du får i sidste ende, det er, hvad du er endt med, er den endelige skrifttype muligheder side.,, fuld kildekode, for alle, der har problemer med at sætte det sammen.her er den fulde kildekode, klar til pasta i functions.php fil:, <?//ændring af skrifttyper af din wordpress - del 2: tema integration //forelæsning om wp tuts //af fouad matin //- kredit denne forelæsning, ved at forbinde tilbage til http://wp.tutsplus.com/tutorials/changing-the-fonts-of-your-wordpress-site-part-2-theme-integration///nyder.add_action ('admin_menu "," my_fonts); funktion my_fonts() {add_theme_page ("skrifttyper, skrifttyper, edit_theme_options, skrifttyper, skrifttyper)} funktion fonts() {?> < div klasse = "pakke" > < div > < br > < /div > < h2 > skrifttyper < /h2 > < form metode = "post" action = "muligheder. på" > <?folkesundhedsprogrammet aspektet wp_nonce_field ("ajourføring skrifttyper)?> <?folkesundhedsprogrammet aspektet settings_fields ("skrifttyper)?> <?folkesundhedsprogrammet aspektet do_settings_sections ("skrifttyper)?> <?folkesundhedsprogrammet aspektet submit_button();?> < /form > < img stil = "flyde: ret; grænse: 0;" src = "http://i.imgur.com/1qqjg.png" /> < /div > <?php} add_action ('admin_init "," my_register_admin_settings); funktion my_register_admin_settings() {register_setting ("skrifttyper, skrifttyper); add_settings_section (' font_section", "skrifttype muligheder", "font_description, skrifttyper); add_settings_field (" organ skrifttype, krop skrifttype, body_font_field "," skrifttyper, font_section '); add_settings_field (h1 skrifttype, header 1 skrifttype, h1_font_field, skrifttyper, font_section)} funktion font_description() (echo' bruge skemaet nedenfor for at ændre skrifttyper af temaet. '} funktion get_fonts() {$skrifttyper = system ("arial » = > system (" navn "= > arial", "fuld" = > "," forskning "= > font familie: arial, uden serif;"),"ubuntu = > system (" navn "= >" ubuntu "," fuld "= > @ import url (https://fonts.googleapis.com/css?familie = ubuntu); "," forskning "= > font familie:" ubuntu, uden serif; ")," hummer "= > system (" navn "= > hummer", "fuld" = > @ import url (https://fonts.googleapis.com/css?familie = hummer); "," forskning "= > font familie:" hummer, skråskrift. "); tilbage apply_filters ('get_fonts, $skrifttyper)} funktion body_font_field() {$muligheder = (array) get_option (" skrifttyper) $skrifttyper = get_fonts(). $nuværende = - ariel. hvis (isset ($muligheder ['body-font']) $nuværende = $muligheder ['body-font ']?> < udvælge navn = "skrifttyper [organ skrifttype]" > <?folkesundhedsprogrammet for hvert ($skrifttyper som $nøgle = > $skrifttype):?> < alternativ <?folkesundhedsprogrammet aspektet om ($nøgle = = $nuværende), echo "udvalgt"?> værdi = "<?php echo $nøgle?> "> <?php echo $skrifttype ['name ']?> < /mulighed > <?folkesundhedsprogrammet aspektet endforeach;?> < /udvælge > <?php} funktion h1_font_field() {$muligheder = (array) get_option ("skrifttyper) $skrifttyper = get_fonts(). $nuværende = arial. hvis (isset ($muligheder ['h1-font ']) $nuværende = $muligheder ['h1-font']?> < udvælge navn = "skrifttyper [h1 skrifttype]" > <?folkesundhedsprogrammet for hvert ($skrifttyper som $nøgle = > $skrifttype):?> < alternativ <?folkesundhedsprogrammet aspektet om ($nøgle = = $nuværende), echo "udvalgt"?> værdi = "<?php echo $nøgle?> "> <?php echo $skrifttype ['name ']?> < /mulighed > <?folkesundhedsprogrammet aspektet endforeach;?> < /udvælge > <?php} add_action ('wp_head "," font_head); funktion font_head() {$muligheder = (array) get_option ("skrifttyper) $skrifttyper = get_fonts(). $body_key = arial. hvis (isset ($muligheder ['body-font']) $body_key = $muligheder ['body-font ']; hvis (isset ($skrifttyper [$body_key])) ($body_font = $skrifttyper [$body_key] echo' < stil > « echo $body_font ['font '] echo' organ {".$body_font ['css "].}; echo '< /stil > "} $h1_key = arial. hvis (isset ($muligheder ['h1-font']) $h1_key = $muligheder ['h1-font ']; hvis (isset ($skrifttyper [$h1_key])) ($h1_key = $skrifttyper [$h1_key] echo' < stil > « echo $h1_key ['font '] echo' 1 '.$h1_key ['css "].}; echo '< /stil > «)?>,, konklusion ved nu, skal du vide at gøre en skrifttype indstillinger side, få skrifttyper fra google webfonts fortegnelse, og anvende disse skrifttyper til temaet.hvis du har nogen yderligere forslag eller spørgsmål vedrørende skik typografi, føle sig fri til at forlade en kommentar.,




Previous:
Next Page: