@ WordPress

wp_head() wp_footer()

WordPress のファイルには、便利な PHP 関数がたくさん定義されています。テンプレートタグとして知られる一部の関数は、特に WordPress テーマ用に定義されているものです。また、主にプラグインの開発に用いるアクションフック・フィルターフックに関する関数(プラグイン API)もあります。あとは WordPress のコア機能の形成に使われます。

WordPress Codex : 関数リファレンス

wp_head() と wp_footer() は重要な関数です。

プラグインの動作に必要なソースコードはこの関数から出力されます。

wp_head() と wp_footer() があることを前提に開発されているプラグインが多くあり、記述していないとプラグインによっては動作しない場合があります。

wp_head()

説明

wp_head() は、wp_head アクションをスタートさせます。

使い方

テーマテンプレートファイル内の </head> タグ直前に記述します。

example.php

<?php wp_head() ?>
</head>

使用例

wp_head アクションを使って head 領域に jquery.bxslider.css を追加する例を以下に示します。

functions.php

add_action( 'wp_head', 'hook_css' );

function hook_css() { 
    $outputcss = "<link rel=\"stylesheet\" href=\"".get_template_directory_uri()."js/jquery.bxslider.css\">\n";
    echo $outputcss;
}

wp_head アクションを使って head 領域に jquery.bxslider.min.js を追加する例を以下に示します。

functions.php

add_action( 'wp_head', 'hook_javascript' );

function hook_javascript() {
    $outputjs = "<script src=".get_template_directory_uri()."js/jquery.bxslider.min.js> </script>\n";
    echo $outputjs;
}

wp_head() の出力内容をアクションフックで制御する

wp_head() はデフォルトでさまざまなソースコードを出力しますが、テーマを開発する際に、このソースコードが邪魔になることがあります。

functions.php にアクションフックを記述して、不要なコードの出力を省く方法を以下にまとめておきます。

<link rel="profile" href="http://gmpg.org/xfn/11">

XFN フォーマットを取り入れたページであることを伝えるメタデータです。
header.php に直接記述されているので必要ない場合は削除します。

<link rel='dns-prefetch' href='//s.w.org' />

WordPress の絵文字を CDN しているドメインを DNS プリフェッチする記述です。
functions.php へ以下の記述を追加して削除します。

functions.php

add_filter( 'emoji_svg_url', '__return_false' );

<link rel="alternate" type="application/rss+xml" title="underscores » フィード" href="http://example.com/wp/feed/" />
<link rel="alternate" type="application/rss+xml" title="underscores » コメントフィード" http://example.com/wp/comments/feed/" />

フィード、コメントフィードへのリンクです。
functions.php へ以下の記述を追加して削除します。

functions.php

remove_action('wp_head', 'feed_links', 2);
remove_action('wp_head', 'feed_links_extra', 3);

<script type="text/javascript">
    window._wpemojiSettings = {
    ・・・省略
</script>

<style type="text/css">
img.wp-smiley,
img.emoji {
  ・・・省略
}
</style>

絵文字対応スクリプト、絵文字対応CSSです。
functions.php へ以下の記述を追加して削除します。

functions.php

function disable_emoji() {
     remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
     remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
     remove_action( 'wp_print_styles', 'print_emoji_styles' );
     remove_action( 'admin_print_styles', 'print_emoji_styles' );    
     remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
     remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );    
     remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
}
add_action( 'init', 'disable_emoji' );

<link rel='https://api.w.org/' href='http://example.com/wp/wp-json/'>

他のウェブサイトで「oEmbed」に対応している記事を、自分のブログに埋め込み可能にする記述です。
functions.php へ以下の記述を追加して削除します。

functions.php

remove_action('wp_head','rest_output_link_wp_head');
remove_action('wp_head','wp_oembed_add_discovery_links');
remove_action('wp_head','wp_oembed_add_host_js');

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://example.com/wp/xmlrpc.php?rsd">

外部ツールを使って WordPress に記事を投稿するときのアドレスです。
functions.php へ以下の記述を追加して削除します。

functions.php

remove_action('wp_head', 'rsd_link');

<link rel='stylesheet' id='admin-bar-css'  href='http://example.com/wp/wp-includes/css/admin-bar.min.css?ver=4.6.1' type='text/css' media='all'>

ログイン状態で自分の WordPress サイトを閲覧するとサイト上部に表示される、ツールバー(adminbar)の CSS を読み込むための記述です。

ダッシュボードの「ユーザー」→「あなたのプロフィール」→「サイトを見るときにツールバーを表示する」のチェックを外して「プロフィールを更新」すると表示されなくなります。

<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://example.com/wp/wp-includes/wlwmanifest.xml">

Windows Live Writer を使って記事を投稿する場合に必要な記述です。
functions.php へ以下の記述を追加して削除します。

functions.php

remove_action('wp_head', 'wlwmanifest_link');

<meta name="generator" content="WordPress 4.6.1" />

WordPressのバージョン情報です。
functions.php へ以下の記述を追加して削除します。

functions.php

remove_action('wp_head', 'wp_generator');

<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>

recentcomments のインラインスタイルです。
ブログとして WordPress を使わない場合は、コメントは使ってないので、
functions.php へ以下の記述を追加して削除します。

functions.php

function remove_recent_comments_style() {
    global $wp_widget_factory;
    remove_action('wp_head', array(
        $wp_widget_factory->widgets['WP_Widget_Recent_Comments'],
        'recent_comments_style'
    ));
}
add_action('widgets_init', 'remove_recent_comments_style');

wp_footer()

説明

wp_footer() は、wp_footer アクションをスタートさせます。

使い方

テーマテンプレートファイル内の </body> タグ直前に記述します。

example.php

<?php wp_footer() ?>
</body>

使用例

wp_footer アクションを使って footer 領域に scroll.js を追加する例を以下に示します。

functions.php

add_action( 'wp_footer', 'my_scripts' );

function my_scripts() {
    wp_enqueue_script( 'Scroll', get_template_directory_uri(). ' /js/scroll.js', array('jquery'), '4.1.2', true);
}

wp_enqueue_script() wp_enqueue_style() の書式

wp_enqueue_style( $handle, $src, $deps, $ver, $media );
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
  • $handle スクリプトの識別名
  • $src スクリプトのパス
  • $deps 依存スクリプト(このファイルを読み込む前に読んでおいて欲しいファイルの一意の名前を配列で)
  • $ver スクリプトのバージョン (オプション)
  • $in_footer スクリプトの読み込み位置(trueで/body前、falseで/head前) (オプション)
  • $media スタイルシートが定義されているメディアを指定する文字列 例: ‘all’、’screen’、’handheld’、’print’ (オプション)