WordPress は記事のヘッダーとフッターを指定して、PHP/JavaScript/CSS コードを読み込みます

使用する場合WordPressのウェブサイトヘッダーとフッターに PHP/JavaScript/CSS コードを読み込むには、WordPress で特定の記事またはページを指定する必要があります。

WordPress の強力なカスタム フィールドを使用して、特定の投稿またはページの読み込みに対してさまざまな JavaScript ページを実装できます。

この記事では、WordPress、カスタム JavaScript、または CSS ファイルでカスタム フィールドを使用する方法について説明します。

ご理解いただければ、カスタム フィールドの値は JavaScript や CSS ファイルほど単純ではありません。

WordPressにカスタムフィールドを追加する方法は?

通常、WordPressテーマのheader.phpファイルを開き、以下のコードが追加されていることを確認してください。▼

<?php wp_head(); ?>

WordPressでヘッダーをカスタマイズする方法より推奨されるアプローチ: functions.php またはコードプラグインの実装

テーマを直接変更する header.php 或 footer.php テーマをアップデートすると、コードが簡単に失われてしまう。

より安全で標準化された手法現在のテーマに以下のコードを追加してください。 functions.php ファイル内、または コードスニペット これらのタイプのプラグインは、カスタムコードを管理するために使用されます。

コアテーマファイルを変更しないようにするために、私たちは... functions.php マウントコード。

ステップ1：機能コードを追加する

以下のPHPコードをテーマに追加してください。 functions.php ファイルの末尾、または コードスニペット プラグインに新しいコードスニペットを作成し、貼り付けてください。

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

（注：もし） functions.php ファイル末尾に既にファイルがあります。 ?>繰り返し追加しないでください。上記のコードを直接挿入してください。 ?> （以前）

ステップ2：記事編集ページで使用する

1. WordPressの管理画面にアクセスして、投稿やページを編集してください。
2. 編集者ページをご覧ください 「カスタムフィールド」 （メタボックスが表示されない場合は、右上隅の「表示オプション」をクリックするか、グーテンベルガーエディターの「設定」をクリックして、「カスタムフィールド」にチェックが入っていることを確認してください。）
3. クリック 新しい入力：
   • 名前 入力：head （ヘッダーコードの場合）または foot （下部のコードで使用してください。）
   • 価値 入力ボックス：追加したいHTML、CSS、またはJSコードを貼り付けてください。
4. クリック カスタムフィールドを追加する そして記事を更新・公開する。

• 記事を更新すると、テーマをコーディングし、これらのカスタム フィールドに値を入力できるようになります。

「値」にはロードする必要のあるコードのみを出力するので、「値」には以下のようなコードを入力する必要があります▼

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

または ▼

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

上記のコードを出力します。

この変更の利点：

1. より安全直接変更しないでください header.php と footer.phpこれにより、テーマが更新された際にコードが上書きされるのを防ぎます。
2. より標準化されたWordPressの使用を推奨します add_action フック式取り付けコード。
3. 明確な論理機能を関数内にカプセル化することで、その後のメンテナンスが容易になる。