WordPressのテーマを制作するたびに毎回ゼロからソースコードを書いていくのはとても大変なことです。全てを暗記できるわけでもありませんし、リソースを見ながら書いていくことがほとんどだと思います。
毎回同じ記述をするのであれば、自分のテンプレートを持っておけばいいじゃないか！ということで、自分のテンプレートを作って作業効率化を図っています。
こちらのブログでも他にfunctions.phpについて書いている記事があるのですが、そちらへのアクセス数が他の記事に比べて多くの方に読んでいただけているようです。
ですので、テンプレートを解説して置いておけばどなたかのお役に立つのではないかと思いまして、今回は自前functions.phpのテンプレートの中身を解説して掲載してみます。
僕が使っているfunctions.phpのテンプレート
今回、掲載するためにコメントにて簡単な役割と参照URLを加えました。必要ない場合には削除して使ってください。
<?php
if ( ! function_exists( 'lab_setup' ) ) :
function lab_setup() {
/*
* 自動フィードリンク
* 参照：https://wpdocs.osdn.jp/%E8%87%AA%E5%8B%95%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%83%AA%E3%83%B3%E3%82%AF
*/
add_theme_support( 'automatic-feed-links' );
/*
* titleを自動で書き出し
* 参照：http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_theme_support#Title_.E3.82.BF.E3.82.B0
*/
add_theme_support( 'title-tag' );
/*
* アイキャッチ画像を設定できるようにする
* 参照：http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_theme_support#.E6.8A.95.E7.A8.BF.E3.82.B5.E3.83.A0.E3.83.8D.E3.82.A4.E3.83.AB
*/
add_theme_support( 'post-thumbnails' );
/*
* 検索フォーム、コメントフォーム、コメントリスト、ギャラリー、キャプションでHTML5マークアップの使用を許可します
* 参照：http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_theme_support#HTML5
*/
add_theme_support( 'html5', array(
'search-form',
'comment-form',
'comment-list',
'gallery',
'caption',
) );
/*
* テーマカスタマイザーにおける編集ショートカット機能の使用
* 参照：https://celtislab.net/archives/20161222/wp-customizer-edit-shortcut/
*/
add_theme_support( 'customize-selective-refresh-widgets' );
/*
* カスタムメニュー位置を定義
* 参照：https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_nav_menus
*/
register_nav_menus( array(
'global' => 'グローバルナビ',
) );
}
endif;
add_action( 'after_setup_theme', 'lab_setup' );
/*
* 動画や写真を投稿する際のコンテンツの最大幅を設定
* 参照：https://wpdocs.osdn.jp/%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E5%B9%85
*/
function lab_content_width() {
$GLOBALS['content_width'] = apply_filters( 'lab_content_width', 640 );
}
add_action( 'after_setup_theme', 'lab_content_width', 0 );
/*
* サイドバーを定義
* 参照：http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_sidebar
*/
function lab_widgets_init() {
register_sidebar( array(
'name' => 'Sidebar',
'id' => 'sidebar-1',
'description' => 'ここにウィジェットを追加',
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'lab_widgets_init' );
/*
* スクリプトを読み込み
* wp_enqueue_styleについて参照：https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_style
* wp_enqueue_scriptについて参照：https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_script
*/
function lab_scripts() {
wp_enqueue_style( 'lab-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'lab_scripts' );
?>
では、簡単に各箇所について説明していこうと思います。上のコードをコピペで使うのが一番簡単なんですが、もう一歩踏み出して理解したいという場合には、以下の説明にも目を通していただけると、理解のお手伝いになるかと思います。
if ( ! function_exists( ‘lab_setup’ ) )とは
まず、３行目のif ( ! function_exists( 'lab_setup' ) )という記述ですが、これは「lab_setupという関数がなければ以下を実行しなさい」という処理を行うためです。
なぜこのような記述を行うかというと、将来子テーマを利用した開発にも対応するためです。
実際のところ、クライアントワークでは制作して納品したWordPressテーマに対して、後ほど子テーマを利用して何かカスタマイズするというようなことはほとんどありません。
そういう観点から考えると、この記述は必要ないとも言えるのですが、この記述方法を覚えておくと公式に掲載するためのテーマ制作では必要になってきますし、納品したテーマファイルを永久にメンテナンスしていけるとも限りませんので、将来的にどのようなカスタマイズにも耐えるためには、このように記述しておく方が無難かな、と個人的には考えています。
add_theme_supportでRSSを表示
add_theme_support( 'automatic-feed-links' );という記述をすると、生成されるページのheadタグ内に投稿とコメントへのRSSフィードリンクを掲載してくれます。
実際出力されるコードというのは以下のようになります。
<link rel="alternate" type="application/rss+xml" title="lab » フィード" href="http://***.com/feed/" /> <link rel="alternate" type="application/rss+xml" title="lab » コメントフィード" href="http://***.com/comments/feed/" />
こちらを挿入したい場合には記述するようにしましょう。一般的に記述しておいて問題ないかと思います。
add_theme_supportでタイトルを表示
add_theme_support( 'title-tag' );と記述することにより、headタグ内に自動てきにtitleタグにてページのタイトルを出力してくれます。
以前まではheadタグ内に下記のようにタイトルを出力させる方法が一般的でした。
<head> <title><?php the_title(); ?></title> </head>
厳密に言うと、固定ページやアーカイブページなど状況によって書き出し方を変えていたりはしていたのですが、WordPress4.1バージョンから上記のような記述はせず、WordPress側からtitleタグを出力する機能が付きました。
あまり詳しいことはわかりませんが、プラグインなどの兼ね合いなども考えると、WordPressのガイドラインに沿った記述が望ましいと思いますので、この記述によりタイトルを出力するようにしています。
add_theme_supportでアイキャッチ画像を利用できるようにする
add_theme_support( 'post-thumbnails' );と記述することにより、投稿などにアイキャッチ画像をつけられる機能を有効にすることができます。
最近では、ブログ投稿にとってアイキャッチ画像の役割というのは、色々な意味で重要だと考えられてきているので、企業ブログなどにおいても必要になることも多いのではないかと思います。
また、「投稿ページだけ」や「固定ページだけ」というような使い方もできます。
add_theme_support( 'post-thumbnails' ); add_theme_support( 'post-thumbnails', array( 'post' ) ); // 投稿のみ add_theme_support( 'post-thumbnails', array( 'page' ) ); // 固定ページのみ
参照：関数リファレンス/add theme support | 4.2 投稿サムネイル
必要な状況に対応することも可能となっています。
add_theme_supportで各部分でHTML5マークアップを許可する
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );という記述により、指定した部分をHTML5でマークアップしてコードを書き出してくれます。
ここ最近ではHTML5を利用してはいけない状況はほとんどないかと思いますので、この記述も必須としています。
add_theme_supportでテーマカスタマイザー内で編集ショートカット機能を利用できるようにする
add_theme_support( 'customize-selective-refresh-widgets' );と記述することにより、管理画面内のカスタマイズ機能を利用する際に、編集ショートカットを利用できるようになります。
この機能については参照記事を見ていただくとわかりやすく書かれていますが、ほぼクライアントワークには必要ないかと思います。
自身や自社にて親テーマとなるものを作って置いて、クライアントごとに子テーマにて開発する…という方法を取るのであれば、この機能を使いこなしておくことによって、カスタマイズも簡単になり、テーマの使いやすさも向上しますので、テーマの評価も必然的に上がることは間違いありません。
が、先ほども書いたように、クライアントワークには必要ないことの方が多いので、必要な場合には記述してみてください。
register_nav_menus()でカスタムメニュー位置を定義する
register_nav_menus( array( 'global' => 'グローバルナビ', ) );
過去に書いたこちらの記事でも紹介していますが、カスタムメニューを利用する際に位置を定義するために記述します。
個人的にはクライアントの管理のしやすさや自由度、あとWordPressを利用する理由の一つとしてカスタムメニュー機能はとても大きいと考えていて、よく利用するのでテンプレートにも記載されています。
コンテンツ幅を設定
「コンテンツ幅を設定」と言われても、いまいちしっくりこないかもしれませんが、投稿や固定ページに画像などメディアを挿入することは多くあるかと思います。
その際に、あらかじめ設定してある複数の画像サイズなどから選択する形になるかと思うのですが、そこで設定される画像の最大値などを設定しておくことができます。
function lab_content_width() {
$GLOBALS['content_width'] = apply_filters( 'lab_content_width', 640 );
}
add_action( 'after_setup_theme', 'lab_content_width', 0 );
そうしておくことによって、コンテンツ幅（主にブログ記事部分の横幅）に合わせたメディアを自動的に生成してもらえるので、無駄に大きな画像をそのまま記載することで画像サイズが肥大してしまうことも考えられるので、設定するようにしています。
サイドバーを定義
register_sidebarを利用してサイドバーを設定します。
こちらを定義しておくことによって、ウィジェットを利用できるエリアを作成することができます。
本来の使い方であれば、ブログの右（あるいは左）に常設されるサイドバーではありますが、それだけではなく、トップページのコンテンツ部分にも上手く利用することにより、ウィジェット機能を利用して上手くクライアント側でコンテンツを入れ替えたり更新したり変更したりすることができるように作れます。
色々な用途で利用することができますので、よく活用するようにしています。
各スクリプトを読み込む
よく他の制作会社様が作られたテーマなどを拝見することもあるのですが、一番多いのがスクリプトの直記述かなと感じています。
直接、head内にCSSやJavaScriptsファイルへのリンクを設定する方法ですね。静的ページを作る際には当然そのように書くのですが、WordPressではちょっと違ったりします。
WordPressのテーマにはheadタグの最後にwp_head()、bodyタグを閉じる前にwp_footer()という関数を記述することは、ご存知の方も多いかと思います。
便利で数あるプラグインを利用するためには必ずこの記述をしなくてはなりません。でないと、プラグイン側からのコードが完全に出力されないので、便利に使うことができないからです。
それと同じような仕組みで、テーマ側で利用するCSSファイルやJavaScriptsファイルもwp_head()やwp_footerを経由してリンクを設置する方法が推奨されています。
function lab_scripts() {
wp_enqueue_style( 'lab-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'lab_scripts' );
CSSを読み込む場合にはこちら、JavaScriptを読み込む場合にはこちらを参照していただくと、詳しい書き方が書いてあります。
まとめ
ざざざーっと走って書いてきましたが、個人的に使っているfunctions.phpのテンプレートはこのような感じになります。
このようなテンプレートを自分用に１つ持っていると、毎回同じようなことを書かなくてはならないという作業がなくなりますので作業の時短に繋がり、私たちフリーランスにとっては最終的に時給アップにも繋がるわけであります。
必要のない機能についてはコメントアウトしておけば、とりあえず良いですしね（最終的に消してしまえば良いわけですから）。ゼロから書くのが面倒なんです…。
みなさんのお役に経てば幸いです。
付録：信頼できるWordPress本
個人的に確実に信頼できるWordPressに関する本を紹介します。
