WordPress オリジナルテーマを作ってみよう：④ functions.php の作成

④では、functions.php の作成を行います。

functions.php ファイルを新規に作成する

header.php で消した箇所が表示されるようにするためコードを記述します。

下記をコピペして、wp_tpl フォルダ に functions.php で保存してください。

タイトル部分のコード

header.php で削除した <title></title> に替わる部分です

<?php
/* blogタイトル */
function blog_title() {
    add_theme_support('title-tag');
}
add_action('after_setup_theme', 'blog_title');

スタイルシート部分のコード

header.php で削除した、

<link rel="stylesheet" href="style.css" type="text/css">

に替わる部分です。

/* スタイルシート */
function enqueue_scripts(){
    wp_enqueue_style( 'style-css', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

別のファイル名（例：top.css）の場合

wp_enqueue_style( 'top-css', get_stylesheet_uri() );

追加するといい項目

ウィジェット

サイドバーやフッターに、簡単にメニューを作ることができる機能です。

// ウィジェット
function widget_area(){
 register_sidebar(
  array(
  'name' => 'サイドバー1',
  'id' => 'sidebar1',
  'before_widget' => '<div>',
  'after_widget' => '</div>',
  )
 );
}
add_action( 'widgets_init', 'widget_area' );

このコードを記述することで、「外観」-「ウィジェット」が表示されるようになります。

【設定前】

【設定後】

設定後にウィジェットを選択すると、下図のような画面になります。

ウィジェットを増やしたいとき

// ウィジェット
function widget_area(){
 register_sidebar(
  array(
  'name' => 'サイドバー1',
  'id' => 'sidebar1',
  'before_widget' => '<div>',
  'after_widget' => '</div>',
  )
 );
 register_sidebar(
  array(
  'name' => 'サイドバー2',
  'id' => 'sidebar2',
  'before_widget' => '<div>',
  'after_widget' => '</div>',
  )
 );
}
add_action( 'widgets_init', 'widget_area' );

アイキャッチ画像

このコードを書くことで、アイキャッチ画像を設定する項目が表示されます。

//アイキャッチ
if ( function_exists( 'add_theme_support' ) ) {
  add_theme_support( 'post-thumbnails' );
  set_post_thumbnail_size( 200, 200, true ); /* アイキャッチのサイズ*/
}

【設定前】

【設定後】

まとめ

以上で functions.php の記述は終わりです。

functions.php はとても大切なファイルなので、いつでも元に戻せるよう、必ずバックアップをしてから触るようにしています。

• タイトル部分のコード
• スタイルシート部分のコード

ひとまずこの2つのコードを記述して、エラーが出なければウィジェットやアイキャッチ画像の設定をしてみてください。

次は index.php にコードを追記していきます。