--- title: "[WordPress]Olein Designのfunctions.phpを詳しく解説します（コピペ利用可）" canonical_url: "https://olein-design.com/blog/my-functions-php" language: "ja" date_published: "2017-06-12T12:15:18+09:00" date_modified: "2017-06-12T12:15:18+09:00" content_type: "post" author: "久野晃司" taxonomies: category: - "WordPress" post_tag: - "functions.php" - "WordPress" --- # [WordPress]Olein Designのfunctions.phpを詳しく解説します（コピペ利用可） WordPressのテーマを制作するたびに毎回ゼロからソースコードを書いていくのはとても大変なことです。全てを暗記できるわけでもありませんし、リソースを見ながら書いていくことがほとんどだと思います。 毎回同じ記述をするのであれば、自分のテンプレートを持っておけばいいじゃないか！ということで、自分のテンプレートを作って作業効率化を図っています。 こちらのブログでも他にfunctions.phpについて書いている記事があるのですが、そちらへのアクセス数が他の記事に比べて多くの方に読んでいただけているようです。 ですので、テンプレートを解説して置いておけばどなたかのお役に立つのではないかと思いまして、今回は自前functions.phpのテンプレートの中身を解説して掲載してみます。 ## 僕が使っているfunctions.phpのテンプレート 今回、掲載するためにコメントにて簡単な役割と参照URLを加えました。必要ない場合には削除して使ってください。 ``` 'グローバルナビ', ) ); } 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' => '
', 'after_widget' => '
', 'before_title' => '

', 'after_title' => '

', ) ); } 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フィードリンク**を掲載してくれます。 実際出力されるコードというのは以下のようになります。 ``` ``` こちらを挿入したい場合には記述するようにしましょう。一般的に記述しておいて問題ないかと思います。 ## add_theme_supportでタイトルを表示 `add_theme_support( 'title-tag' );`と記述することにより、headタグ内に自動てきにtitleタグにてページのタイトルを出力してくれます。 以前まではheadタグ内に下記のようにタイトルを出力させる方法が一般的でした。 ``` <?php the_title(); ?> ``` 厳密に言うと、固定ページやアーカイブページなど状況によって書き出し方を変えていたりはしていたのですが、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 投稿サムネイル](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で各部分で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' => 'グローバルナビ', ) ); ``` 過去に書いた[こちらの記事](https://olein-design.com/blog/register-setting-souce-code-of-custom-menu)でも紹介していますが、カスタムメニューを利用する際に位置を定義するために記述します。 個人的にはクライアントの管理のしやすさや自由度、あと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を読み込む場合には[こちら](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)、JavaScriptを読み込む場合には[こちら](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)を参照していただくと、詳しい書き方が書いてあります。 ## まとめ ざざざーっと走って書いてきましたが、個人的に使っている`functions.php`のテンプレートはこのような感じになります。 このようなテンプレートを自分用に１つ持っていると、毎回同じようなことを書かなくてはならないという作業がなくなりますので作業の時短に繋がり、私たちフリーランスにとっては最終的に時給アップにも繋がるわけであります。 必要のない機能についてはコメントアウトしておけば、とりあえず良いですしね（最終的に消してしまえば良いわけですから）。ゼロから書くのが面倒なんです…。 みなさんのお役に経てば幸いです。 ## 付録：信頼できるWordPress本 個人的に確実に信頼できるWordPressに関する本を紹介します。 ### 初心者には鉄板な本 https://www.amazon.co.jp/gp/product/4295006661/ref=as_li_qf_asin_il_tl?ie=UTF8&tag=oleindesign-22&creative=1211&linkCode=as2&creativeASIN=4295006661&linkId=d75700a8f3a8bf6b6d18305a7120bd43 ### ざっくり一通り網羅できる本 https://www.amazon.co.jp/gp/product/4844368664/ref=as_li_qf_asin_il_tl?ie=UTF8&tag=oleindesign-22&creative=1211&linkCode=as2&creativeASIN=4844368664&linkId=8071da4b6b1e8a7bc2bc67dda0f4407c ### エンジニアな方向け https://www.amazon.co.jp/gp/product/4774187062/ref=as_li_qf_asin_il_tl?ie=UTF8&tag=oleindesign-22&creative=1211&linkCode=as2&creativeASIN=4774187062&linkId=5421568b2a77aa4ffa938c479b566d7c https://www.amazon.co.jp/gp/product/B00M939Y0I/ref=as_li_qf_asin_il_tl?ie=UTF8&tag=oleindesign-22&creative=1211&linkCode=as2&creativeASIN=B00M939Y0I&linkId=80629d403dc8d0a3ea8b0bb7d29c9055