02 β Lokal muhit va birinchi minimal tema¶
β¬ οΈ Oldingi: 01 β WordPress va tema nima Β· π README Β· Keyingi: 03 β So'rov hayoti va template hierarchy β‘οΈ
Bu bobda: Kompyuteringizda lokal WordPress muhitini o'rnatamiz (variantlarni solishtirib, eng qulayini tanlaymiz). So'ng faqat ikkita fayldan iborat β
style.cssvaindex.phpβ eng minimal klassik temani 0 dan yaratamiz, uni aktivlashtiramiz va brauzerda ishlaganini ko'ramiz. Oxirida block (FSE) temaning ham eng kichik variantini ko'rsatamiz, shunda ikki yo'lning farqini his qilasiz.
Nega lokal muhit kerak¶
Temani to'g'ridan-to'g'ri jonli (production) saytda yozish β bu o'q-yoy bilan o'zingni nishonga olishdek. Bitta xato butun saytni "oq ekran"ga aylantiradi va tashrifchilaringiz buni ko'radi.
Lokal muhit β bu kompyuteringizning ichida ishlaydigan to'liq WordPress sayti. U faqat sizga ko'rinadi (odatda http://localhost manzilida), internet shart emas, xohlagancha sindirib-tuzatishingiz mumkin. Bu β mashinani haydashni o'rganish uchun maxsus poligon: ko'chaga chiqmasdan, hech kimga zarar yetkazmasdan mashq qilasiz.
WordPress ishlashi uchun uchta narsa kerak:
- PHP β WordPress shu tilda yozilgan (bu kitobda PHP 8.4). PHP asoslarini bilasiz deb hisoblaymiz β agar takrorlash kerak bo'lsa, PHP kitobiga qarang.
- Veb-server β Apache yoki Nginx (so'rovlarni qabul qiladi).
- Ma'lumotlar bazasi β MySQL yoki MariaDB (yozuvlar, sozlamalar shu yerda saqlanadi).
Yaxshi xabar: pastdagi vositalar bu uchchalasini siz uchun avtomatik o'rnatadi. Bittasini tanlaysiz β qolganini u qiladi.
Lokal muhit variantlari¶
WordPress'ni lokal o'rnatishning bir nechta yo'li bor. Hammasini o'rnatish shart emas β bittasini tanlang. Quyida qisqa solishtirish:
| Vosita | Qanday ishlaydi | Afzalligi | Kimga mos |
|---|---|---|---|
| LocalWP | Grafik ilova, "Create site" tugmasi | Eng oson, bir necha klik, SSL/email/PHP versiya tanlash | Yangi boshlovchi (TAVSIYA) |
| Studio by WP | Automattic'ning bepul yengil ilovasi | Tez prototip, juda yengil | Tez sinab ko'rish |
| XAMPP / MAMP | Apache+MySQL+PHP to'plamini o'rnatadi | Klassik, ko'p qo'llanmalar shu asosida | WP'ni qo'lda o'rnatishni o'rganmoqchilar |
| wp-env | npx @wordpress/env start (Docker ustida) |
Loyiha uchun bir buyruq, blok ishlab chiqishga ideal | Custom blok ishlab chiquvchilar |
| Docker (qo'lda) | O'zingiz docker-compose.yml yozasiz |
To'liq nazorat | Ilg'or, DevOps fonida |
Qisqacha tavsiya:
- Endigina boshlayotgan bo'lsangiz β LocalWP o'rnating. Yuklab oling, ishga tushiring, "Create a new site" bosing, nom bering β bir necha daqiqada to'liq WordPress sayti tayyor. PHP versiyasini ham menyudan tanlaysiz (8.4 ni tanlang).
- Custom bloklar (22β25-boblar) ishlab chiqmoqchi bo'lsangiz β keyinroq wp-env ham foydali bo'ladi, chunki u loyiha bilan birga
.wp-env.jsonfaylda saqlanadi va jamoa bilan bir xil muhitni ulashish oson.
Eslatma: Qaysi vositani tanlasangiz ham, tema yaratish jarayoni bir xil. Faqat WordPress qayerda turishi farq qiladi. Shuning uchun bu bobning qolgan qismi har qanday muhitda ishlaydi.
XAMPP bilan qo'lda o'rnatish bosqichlari (qisqacha, agar shu yo'lni tanlasangiz):
- XAMPP'ni o'rnatib, Apache va MySQL'ni ishga tushiring.
- wordpress.org dan WordPress'ni yuklab,
htdocs/saytim/papkasiga chiqaring. - phpMyAdmin'da bo'sh baza yarating (masalan
wp_local). - Brauzerda
http://localhost/saytimga kirib, o'rnatish sehrgariga (baza nomi, foydalanuvchiroot, parol bo'sh) javob bering.
LocalWP esa bularning hammasini avtomatik bajaradi β shuning uchun boshlovchiga uni tavsiya qilamiz.
wp-admin va tema joyi¶
WordPress ikki qismdan iborat:
- Old qism (frontend) β tashrifchilar ko'radigan sayt:
http://localhost:8090. - Boshqaruv paneli (wp-admin) β siz boshqaradigan panel:
http://localhost:8090/wp-admin. Bu yerda yozuv yozasiz, sozlamalarni o'zgartirasiz va temalarni aktivlashtirasiz.
WordPress'da temalar fayl tizimida aniq bir joyda yashaydi:
wordpress/
βββ wp-content/
βββ plugins/ β plaginlar shu yerda
βββ uploads/ β yuklangan rasm/fayllar
βββ themes/ β TEMALAR shu yerda
βββ twentytwentyfive/ β rasmiy block tema
βββ birinchi-tema/ β BIZNING temamiz shu yerga keladi
Asosiy qoida sodda: wp-content/themes/ ichidagi har bir papka β bitta tema. Papka nomi temaning "slug"i bo'ladi (lotin harflari, kichik, chiziqcha bilan: birinchi-tema). WordPress shu papkani topib, ichidagi style.css faylining yuqorisidan tema ma'lumotlarini o'qiydi.
Eng minimal klassik tema: faqat 2 ta fayl¶
Ko'p odam temani minglab satr kod deb o'ylaydi. Aslida ishlaydigan eng kichik klassik tema atigi ikki fayldan iborat:
style.cssβ yuqorisida maxsus header bloki bilan (bu MAJBURIY).index.phpβ sahifani chizadigan asosiy shablon (oxirgi chora shabloni).
Boshqa hech narsa shart emas. functions.php ham, header.php ham hozircha kerak emas. Keling, ikkalasini ham yozamiz.
1-qadam: tema papkasini yaratish¶
wp-content/themes/ ichida yangi papka oching va nomini birinchi-tema qo'ying. Endi shu papka ichida ikki fayl yaratamiz.
2-qadam: style.css va uning header bloki¶
style.css faylining boshidagi izoh (/* ... */) β oddiy izoh emas. WordPress uni o'qib, tema haqidagi ma'lumotni shu yerdan oladi: nomi, muallifi, versiyasi. Bu izoh "tema header bloki" deb ataladi.
/*
Theme Name: Birinchi Tema
Theme URI: https://ioqil.uz/birinchi-tema
Author: Oqil Imomnazarov
Author URI: https://ioqil.uz
Description: 0 dan yaratilgan eng minimal klassik WordPress tema.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: birinchi-tema
Tags: blog, one-column, custom-menu
*/
body {
font-family: system-ui, "Segoe UI", sans-serif;
max-width: 720px;
margin: 0 auto;
padding: 24px;
line-height: 1.6;
color: #1e293b;
}
Header maydonlari nimani anglatadi:
| Maydon | Vazifasi | Majburiymi? |
|---|---|---|
Theme Name |
Tema nomi (admin panelda shu ko'rinadi) | HA β bu bo'lmasa tema umuman ro'yxatda chiqmaydi |
Description |
Qisqa tavsif | Yo'q (lekin tavsiya) |
Author |
Muallif ismi | Yo'q |
Version |
Tema versiyasi (1.0.0) |
Yo'q (lekin tavsiya) |
Text Domain |
Tarjima domeni (28-bobda) β odatda slug bilan bir xil | Yo'q (lekin tavsiya) |
Requires PHP / Requires at least |
Minimal PHP / WP versiyasi | Yo'q |
License / License URI |
Litsenziya (WordPress.org uchun GPL talab) | Tarqatish uchun zarur |
Eng muhim qoidani yodda tuting: Theme Name bo'lmasa, WordPress papkani tema deb tanimaydi va u admin paneldagi temalar ro'yxatida ko'rinmaydi. Boshqa hamma maydon ixtiyoriy, ammo professional tema uchun ularni to'ldirish yaxshi odat.
Header ostidagi CSS (bizning misolda body { ... }) β bu temaning oddiy uslublari. Hozircha sahifani markazga olib, o'qishga qulay qildik xolos.
3-qadam: index.php¶
index.php β klassik temaning eng asosiy shabloni. 03-bobda ko'rasizki, WordPress so'rov uchun mos shablonni izlaydi; mos keladigani topilmasa, oxirgi chora sifatida har doim index.php ga tushadi. Shuning uchun minimal temada faqat shu bitta fayl ham yetarli.
<?php
/**
* Eng minimal klassik tema uchun yagona shablon: index.php
*
* @package Birinchi_Tema
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
</header>
<main>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<article <?php post_class(); ?>>
<h2>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2>
<div><?php the_content(); ?></div>
</article>
<?php endwhile; ?>
<?php else : ?>
<p>Hali hech qanday yozuv yo'q. Birinchi temangiz ishladi!</p>
<?php endif; ?>
</main>
<footer>
<p>© <?php echo esc_html( date( 'Y' ) ); ?> <?php bloginfo( 'name' ); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
Bu yerda yangi WordPress funksiyalari ishtirok etyapti. Hozircha chuqur tushunish shart emas β keyingi boblarda har birini batafsil ko'ramiz β lekin qisqacha:
language_attributes()β<html>tegiga til atributlarini qo'shadi (masalanlang="uz").bloginfo('name')/bloginfo('description')β sayt nomi va shiorini chiqaradi (Sozlamalar > Umumiy'dan).wp_head()β</head>dan oldin MAJBURIY. WordPress va plaginlar shu yerga o'z uslub/skriptlarini qo'shadi. Bo'lmasa ko'p narsa ishlamaydi.wp_footer()β</body>dan oldin MAJBURIY. Admin paneli (tahrirlash paneli) va skriptlar shu yerga ulanadi.body_class()/post_class()β<body>va maqolaga foydali CSS klasslarini qo'shadi (masalanhome,single).have_posts()/the_post()β bu The Loop (05-bobning yuragi). WordPress topgan yozuvlarni birma-bir aylanib chiqadi.the_title()/the_content()/the_permalink()β joriy yozuvning sarlavhasi, matni va havolasini chiqaradi.
Diqqat β
wp_head()vawp_footer()ni HECH QACHON tushirib qoldirmang. Ular bo'lmasa Site Editor paneli, plaginlar va hatto blok uslublari ishlamaydi. Bu β yangi boshlovchining eng tez-tez qiladigan xatosi.
<?php the_permalink(); ?> kabi teglar echo qilingan (o'zi chop etadi), home_url() esa qiymat qaytaradi, shuning uchun uni echo esc_url( ... ) bilan o'rab xavfsiz chiqaramiz. Bu farqni 06- va 27-boblarda batafsil ko'rasiz.
Temani aktivlashtirish¶
Ikki fayl tayyor. Endi temani ishga solamiz.
Uch qadam:
- Papkaga qo'yish.
birinchi-tema/papkasiniwp-content/themes/ichiga joylashtiring (LocalWP'da "Go to site folder" tugmasi orqali papkani ochasiz). Ichidastyle.cssvaindex.phpborligiga ishonch hosil qiling. - wp-admin'ga kirish. Brauzerda
http://localhost:8090/wp-adminga kiring, so'ng chap menyudan Ko'rinish (Appearance) > Mavzular (Themes) bo'limini oching. "Birinchi Tema" kartochkasini ko'rasiz. - Aktivlashtirish. Kartochka ustiga sichqonchani olib boring va "Faollashtirish" (Activate) tugmasini bosing.
Endi http://localhost:8090 ni oching β temangiz ishlayapti! Agar hali yozuv yozmagan bo'lsangiz, "Hali hech qanday yozuv yo'q. Birinchi temangiz ishladi!" matnini ko'rasiz. Bu β sizning birinchi WordPress temangiz.
Buyruq qatorini afzal ko'rsangiz, WP-CLI bilan ham bo'ladi:
# Mavjud temalarni ro'yxatlash
wp theme list
# Temani aktivlashtirish
wp theme activate birinchi-tema
Maslahat: Admin paneldagi tema kartochkasida chiroyli oldindan ko'rinish chiqishi uchun papkaga
screenshot.png(tavsiya etilgan o'lcham 1200x900) qo'shing. Bu ixtiyoriy, lekin temangizni professional ko'rsatadi.
Tema ko'rinmasa β tez-tez uchraydigan xatolar¶
- Tema ro'yxatda yo'q β odatda
style.cssdaTheme Name:qatori yo'q yoki noto'g'ri yozilgan. Faylning eng boshida, izoh ichida turishi shart. - "The package could not be installed. The theme is missing the style.css stylesheet." β papka nomi yoki
style.cssjoylashuvi xato;style.cssto'g'ridan-to'g'ri tema papkasining ichida bo'lsin (qo'shimcha ichki papkada emas). - Oq ekran (white screen) β
index.phpda PHP xatosi.php -l index.phpbilan sintaksisni tekshiring (quyida ko'rsatamiz).
Minimal block (FSE) tema varianti¶
WordPress 7.0'da block temalar (Full Site Editing) standart hisoblanadi. Ularni batafsil 15-bobdan boshlab o'rganamiz, lekin farqni hoziroq his qilishingiz uchun eng kichik block temani ko'rsatamiz.
Klassik temadan asosiy farqi: PHP shablon yo'q. index.php o'rniga templates/index.html faylida block markup (HTML izohlari ko'rinishidagi bloklar) bo'ladi. Eng minimal block tema ham ikki "narsadan" iborat:
style.cssβ yana o'sha header bloki bilan (Theme NameSHART).templates/index.htmlβindex.phpo'rniga.
style.css (faqat header, CSS shart emas):
/*
Theme Name: Birinchi Block Tema
Author: Oqil Imomnazarov
Description: Eng minimal block (FSE) tema: style.css + templates/index.html.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: birinchi-block-tema
*/
templates/index.html:
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:heading {"level":1} -->
<h1 class="wp-block-heading">Birinchi block tema</h1>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Bu eng minimal block (FSE) tema. PHP shablon yo'q, faqat block markup.</p>
<!-- /wp:paragraph -->
<!-- wp:query {"query":{"perPage":10,"postType":"post"}} -->
<div class="wp-block-query">
<!-- wp:post-template -->
<!-- wp:post-title {"isLink":true,"level":2} /-->
<!-- wp:post-excerpt /-->
<!-- /wp:post-template -->
</div>
<!-- /wp:query -->
</main>
<!-- /wp:group -->
E'tibor bering: <!-- wp:paragraph --> kabi izohlar oddiy HTML izohi emas β bular WordPress block markupi. Har bir blok <!-- wp:nom --> bilan boshlanib <!-- /wp:nom --> bilan tugaydi (o'z-o'zini yopuvchilari /--> bilan). The Loop (have_posts) o'rnida bu yerda core/query va core/post-template bloklari ishlaydi. Bularning hammasini Site Editor (Ko'rinish > Tahrirlovchi) orqali sichqoncha bilan ham tahrirlash mumkin.
Bu temani ham xuddi shunday aktivlashtiriladi: papkaga qo'yib, Ko'rinish > Mavzular dan faollashtirasiz. Aktivlashgach, admin panelda alohida "Tahrirlovchi" (Site Editor) menyusi paydo bo'ladi β bu block temaning belgisi.
Qaysi birini tanlash kerak? Yangi loyihalar uchun WordPress'ning o'zi block temani tavsiya qiladi. Lekin ish bozorida hali ko'p klassik tema bor, shuning uchun bu kitobda avval klassik (05β14-boblar), keyin block (15β21-boblar) ni o'rganamiz. Ikkalasini bilsangiz β to'liq mutaxassis bo'lasiz.
Xulosa¶
- Lokal muhit β temani xavfsiz yozish va sinash uchun shart. Boshlovchiga LocalWP eng oson; blok ishlab chiqishga wp-env qulay.
- Temalar
wp-content/themes/ichida yashaydi; har bir papka β bitta tema, papka nomi β slug. - Eng minimal klassik tema =
style.css(Theme Nameheader bilan) +index.php.Theme Namebo'lmasa, tema umuman ko'rinmaydi. index.phpdawp_head()vawp_footer()MAJBURIY.- Aktivlashtirish: papkaga qo'y β Ko'rinish > Mavzular β Faollashtirish (yoki
wp theme activate). - Block tema varianti:
style.css+templates/index.html(PHP o'rniga block markup).
Keyingi bobda WordPress so'rovni qanday qabul qilishini va qaysi shablonni qachon tanlashini β template hierarchy ni β chuqur o'rganamiz. Aynan shu narsa minimal index.php dan to'liq professional klassik temaga o'tishning kalitidir.
Mashqlar¶
Oson¶
- Tema papkasi.
wp-content/themes/ichidamening-temamnomli papka yarating. Ushbu papka nomi WordPress uchun nima vazifa bajaradi (tema "slug"i nima uchun kerak) β bir jumlada yozing. - Header bloki.
mening-temam/style.cssfaylini yarating va ungaTheme Name,Author,Description,Version,Text Domainmaydonlari bo'lgan header blokini yozing.Theme Nameqiymati "Mening Temam" bo'lsin. - Eng kichik index. Shu temaga eng minimal
index.phpqo'shing:<!DOCTYPE html>,<head>ichidawp_head(),<body>ichidawp_footer(). Boshqa hech narsa. - Majburiy teglar.
index.phpdawp_head()vawp_footer()ni atayin o'chirib, keyin qaytadan qo'shing. Ularning vazifasini o'z so'zlaringiz bilan ikki jumlada tushuntiring.
O'rta¶
- To'liq minimal tema. 1β3-mashqlarni birlashtirib, ishlaydigan to'liq minimal klassik tema yozing:
style.css(header bilan) +index.php(DOCTYPE,wp_head, The Loop,wp_footer). The Loop bo'sh bo'lsa "Yozuv yo'q" matnini ko'rsatsin. - Aktivlashtirish qadamlari. Temani aktivlashtirishning to'liq qadamlarini (papkaga qo'yishdan boshlab) ketma-ket yozing β ham wp-admin orqali, ham WP-CLI buyrug'i bilan.
- Sayt nomi.
index.phpda sayt nomini va shiorini chiqaring (bloginfo('name')vabloginfo('description')), nomni esa bosh sahifaga havola (home_url('/')) qiling. URL'niesc_url()bilan xavfsiz chiqaring. - Block tema varianti. Eng minimal block temani yarating:
style.css(header bilan) +templates/index.html.index.htmlichida bittacore/headingva bittacore/paragraphbloki bo'lsin. Block markup sintaksisiga (<!-- wp:... -->) rioya qiling.
Qiyin¶
functions.phpbilan enqueue. Temagafunctions.phpqo'shing vawp_enqueue_scriptshookidastyle.cssni to'g'ri yo'l bilan (get_stylesheet_uri()) ulang. Versiya sifatida temaning haqiqiy versiyasini (wp_get_theme()->get('Version')) bering.- 404 shabloni. Temaga
404.phpshabloni qo'shing:get_header()/get_footer()chaqirsin, "Sahifa topilmadi" xabari va bosh sahifaga havola, hamdaget_search_form()bilan qidiruv shaklini ko'rsatsin. (Eslatma:get_header()ishlashi uchun temadaheader.phpham bo'lishi yoki bu fragment deb belgilanishi kerak.) - Diagnostika. Sizga "tema temalar ro'yxatida ko'rinmayapti" deyishdi. Sababini topish bo'yicha bosqichma-bosqich tekshirish ro'yxatini yozing (kamida 4 ta tekshiruv).
theme listsolishtirish. WP-CLIwp theme listchiqishidagistatusustuni nimani anglatadi?activevainactivefarqini va nima uchun parallel ishlaganda temani aktivlashtirmaslik mumkinligini tushuntiring.- Minimal vs to'liq. Minimal tema (2 fayl) ishlaydi, lekin nima yetishmaydi? Real saytda zarur bo'ladigan kamida 4 ta qo'shimcha fayl/imkoniyatni (masalan
header.php,single.php, menyu,screenshot.png) sanab, har birining vazifasini bir jumlada yozing.
Yechimlar¶
Yechim β 1
wp-content/themes/mening-temam/ papkasini yarating.
WordPress wp-content/themes/ ichidagi har bir papkani alohida tema deb biladi. Papka nomi β temaning slugi: u ichki identifikator bo'lib, URL'larda, wp theme activate mening-temam buyrug'ida va get_template_directory() kabi funksiyalarda ishlatiladi. Shuning uchun nom lotin harflari, kichik va chiziqcha bilan (mening-temam) bo'lishi kerak β bo'shliq yoki kirill ishlatilmaydi.
Yechim β 2
mening-temam/style.css:
/*
Theme Name: Mening Temam
Author: Oqil Imomnazarov
Description: O'quv maqsadidagi minimal klassik tema.
Version: 1.0.0
Text Domain: mening-temam
*/
Theme Name β yagona majburiy maydon; usiz WordPress papkani tema deb tanimaydi. Header faylning eng boshida, /* ... */ izoh ichida turishi shart.
Yechim β 3
mening-temam/index.php:
<?php
/**
* @package Mening_Temam
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<p>Salom, dunyo!</p>
<?php wp_footer(); ?>
</body>
</html>
Bu eng kichik ishlaydigan index.php. wp_head() va wp_footer() shart, qolgan teglar (language_attributes, body_class) tavsiya etiladi.
Yechim β 4
wp_head()β</head>dan oldin chaqiriladi. WordPress yadrosi va plaginlar shu nuqtaga o'z CSS/JS fayllari, meta teglar va boshqa<head>mazmunini qo'shadi. Bo'lmasa: enqueue qilingan uslublar ulanmaydi, ko'p plagin va hatto blok stillar ishlamaydi.wp_footer()β</body>dan oldin chaqiriladi. Footerga yuklanadigan skriptlar va admin paneli (login bo'lganda yuqoridagi tahrirlash paneli) shu yerga ulanadi. Bo'lmasa: ko'p JavaScript va admin paneli ishlamaydi.
Qisqasi: bu ikki teg WordPress'ning temaga "ulanish nuqtalari"dir β ularsiz tema yakkalanib qoladi.
Yechim β 5
style.css:
/*
Theme Name: Mening Temam
Author: Oqil Imomnazarov
Description: To'liq minimal klassik tema.
Version: 1.0.0
Text Domain: mening-temam
*/
body { font-family: system-ui, sans-serif; max-width: 720px; margin: 0 auto; padding: 24px; }
index.php:
<?php
/**
* @package Mening_Temam
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><?php bloginfo( 'name' ); ?></h1>
</header>
<main>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<article <?php post_class(); ?>>
<h2><?php the_title(); ?></h2>
<div><?php the_content(); ?></div>
</article>
<?php endwhile; ?>
<?php else : ?>
<p>Yozuv yo'q.</p>
<?php endif; ?>
</main>
<?php wp_footer(); ?>
</body>
</html>
Bu php -l dan o'tadigan, aktivlashtirilsa darhol ishlaydigan to'liq minimal tema.
Yechim β 6
wp-admin orqali:
- Tema papkasini (
style.cssvaindex.phpbilan)wp-content/themes/mening-temam/ga joylashtiring. http://localhost:8090/wp-adminga kiring.- Ko'rinish (Appearance) > Mavzular (Themes) ni oching.
- "Mening Temam" kartochkasini toping, ustiga olib boring va "Faollashtirish" (Activate) ni bosing.
- Saytni (
http://localhost:8090) ochib, natijani ko'ring.
WP-CLI orqali:
Yechim β 7
index.php ning <header> qismi:
<header>
<h1>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php bloginfo( 'name' ); ?>
</a>
</h1>
<p class="site-description"><?php bloginfo( 'description' ); ?></p>
</header>
bloginfo('name')vabloginfo('description')β sayt nomi va shiorini (Sozlamalar > Umumiy'da belgilanadi) chop etadi.home_url('/')β bosh sahifa URL'ini qaytaradi (chop etmaydi), shuning uchunechokerak.esc_url()β URL'ni xavfsiz holatga keltiradi (zararli belgilarni tozalaydi). Chiqishni doim escape qilish β WordPress'ning oltin qoidasi (27-bob).
Yechim β 8
birinchi-block-tema/style.css:
/*
Theme Name: Birinchi Block Tema
Author: Oqil Imomnazarov
Description: Minimal block tema.
Version: 1.0.0
Text Domain: birinchi-block-tema
*/
birinchi-block-tema/templates/index.html:
<!-- wp:heading {"level":1} -->
<h1 class="wp-block-heading">Salom, block tema!</h1>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Bu eng kichik block tema. PHP shablon yo'q.</p>
<!-- /wp:paragraph -->
Asosiy farq: shablon templates/ papkasida .html fayl bo'ladi va ichida block markup (<!-- wp:... -->) turadi. Aktivlashgach, admin panelda "Tahrirlovchi" (Site Editor) menyusi paydo bo'ladi.
Yechim β 9
functions.php:
<?php
/**
* @package Mening_Temam
*/
add_action( 'wp_enqueue_scripts', 'mening_temam_assets' );
function mening_temam_assets() {
wp_enqueue_style(
'mening-temam-style',
get_stylesheet_uri(), // style.css ga to'g'ri yo'l
array(), // bog'liqliklar yo'q
wp_get_theme()->get( 'Version' ) // kesh-buzish uchun versiya
);
}
get_stylesheet_uri()β joriy temaningstyle.cssfayliga to'liq URL qaytaradi (yo'lni qo'lda yozishdan ko'ra ishonchli).wp_get_theme()->get('Version')βstyle.cssheader'idagiVersionqiymatini oladi; versiyani yangilasangiz, brauzer eski CSS'ni keshdan emas, yangisidan oladi.- Bu β uslublarni ulashning to'g'ri yo'li.
index.phpga qo'lda<link rel="stylesheet">yozish noto'g'ri (10-bobda batafsil).
Yechim β 10
404.php:
<?php
/**
* @package Mening_Temam
*/
get_header();
?>
<main>
<h1>Sahifa topilmadi (404)</h1>
<p>Kechirasiz, siz qidirgan sahifa mavjud emas.</p>
<p><a href="<?php echo esc_url( home_url( '/' ) ); ?>">Bosh sahifaga qaytish</a></p>
<?php get_search_form(); ?>
</main>
<?php
get_footer();
get_header()/get_footer()βheader.phpvafooter.phpni chaqiradi (08-bob). Bu fragment to'liq tema kontekstida ishlaydi; alohidaphp -luchun u to'liq fayl sifatida tekshiriladi.get_search_form()β WordPress'ning standart qidiruv shaklini chiqaradi.- WordPress mavjud bo'lmagan URL'larni avtomatik
404.phpga yo'naltiradi (template hierarchy, 03-bob).
Yechim β 11
Tema ko'rinmasa, shu tartibda tekshiring:
style.cssmavjudmi va to'g'ri joydami? U to'g'ridan-to'g'ri tema papkasining ichida (themes/mening-temam/style.css) bo'lsin, ichki qo'shimcha papkada emas.Theme Nameqatori bormi?style.cssning eng boshida,/* ... */izoh ichidaTheme Name: ...turishi shart. Bu yagona majburiy maydon.- Header sintaksisi to'g'rimi? Izoh
/*bilan ochilib*/bilan yopilgan bo'lsin; maydon nomidan keyin ikki nuqta (:) bo'lsin. - Papka nomi va kodlash. Papka nomida bo'shliq/kirill bo'lmasin; fayl UTF-8 da saqlangan bo'lsin.
wp theme listbilan tekshiring β tema umuman aniqlanmasa, u ro'yxatda chiqmaydi; chiqsa-yu, faollashmasa β boshqa muammo (masalanindex.phpda PHP xato).
Yechim β 12
wp theme list chiqishida status ustuni temaning holatini ko'rsatadi:
activeβ hozir saytda ishlatilayotgan yagona tema. Bir vaqtda faqat bitta temaactivebo'ladi (child tema bundan mustasno emas; u bilan parent juftligi haqida 29-bob).inactiveβ o'rnatilgan, lekin ishlatilmayotgan tema. U fayl tizimida bor, istalgan paytda faollashtirish mumkin.
Parallel ishlaganda (bir nechta tema sinab ko'rilayotganda bir sayt ustida) temani aktivlashtirmaslik ma'qul, chunki aktiv tema bitta β agar bir necha jarayon navbatma-navbat boshqa-boshqa temani faollashtirsa, "poyga" (race) yuzaga keladi va kim oxirgi aktivlashtirsa, o'sha qoladi. Shuning uchun sinov temalarini inactive qoldirib, style.css/index.php ni php -l va wp theme list (read-only) bilan tekshirish xavfsizroq.
Yechim β 13
Minimal tema ishlaydi, lekin real saytda quyidagilar yetishmaydi:
header.php/footer.phpβ sahifa boshi/oxirini har shablonda takrorlamaslik uchun.get_header()/get_footer()bilan modulli bo'ladi (08-bob).functions.phpβ uslub/skriptlarniwp_enqueue_*bilan ulash, menyu va tema imkoniyatlarini (add_theme_support) yoqish (09β10-bob).- Maxsus shablonlar (
single.php,page.php,archive.php,404.php) β yozuv, sahifa, arxiv va xato sahifalarini alohida ko'rinishda chiqarish (07-bob). Faqatindex.phpbilan hamma narsa bir xil ko'rinadi. - Navigatsiya menyusi β
register_nav_menus+wp_nav_menubilan boshqariladigan menyu (11-bob). screenshot.pngβ admin paneldagi tema kartochkasida ko'rinadigan oldindan ko'rinish rasmi (majburiy emas, lekin professional).
Qisqasi: minimal tema "ishlash" uchun yetarli, lekin boshqariladigan, modulli va professional sayt uchun yuqoridagilar zarur. Kitobning qolgan boblari aynan shularni qo'shadi.
β¬ οΈ Oldingi: 01 β WordPress va tema nima Β· π README Β· Keyingi: 03 β So'rov hayoti va template hierarchy β‘οΈ