【コピペ可】WordPressオリジナルテーマでfunctions.phpに書くことまとめ

読者
読者

WordPressでオリジナルテーマを作ってるんだけど、functions.phpに最低限何を書けば良いのかな？

本記事では上記のような方向けに、Wordpressオリジナルテーマ作成時にfunctions.phpに書くことをまとめました。

「とりあえずこれだけ書いておけば最低限問題ないよね」というものをピックアップしたので、参考になれば幸いです。

functions.phpに最低限必須な項目

functions.phpに最低限必須な項目は下記の５つです。

  • 投稿のサムネイル画像有効化
  • タイトルタグ自動生成
  • CSS、JSの読み込み
  • メニューの有効化
  • ウィジェットの有効化

コピペ用は下記です。

本記事で説明する項目の設定をまとめたものは下記になります。コピペ用にどうぞ。

<?php

/****************************
**   基本設定
*****************************/

function mySetup()
{
  add_theme_support('post-thumbnails'); // アイキャッチ画像を有効化
  add_theme_support('automatic-feed-links'); // 投稿とコメントのRSSフィードのリンクを有効化
  add_theme_support('title-tag'); // タイトルタグ自動生成
  add_theme_support(
    'html5',
    array( //HTML5でマークアップ
      'search-form',
      'comment-form',
      'comment-list',
      'gallery',
      'caption',
    )
  );
}

add_action('after_setup_theme', 'mySetup');

/****************************
**   css js 読み込み
*****************************/

