WordPress-opetusohjelma: Kuinka luoda WordPress-teema HTML: stä (osa 2)

  1. 1. WordPress-opetusohjelma: Kuinka luoda WordPress-teema HTML: stä (osa 1)
  2. 2. Luettu tällä hetkellä: WordPress-opetusohjelma: Kuinka luoda WordPress-teema HTML: stä (osa 2)
  3. 3. Johdanto WordPress-teeman anatomiaan

Osassa tätä opetusohjelmaa käsitelimme HTML-mallin muuntamisen WordPress-teemaksi perusteet. Jos olet pienin utelias, opimme muutamia asioita HTML-mallien jakamisesta PHP-tiedostoiksi, niiden kokoamisesta toisiinsa, WordPress-teemojen muotoilusta ja nimeämisestä. Oikeastaan ​​olemme oppineet paljon, ja haluat tutustua käsitteisiin, jotka käsitelimme ensimmäisessä opetusohjelmassa, nauttiaksesi tästä toisesta tarjoilusta. Tämänpäiväisessä viestissä otamme asiat astetta korkeammalle. Aiomme kattaa vielä muutama alue, jotta voit luoda täysin toimivan WordPress-teeman. Joten, ilman enempää, nyt mennään.


Kuvien ja JavaScript-tiedostojen määrittäminen

Jos alkuperäisessä HTML-mallissasi oli kuvia (index.html), olet todennäköisesti huomannut niiden lopettavan näyttämisen, kun malli on pilkottu PHP-tiedostoiksi. Älä huoli ollenkaan, se on vain tapa, jolla PHP on. Jos esimerkiksi otsikkosi osiossa oli logo kuten niin …

your_logo_alt_text

… Sinun on pelattava koodilla vähän. Koodin, jonka paljastelen hetkessä, auttaa selaimia löytämään logosi (tai muun kuvan) omastasi kuvien -kansio, joka on (tai sen pitäisi olla) teeman päähakemiston alikansio. Joten näyttääksesi logosi otsikkoosassa, avaa header.php-tiedosto ja korvaa yllä oleva koodi seuraavalla:

your_logo_alt_text

Get_template_directory_uri () -toiminto palauttaa teemahakemistosi URL-osoitteen. Eli jos lisäät logosi kuvakansioon, koodi tarttuu siihen logoon.

Huomaatko mitään eroa? On selvää, että tämä koodi korjaa vain logosi. Muiden kuvien korjaamiseksi sinun on kirjoitettava niiden koodit samalla tavalla. Helppo herkkä juttu.

Siirrytään JavaScriptiin. Jos HTML-verkkosivustosi käyttää JavaScriptiä, luo kansio nimeltä js ja laita skriptit sinne. Voit soittaa heille header.php-tiedostossa seuraavalla koodilla:

Yllä oleva koodi käyttää example.js kuvituksena. Älä unohda korvata tätä osaa JavaScript-tiedostosi nimellä.

Tietysti, jos olet luomassa teemaa jollekin toiselle, sinun pitäisi todella ladata js-tiedostosi wp_enqueue_scripts-tiedostoilla. Checkout AJ: n viestit JavaScriptin lisäämisestä WordPress-teemoihin lisätietoja ja neuvoja.

Mallitiedostot

Osassa tätä opetusohjelmaa mainitsimme neljä perusmallitiedostoa hakemisto.php, otsikko.php, sivupalkki.php ja footer.php. Mallitiedostot ohjaavat, kuinka verkkosivustosi näytetään verkossa. Mallit saavat tietoja WordPressin MySQL-tietokannasta ja kääntävät ne HTML-koodiksi, joka näkyy selaimissa. Toisin sanoen mallitiedostot ovat WordPress-teemojen rakennuspalikoita. Saadaksesi paremman ymmärryksen malleista, syventäkäämme konseptia, joka tunnetaan nimellä mallin hierarkian.

Käytämme analogiaa. Jos kävijä napsauttaa luokkalinkkiä (ts. Linkkiä luokkaan), kuten http://www.yoursite.com/blog/category/your-category/, WordPress käyttää mallihierarkiaa tuottaakseen oikean tiedoston (ja sisällön) selitetty alla:

  • Ensinnäkin WordPress etsii mallitiedostoa, joka vastaa luokan tunnusta
  • Jos luokan tunnus on esimerkiksi 2, WordPress etsii mallitiedostoa nimeltä luokka-2.php
  • Jos luokka-2.php ei ole käytettävissä, WordPress etsii yleisen luokkamallitiedoston, kuten category.php
  • Jos myös tämä mallitiedosto ei ole käytettävissä, WordPress etsii yleistä arkistomallia, kuten archive.php
  • Jos yleistä arkistomallia ei ole, WordPress palaa takaisin päämallitiedostoon index.php

Näin WordPress-mallit toimivat, ja voit käyttää näitä tiedostoja mukauttaaksesi WordPress-teeman tarpeitasi vastaavaksi. Muita mallitiedostoja ovat:

