Tinukoy ng WordPress na ang header at footer ng artikulo ay naglo-load ng PHP/JavaScript/CSS code

Kung gumagamitWebsite ng WordPress, kailangan mong tukuyin ang isang partikular na artikulo o pahina sa WordPress upang mai-load ang PHP/JavaScript/CSS code sa header at footer. Paano ito makakamit?

Magagamit namin ang makapangyarihang mga custom na field ng WordPress upang ipatupad ang iba't ibang mga pahina ng JavaScript para sa isang naibigay na post o pag-load ng pahina.

Ipapakita sa iyo ng artikulong ito: Paano gumamit ng mga custom na field sa WordPress, custom na JavaScript o CSS file?

Kung naiintindihan mo, ang mga custom na halaga ng field ay hindi kasing simple ng mga file ng JavaScript at CSS.

Paano magdagdag ng mga custom na field sa WordPress?

Karaniwan, buksan ang header.php file ng iyong WordPress theme at tiyaking naidagdag na ang sumusunod na code: ▼

<?php wp_head(); ?>

Paano I-customize ang Header sa WordPressIsang mas inirerekomendang pamamaraan: sa pamamagitan ng functions.php o pagpapatupad ng code plugin

Direktang baguhin ang tema header.php O footer.php Madaling mawala ang code pagkatapos ma-update ang tema.

Mas ligtas at mas pamantayang mga kasanayanIdagdag ang sumusunod na code sa kasalukuyang tema. functions.php Sa file, o gamit ang Mga code snippet Ang mga ganitong uri ng plugin ay ginagamit upang pamahalaan ang pasadyang code.

Para maiwasan ang pagbabago sa mga pangunahing file ng tema, ginagamit namin... functions.php Kodigo ng pag-mount.

Hakbang 1: Magdagdag ng functional code

Pakidagdag ang sumusunod na PHP code sa iyong tema. functions.php Sa dulo ng file, o sa pamamagitan ng Mga code snippet Gumawa ng bagong snippet ng code sa plugin at i-paste ito:

<?php
/**
 * 指定文章/页面加载 Head 自定义字段代码
 */
add_action('wp_head', 'add_custom_head_code');

function add_custom_head_code() {
    // 只在文章详情页和独立页面执行
    if (is_single() || is_page()) {
        global $post;

        // 获取自定义字段 'head' 的值
        $head = get_post_meta($post->ID, 'head', true);

        // 如果有值,则输出到 head
        if (!empty($head)) {
            echo $head;
        }
    }
}

/**
 * 指定文章/页面加载 Foot 自定义字段代码
 */
add_action('wp_footer', 'add_custom_foot_code', 99);

function add_custom_foot_code() {
    // 只在文章详情页和独立页面执行
    if (is_single() || is_page()) {
        global $post;

        // 获取自定义字段 'foot' 的值
        $foot = get_post_meta($post->ID, 'foot', true);

        // 如果有值,则输出到 footer
        if (!empty($foot)) {
            echo $foot;
        }
    }
}

(Tandaan: Kung) functions.php May file na ang file sa dulo. ?>Huwag itong idagdag nang paulit-ulit; ilagay lamang nang direkta ang code sa itaas. ?> (Dati)

Hakbang 2: Gamitin sa pahina ng pag-eedit ng artikulo

  1. I-access ang WordPress backend para mag-edit ng post o pahina.
  2. Hanapin ito sa pahina ng editor "Mga Pasadyang Patlang" (Kung hindi mo makita ang metabox, paki-click ang "Display Options" sa kanang sulok sa itaas o ang "Preferences" sa Gutenberger Editor at siguraduhing naka-check ang "Custom Fields").
  3. Mag-click Maglagay ng bago:
    • Pangalan import:head (Para sa header code) o foot (Para gamitin sa code sa ibaba).
    • Halaga Kahon ng input: I-paste ang HTML, CSS, o JS code na kailangan mong idagdag.
  4. Mag-click Magdagdag ng pasadyang field At mag-update/maglathala ng mga artikulo.

Tinutukoy ng WordPress ang header at footer ng artikulo upang magdagdag ng PHP/JavaScrip/CSS code

  • Ang pag-update ng artikulo ay magbibigay-daan sa iyong i-code ang tema at ipasok ang mga halaga para sa mga custom na field na ito.

Dahil na-output mo lang ang code na kailangang i-load sa "value", kailangan mong ilagay ang sumusunod na katulad na code sa "value" ▼

<script type="text/javascript">...</script>

o ▼

<style type="text/css">...</style>

upang i-output ang code sa itaas.

Mga bentahe ng pagbabagong ito:

  1. mas ligtasHuwag baguhin nang direkta header.php At footer.phpPinipigilan nito ang code na ma-overwrite kapag na-update ang tema.
  2. Mas pamantayanInirerekomenda ang paggamit ng WordPress add_action Kodigo ng pagkakabit na nakabatay sa kawit.
  3. Malinaw na lohikaAng pagsasama-sama ng mga function sa loob ng mga function ay ginagawang mas madali ang kasunod na pagpapanatili.

发表 评论

Ang iyong email address ay hindi maipa-publish. 必填 项 已 用 * Tatak

Artikulo Direktoryo
Mag-scroll sa Tuktok