WordPress especifica la capçalera i el peu de l'article per carregar codi PHP/JavaScript/CSS

Si utilitzeu WordPress per crear un lloc web, com podeu carregar codi PHP/JavaScript/CSS a la capçalera i al peu de pàgina d'una publicació o pàgina específica?

Podem utilitzar els potents camps personalitzats de WordPress per implementar diferents pàgines de JavaScript per a una publicació o càrrega de pàgina determinada.

Aquest article us mostrarà: Com utilitzar camps personalitzats en fitxers de WordPress, JavaScript personalitzats o CSS?

Si ho enteneu, els valors dels camps personalitzats no són tan senzills com els fitxers JavaScript i CSS.

Com afegir camps personalitzats a WordPress?

Normalment, obriu el fitxer header.php al vostre tema de WordPress i assegureu-vos que s'hagi afegit el codi següent: ▼

<?php wp_head(); ?>

Com personalitzar la capçalera a WordPressUn enfocament més recomanable: via functions.php o implementació de complements de codi

Modifica directament el tema header.php 或 footer.php El codi es perd fàcilment després que el tema s'actualitzi.

Pràctiques més segures i estandarditzadesAfegiu el codi següent al tema actual. functions.php Al fitxer, o utilitzant Fragments de codi Aquests tipus de complements s'utilitzen per gestionar codi personalitzat.

Per evitar modificar els fitxers principals del tema, fem servir... functions.php Codi de muntatge.

Pas 1: Afegir codi funcional

Si us plau, afegiu el següent codi PHP al vostre tema. functions.php Al final del document, o mitjançant Fragments de codi Crea un nou fragment de codi al complement i enganxa'l:

<?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;
        }
    }
}

(Nota: Si) functions.php El fitxer ja té un fitxer al final. ?>Si us plau, no ho afegiu repetidament; només cal que inseriu el codi anterior directament. ?> (Anteriorment)

Pas 2: Utilitzeu-ho a la pàgina d'edició de l'article

1. Accediu al backend de WordPress per editar una entrada o pàgina.
2. Troba-ho a la pàgina de l'editor "Camps personalitzats" (Si no veieu el metabox, feu clic a "Opcions de visualització" a la cantonada superior dreta o a "Preferències" a l'editor de Gutenberger i assegureu-vos que "Camps personalitzats" estigui marcat).
3. feu clic Introdueix nou:
   • Nom Importació:head (Per al codi de capçalera) o foot (Per al seu ús al codi inferior).
   • Valor Quadre d'entrada: Enganxa el codi HTML, CSS o JS que has d'afegir.
4. feu clic Afegeix un camp personalitzat I actualitzar/publicar articles.

• L'actualització de l'article us permetrà codificar el tema i introduir valors per a aquests camps personalitzats.

Com que només emeteu el codi que s'ha de carregar a "valor", heu d'introduir el següent codi similar a "valor" ▼

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

o ▼

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

per generar el codi anterior.

Els avantatges d'aquesta modificació:

1. 更安全: No modifiqueu directament header.php 和 footer.phpAixò evita que el codi se sobreescrigui quan s'actualitza el tema.
2. Més estandarditzat: Es recomana l'ús de WordPress add_action Codi de muntatge basat en ganxos.
3. Lògica claraEncapsular la funcionalitat dins de les funcions facilita el manteniment posterior.