WordPress spécifie que l'en-tête et le pied de page de l'article chargent du code PHP/JavaScript/CSS

Si vous utilisezSite web Wordpress, vous devez spécifier un certain article ou une certaine page dans WordPress pour charger le code PHP/JavaScript/CSS dans l'en-tête et le pied de page. Comment y parvenir ?

Nous pouvons utiliser les puissants champs personnalisés de WordPress pour implémenter différentes pages JavaScript pour une publication ou un chargement de page donné.

Cet article va vous montrer : Comment utiliser des champs personnalisés sur WordPress, des fichiers JavaScript ou CSS personnalisés ?

Si vous pouvez comprendre, les valeurs de champ personnalisées ne sont pas aussi simples que les fichiers JavaScript et CSS.

Comment ajouter des champs personnalisés dans WordPress ?

En règle générale, ouvrez le fichier header.php de votre thème WordPress et assurez-vous que le code suivant a été ajouté : ▼

<?php wp_head(); ?>

Comment personnaliser l'en-tête dans WordPressUne approche plus recommandée : via functions.php ou implémentation de plugin de code

Modifier directement le thème header.php 或 footer.php Le code se perd facilement après la mise à jour du thème.

Des pratiques plus sûres et plus standardiséesAjoutez le code suivant au thème actuel. functions.php Dans le fichier, ou en utilisant Extraits de code Ces types de plugins servent à gérer le code personnalisé.

Pour éviter de modifier les fichiers principaux du thème, nous utilisons... functions.php Code de montage.

Étape 1 : Ajouter le code fonctionnel

Veuillez ajouter le code PHP suivant à votre thème. functions.php À la fin du fichier, ou via Extraits de code Créez un nouveau fragment de code dans le plugin et collez-le :

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

(Remarque : Si) functions.php Le fichier contient déjà un fichier à la fin. ?>Veuillez ne pas l'ajouter plusieurs fois ; insérez directement le code ci-dessus. ?> (Précédemment)

Étape 2 : Utiliser dans la page d’édition de l’article

1. Accédez à l'interface d'administration WordPress pour modifier un article ou une page.
2. Vous le trouverez sur la page de l'éditeur. « Champs personnalisés » (Si vous ne voyez pas la boîte méta, veuillez cliquer sur « Options d’affichage » dans le coin supérieur droit ou sur « Préférences » dans l’éditeur Gutenberger et assurez-vous que « Champs personnalisés » est coché).
3. 点击 Saisissez une nouvelle entrée:
   • Nom ：head (Pour le code d'en-tête) ou foot (À utiliser dans le code ci-dessous).
   • Valeur Zone de saisie : Collez le code HTML, CSS ou JS que vous souhaitez ajouter.
4. 点击 Ajouter un champ personnalisé Et mettre à jour/publier des articles.

• La mise à jour de l'article vous permettra de coder le thème et de saisir des valeurs pour ces champs personnalisés.

Puisque vous ne sortez que le code qui doit être chargé dans "valeur", vous devez entrer le code similaire suivant dans "valeur" ▼

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

ou ▼

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

pour afficher le code ci-dessus.

Les avantages de cette modification :

1. plus sûrNe pas modifier directement header.php et footer.phpCela empêche le code d'être écrasé lors de la mise à jour du thème.
2. Plus standardiséUtilisation recommandée de WordPress add_action Code de montage basé sur un crochet.
3. Logique claireL'encapsulation des fonctionnalités au sein de fonctions facilite la maintenance ultérieure.