koti.php tai hakemisto.phpKäytetään blogitekstien indeksointiin
front-page.phpKäytetään staattisten sivujen tai uusimpien viestien tuottamiseen etusivunäytön mukaisesti
single.phpKäytetään yhden viestisivun tuottamiseen
yksi- {post-tyypin} phpKäytetään räätälöityjen viestityyppien, esimerkiksi jos post-type oli tuote, WordPress käyttäisi single-product.php-tiedostoa
page.phpKäytetään staattisten sivujen tuottamiseen
luokka.php tai arkisto.phpKäytetään luokka-arkiston hakemiston tuottamiseen
author.phpKäytetään esittäjän esittämiseen
date.phpKäytetään päivämäärän esittämiseen
search.phpKäytetään hakutulosten tuottamiseen
404.phpKäytetään palvelimen 404 virhesivun tuottamiseen

Tämä on vain lyhyt luettelo, monia muitakin WordPress-mallit. Mallien aihe on suuri, ja paras tapa oppia pelaamaan mallitiedostoilla on lukemalla laaja Teeman kehittäminen kirjasto WordPressissä. Vaihtoehtoisesti voit lukea lyhyemmän Mallineosasto WordPress Codexissä.

Mallimerkinnät

Koska olemme juuri ottaneet käyttöön mallitiedostot, on vain reilua mainita yksi tai kaksi asiaa mallitunnisteista ja heidän roolistaan ​​WordPress-tiedostossa. WordPress.org: n mukaan ”… blogimallissasi käytetään mallimerkintöjä tietojen näyttämiseen dynaamisesti tai blogisi muokkaamiseen muuten, tarjoamalla työkalut, jotka tekevät siitä niin yksilöllisen ja mielenkiintoisen kuin sinä olet”.

Edellisessä opetusohjelmassamme tapasit muutamia mallimerkkejä, kuten get_header, get_sidebar, get_footer ja bloginfo. Seuraavaan osaan lisätään muutama mallimerkki äskettäin luotuun WordPress-teemaan. Oletan, että olet jo sisällyttänyt DOCTYPE-ilmoituksen header.php-tiedostoosi. Jos et ole, tässä on koodi:

DOCTYPE-ilmoitus antaa HTML-koodille merkityksen. Antakaamme tämän muuttumattomana muokata avaavaa HTML-tunnistetta. Sisällytämme lang-määritteen käyttämällä language_attributes-tunniste niin kuin:

Yllä oleva koodi tuottaa seuraavan:

Kun DOCTYPE-ilmoitus ja language_attribute-tunniste ovat paikoillaan, teeman rakenne on legitiimi ja selaimet ymmärtävät koodisi. Jos luot teema blogiin, on tärkeää, että asetat linkit pingback-URL-osoitteeseen ja RSS-syötteeseen päähänsi. Lisää otsikkoosi.php seuraava koodi:

Huomasitko miten me palkattiin bloginfo-tunniste sisällyttää RSS-syöte (‘rss2_url’) ja pingback (‘pingback_url’)? Ennen kuin tallennat header.php-tiedoston, lisää myös seuraava koodi:

Yllä oleva wp_head-tunniste vetää laajennusten vaatimat tyylitaulukot ja JavaScript-tiedostot. Jos jätät tämän pienen koodin pois, laajennuksesi eivät välttämättä toimi toivotulla tavalla. Kun tämä ei ole mahdollista, lisäämme WordPress-teemaamme sivunimikkeet käyttämällä – jälleen kerran – bloginfo-tunnistetta. Lisää otsikko.php-tiedostoosi seuraava koodi:

<?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?>

Ensimmäinen tunniste wp_title lisää sivusi tai viestin otsikon ja toinen tunniste bloginfo (‘nimi’) lisää blogin nimen. Nyt kun WordPress-teemallasi on sivunimikkeet, entä luomme teemalle kuvakaappauksen, pakkaamme teema uudelleen ja pidämme lepoa?

Näyttökuvan luominen teemaasi varten

Kun latasit testiteeman ensimmäistä kertaa, sinun on huomannut, että siitä puuttui kuvakaappaus WordPressin teemapaneelissa. Se näytti vaalealta, varsinkin jos sinulla oli muita teemoja värikkäillä kuvakaappauksilla. Mutta älä huoli, kuvakaappauksen luominen teemaasi on erittäin helppoa. Luo vain kuva suosikkikuvaeditorillasi (esim. Adobe Photoshop) tai ota teeman näytönottaja. Varmista, että kuvasi on 600 kuvapistettä ja korkeus 450 kuvapistettä. Tallenna kuva nimellä screenshot.png teemakansioon. Tallenna kaikki muutokset, tiivistä teemakansio ZIP-arkistoon. Lataa teema ja aktivoi se nähdäksesi uudet muutokset ��

johtopäätös

Haluan uskoa, että tämä toinen opetusohjelma tarjosi sinulle syvemmän kuvan WordPress-teeman luomisesta staattisesta HTML: stä. Lähitulevaisuudessa esitän sinulle muita WordPress-ohjelmien hyödyntämisen näkökohtia, mutta tällä välin olen valmistellut seuraavat resurssit juuri sinulle:

Hyvää luomista!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector