WordPress especifica o cabeçalho e o rodapé do artigo para carregar o código PHP/JavaScript/CSS

Se estiver usandoSite WordPress, você precisa especificar um determinado artigo ou página no WordPress para carregar o código PHP/JavaScript/CSS no cabeçalho e rodapé.

Podemos usar os poderosos campos personalizados do WordPress para implementar diferentes páginas JavaScript para um determinado post ou carregamento de página.

Este artigo mostrará: Como usar campos personalizados no WordPress, arquivos JavaScript ou CSS personalizados?

Se você puder entender, os valores de campos personalizados não são tão simples quanto os arquivos JavaScript e CSS.

Como adicionar campos personalizados no WordPress?

Normalmente, abra o arquivo header.php do seu tema WordPress e verifique se o seguinte código foi adicionado: ▼

<?php wp_head(); ?>

Como personalizar o cabeçalho no WordPressUma abordagem mais recomendada: via functions.php ou implementação de plugin de código

Modificar o tema diretamente header.php 或 footer.php O código se perde facilmente após a atualização do tema.

Práticas mais seguras e padronizadasAdicione o seguinte código ao tema atual. functions.php No arquivo, ou usando trechos de código Esses tipos de plugins são usados ​​para gerenciar código personalizado.

Para evitar modificar os arquivos principais do tema, usamos... functions.php Código de montagem.

Passo 1: Adicionar código funcional

Por favor, adicione o seguinte código PHP ao seu tema. functions.php Ao final do documento, ou via trechos de código Crie um novo trecho de código no plugin e cole-o:

<?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: Se) functions.php O arquivo já possui um arquivo no final. ?>Por favor, não adicione repetidamente; insira o código acima diretamente. ?> (Anteriormente)

Passo 2: Use na página de edição do artigo

1. Acesse o painel administrativo do WordPress para editar uma publicação ou página.
2. Encontre-o na página do editor. "Campos personalizados" (Caso não veja a caixa de metadados, clique em "Opções de Exibição" no canto superior direito ou em "Preferências" no Editor Gutenberger e certifique-se de que "Campos Personalizados" esteja selecionado).
3. 点击 Digite novo:
   • Nome Importar:head (Para código de cabeçalho) ou foot (Para uso no código inferior).
   • Valor Caixa de entrada: Cole o código HTML, CSS ou JS que você precisa adicionar.
4. 点击 Adicionar um campo personalizado E atualizar/publicar artigos.

• A atualização do artigo permitirá que você codifique o tema e insira valores para esses campos personalizados.

Uma vez que você produz apenas o código que precisa ser carregado em "valor", você precisa inserir o seguinte código semelhante em "valor" ▼

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

ou ▼

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

para gerar o código acima.

As vantagens desta modificação:

1. mais seguraNão modifique diretamente header.php 和 footer.phpIsso impede que o código seja sobrescrito quando o tema for atualizado.
2. Mais padronizadoRecomenda-se o uso do WordPress. add_action Código de montagem baseado em ganchos.
3. Lógica claraEncapsular a funcionalidade dentro de funções facilita a manutenção posterior.