, udvikle deres første wordpress tema: 2, 3,,,,, 2,,,,,,,,, 8,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss. denne post er en del af en serie kaldet udvikle din første wordpress tema. udvikling af din første wordpress tema: dag 1 af 3developing din første wordpress tema: dag 3 af 3 emner er en stor del af det, der gør wordpress så populær som det er, og i denne tredje del serie tager vi dig igennem en trinvis proces, der resulterer i en afsluttet, funktion wordpress tema.i del to, vi graver i kodning størstedelen af vores tema!,,,, del to, velkommen til anden del af det tredje del serie om at udvikle en wordpress tema fra bunden.sidste gang, vi ser på, hvad gør et godt tema ", samt den generelle komponenter, som er nødvendige for et tema til arbejde.i denne uge skal vi dykke ind og begynde at skabe vores første emne.,, udvikle deres første wordpress tema: dag 1 af 3, udvikle deres første wordpress tema: 2, 3, udvikle deres første wordpress tema: dag 3 af 3 (snart), vores emne, vil jeg gerne understrege, at hvis du har din egen udformning for at arbejde med det - - er der en chance for at du vil lære mere ved at eksperimentere, og du får et resultat, som vil blive skræddersyet til din smag.hvis du ikke har noget at arbejde med, vi tilbyder en enkel personlig layout, du skal arbejde med. det er noget, jeg har lavet layout, et stykke tid tilbage som en af mange uudnyttede design for en venner personlige blog.i kan downloades, zip, som ledsager denne forelæsning, vil du finde to mapper. bftheme og bffiles.i bffiles mappe er tegningerne i sit foreløbige wordpress stat, den anden folder indeholder den udfyldte tema. åbne tema i en browser, for at få en idé om, hvad vi vil, det skal se sådan ud:,, at bryde det op, og det vil være muligt at foretage et tema arbejdet med kun én fil, meget dårlig praksis og ikke noget, man ser på alle de vilde.det er godt at holde standardmappen struktur, som giver det tema ændring lettere ned og lader dig bruge bygget i wordpress opgaver til at omfatte sager let (f.eks. get_header()). for det første, lad os forberede vores arbejdsområde.i de temaer, fortegnelse over din wordpress anlæg, skabe en ny folder kaldet blindfaith.i den mappe, skabe følgende filer:,, index.php, single. php, page.php bemærkninger. folkesundhedsprogrammet, funktioner. php, header. php, fod. folkesundhedsprogrammet, sidebar.php, nu har vi vores stylesheets og billeder i stedet som et tema skelet, vi er nødt til at hoppe i.først skal vi gøre vores tema, bekendtgøres i de wordpress instrumentbræt, til at gøre dette er vi nødt til at ændre vores style.css fil. wordpress automatisk vil finde filen style.css i et tema adresseregister for at få oplysninger om emnet.pasta følgende kode i toppen af stil. css: /* tema navn: blind tro tema uri: http://www.danwalker.com/beskrivelse: en minimalistisk, simpelt tema for wordpress - støtter widgets i den aftale, manors post /side formatering og kommer med en let at bygge stylesheet.forfatter: dan walker version 1.0 mærker: minimalistisk, enkelt, widgets, kom her, elegant * /, hvis vi ser wordpress nu vores tema bør anføres i ændringen temaer del af instrumentbrættet.aktivér vores nye tema og last på forsiden af wordpress.at se noget?godt.når wordpress har gjort sin magi ved at finde ud af, hvilken side de bruger vil have og har udarbejdet de resultater, det kalder index.php fra vores tema directory - bortset fra lige nu, det er tom. for det første, vi er nødt til at skære vores html i dens fire forskellige dele; hoved, krop, kom her, fod.hvis du åbner den. forsynet med denne forelæsning, du skal se det her:, <!doctype offentlige "- http: ///////w3c dtd 4.01 midlertidige //en" http: //www.w3.org /tr /html4 /løs. dtd "> < http: //" lang = en > < head > < afsnit > blinde tro < /afsnit > < forbindelse rel = "stylesheet" href = "reset. css" type = "tekst /css" > < forbindelse rel = "stylesheet" href = "stil. css" type = "tekst /css" > <!- hvis han] > < forbindelse rel = "stylesheet" href = "ie.css" type = "tekst /css" /> <![endif]--> \t</head> \t<body class="home blog"> \t<div id="top-bar-tile"> \t\t<div id="top-bar-content"> \t\t\t<h1><a href="http://www.danwalker.com/themes/blindfaith">Blind Faith</a></h1> \t\t\t<span class="slogan">Just Another Theme by Dan Walker</span> \t\t\t<div id="search-box"> \t\t\t\t<form method="get" id="searchform" action="" > \t\t\t\t\t<input type="text" value="Search..." onfocus="if(this.value == this.defaultValue) this.value = ''" name="s" id="s" /> \t\t\t\t</form> \t\t\t</div><!- søg kasse... > < /div > <!- top bar indhold - > < /div > <!- top bar kakler - > < div id = "nav bar fliser" > < div klasse = "nav bar indhold" > < ul > < li klasse = "current_page_item" > < en href = "http://www.danwalker.com/themes/blindfaith/" afsnit = "hjem" > hjem < /a > < /li > < li klasse = "page_item page-item-2" > < en href = "http://www.danwalker.com/themes/blindfaith/?page_id = 2 "afsnit =" med "> på < /a > < /li > < li klasse =" page_item page-item-4 "> < en href =" http://www.danwalker.com/themes/blindfaith/?page_id = 4 "afsnit =" typografi "> typografi < /a > < /li > < /ul > < /div > < /div > <!- nav bar kakler - > < div id = "papir" > < div id = "indhold" > < div klasse = "post" > < h1 > < en href = "http://www.danwalker.com/themes/blindfaith/?p = 1 > - verden!< /a > < /h1 > < div klasse = "post - oplysninger" > < div klasse = "post - detaljer tilbage" > udstationeret på < stærk >. februar 6, 2011 < /stærk > på < over klasse = "forfatter" > dan < /span > på < over klasse = "forfatter" > < en href = "http://www.danwalker.com/themes/blindfaith/?cat = 1 "afsnit =" på alle poster i uncategorized "rel =" kategori "> uncategorized < /a > < /span > < /div > < div klasse =" post - detaljer "> < levetid klasse =" kommentere tæller "> < en href =" http://www.danwalker.com/themes/blindfaith/?p = 1&#bemærkninger "afsnit =" kommentere hej verden! "> 1 (< /a > < /span > < /div > < /div > < p > lorem ipsum dolor sidde amet, consectetur adipiscing elit.etiam malesuada sem i orci ornare et porta nisi tristique.hele sodales feugiat interdum.nunc nec hendrerit velit.praesent på dolor arcu.nulla porttitor dui vel justo vehicula fringilla.nu condimentum justo ut nibh pharetra midlertidigt.morbi nulla nisl, blandit eu egestas vel, ved eget justo.nulla lectus ante, pellentesque midlertidigt pretium eu, porttitor vitae mi.nunc et dolor eget purus ultricies sollicitudin.phasellus luctus tincidunt lobortis.nunc ac aliquam leo.i tortor orci, auctor ikke - condimentum ultricies, hendrerit og nu.nam neque est, laoreet på rhoncus curriculum vitae, porttitor på nulla.maecenas dignissim sagittis og ikke - ultrices.cra eros quam, ultrices eu iaculis eu, egestas eget justo.vivamus produktionen sapien, volutpat eget luctus nec, lacinia ikke quam.af prøveløsladelsen suscipit nunc eget neque congue pretium.vestibulum ikke - lectus ut quam tempus varius.nunc et ligula ikke - metus luctus molestie. < /p > < p > < en href = "#" klasse = "sammenhæng" > læs mere < /a > < /p > < div klasse = "sammen" > < /div > < /div > <!- post - > < div id = "s" > nr. nyere /ældre stillinger < /div > < div klasse = "4" > < /div > < div klasse = "prikker" > < /div > < div id = "lille" > ophavsret © 2011 < en href = "http: //www.danwalker. com" > dan walker < /a > < br /> kan ikke stjæle noget. < /div > < /div > <!- indhold - > < div id = "aftale" > < div klasse = "sidebar rubrik" > < over klasse = "aftale" > lidt om mig < /span > < div klasse = "prikker" > < /div > < div klasse = "textwidget" > < p > lorem ipsum dolor sidde amet, consectetur adipiscing elit.etiam malesuada sem i orci ornare et porta nisi tristique.hele sodales feugiat interdum.nunc nec hendrerit velit.praesent på dolor arcu.nulla porttitor dui vel justo vehicula fringilla.nu condimentum justo ut nibh pharetra midlertidigt.morbi nulla nisl, blandit eu egestas vel, ved eget justo. < /p > < /div > < /div > < div klasse = "sidebar rubrik" > < over klasse = "aftale" > de seneste post < /span > < div klasse = "prikker" > < /div > < ul > < li > < en href = "http://www.danwalker.com/themes/blindfaith/?p = 1 "afsnit =" hej! "> - verden!< /a > < /li > < /ul > < /div > < /div > <!- - aftale - > < div klasse = "4" > < /div > < /div > <!- papir - > < /organ > < /html > hvis vi fylde denne html i en browser i øjeblikket, vil vi se den basale layout.se på det her layout, den første ting, vi skal gøre, er at beslutte, hvilke header skal omfatte.da vi ønsker den titel, gennemsøg kasse og navigation øverst på hver side, det er det, vi vil gøre i vores headerfilen. det vigtigste område vil være variabel, betyder, at det kan være index.php, page.php osv. den aftale er indholdet uden for indholdet i rubrik til højre for udformningen og den lille blot ophavsret besked.vores tema vil blive stillet op sådan her:,, så kopi koden fra. hele vejen fra doctype indholdet division og sæt det i vores headerfilen, vi nu skal have en header.php sagsakter, der ser sådan ud:, <!doctype offentlige "- http: ///////w3c dtd 4.01 midlertidige //en" http: //www.w3.org /tr /html4 /løs. dtd "> < http: //" lang = en > < head > < afsnit > blinde tro < /afsnit > < forbindelse rel = "stylesheet" href = "reset. css" type = "tekst /css" > < forbindelse rel = "stylesheet" href = "stil. css" type = "tekst /css" > <!- hvis han] > < forbindelse rel = "stylesheet" href = "ie.css" type = "tekst /css" /> <![endif]--> \t</head> \t<body class="home blog"> \t<div id="top-bar-tile"> \t\t<div id="top-bar-content"> \t\t\t<h1><a href="http://www.danwalker.com/themes/blindfaith">Blind Faith</a></h1> \t\t\t<span class="slogan">Just Another Theme by Dan Walker</span> \t\t\t<div id="search-box"> \t\t\t\t<form method="get" id="searchform" action="" > \t\t\t\t\t<input type="text" value="Search..." onfocus="if(this.value == this.defaultValue) this.value = ''" name="s" id="s" /> \t\t\t\t</form> \t\t\t</div><!- søg kasse... > < /div > <!- top bar indhold - > < /div > <!- top bar kakler - > < div id = "nav bar fliser" > < div klasse = "nav bar indhold" > < ul > < li klasse = "current_page_item" > < en href = "http://www.danwalker.com/themes/blindfaith/" afsnit = "hjem" > hjem < /a > < /li > < li klasse = "page_item page-item-2" > < en href = "http://www.danwalker.com/themes/blindfaith/?page_id = 2 "afsnit =" med "> på < /a > < /li > < li klasse =" page_item page-item-4 "> < en href =" http://www.danwalker.com/themes/blindfaith/?page_id = 4 "afsnit =" typografi "> typografi < /a > < /li > < /ul > < /div > < /div > <!- nav bar kakler - > < div id = "papir" > < div id = "indhold" >, for nu skal vi springe over indholdet i afsnit, som er den største og mest komplekse del (bestående af mange forskellige sager) og gå direkte videre til den fod.normalt en fod kommer sidst i en udformning, idet aftale kommer efter fod i vores kodeks, vil vi blot kalde aftale efter fod.derfor footer.php bør indeholde følgende kode, < div klasse = "4" > < /div > < div id = "lille" > ophavsret © 2011 blind tro på < en href = "http: //www.danwalker. com" > og dan walker < /a > < br /> < /div > < /div > <!- indhold - > <?folkesundhedsprogrammet aspektet get_sidebar();?> de vil bemærke, at vi bruger vores første wordpress funktion; get_sidebar();.denne funktion er omtrent det samme, som kræver ("gruppemøde. folkesundhedsprogrammet"), og siden vi skal altid kræve samråd efter fod, giver det mening at kalde gruppemøde i fod dossier ved afslutningen. endelig er vi nødt til at omfatte nærmere.da fod kommer før sidebar, den aftale er den sidste fil med, og så bør tæt konstruktion (lukning af de resterende mærker; papir, krop og html). < div id = "aftale" > < div klasse = "sidebar rubrik" > < over klasse = "aftale" > lidt om mig < /span > < div klasse = "prikker" > < /div > < div klasse = "textwidget" > < p > lorem ipsum dolor sidde amet, consectetur adipiscing elit.etiam malesuada sem i orci ornare et porta nisi tristique.hele sodales feugiat interdum.nunc nec hendrerit velit.praesent på dolor arcu.nulla porttitor dui vel justo vehicula fringilla.nu condimentum justo ut nibh pharetra midlertidigt.morbi nulla nisl, blandit eu egestas vel, ved eget justo. < /p > < /div > < /div > < div klasse = "sidebar rubrik" > < over klasse = "aftale" > de seneste post < /span > < div klasse = "prikker" > < /div > < ul > < li > < en href = "http://www.danwalker.com/themes/blindfaith/?p = 1 "afsnit =" hej! "> - verden!< /a > < /li > < /ul > < /div > < /div > <!- - aftale - > < div klasse = "4" > < /div > < /div > <!- papir - > < /organ > < /html >, for nu, luk op index.php og anføre følgende:, <?folkesundhedsprogrammet aspektet get_header();?> <?folkesundhedsprogrammet aspektet get_footer();?> hvis vi styrer vores installation af wordpress, må vi få noget, der ligner det, der på nuværende tidspunkt webstedet indhold (eller det, som vi har gjort hidtil synes at være stylesheets belastning, men den er ikke.det er, fordi i vores headerfilen, opkald til stylesheets nu bruge en vej, der ikke eksisterer.de bor nu i /wp indhold /themes /blindfaith /, men der er en lettere måde overalt det er nødvendigt - at klistre en mere dynamisk måde,.,, bloginfo() funktion, wordpress kommer med en indbygget i funktion kaldes bloginfo(), der er godt for at få alle mulige slags nyttige oplysninger lokalt, såsom blog navn, beskrivelse, stylesheet url, stylesheet fortegnelse og mere.for mere information om, hvad vi kan få for bloginfo, læse denne side i wordpress codex. lad os åbne vores headerfilen og ændre et par ting at bruge den dynamiske oplysninger, som wordpress snarere end den statiske oplysninger i dette tema.vores nuværende header.php fil ser sådan her ud, indtil nav bar fliser tag:, <!doctype offentlige "- http: ///////w3c dtd 4.01 midlertidige //en" http: //www.w3.org /tr /html4 /løs. dtd "> < http: //" lang = en > < head > < afsnit > blinde tro < /afsnit > < forbindelse rel = "stylesheet" href = "reset. css" type = "tekst /css" > < forbindelse rel = "stylesheet" href = "stil. css" type = "tekst /css" > <!- hvis han] > < forbindelse rel = "stylesheet" href = "ie.css" type = "tekst /css" /> <![endif]--> \t</head> \t<body class="home blog"> \t<div id="top-bar-tile"> \t\t<div id="top-bar-content"> \t\t\t<h1><a href="http://www.danwalker.com/themes/blindfaith">Blind Faith</a></h1> \t\t\t<span class="slogan">Just Another Theme by Dan Walker</span> \t\t\t<div id="search-box"> \t\t\t\t<form method="get" id="searchform" action="" > \t\t\t\t\t<input type="text" value="Search..." onfocus="if(this.value == this.defaultValue) this.value = ''" name="s" id="s" /> \t\t\t\t</form> \t\t\t</div><!- søg kasse... > < /div > <!- top bar indhold - > < /div > <!- top bar kakler - > for det første, lad os ordne de manglende stylesheets.vi bruger to værdier fra bloginfo; stylesheet_directory og stylesheet_url.url - værdien er et direkte link til style.css, mens fortegnelse indeholder adresseregister style.css bor i.det er vigtigt at huske på, at wordpress funktioner, som denne ikke sætte en bagud og til værdier. i stedet for det stylesheet linjer med følgende;, < forbindelse rel = "stylesheet" href = "<?folkesundhedsprogrammet aspektet bloginfo ('stylesheet_directory)?> /nulstillet. css "type =" tekst /css "> < forbindelse rel =" stylesheet "href =" <?folkesundhedsprogrammet aspektet bloginfo ('stylesheet_url)?> "type =" tekst /css "> <!- hvis han] > < forbindelse rel = "stylesheet" href = "<?folkesundhedsprogrammet aspektet bloginfo ('stylesheet_directory)?> /ie.css "type =" tekst /css "/> <![endif] - >, vores tema har nu hænger nøje sammen med stylesheets.næste op, mens vi er i headerfilen, lad os ændre blog titel, slogan og link, < afsnit > tag ikke blot har bloginfo ejendom, der repræsenterer navnet på bloggen, kan vi også tilføje en anden funktion, wp_title().denne funktion er tilbage titlen på side eller post i øjeblikket ses, prepended med ».at slukke » før side navn, blot ændre parentes af wp_title() til wp_title ("" sande), < afsnit > <?folkesundhedsprogrammet aspektet bloginfo ('name)?> <?folkesundhedsprogrammet aspektet wp_title();?> < /afsnit > dette vil føre til noget i retning af; lokale test blog > > - verden, nu kan vi blot ændre logo /afsnit tekst, slogan og url ved anvendelse af følgende bloginfo() egenskaber, < h1 > < en href = "<!-?folkesundhedsprogrammet aspektet bloginfo ('url)?- > "> <?folkesundhedsprogrammet aspektet bloginfo ('name)?> < /a > < /h1 > < over klasse = "slogan" > <?folkesundhedsprogrammet aspektet bloginfo ('description)?> < /span >, vores side bør nu se noget som dette, og nu skal vi tage et kig på den index.php fil.det er filen som standard og bør være i stand til at vise lister over stillinger på forsiden, kategorier, arkiver og - resultater - eller en fejlmeddelelse, hvis ikke eksisterer.selvfølgelig, alle disse forskellige lister kan indeholde varierende mængder af stillinger, kan vi arbejde med dette ved hjælp af noget i wordpress kendt som "inderkredsen".,, loop, wordpress regner ud, hvad stillinger til at vise før indekset fil er henrettet efter alt vi laver et tema, og det emne, som kommer i det er blot en måde at vise output.ved hjælp af nogle indbyggede funktioner, vi kan undgå at gøre komplekse php sløjfer med konstant kontrol af gyldige data - dette aspekt af wordpress tema udvikling gør processen lettere og forårsager færre problemer. for det første, lad os se på vores post struktur, < div klasse = "post" > < h1 > < en href = "http://www.danwalker.com/themes/blindfaith/?p = 1 > - verden!< /a > < /h1 > < div klasse = "post - oplysninger" > < div klasse = "post - detaljer tilbage" > udstationeret på < stærk >. februar 6, 2011 < /stærk > på < over klasse = "forfatter" > dan < /span > på < over klasse = "forfatter" > < en href = "http://www.danwalker.com/themes/blindfaith/?cat = 1 "afsnit =" på alle poster i uncategorized "rel =" kategori "> uncategorized < /a > < /span > < /div > < div klasse =" post - detaljer "> < levetid klasse =" kommentere tæller "> < en href =" http://www.danwalker.com/themes/blindfaith/?p = 1&#bemærkninger "afsnit =" kommentere hej verden! "> 1 (< /a > < /span > < /div > < /div > < p > lorem ipsum dolor sidde amet, consectetur adipiscing elit.etiam malesuada sem i orci ornare et porta nisi tristique.hele sodales feugiat interdum.nunc nec hendrerit velit.praesent på dolor arcu.nulla porttitor dui vel justo vehicula fringilla.nu condimentum justo ut nibh pharetra midlertidigt.morbi nulla nisl, blandit eu egestas vel, ved eget justo.nulla lectus ante, pellentesque midlertidigt pretium eu, porttitor vitae mi.nunc et dolor eget purus ultricies sollicitudin.phasellus luctus tincidunt lobortis.nunc ac aliquam leo.i tortor orci, auctor ikke - condimentum ultricies, hendrerit og nu.nam neque est, laoreet på rhoncus curriculum vitae, porttitor på nulla.maecenas dignissim sagittis og ikke - ultrices.cra eros quam, ultrices eu iaculis eu, egestas eget justo.vivamus produktionen sapien, volutpat eget luctus nec, lacinia ikke quam.af prøveløsladelsen suscipit nunc eget neque congue pretium.vestibulum ikke - lectus ut quam tempus varius.nunc et ligula ikke - metus luctus molestie. < /p > < p > < en href = "#" klasse = "sammenhæng" > læs mere < /a > < /p > < div klasse = "sammen" > < /div > < /div > <!- post - >, da vi ved, hvilken struktur af en post - ser ud, og vi har en kopi med falske oplysninger, vi kan erstatte den falske oplysninger med nogle funktioner, der kommer faktisk efter værdier.der er flere oplysninger, vi kan vise til hver post, som f.eks.,, the_title, the_tags, the_id, the_category, the_date, the_content, mange flere (og som de kan finde på adressen http: //codex. wordpress. org /template_tags&#post_tags), når en af disse funktioner er i loop, viser de korrekte oplysninger for den nuværende stilling blev slået igennem. ved hjælp af forbindelsen over (eller de funktioner, der leveres før link), forsøge at erstatte prøvedukken indhold på din egen med den korrekte udskiftning funktioner, før der udføres. den korrekte kode skal se sådan ud, < div klasse = "post" > < h1 > < en href = "<?folkesundhedsprogrammet aspektet the_permalink();?> "> <?folkesundhedsprogrammet aspektet the_title();?> < /a > < /h1 > < div klasse = "post - oplysninger" > < div klasse = "post - detaljer tilbage" > udstationeret på < stærk > <?folkesundhedsprogrammet aspektet the_date();?> < /stærk > på < over klasse = "forfatter" > <?folkesundhedsprogrammet aspektet the_author();?> < /span > på < over klasse = "forfatter" > <?folkesundhedsprogrammet aspektet the_category ('").> < /span > < /div > < div klasse = "post - detaljer" > <?folkesundhedsprogrammet aspektet edit_post_link ('edit "," < over klasse = "kommentere tæller" > "," < /span > ").> < over klasse = "kommentere tæller" > <?folkesundhedsprogrammet aspektet comments_popup_link ('leave en kommentar, 1 bemærkning ","% bemærkninger).> < /span > < /div > < /div > <?folkesundhedsprogrammet (is_archive()
Computer læring 