, skabe en wordpress tema fra statiske html: at skabe skabelon filer,,,,, 47,,,,,,,,, 5,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss. denne post er en del af en række ringede til at skabe en wordpress tema fra statiske html. at skabe en wordpress tema fra statiske html: forberedelse af markupcreating en wordpress tema fra statiske html: uploader temaet til wordpress, i første del af denne serie, jeg viste dig, hvordan din html og css filer til wordpress, sikre, at strukturen vil arbejde, koden var gyldig, og at den korrekte klasse blev anvendt, i denne forelæsning. du skal lære at tage din,., fil - og deler det op i et sæt skabelon filer til brug for wordpress.,,, hvad du vil brug for denne lektion du behøver, er den mest grundlæggende redskab til at redigere html og folkesundhedsprogrammet:,,, en kodeks, redaktør af dit valg.,,,,, hvad der er templspiste filer?,, en wordpress tema består af en række skabelon filer.i det mindste et tema skal indeholde to filer for det arbejde, de er, index.php, og stil. css,.,, men i en velskrevet tema, indholdet af det, index.php, sagen vil blive delt op i de vigtigste skabelon fil (index.php,) og sæt, omfatter filer.det er de registre, der indeholder koden til hovedet, kom her og fod. i nogle temaer, en yderligere omfatte fil anvendes til loop - det kommer jeg til i del 4 i denne serie.filerne er kaldt omfatter sager, fordi du tilføje koden til din index.php, fil at fortælle wordpress til også at omfatte deres indhold.,,,., sagen vil blive opdelt i fire php filer:,,, index.php,, som vil indeholde de vigtigste indhold samt loven til at omfatte andre filer, header. php,, som vil omfatte, < head >, afsnit plus alt i hovedet og navigation, kom her. folkesundhedsprogrammet, som vil indeholde de nærmere widget område, footer.php, som vil indeholde (de har gættet det.den fod, plus lukningen, < /organ >,,,,,,,, i løbet af denne serie, du vil tilføje, at disse filer, så deres tema kan omfatte widgets, menuer og en løkke, og du vil tilføje kroge, som vil blive anvendt ved plugins.du vil også tilføje yderligere skabelon filer til fremvisning af forskellige former for indhold.hvis du vil have et forspring, se codex side om wordpress skabelon hierarki.,, men for nu, alt hvad du skal gøre, er at skabe et sæt af folkesundhedsprogrammet filer og dele indholdet af din, index.php, fil dem.,,, at folkesundhedsprogrammet filer, - det første skridt er at skabe tomme filer.skabe fire tomme filer med følgende navne og åbne dem i din kode redaktør:,,,, index.php,,,, header. php,,,,,,,, kom her. php,,,,, - fods. php,,,,, sørg for, alle disse er i en folder, der er navnet på dit tema - jeg vil nævne den mappe, wptutsplus demo tema,.,, kopi af din stylesheet i denne mappe, så godt.du vil ikke være redigere det i denne forelæsning, men du vil gøre det i den næste del af rækken.,,, - i headerfilen, næste gang du vil kopiere den øverste del af,., i din, header.php, fil.,,,., og udvælge alt fra åbningen. doctype, erklæring til åbning, div. klasse = "primære", tag:,, <!- endnu en klasse til html mærke, hvis lokaliteten vurderes i ie, for at give mulighed for en stor fastsætter - > <!- hvis det er [8] > < http: //klasse = "ie7" > <![endif] - > <!- hvis er 8] > < http: //klasse = "ie8" > <![endif] - > <!- hvis er 9] > < http: //klasse = "ie9" > <![endif] - > <!- hvis gt, dvs. 9] > < html > <![endif] - > <!- hvis!ie] > < html > <![endif] - > < meta - charset = "utf - 8" /> < meta - navn = "viewport" indhold = "bredde = anordning bredde /> < afsnit > wordpress tema - bygningen - at skabe en wordpress tema fra statiske html < /titel > < forbindelse href =" stil. css "rel =" stylesheet "media =" alle "type =" tekst /css "/> < header rolle =" banner "> < div klasse =" lokalitetens betegnelse halvdelen tilbage "> <!- stedet, navn og beskrivelse - > < /div > < div klasse = "lokalitetens betegnelse halvdelen tilbage" > < h1 klasse = "halvdelen forlod" id = "område" > < en titel = "at skabe en wordpress tema fra statisk html - hjem" rel = "hjem" > wordpress tema bygning < /a > < /h1 > < h2 id = "beskrivelse af lokaliteten" > oprettelse af en wordpress tema fra statiske html < /h2 > < ///////div > <!- en til hovedet - dette vil blive befolket via en dims område senere - > < til klasse = "header widget område rigtigt" rolle = "supplerende" > < div klasse = "dims beholder" > dette vil være en dims område i hovedet - adressen (eller noget andet, som du kan lide) går her < /div > <!- dims container - > < /bortset > <!- halvt ret. > < /header > <!- header - > <!- fuld bredde navigation menu - slette nav element, hvis der anvendes top navigation. > < nav klasse = "menu vigtigste" > <?php /* give skærm læsere /tekst browsere at springe sejlads menu og komme til den gode * /?> < div klasse = "skip forbindelse skærm læser teksten" > < en titel = "- indhold" href = "# indhold" > - indhold < /a > < /div > < ul > < li > < en href = "#" > hjem < /a > < /li > < li > < en href = "#" > seneste nyheder < /a > < /li > < li > < en href = "#" > indeholdt artikel < /a > < /li > < /ul > < /nav > og lt;!-. vigtigste - > < div klasse = "primære" >,, modtaget denne kode, og sæt det ind i din, header.php, fil.,, at redde din nye headerfilen.,,, - i den aftale fil nu gentage det for den aftale, i din. søge, udvælge, bortset fra klasse = "aftale" element og alt indeni:,, <!- - aftale - i wordpress vil dette blive befolket med widgets. > < til klasse = "sidebar widget område en tredjedel" rolle = "supplerende" > < div klasse = "dims beholder" > < h3 klasse = "dims" > sidebar dims < /h3 > < p > dette er et gruppemøde dims, i din wordpress tema, kan du sætte dem op for at vise hele din hjemmeside. < /p > < /div > <!- dims container - > < div klasse = "dims beholder" > < h3 klasse = "dims" > en anden aftale widget < /h3 > < p > en anden aftale dims, du måske kunne bruge et stik af, at - en sociale medier foder, eller blot nævne din seneste stillinger. < /p > < /div > <!- dims container - > < /bortset >, nu kopi i din, sidebar.php, fil og redde det.,,, - i den lille sag, at befolke det, footer.php, fil er identisk med hovedet og kom her.,, udvælge alt efter aftale i din fil:.,,, < /div > <!-. vigtigste - > < fod > <!- den. fatfooter - jeg bruger den til at muliggøre en skærm - baggrunden for fod og stadig holde fod indhold i overensstemmelse med layout - > < til klasse = "fatfooter" rolle = "supplerende" > < div klasse = "første kvartal gik widget område" > < div klasse = "dims beholder" > < h3 klasse = "dims" > første lille dims område < /h3 > < p > en dims område i fod - plugins og widgets at fylde dette. <. /p > < /div > <!- dims container - > < /div > <!-. widget område - > < div klasse = "andet kvartal widget område" > < div klasse = "dims beholder" > < h3 klasse = "dims" > for det andet lille dims område < /h3 > og lt; p > en dims område i fod - plugins og widgets at fylde dette. < /p > < /div > <!- dims container - > < /div > <!- øjeblik. widget område - > < div klasse = "tredje kvartal widget område" > < div klasse = "dims beholder" > < h3 klasse = "dims" > tredje lille dims område < /h3 > og lt; p > en dims område i fod - plugins og widgets at fylde dette. < /p > < /div > <!- dims container - > < /div > <!-. tredje. widget område - > < div klasse = "fjerde kvartal ikke widget område" > < div klasse = "dims beholder" > < h3 klasse = "dims" > fjerde lille dims område < /h3 > < p > en dims område i fod - plugins og widgets at fylde dette. < /p > < /div > <!- dims container - > < /div > <!- fjerde. widget område - > < /bortset > <!-fatfooter - > < /fod >,, kopiere og sæt det ind i din, footer.php, fil.,, at redde din fod fil., kan man undre sig over, hvorfor de,. vigtigste, div er lukket i fod fil og ikke nærmere.det er således, at hvis du senere oprettede en skabelon fil for sider, som ikke har en aftale, du vil savne den aftale omfatter i denne model og holde den fodboldkamp omfatter og. vigtigste, div., vil blive lukket korrekt.,, i indekset fil, det sidste skridt er at oprette din, index.php, fil.det er lidt mere involveret, bliver du nødt til at tilføje nogle php funktioner, som wordpress bruger til at omfatte header, samråd og fod.,, åben dit tomme, index.php, fil og tilføje den kode, som vist nedenfor:,, <?folkesundhedsprogrammet aspektet get_header();?> <?folkesundhedsprogrammet aspektet get_sidebar();?> <?folkesundhedsprogrammet aspektet get_footer();?>, ,Be sure to leave a space between the opening header include and the sidebar include, it's here where you'll add the contents of the index file which aren't in the header, sidebar or footer., ,Now open your ,index.html, file again and select all of the code between the opening ,div class="main", element and the sidebar:, ,<div class="two-thirds" id="content"> \t<article class="post" id="01"> \t\t<h2 class="entry-title">This is the title of a post or page</h2> \t\t<img class="size-large" alt="" src="images/featured-image.jpg" /> \t\t<section class="entry-meta"> \t\t\t<p>Posted on 5 November by Rachel McCollin</p> \t\t</section><!- indrejse meta - > < afsnit klasse = "indhold" > < p > dette er indholdet af de efterfølgende.på et arkiv side, det er et uddrag af den post, eller du kan omfatte hele indholdet. < /p > < h3 > billeder i wordpress < /h3 > < img klasse = "alignright" alat = "src =" billeder /et andet billede jpg "/> < p > denne post har nogle billeder, der - når du har omsat det i en wordpress tema, du vil være i stand til at få wordpress klare billeder til dig og dit liv vil være så meget lettere.< /p > < p > det har også været image - igen, wordpress vil håndtere disse til dig, og du vil aldrig gå tilbage til statisk html igen.du skal lære at tilføje, støtte til taget billeder til din tema i del 10 i denne serie.du kan bruge dem til automatisk at vise billeder i det enkelte poster og sider i arkivet sider, vil du lære at oprette en skik arkiv side i del 11. < /p > < /afsnit > <!-. adgang til indhold - > < afsnit klasse = "meta -" > < h3 > efter kategorier og mærker < /h3 > < p > i dette afsnit, kan du vise oplysninger om kategorier og - mærker, der er forbundet med deres post, du skal lære at gøre dette ved hjælp af wordpress skabelon mærker i del 4 i denne serie. < /p > < /afsnit > <!- indrejse meta - > < /artikel > <!- - > < /div > <!-indhold - >,, modtaget den og sæt det ind i din, index.php, sag under, get_header(),.,, at redde din, index.php, fil.,,,,,,,,, du har kimen til en wordpress tema.du har ændret dit html fil til et sæt af folkesundhedsprogrammet filer, og sæt dem op til at arbejde sammen.,, i den næste del af denne serie, jeg vil vise dig, hvordan at redigere stylesheet til temaet arbejde og uploade dine tema, wordpress.,,, ressourcer,,, wordpress skabelon hierarki (codex side), som træder ind i modeller (codex side), anatomi af en wordpress tema (postede i yoast), wordpress tema udvikling begynder vejledning ved tessa i sølv og rachel mccollin (ja, mig!,,,
at skabe en wordpress tema fra statiske html: at skabe skabelon filer
Previous:bdd med behat
Next Page:fast: del 1