Directory articoli
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.php 或 footer.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
- Accedi al pannello di amministrazione di WordPress per modificare un articolo o una pagina.
- 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).
- fare clic Inserisci nuovo:
- Nome inserisci:
head(Per il codice dell'intestazione) ofoot(Da utilizzare nel codice sottostante). - Valore Casella di input: incolla il codice HTML, CSS o JS che devi aggiungere.
- Nome inserisci:
- fare clic Aggiungi un campo personalizzato E aggiornare/pubblicare articoli.

- 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:
- più sicuro: Non modificare direttamente
header.php和footer.phpCiò impedisce che il codice venga sovrascritto quando il tema viene aggiornato. - Più standardizzato: Si consiglia l'utilizzo di WordPress
add_actionCodice di montaggio basato su ganci. - Logica chiaraIncapsulare le funzionalità all'interno delle funzioni semplifica la successiva manutenzione.
Speranza Chen Weiliang Blog ( https://www.chenweiliang.com/ ) ha condiviso "WordPress specifica le intestazioni e i piè di pagina degli articoli per caricare il codice PHP/JavaScript/CSS", che è utile per te.
Benvenuti a condividere il link di questo articolo:https://www.chenweiliang.com/cwl-2022.html
