Skip to content
Themes

Hindi Nagloload ang Styles ng WordPress Child Theme

Hindi nagloload ang style.css ng iyong child theme dahil hindi ito ini-enqueue ng WordPress para sa iyo. Kailangang manu-manong irehistro ang stylesheet ng child theme sa

Nailathala

Hindi nagloload ang style.css ng iyong child theme dahil hindi ito ini-enqueue ng WordPress para sa iyo. Kailangang manu-manong irehistro ang stylesheet ng child theme sa loob ng functions.php ng child theme, at ang enqueue na iyon ay halos laging may isa sa dalawang bug: wala talaga ito, o nagloload ito nang hindi idineklara ang parent stylesheet bilang dependency, kaya napupunta ang iyong mga rule sa maling lugar sa cascade at nao-override. Ayusin ang enqueue at babalik ang styles. Ang lumang @import trick na malamang kinopya mo sa isang 2013 tutorial ay ang maling solusyon.

Bakit ito nangyayari

Ang isang klasikong child theme ay binubuo ng dalawang kinakailangang file: isang style.css na may header block na nagpapangalan sa parent, at isang functions.php. Ang Template: line sa header ang nagsasabi sa WordPress kung aling parent ang pagmumulan ng templates na mamanahin. Iyon lang ang tanging bagay na ginagawa ng WordPress nang automatic. Binabasa nito ang header, ikinakabit ang template fallback, at tumitigil na. Hindi nito kailanman ini-enqueue ang iyong child style.css sa front end.

Ang parent theme naman ay ini-enqueue ang sarili nitong stylesheet mula sa sarili nitong functions.php, na naka-hook sa wp_enqueue_scripts. Ang iyong child functions.php ang unang tumatakbo, tapos ang sa parent, tapos saka lahat ng nasa hook na iyon ay pumuputok. Kung hindi kailanman tinatawag ng iyong child ang wp_enqueue_style para sa sarili nitong file, hindi kailanman hihilingin ng browser ito. Mukhang raw parent theme lang ang page dahil iyon nga mismo ang totoo.

Mas mahirap mahalata ang pangalawang failure. Naka-enqueue mo ang child stylesheet, nagloload ito, pero walang epekto ang iyong mga override. Isa itong load-order problem. Kapag dalawang rule ang may pantay na specificity, ang nagloload nang huli ang nananalo. Kung nagloload ang iyong child CSS bago ang sa parent, ang parent ang mananalo sa bawat tabla. Ang dependency array sa wp_enqueue_style ang pumipilit sa order.

May isa pang bagay na madalas namamali ang mga tao: ang get_template_directory_uri() ay tumuturo sa folder ng parent theme, at ang get_stylesheet_directory_uri() ay tumuturo sa folder ng active (child) theme. Palitan mo ang mga ito at ma-enqueue mo ang style.css ng parent nang pangalawang beses at hindi kailanman mahawakan ang sa child.

Ang solusyon, ayon sa pagkakasunod-sunod

Una, kumpirmahin kung ano talaga ang nagloload. Buksan ang sirang page, tingnan ang source, at hanapin ang pangalan ng folder ng iyong child theme. Ini-render ng WordPress ang mga naka-enqueue na style bilang <link id="handle-css" href="..."> — ang id ay ang iyong handle kasama ang -css. Kung wala talaga ang iyong child style.css sa <head>, hindi tumatakbo ang enqueue. Kung nandoon ito pero hindi umeepekto ang styles, isa itong dependency/order problem. Ang isang check na ito ang magsasabi sa iyo kung alin sa dalawang bug ang mayroon ka.

Pangalawa, hanapin ang totoong handle ng parent. Karamihan ng mga modernong theme (Astra, GeneratePress, ang mga Twenty-* theme) ay ini-enqueue na ang sarili nilang stylesheet sa ilalim ng isang tiyak na handle — astra-theme-css, generate-style-css, twenty-twenty-four-style, at iba pa. Kailangan mo ang eksaktong string na iyon. I-grep ang parent theme, o basahin ito mula sa <link id="...-css"> sa view source (tanggalin ang huling -css).

