WordPress specifica che l'intestazione e il piè di pagina dell'articolo caricano il codice PHP/JavaScript/CSS

Se usiSito Web WordPress, è necessario specificare un determinato articolo o pagina in WordPress per caricare il codice PHP/JavaScript/CSS nell'intestazione e nel piè di pagina.Come ottenere questo risultato?

Possiamo utilizzare i potenti campi personalizzati di WordPress per implementare diverse pagine JavaScript per un determinato post o caricamento di pagina.

Questo articolo ti mostrerà: Come utilizzare campi personalizzati su WordPress, file JavaScript o CSS personalizzati?

Se riesci a capire, i valori dei campi personalizzati non sono semplici come i file JavaScript e CSS.

Come aggiungere campi personalizzati in WordPress?

In genere, apri il file header.php del tuo tema WordPress e assicurati che sia stato aggiunto il seguente codice: ▼

<?php wp_head(); ?>

Come personalizzare l'intestazione in WordPressUn approccio più consigliato: tramite functions.php o implementazione del plugin di codice

Modifica direttamente il tema header.phpfooter.php Il codice si perde facilmente dopo l'aggiornamento del tema.

Pratiche più sicure e standardizzateAggiungi il seguente codice al tema corrente. functions.php Nel file, o utilizzando Frammenti di codice Questi tipi di plugin vengono utilizzati per gestire il codice personalizzato.

Per evitare di modificare i file principali del tema, utilizziamo... functions.php Codice di montaggio.

Passaggio 1: Aggiungere il codice funzionale

Aggiungi il seguente codice PHP al tuo tema. functions.php Alla fine del file, o tramite Frammenti di codice Crea un nuovo snippet di codice nel plugin e incollalo:

<?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 Il file ha già un file alla fine. ?>Si prega di non aggiungerlo ripetutamente; inserire direttamente il codice sopra. ?> (Precedentemente)

Passaggio 2: Utilizzare nella pagina di modifica dell'articolo

  1. Accedi al pannello di amministrazione di WordPress per modificare un articolo o una pagina.
  2. Lo trovi nella pagina dell'editor. "Campi personalizzati" (Se non visualizzi il metabox, fai clic su "Opzioni di visualizzazione" nell'angolo in alto a destra oppure su "Preferenze" nell'editor Gutenberger e assicurati che l'opzione "Campi personalizzati" sia selezionata).
  3. fare clic Inserisci nuovo:
    • Nome inserisci:head (Per il codice dell'intestazione) o foot (Da utilizzare nel codice sottostante).
    • Valore Casella di input: incolla il codice HTML, CSS o JS che devi aggiungere.
  4. fare clic Aggiungi un campo personalizzato E aggiornare/pubblicare articoli.

WordPress specifica l'intestazione e il piè di pagina dell'articolo per aggiungere il codice PHP/JavaScrip/CSS

  • L'aggiornamento dell'articolo ti consentirà di codificare il tema e inserire i valori per questi campi personalizzati.

Poiché emetti solo il codice che deve essere caricato in "valore", devi inserire il seguente codice simile in "valore" ▼

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

o ▼

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

per produrre il codice sopra.

I vantaggi di questa modifica:

  1. più sicuro: Non modificare direttamente header.phpfooter.phpCiò impedisce che il codice venga sovrascritto quando il tema viene aggiornato.
  2. Più standardizzato: Si consiglia l'utilizzo di WordPress add_action Codice di montaggio basato su ganci.
  3. Logica chiaraIncapsulare le funzionalità all'interno delle funzioni semplifica la successiva manutenzione.

发表 评论

Il tuo indirizzo email non verrà pubblicato. 必填 项 已 用 * 标注

Directory articoli
Scorrere fino a Top