Tutoriali i WordPress: Si të krijoni një temë të WordPress nga HTML (Pjesa 2)

  1. 1. Tutoriali i WordPress: Si të krijoni një temë WordPress nga HTML (Pjesa 1)
  2. 2. Leximi aktual: Tutoriali i WordPress: Si të krijoni një temë të WordPress nga HTML (Pjesa 2)
  3. 3. Një hyrje në anatominë e një teme WordPress

Në pjesën një të këtij tutoriali, ne kemi mbuluar bazat e konvertimit të një shablloni HTML në një temë WordPress. Nëse jeni pak më kureshtarët, mësuam disa gjëra rreth ndarjes së shablloneve HTML në skedarë PHP, vendosjen e tyre përsëri, stilimin dhe emërtimin e temave të WordPress. Në të vërtetë, kemi mësuar shumë, dhe ju do të dëshironi të njiheni me konceptet që kemi mbuluar në mësimin tonë të parë për të shijuar këtë shërbim të dytë. Në postimin e sotëm, ne do t’i marrim gjërat më lart. Ne do të mbulojmë disa fusha të tjera, në mënyrë që të krijoni një temë plotësisht funksionale të WordPress. Pra, pa ado më tej, këtu shkojmë.


Konfigurimi i figurave dhe skedarëve JavaScript

Nëse keni pasur imazhe në modelin tuaj origjinal HTML (index.html), me siguri keni vërejtur që ata kanë ndaluar së shfaquri pasi të preni modelin në skedarët PHP. Mos u shqetësoni fare, është thjesht mënyra sesi është PHP. Për shembull, nëse keni pasur një logo në seksionin tuaj si kjo …

your_logo_alt_text

… Do të duhet të luani pak me kodin. Kodi që do të zbuloj në një moment do t’i ndihmojë shfletuesit të gjejnë logon tuaj (ose ndonjë imazh tjetër) në tuaj images dosje, e cila është (ose duhet të jetë) një nën-dosje e drejtorisë kryesore të temës suaj. Pra, për të shfaqur logon tuaj në seksionin e kokës, hapni skedarin header.php dhe zëvendësoni kodin e mësipërm me sa vijon:

your_logo_alt_text

Funksioni get_template_directory_uri () kthen url-në për drejtorinë tuaj të temave. SO nëse e shtoni logon tuaj në një dosje imazhesh, atëherë kodi do të rrëmbejë atë logo.

Vini re ndonjë ndryshim? Natyrisht, kjo pjesë e kodit do të rregullojë logon tuaj vetëm. Për të rregulluar imazhe të tjera, do t’ju duhet të rishikoni kodet e tyre në mënyrë të ngjashme. Sende të lehta bizele.

Le të kalojmë te JavaScript. Nëse faqja juaj HTML HTML ka përdorur JavaScript, krijoni një dosje të quajtur js dhe vendosni skriptet tuaja atje. Ju mund t’i telefononi ata në skedarin header.php duke përdorur kodin e mëposhtëm:

Përdor kodin e mësipërm example.js si ilustrim. Mos harroni ta zëvendësoni atë pjesë me emrin e skedarit tuaj JavaScript.

Sigurisht nëse po krijoni një temë për dikë tjetër, atëherë me të vërtetë duhet të ngarkoni skedarët tuaj js me wp_enqueue_scripts. Pagesa e postimeve të AJ në shtimin e JavaScript në temat e WordPress për më shumë informacion dhe këshilla.

Skedarët e shablloneve

Në pjesën një të këtij udhëzimi, ne përmendëm katër skedarë themelorë të shablloneve domethënë index.php, header.php, sidebar.php dhe footer.php. Skedarët e shablloneve kontrollojnë se si faqja juaj e internetit do të shfaqet në internet. Modelet marrin informacion nga baza e të dhënave MySQL e WordPress-it tuaj dhe përkthenin të njëjtën në kodin HTML që shfaqet në shfletuesit e uebit. Me fjalë të tjera, skedarët shabllonë janë blloqet ndërtuese të temave të WordPress. Për të kuptuar më mirë modelet, le të bëjmë një koncept të njohur si template hierarkia.

Do të përdorim një analogji. Nëse një vizitor klikon një lidhje të një kategorie (d.m.th. lidhje me një kategori) siç është http://www.yoursite.com/blog/categ/your-categ/, WordPress përdor hierarkinë e shablloneve për të gjeneruar skedarin e duhur (dhe përmbajtjen) si shpjegohet më poshtë:

  • Së pari, WordPress do të kërkojë një skedar shabllon që përputhet me ID e kategorisë
  • Nëse ID e kategorisë është, për shembull 2, WordPress do të kërkojë një skedar shablloni me emrin kategoria-2.php
  • Nëse kategoria-2.php është i padisponueshëm, WordPress do të kërkojë një skedar modeli të kategorisë së përgjithshme si kategoria.php
  • Nëse edhe ky skedar shablloni nuk është i disponueshëm, WordPress do të kërkojë një model arkivi të përgjithshëm siç është arkivi.php
  • Nëse shablloni i arkivit gjenerik nuk ekziston, WordPress do të bjerë përsëri në skedarin kryesor të modelit, index.php

Kështu funksionojnë modelet e WordPress dhe ju mund t’i përdorni këto skedarë për të rregulluar temën tuaj të WordPress për t’iu përshtatur nevojave tuaja. Skedarët e tjerë të modelit përfshijnë:

shtëpi.php ose indeksi.phpPërdoret për të dhënë indeksin e postimeve në blog
para-page.phpPërdoret për të dhënë faqe statike ose postime të fundit siç janë vendosur në ekranet e faqeve të para
single.phpPërdoret për të dhënë një faqe të vetme postimi
vetme {post-type} PhpPërdoret për të dhënë lloje poste me porosi p.sh. nëse post-lloji ishte një produkt, WordPress do të përdorte një produkt të vetëm.php
page.phpPërdoret për të dhënë faqe statike
kategori.php ose arkiv.phpPërdoret për të dhënë indeksin e Arkivit të Kategorisë
author.phpPërdoret për të dhënë autorin
date.phpPërdoret për të dhënë datën
search.phpPërdoret për të dhënë rezultatet e kërkimit
404.phpPërdoret për të dhënë faqen e gabimit të serverit 404

Kjo është vetëm një listë e shkurtër, ka edhe shumë të tjera Modelet e WordPress. Tema e shablloneve është e madhe, dhe mënyra më e mirë për të mësuar se si të luani me skedarë shabllon është duke lexuar të gjerë Zhvillimi i temave biblioteka në WordPress. Përndryshe, ju mund të lexoni më të shkurtër Seksioni i modeleve në Wordxress Codex.

Etiketat e shablloneve

Duke parë që sapo kemi prezantuar Skedarët e Shablloneve, është vetëm e drejtë të përmendim një gjë ose dy në lidhje me etiketat e shablloneve, dhe rolin që ata luajnë në tematikën e WordPress. Sipas WordPress.org, “… etiketat e shablloneve përdoren brenda shabllonit të blogut tuaj për të shfaqur informacionin dinamike ose për të rregulluar ndryshe blogun tuaj, duke siguruar mjetet për ta bërë atë individuale dhe interesante siç jeni.”

Në mësimin tonë të mëparshëm, keni përmbushur disa etiketa modelesh si psh get_header, get_sidebar, get_footer dhe bloginfo. Në pjesën e mëposhtme, ne do të shtojmë disa etiketa shabllon në temën tonë të krijuar rishtas WordPress. Unë po supozoj se ju keni përfshirë tashmë deklaratën DOCTYPE në skedarin tuaj header.php. Nëse nuk e keni, ja kodi:

Deklarata DOCTYPE i jep kuptim kodit tuaj HTML. Me këtë, nuk lejoni të modifikoni etiketën HTML të hapjes. Ne do të përfshijmë një atribut lang duke përdorur etiketë gjuhësh si keshtu:

Kodi i mësipërm do të krijojë sa vijon:

Me deklaratën DOCTYPE dhe etiketën gjuhë_kontribuese në vend, struktura e temës suaj është e ligjshme dhe shfletuesit do të kuptojnë kodin tuaj. Nëse jeni duke krijuar një temë për një blog, është e rëndësishme të vendosni lidhje në URL tuaj pingback dhe RSS feed. Në kokën tuaj.php, shtoni kodin e mëposhtëm:

A vini re se si e kemi punësuar etiketë bloginfo të përfshini burimin RSS (“rss2_url”) dhe pingback (“pingback_url”)? Para se të ruani skedarin tuaj header.php, shtoni gjithashtu kodin e mëposhtëm:

Etiketa e mësipërme wp_head do të tërheqë fletët e stilit dhe skedarët JavaScript të kërkuara nga shtojcat tuaja. Nëse e lini jashtë këtë pjesë të vogël kodi, shtojcat tuaja mund të mos funksionojnë sipas dëshirës. Me atë pa mbarim, le të shtojmë tituj faqesh në temën tonë të WordPress duke përdorur – edhe një herë – etiketën bloginfo. Në skedarin tuaj header.php, shtoni kodin e mëposhtëm:

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

Etiketa e parë wp_title do të shtojë titullin e faqes ose postimit tuaj dhe etiketa e dytë bloginfo (“emri”)) do të shtojë emrin tënd në blog. Tani që tema juaj e WordPress ka tituj faqesh, si të krijojmë një fotografi të ekranit për temën tonë, rivendosni temën dhe pushoni?

Krijimi i një pamje nga tema juaj

Kur e keni ngarkuar temën tuaj të provës për herë të parë, duhet të keni vërejtur se i mungonte një pamje në Panelin e Temave të WordPress. Duket e çuditshme, veçanërisht nëse keni tema të tjera me ekrane shumëngjyrësh. Por mos u shqetësoni, krijimi i një pamje nga ekrani për temën tuaj është shumë e lehtë. Thjesht krijoni një imazh duke përdorur redaktorin tuaj të preferuar të figurës (p.sh. Adobe Photoshop) ose merrni një ekran të temës suaj. Sigurohuni që imazhi juaj është i gjerë 600px dhe i lartë 450px. Ruani imazhin si screenshot.png në dosjen tuaj të temave. Ruani të gjitha ndryshimet, kompresoni dosjen tuaj të temave në një arkiv ZIP. Ngarko temën dhe aktivizoje për të parë ndryshimet e tua të reja ��

përfundim

Unë dua të besoj se ky tutorial i dytë ju ofroi një pasqyrë më të thellë në krijimin e një teme WordPress nga HTML statike. Në të ardhmen e afërt, unë do t’ju prezantoj me aspekte të tjera të temave të WordPress, por ndërkohë, unë kam përgatitur burimet e mëposhtme vetëm për ju:

Gëzuar krijimin!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map