WordPressテーマ作成《連載5》function.phpを用意

Wordpressテーマ作成

function.phpにはテーマの初期設定や拡張機能の追加などの関数を記載していきます。
ただし、function.phpは一文字でも間違えると、場合によってはWordpressが表示されなくなりますので、取り扱いには注意してください。
最初に設定すること
1/コンテンツ幅の設定

global $content_width;
if ( ! isset( $content_width ) ) $content_width = 768;

メイン領域の幅をセットします。
これは投稿内の画像などといったあらゆるコンテンツの最大幅をテーマ内で設定するものです。
ivoryのグリッド幅は、いくつかから選べます。
今回は1024pxを選択し、左のメイン領域にc9のクラスを設定しましたので、メイン領域は768pxになります。
2/テーマの初期設定

add_action( 'after_setup_theme', 'simplegate_setup' );
if ( ! function_exists( 'simplegate_setup' ) ):
function simplegate_setup() {
// アイキャッチ画像を使用
	add_theme_support( 'post-thumbnails' );
// グローバルナビの設定
	register_nav_menus( array(
		'primary' => __( 'Primary Menu' ),
	) );
// 背景カラーの設定
	$args = array(
		'default-color' => 'fff',
	);
	add_theme_support( 'custom-background', $args );
// ヘッダーの設定
	$args = array(
		'width'         => '480',
		'height'        => '150',
		'flex-height'    => true,
		'flex-width'    => true,
		'default-text-color'     => '333',
	);
	add_theme_support( 'custom-header', $args );
}
add_action( 'after_setup_theme', 'simplegate_setup' );
endif;

必要なもののみセットしています。
3/スクリプトとスタイルシートをセットします。

function simplegate_scripts() {
// スタイルシートを読み込み（ivory.cssとstyle.css）
	wp_enqueue_style( 'ivory-css', get_template_directory_uri() . '/css/ivory.css' );
	wp_enqueue_style( 'style-css', get_stylesheet_uri() );
// スクリプトの読み込み（html5shiv.jsとscript.js）
	wp_enqueue_script( 'html5shiv-js', get_template_directory_uri() . '/js/html5shiv.js', array( 'jquery' ), '3.7.2' );
	wp_enqueue_script( 'scripts-js', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'simplegate_scripts' );

こちらは必要に応じてcssとjsを追加していきます。
script.jsは、テーマ専用のスクリプト等を書き込むものです。
4/ウィジェットの設定

function simplegate_widgets_init() {
// ヘッダーウィジェット
register_sidebar( array(
        'name' => 'Header Area',
        'id' => 'header-widget',
        'before_widget' => '<div id="%1$s" class="widget">',
	'after_widget'  => '</div>',
        'before_title' => '<h4>',
        'after_title' => '</h4>',
    ) );
// サイドバーウィジェット
register_sidebar( array(
	'name' => 'Sidebar Area',
	'id' => 'sidebar-widget',
	'before_widget' => '<div id="%1$s" class="widget">',
	'after_widget'  => '</div>',
	'before_title'  => '<h4>',
	'after_title'   => '</h4>',
	) );
// フッターウィジェット
	register_sidebar( array(
	'name' => 'Footer Area',
	'id' => 'footer-widget',
	'before_widget' => '<div id="%1$s" class="widget c3">',
	'after_widget'  => '</div>',
	'before_title'  => '<h4>',
	'after_title'   => '</h4>',
	) );
}
add_action( 'widgets_init', 'simplegate_widgets_init' );

このテーマではヘッダー、サイドバー、フッターにウィジェットをセットしていますので、その設定を書き込みます。
function.php

<?php
// コンテンツ幅
global $content_width;
if ( ! isset( $content_width ) ) $content_width = 768;
// 初期設定
add_action( 'after_setup_theme', 'simplegate_setup' );
if ( ! function_exists( 'simplegate_setup' ) ):
function simplegate_setup() {
// アイキャッチ画像
	add_theme_support( 'post-thumbnails' );
// グローバルナビ
	register_nav_menus( array(
		'primary' => __( 'Primary Menu' ),
	) );
// 背景カラー
	$args = array(
		'default-color' => 'fff',
	);
	add_theme_support( 'custom-background', $args );
// ヘッダー
	$args = array(
		'width'         => '980',
		'height'        => '170',
		'flex-height'    => true,
		'flex-width'    => true,
		'default-text-color'     => '333',
	);
	add_theme_support( 'custom-header', $args );
}
add_action( 'after_setup_theme', 'simplegate_setup' );
endif;
// スクリプトとスタイルシート
function simplegate_scripts() {
// スタイルシート
	wp_enqueue_style( 'ivory-css', get_template_directory_uri() . '/css/ivory.css' );
	wp_enqueue_style( 'style-css', get_stylesheet_uri() );
// スクリプト
	wp_enqueue_script( 'html5shiv-js', get_template_directory_uri() . '/js/html5shiv.js', array( 'jquery' ), '3.7.2' );
	wp_enqueue_script( 'scripts-js', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'simplegate_scripts' );
//ウィジェット
function simplegate_widgets_init() {
// ヘッダーウィジェット
register_sidebar( array(
        'name' => 'Header Area',
        'id' => 'header-widget',
        'before_widget' => '<div id="%1$s" class="widget">',
	'after_widget'  => '</div>',
        'before_title' => '<h4>',
        'after_title' => '</h4>',
    ) );
// サイドバーウィジェット
register_sidebar( array(
	'name' => 'Sidebar Area',
	'id' => 'sidebar-widget',
	'before_widget' => '<div id="%1$s" class="widget">',
	'after_widget'  => '</div>',
	'before_title'  => '<h4>',
	'after_title'   => '</h4>',
	) );
// フッターウィジェット
	register_sidebar( array(
	'name' => 'Footer Area',
	'id' => 'footer-widget',
	'before_widget' => '<div id="%1$s" class="widget c3">',
	'after_widget'  => '</div>',
	'before_title'  => '<h4>',
	'after_title'   => '</h4>',
	) );
}
add_action( 'widgets_init', 'simplegate_widgets_init' );