Pangatlo, isulat ang enqueue. Para sa karaniwang kaso kung saan nilo-load na ng parent ang sarili nitong stylesheet, hindi mo na muling ie-enqueue ang parent. Ie-enqueue mo lang ang child, at ilista ang handle ng parent bilang dependency para magloload ang sa iyo pagkatapos noon:

<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 20 );

function child_enqueue_styles() {
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'astra-theme-css' ), // <-- the parent's REAL handle
        wp_get_theme()->get( 'Version' )
    );
}

Kung hindi ini-enqueue ng parent theme ang sarili nitong stylesheet (may ilang mas lumang o minimal na theme na umaasa sa @import), i-enqueue kapwa ang dalawa, at gawing depende sa parent ang child:

<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles' );

function child_enqueue_styles() {
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' ),
        wp_get_theme()->get( 'Version' )
    );
}

Ang wp_get_theme()->get('Version') argument ang iyong cache-buster. Itaas ang Version: line sa header ng style.css ng child at muling kukunin ng browser ito. Laktawan mo ito at mag-e-edit ka ng CSS at susumpa na walang nagbabago gayong naka-cache lang pala.

Kung may syntax error ang functions.php, tahimik na namamatay ang buong file at wala sa iyong mga enqueue ang tatakbo — mukhang eksaktong “hindi nagloload ang styles” ang ipinapakita nito. Buksan ang WP_DEBUG, o i-paste ang iyong debug.log sa aming WordPress error log decoder para mabilis matukoy ang fatal.

Ano ang hindi dapat gawin

Huwag gamitin ang @import. Ang payo noong panahon ng Codex ay ilagay ang @import url("../parenttheme/style.css"); sa itaas ng child style.css. Gumagana ito, pero mabagal — hindi masisimulan ng browser ang pag-download ng parent CSS hangga’t hindi nito na-parse ang child CSS, kaya ang dalawang request ay tumatakbo nang serye sa halip na parallel. Matagal nang hindi nirerekomenda ng sariling handbook ng WordPress ito. Kung sinabi sa iyo ng iyong tutorial na gawin ito, ang tutorial na iyon ang dahilan kung bakit magulo ang iyong styles.

Huwag i-hardcode ang handle na 'parent-style' at i-enqueue nang bulag ang parent file. Ito mismo ang ginagawa ng sikat na Codex snippet, at mali ito para sa anumang theme na nakarehistro na ang stylesheet nito sa ilalim ng ibang handle. Napupunta ka sa pag-load ng parent CSS nang dalawang beses at ang iyong dependency ay tumuturo sa isang handle na maaaring wala.

Huwag tawagin ang wp_enqueue_style sa top level ng functions.php. Kailangan itong tumakbo sa loob ng isang function na naka-hook sa wp_enqueue_scripts. Kapag masyadong maaga tinawag, wala itong ginagawa.

Huwag kopyahin ang buong functions.php ng parent papunta sa child. Parehong nagloload sila; ang sa child ang unang tumatakbo. Ang pagkopya nito ay nagdudulot ng duplicate na function declarations at isang fatal error.

Isang caveat: ang lahat ng ito ay tungkol sa classic (PHP-template) na theme. Kung block theme ang iyong parent, ang styling ay karamihang dumadaan sa theme.json at sa Site Editor, at iba ang gawi ng mga style.css override — hindi ko masyadong pagkakatiwalaan iyon at direktang susubukan sa halip na ipagpalagay na ito ang enqueue na solusyon.

Naipit pa rin?

Kumpirmahin na ang Template: line sa header ng style.css ng child ay eksaktong tumutugma sa pangalan ng folder ng parent, case-sensitive — hindi sa display name ng parent. Tapos muling tingnan ang view source: nandoon ang handle, nagloload pagkatapos ng parent, naitaas ang version query string. Kung nandoon ang <link>, huling nagloload, at hindi pa rin umeepekto ang CSS, hindi na ito enqueue problem — ito ay specificity, at ang solusyon ay lumilipat na papunta sa mismong mga rule.