HTML5 introduserer et stort sett med nye funksjoner og enkle alternativer. Snart vil den ha full støtte fra de fleste nettlesere som er i bruk i dag. Til slutt må alle konvertere WordPress-temaer fra XHTML til HTML5. Etter Googles Panda Update trenger nettstedet ditt en klarere og mer lesbar kode for å rangere bedre på Google. Jeg vil lære deg hvordan du konverterer temaet ditt fra XHTML til HTML5. Vi vil også ta vare på 2% av Internett-brukere med JavaScript deaktivert (for bakoverkompatibilitet).

Våre mål

I denne opplæringen vil vi konsentrere oss om å konvertere vårt WordPress-tema fra XHTML til HTML5. Vi vil gå trinnvis for å lære endringene gjennom filene som er oppført nedenfor (disse filene er til stede i temamappen, dvs.. wp-content / themes / yourtheme / her!)

• header.php
• index.php
• sidebar.php:
• footer.php
• single.php (Valgfri)

Grunnleggende HTML5 Layout

La oss se på det grunnleggende HTML5-oppsettet som vi skal bygge. HTML5 er mye mer enn bare doktypen ved starten av koden din. Flere nyinnførte elementer hjelper oss med å stil og kode effektivt, med mindre markering (det er en grunn til at HTML5 er bedre).

          
 
 
Tittel på artikkelen
  
Noen lorem ispum tekst av innlegget ditt går her.
 
Artikkelens tekst avsluttes.
 
  
     

Nå trenger vi bare å vite hvor de nye HTML5-kodene skal legges til Overskrift, bunntekst, nav, seksjon og artikkel. Navnene på de nylig innførte merkene er selvforklarende om deres funksjon, i motsetning til div strukturert XHTML.

Trinn 1 Konvertere header.php til HTML5

Nå vil jeg vise deg koden som vanligvis brukes i header.php av XHTML WordPress-temaer.

XHTML Theme header.php

         
 
 
"> Min blogg jobber bra.
 
 
  
 
 
  
 
 
  

Man må spørre her hvorfor gjør vi alt dette? Svaret er enkelt, for den semantiske merkingen av HTML5. Det reduserer markeringen, noe som gjør det veldig enkelt å forstå og administrere.

HTML5 header.php (Konvertering)

Les koden og følg instruksjonene nedenfor for å konvertere temaets header.php til HTML5.

          
 
"> Min blogg jobber bra.
 
      

Som du kan se, er den konverterte koden veldig lik XHTML-koden. La oss diskutere endringene.

• - HTML5 har en veldig enkel doktype, men den inneholder mange nye semantiske koder
• - Den semantiske merket for toppteksten

Merk: Noen mennesker inkluderer seksjon tag i overskriften. Det er mye diskusjon om dette. Jeg er personlig mot å inkludere seksjon tag i overskriften, da det vil ødelegge skjønnheten i HTML5. Du kan bruke den gamle div der inne selvfølgelig.

Hva om skript og stilark?

Skriptene og stilarkene inkludering i overskriften, når du konverterer et WordPress-tema til HTML5, er veldig enkelt. I HTML5 bruker vi bare > og tags. Så fjern type = "text / javascript" - alle nettlesere vil vurdere en > tag som JavaScript, med mindre du eksplisitt skriver sin type. Fjern på samme måte type = "text / css" fra din tag for stilark.

Tatt i betraktning de gamle nettleserne!

HTML shiv er inkludert for eldre nettleserstøtte. Det er en enkel JavaScript-fil. Noen eksempler på Shiv er Remy Sharps HTML5-skript eller Modernizr-skriptet. La oss bruke Modernizr.

Vi trenger å enqueue skriptet fra vår functions.php-fil, slik:

 funksjon html5_scripts () // Registrer Modernizr-skriptet wp_register_script ('modernizr', get_template_directory_uri (). '/js/Modernizr-1.6.min.js'); // Enqueue Modernizr wp_enqueue_script ('modernizr');  add_action ('wp_enqueue_scripts', 'html5_scripts', 1);

Tips: Legg inn overskriftskodene dine som oppstår etter hvert

Merk: Dette skriptet må plasseres øverst inne i tag, som er grunnen til at vi har gitt ADD_ACTION en prioritet på 1.

---

Trinn 2 Konvertere index.php til HTML5

En felles XHTML index.php består av følgende koder. Jeg vil konvertere hver av dem og forklare hele prosessen etter konvertering.

Merk: Jeg legger ikke til hele koden her, da det vil gjøre innlegget lengre uten grunn.

XHTML index.php

 
 
 
 
... 
 
  
 
 

HTML5 index.php (konvertering)

 
 
 
 
... 
 
  
 
 

Før vi ser på endringene vi har gjort, må vi vite at HTML5 gir oss tre grunnleggende layoutmodelleringskoder: seksjon, artikkel og side. Seksjon vil erstatte med innspillings div, artikkel vil erstatte postens div, og side vil bli brukt til vårt sidebar litt senere.

• - HTML5 har en layout tag kalt seksjon som skiller en blokk for koden som brukes i den
• - En semantisk tag for postens porsjon, ligner på seksjon
• Breadcrumbs og Page Navigation - Hvis temaet vårt har brødsmuler, vil de bli brukt i en div som
  ...
  og for sidens navigasjon vil vi bruke

Fullfør Index.php i HTML5

Merk: Jeg limer en generell index.php, som i, noen ferdig kode konvertert til HTML5 nedenfor.

 
   
 
"rel =" bookmark "title ="">
 
 "rel =" bookmark "title =""> Les mer 
 
 
 
 
 
   
  
   

---

Trinn 3 Arbeider på sidebar.php

Vi vil bruke