function my_script_init()
{
  wp_enqueue_style('reset', get_template_directory_uri() . '/assets/css/reset.css', array()); //reset.css読み込み
  wp_enqueue_style('style', get_template_directory_uri() . '/assets/css/style.css', array('reset')); //css読み込み

  wp_enqueue_script('jquery'); // jQuery読み込み
  wp_enqueue_script('js', get_template_directory_uri() . '/assets/js/index.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_script_init');

/****************************
**   メニュー設定
*****************************/

function my_menu_init()
{
  register_nav_menus(
    array(
      'header' => 'ヘッダーメニュー',
      'footer' => 'フッターメニュー',
      'drawer' => 'ドロワーメニュー',
    )
  );
}
add_action('init', 'my_menu_init');

/****************************
**   ウィジェット
*****************************/
function init_widget() {
  register_sidebar( array(
    'name' => 'sidebar',
    'id' => 'sidebar',
  ) );
  register_sidebar( array(
    'name' => 'footer',
    'id' => 'footer',
  ) );
}

add_action( 'widgets_init', 'init_widget' );
?>
づみ
づみ

では、それぞれの設定内容を見ていきましょう！

投稿のサムネイル画像有効化

投稿画面のサムネイル画像選択は、デフォルトでは選択できないようになっています。

サムネイル画像はほぼ必須です。下記コードをfunctions.phpに記述して有効化することができます。

functions.php
add_theme_support('post-thumbnails');

ちなみに、

functions.php
add_action('after_setup_theme', 'set_thumb');

function set_thumb() {
  add_theme_support('post-thumbnails');
}

こちらの書き方でも可能です。

タイトルタグ自動生成

ページタイトルに応じて、自動で<title>タグを自動生成してくれます。

たとえば、記事の場合は、記事タイトル | サイトタイトル といった形になります。

下記をfunctions.phpに記述します。

functions.php
add_theme_support('title-tag');
づみ
づみ

header.phpのタイトルタグは削除しておきましょう！

CSS、JSの読み込み

header.phpのheadタグ内でCSS,JSを読み込ませても良いですが、WordPressではfunctions.phpで一元化することが推奨されているようです。

下記を記述することで、全ページにCSS,JSが適用されます。

functions.php
function my_script_init() {

  wp_enqueue_style('reset', get_template_directory_uri() . '/assets/css/reset.css', array());  //reset.css読み込み
  wp_enqueue_style('style', get_template_directory_uri() . '/assets/css/style.css', array('reset'));  //css読み込み
  wp_enqueue_script('js', get_template_directory_uri() . '/assets/js/index.js', array(), '1.0.0', true); // index.js読み込み
}

add_action('wp_enqueue_scripts', 'my_script_init');

書き方の例

functions.php
wp_enqueue_style('reset', get_template_directory_uri() . '/assets/css/reset.css', array());
wp_enqueue_script('js', get_template_directory_uri() . '/assets/js/index.js', array(), '1.0.0', true);

CSSは、wp_enqueue_style、JSはwp_enqueue_scriptという関数を使って呼び出します。関数の中身は以下のとおりです。

CSSの場合

functions.php
wp_enqueue_style($handle, $src , $deps, $ver, $media);
  • $handle ＝ 名前。認識しやすい名前で。（例：reset.cssならreset）
  • $src ＝ 読み込み先のパス。
  • $deps ＝ 読み込み順の指定。（例：reset.cssを先に読み込ませたい場合は、array(‘リセットCSSのハンドル名’)で書く）
  • $ver ＝ バージョン指定。空でもOK
  • $media ＝ 初期値はall。基本的にそのままでOK。

JSの場合

functions.php
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
  • $handle ＝ 名前。認識しやすい名前で。
  • $src ＝ 読み込み先のパス。
  • $deps ＝ 読み込み順の指定。（例：jqueryを先に読み込ませたい場合は、array(‘jquery’)）
  • $ver ＝ バージョン指定。空でもOK
  • $in_footer ＝ trueにすると</body>終了タグの直前に配置される。

詳細はこちらをご覧ください。

参考関数リファレンス/wp enqueue script – WordPress Codex 日本語版
参考関数リファレンス/wp enqueue style – WordPress Codex 日本語版

メニューの有効化

「外観」→「メニュー」を選べるようにする設定です。基本メニュー固定の場合は不要かも。

下記コードを追記します。

functions.php
function my_menu_init()
{
  register_nav_menus(
    array(
      'header' => 'ヘッダーメニュー',
      'footer' => 'フッターメニュー',
      'drawer' => 'ドロワーメニュー',
    )
  );
}
add_action('init', 'my_menu_init');

これで「メニュー」という項目が選択できるようになりました。

ただ、これだけでは表示はできないので、header,php（footer.php）にコードを加えます。メニューを加えたい部分に<?php wp_nav_menu(); ?>を書きます。

header.php
<header class="header" id="header">
    <div class="header-inner">
      <h1>LOGO</h1>
      <?php
      wp_nav_menu(
        array(
          'depth' => 1, //何回層まで表示させるか
          'theme_location' => 'header', //functions.phpで指定した位置
          'container' => 'nav', //メニューを包括するタグ
          'container_class' => 'header-nav', //包括するタグのクラス名
          'menu_class' => 'header-list', // nav直下のulタグのクラス名
        )
      );
      ?>
    </div>
</header>

出力結果は以下の通り。

HTML
<header class="header" id="header">
  <div class="header-inner">
    <h1>LOGO</h1>
    <nav class="header-nav">
      <ul id="menu-hogehoge" class="header-list">
        <li>menu1</li>
        <li>menu1</li>
        <li>menu1</li>
      </ul>
    </nav>
  </div>
</header>

arrayの中身は様々な選択ができ、ここでは解説しきれないので下記を参考ください。

参考テンプレートタグ/wp nav menu – WordPress Codex 日本語版

ウィジェットの有効化

サイドバーウィジェットを有効化する

ウィジェットの有効化方法について。
下記コードを追加することで、「外観」→「ウィジェット」の項目が表示されるようになります。

functions.php
function init_widget() {
  register_sidebar( array(
    'name' => 'sidebar',
    'id' => 'sidebar',
  ) );
}
add_action( 'widgets_init', 'init_widget' );

これでウィジェットを追加できるようになりました。あとは表示させるためのコードを書いていきます。今回はsidebar.phpを例に書いていきます。

sidebar.php
<?php if ( is_active_sidebar('sidebar') ) : ?>
  <ul class="menu">
    <?php dynamic_sidebar('sidebar'); ?>
  </ul>
<?php endif; ?>

is_active_sidebar()は、サイドバーが有効になっていればtrueを返します。引数にはサイドバーの名前（今回はsidebar）を入れます。

dynamic_sidebar()はサイドバーを表示するための関数です。引数には同じくサイドバーの名前が入ります。

フッターウィジェットも同じ要領です。

ちなみにフッターウィジェットも同じ要領で追加することができます。

functions.php
function init_widget() {
  // サイドバー
  register_sidebar( array(
    'name' => 'sidebar',
    'id' => 'sidebar',
  ) );
 // フッター
  register_sidebar( array(
    'name' => 'footer',
    'id' => 'footer',
  ) );
}
add_action( 'widgets_init', 'init_widget' );
footer.php
<footer>
<?php if ( is_active_sidebar('footer') ) : ?>
  <ul class="menu">
    <?php dynamic_sidebar('footer'); ?>
  </ul>
<?php endif; ?>
</footer>

functions.phpに最低限書くことまとめ

というわけで、WordPressオリジナルテーマ作成時にfunctions.phpに最低限書くことをまとめました。いつも忘れがちなので、一度作ったらテンプレ化して使い回せるようにしておくと良いですね。

functions.phpに最低限書くことまとめ
  • 投稿のサムネイル画像有効化
  • タイトルタグ自動生成
  • CSS、JSの読み込み
  • メニューの有効化
  • ウィジェットの有効化

今回は以上です。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


前の記事

【レビュー記事】筋トレ初心者にこそおすすめしたい！「筋トレは必…

次の記事

【2022年最新版】初心者のためのEJS使い方まとめ