WordPress especifica que el encabezado y el pie de página del artículo cargan código PHP/JavaScript/CSS

Si usasitio web de wordpress, necesita especificar un determinado artículo o página en WordPress para cargar el código PHP/JavaScript/CSS en el encabezado y pie de página.¿Cómo lograr esto?

Podemos usar los poderosos campos personalizados de WordPress para implementar diferentes páginas de JavaScript para una publicación o carga de página determinada.

Este artículo le mostrará: ¿Cómo usar campos personalizados en WordPress, JavaScript personalizado o archivos CSS?

Si puede comprender, los valores de los campos personalizados no son tan simples como los archivos JavaScript y CSS.

¿Cómo agregar campos personalizados en WordPress?

Normalmente, abre el archivo header.php de tu tema de WordPress y asegúrate de que se haya añadido el siguiente código: ▼

<?php wp_head(); ?>

Cómo personalizar el encabezado en WordPressUn enfoque más recomendado: vía functions.php o implementación de complemento de código

Modificar directamente el tema header.php 或 footer.php El código se pierde fácilmente después de actualizar el tema.

Prácticas más seguras y estandarizadasAgregue el siguiente código al tema actual. functions.php En el archivo, o usando Fragmentos de código Este tipo de complementos se utilizan para gestionar código personalizado.

Para evitar modificar los archivos principales del tema, utilizamos... functions.php Código de montaje.

Paso 1: Añadir código funcional

Por favor, añade el siguiente código PHP a tu tema. functions.php Al final del documento, o a través de Fragmentos de código Crea un nuevo fragmento de código en el plugin y pégalo:

<?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 archivo ya tiene un archivo al final. ?>Por favor, no lo añada repetidamente; simplemente inserte el código anterior directamente. ?> (Previamente)

Paso 2: Utilizar en la página de edición del artículo

1. Acceda al panel de administración de WordPress para editar una entrada o página.
2. Encuéntralo en la página del editor. "Campos personalizados" (Si no ve el cuadro de metadatos, haga clic en "Opciones de visualización" en la esquina superior derecha o en "Preferencias" en el editor Gutenberger y asegúrese de que la opción "Campos personalizados" esté marcada).
3. 点击 Ingrese nuevo:
   • Nombre 输入 ：head (Para el código de encabezado) o foot (Para usar en el código inferior).
   • Valor Cuadro de entrada: Pegue el código HTML, CSS o JS que necesite agregar.
4. 点击 Agregar un campo personalizado Y actualizar/publicar artículos.

• Actualizar el artículo le permitirá codificar el tema e ingresar valores para estos campos personalizados.

Dado que solo genera el código que debe cargarse en "valor", debe ingresar el siguiente código similar en "valor" ▼

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

o ▼

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

para generar el código anterior.

Las ventajas de esta modificación:

1. mas seguro: No modificar directamente header.php 和 footer.phpEsto evita que el código se sobrescriba cuando se actualiza el tema.
2. Más estandarizadoSe recomienda usar WordPress add_action Código de montaje basado en ganchos.
3. Lógica claraEncapsular la funcionalidad dentro de otras funciones facilita el mantenimiento posterior.