functions.php について
テーマのPHP関数をまとめて管理するためのファイルです。
このファイルでエラーがでると、ページが全部真っ白に…なんてこともあるので、編集するときは、バックアップをとって慎重に。
WordPressのデフォルトの動きを変更したいとき、直接コアのファイルを書き換えてしまうと、WordPressのアップデートの際上書きされて消えてしまいます。
WordPressでは、初期設定の動きを変更できる仕組みである「フック」が用意されています。
functions.phpファイルから、フックのあるポイントを指定して実行することができます。
フックの種類
フックにはアクションフックとフィルターフックの2種類あります。
アクションフック ... add_action() 特定のポイントやイベント発生時に起動されるもの。 タイミングは任意でPHP関数を実行させることができます。 フィルターフック ... add_filter() データベースの保存時や、読み出し時に値を改造するためのもの
フックの種類はCodexに掲載されています。
アクションフック一覧
フィルターフック一覧
フックの使い方
1.実行させたいPHP関数を作成
2.特定のフックに作成した関数を登録
という流れ。
試しに、スタイルシートを読み込ませる関数を作って、フックに登録してみます。
<?php
function mytheme_scripts() {
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
}
スタイルシートを読み込ませる関数 mytheme_scripts() を作って…
add_action( 'wp_enqueue_scripts', 'easiestwp_scripts' );
wp_enqueue_scriptsというアクションフックをadd_action()で呼び出し、さきほど作った関数mytheme_scripts() を登録。
あとは、index.phpなどに <?php wp_head(); ?> を記述しておくことで、自動的にテーマにあるstyle.cssが読み込まれるようになります。
<!DOCTYPE HTML>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
フックで使用する関数の書き方
アクションフックもフィルターフックも基本の書き方は同じ。
優先度や変数の値は、省略することができます。
add_action(アクションフック名, 処理する関数, [オプション] 優先度, [オプション]関数に渡す変数の値) add_filter（フィルターフック名, 処理する関数, [オプション]優先度, [オプション]関数に渡す変数の数）
よくあるカスタマイズ設定
タイトルタグ追加
function mytheme_setup() {
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );
アイキャッチ画像を有効化する
function mytheme_setup() {
add_theme_support( 'post-thumbnails' );
add_image_size( 'mytheme-hero', 1200, 630, true ); // 画像サイズの登録
}
add_action( 'after_setup_theme', 'mytheme_setup' );
テーマ専用に新しく画像サイズを登録したいとき
<?php add_image_size( 画像サイズの名前, 横幅, 高さ, 画像の切り抜きをするかどうか ); ?>
add_image_size( 'mytheme-hero', 1200, 630, true );
WordPressに画像をアップロードすると、指定した大きさにで生成されるようになります。
登録した画像サイズで出力したいときは、the_post_thumbnail( ‘設定した名前’ ); で呼び出すことができます。
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'hero' ); ?></a>
<?php endif; ?>
ナビゲーションメニューを有効にする
function mytheme_setup() {
register_nav_menus( array(
'global' => 'Global Navi',
) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );
メニューをカスタマイズして表示
<?php if ( has_nav_menu( 'global' ) ) : ?>
<!-- グローバルがある場合は出力 -->
<?php wp_nav_menu( array(
'theme_location' => 'global', //register_nav_menus（）で登録したものを指定
'menu_id' => 'global-menu', //ul要素のIDを指定
'container' => 'nav', //ul要素をラップするかどうか。する場合は、divかnavを選択
'container_class' => 'global-nav', //navにclassを追加する
) ); ?>
<?php endif; ?>
ウィジェットの機能を有効にする
function mytheme_widgets_init() {
register_sidebar( array(
'name' => 'Sidebar',
'id' => 'sidebar',
) );
register_sidebar( array(
'name' => 'Footer',
'id' => 'footer',
) );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );
ウィジェットを表示
<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
<ul>
<?php dynamic_sidebar( 'sidebar' ); ?>
</ul>
<?php endif; ?>
<?php if ( is_active_sidebar( 'footer' ) ) : ?>
<ul>
<?php dynamic_sidebar( 'footer' ); ?>
</ul>
<?php endif; ?>
検索・コメントフォーム・コメントリストをHTML5形式に
function mytheme_setup() {
add_theme_support( 'html5', array(
'search-form',
'comment-form',
'comment-list',
) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );
全てまとめる
<?php
function mytheme_scripts() {
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );
function mytheme_setup() {
add_theme_support( 'title-tag' );
add_theme_support( 'post-thumbnails' );
add_image_size( 'mytheme-hero', 1200, 630, true );
register_nav_menus( array(
'global' => 'Global Navi',
) );
add_theme_support( 'html5', array(
'comment-form',
'comment-list',
) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );
ちなみに、最後のphpの閉じタグは、なくてもエラーがでないので、省略されることが多いです。
