WordPress specificeert dat de kop- en voettekst van het artikel PHP/JavaScript/CSS-code laden

Als je WordPress gebruikt om een ​​website te bouwen, hoe kun je dan PHP/JavaScript/CSS-code in de header en footer van een specifiek bericht of een specifieke pagina laden?

We kunnen de krachtige aangepaste velden van WordPress gebruiken om verschillende JavaScript-pagina's te implementeren voor een bepaald bericht of een bepaalde pagina.

Dit artikel laat je zien: Hoe gebruik je aangepaste velden in WordPress, aangepaste JavaScript- of CSS-bestanden?

Als u het begrijpt, zijn aangepaste veldwaarden niet zo eenvoudig als JavaScript- en CSS-bestanden.

Hoe aangepaste velden toevoegen in WordPress?

Open het header.php-bestand van je WordPress-thema en zorg ervoor dat de volgende code is toegevoegd: ▼

<?php wp_head(); ?>

Koptekst aanpassen in WordPressEen meer aanbevolen aanpak: via functions.php of implementatie van een code-plugin

Het thema direct aanpassen header.php 或 footer.php De code gaat gemakkelijk verloren na een thema-update.

Veiligere en meer gestandaardiseerde werkwijzenVoeg de volgende code toe aan het huidige thema. functions.php In het bestand, of door gebruik te maken van code Snippets Dit soort plug-ins wordt gebruikt om aangepaste code te beheren.

Om te voorkomen dat we de kernbestanden van het thema aanpassen, gebruiken we... functions.php Mountcode.

Stap 1: Voeg functionele code toe

Voeg de volgende PHP-code toe aan je thema. functions.php Aan het einde van het document, of via code Snippets Maak een nieuw codefragment aan in de plugin en plak het daarin:

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

(Opmerking: Indien) functions.php Het bestand bevat al een bestand aan het einde. ?>Voeg de code niet herhaaldelijk toe; plak de bovenstaande code direct in. ?> (Eerder)

Stap 2: Gebruik dit op de pagina voor het bewerken van artikelen.

1. Ga naar de WordPress-backend om een ​​bericht of pagina te bewerken.
2. Je vindt het op de editorpagina. "Aangepaste velden" (Als u het metabox niet ziet, klik dan op 'Weergaveopties' in de rechterbovenhoek of op 'Voorkeuren' in de Gutenberger-editor en zorg ervoor dat 'Aangepaste velden' is aangevinkt).
3. Klik op Voer een nieuwe in:
   • Naam 输入:head (Voor headercode) of foot (Voor gebruik in de onderste code).
   • Waarde Invoerveld: Plak hier de HTML-, CSS- of JS-code die u wilt toevoegen.
4. Klik op Een aangepast veld toevoegen En artikelen bijwerken/publiceren.

• Door het artikel bij te werken, kunt u het thema coderen en waarden invoeren voor deze aangepaste velden.

Aangezien u alleen de code uitvoert die moet worden geladen in "value", moet u de volgende soortgelijke code invoeren in "value" ▼

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

of

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

om de bovenstaande code uit te voeren.

De voordelen van deze aanpassing:

1. veiligerNiet direct wijzigen header.php 和 footer.phpDit voorkomt dat de code wordt overschreven wanneer het thema wordt bijgewerkt.
2. Meer gestandaardiseerdHet gebruik van WordPress wordt aanbevolen. add_action Bevestigingscode op basis van haken.
3. duidelijke logicaDoor functionaliteit in functies te verpakken, wordt het latere onderhoud eenvoudiger.