タイトル・URLをコピー
記事タイトルWordPress「functions.php」の効果的な作り方と便利なテクニック10選
記事URLhttps://digitor.jp/textbook/wordpress-functions-php/
記事タイトルWordPress「functions.php」の効果的な作り方と便利なテクニック10選
記事URLhttps://digitor.jp/textbook/wordpress-functions-php/
POINTこの記事をざっくり言うと
functions.phpとは何かがわかり、人に説明できるようになる
functions.phpの使い方がわかり、実際に利用してカスタマイズできるようになる
functions.phpの実践的な使い方がわかる
こんにちは!エンジニアの高澤です!
今回はWordPressを柔軟にカスタマイズするためのPHPファイルであるfunctions.phpについて解説します。
functionsと名がつくぐらいなので、関数のファイルかな…?とイメージされる方が多いかと思いますが、そのイメージで間違ってはいないかなと思います。
簡単にいうとWordPressの関数を使ったプログラムを記述してWordPressのコア機能などを拡張・変更できるのがこのfunctions.phpの特徴です。
今回は下記の流れでfunctions.phpを解説したいと思います。
- functions.phpとは
- functions.phpでできること
- functions.phpの使い方・設置方法
- functions.phpで機能を拡張するテクニック10選
functions.phpを理解すれば、WordPressの機能や見た目をカスタマイズできる幅を大きく広げることができます。
functions.phpとは
functions.phpとは、WordPressのコア機能などの拡張・変更を目的としたWordPress特有のPHPファイルです。
このテンプレートファイルにWordPressの関数などを用いて書かれたプログラムを記述してカスタマイズすることで、WordPressのコア機能から小さな機能まで様々な機能を拡張・変更することができます。
そもそもこのfunctions.phpをカスタマイズする理由は、 WordPressはデフォルトの状態のままだと、機能が不足していたり必要のない機能があったりと、どうしても不十分だなと思うことが多々あるからです。
そんな時にfunctions.phpをカスタマイズすることで、自身の思う通りに機能を拡張したり変更したりすることができます。
functions.phpを使ってWordPressのコア機能などをカスタマイズすることができれば、WordPressでのWebシステムを何から何まで柔軟に制作できることにつながります。
functions.phpでできること
functions.phpは、例えば下記のようなことができます。
・WordPressループのメインクエリの検索条件をカスタマイズする
・アイキャッチ画像やウィジェットを設定できるようにする
・固定ページでもページネーションを設置する
・投稿画面でビジュアルモードを非表示にする
・管理画面のログインページをカスタマイズする
・投稿で自動でタグが挿入するのを防ぐ
・ショートコードを作成する
・投稿画面で任意の場所にショートコードを挿入する
・サイト内検索結果をカスタマイズする
・サイト内検索結果の内容を絞り込む
実に多くの機能を拡張できるのがおわかり頂けたかと思います。
まだまだ多くの機能を拡張できるfunctions.phpですが、今回の内容として、上記の機能拡張をご紹介します。
functions.phpの使い方・設置方法
まずfunctions.phpを使用する方法をご説明します。
方法はとても簡単で、今のテーマディレクトリの階層に「functions.php」というPHPファイルを作成し、そのファイルにWordPressの機能を拡張・変更させるプログラムを記述させればカスタマイズできてしまいます。
次の解説から、functions.phpを使って機能を拡張するテクニックをご紹介いたします。
サンプルコードをコピペしていただければ簡単に機能拡張ができるので、ぜひご活用ください。
functions.phpで機能を拡張するテクニック10選
ここからはコピペするだけでWordPressをカスタマイズできてしまう便利なサンプルコードを10選ご紹介します。
使い方はfunctions.phpに貼り付けるだけなのでとても簡単です。
内容としては実際のWeb制作で使われるような内容に厳選しておりますので、ぜひWordPressのテーマ作成をされている方は、下記のサンプルコード10選をコピペして動きを確かめて見てください。
①WordPressループのメインクエリの検索条件をカスタマイズする
index.phpやcategory.phpなどのテンプレートファイルではWordPressループ(メインループ)を使って記事一覧を表示させるときが多々あるかと思います。
WordPressの仕様で、いずれのテンプレートファイルも記事の一覧を表示させるにはメインループを使って表示させることになります。
そのメインループで出力したときの記事一覧の表示件数は、「管理画面→表示設定→1ページに表示する最大投稿数」で設定した件数で決めることができます。
ただここで設定した件数を、例えば10件に設定した場合当然メインループで表示させたindex.phpの記事一覧やcategory.php、tag.phpで表示させた記事一覧もすべて10件そろって10件表示されることになります。
ここで考えられることとして、例えばトップページだけは5件のみ表示させたいという問題が発生した場合設定にひっぱられて10件になってしまうので管理画面で設定した表示件数がとても不都合となってしまいます。
そこで、この設定された件数をページごとに柔軟に変更するといったことを可能にしたソースコードが下記になります。
下記コードではトップページの記事一覧の表示件数を5件にしています。
|
<?php /* メインクエリのカスタマイズ */ function custom_main_query($query){ if(is_admin() || ! $query->is_main_query()): return; endif; if($query->is_home()): $query->set('posts_per_page',5); endif; } add_action('pre_get_posts','custom_main_query'); ?> |
上記がメインクエリをカスタマイズする際に必要な基本的なコードになります。
上記ソースコードは、2つ目のif文の条件をis_home()関数を使っており、開いているページのクエリが「メインクエリでかつトップページであれば表示件数を5件にする」というプログラムです。
逆に、管理画面を表示しているときか、現在のクエリがメインクエリでなければ動作をキャンセルします。
②アイキャッチ画像・ウィジェットを設定できるようにする
次は、WordPressで欠かせない機能の一つであるアイキャッチ画像の設定機能と、ウィジェットの設置機能の追加の仕方をご紹介します。
やり方はとても簡単です。
各パラメータを指定したadd_theme_support()関数を記述するだけで終わりです。
add_theme_support()関数の値にそれぞれの機能を実装するためのパラメータを指定します。
アイキャッチ画像の追加機能を設定する
|
<?php // 全ページでアイキャッチ画像を設定する場合 add_theme_support('post-thumbnails'); // 投稿ページのみアイキャッチ画像を設定する場合 add_theme_support('post-thumbnails',array('post')); // 固定ページのみアイキャッチ画像を設定する場合 add_theme_support('post-thumbnails',array('page')); ?> |
add_theme_support()関数にパラメータとして「post-thumbnails」を指定し、アイキャッチ画像を設定することができる機能を追加しました。
上記のソースコードは全ページ用・投稿ページのみ・固定ページのみの3つご紹介しておりますので、場面に応じて使い分けてください。
ウィジェット機能を設定する
|
<?php /* ウィジェットの機能を追加 */ add_theme_support('widgets'); ?> |
add_theme_support()関数にパラメータとして「widgets」を指定し、ウィジェットを管理画面上から設定することができる機能を追加しました。
上記のようにソースコードをコピペして設定を保存したあと、管理画面に戻ればウィジェット機能が追加されているのが確認できます。
いずれもfunctions.phpに記述するだけで機能を追加できますので非常に簡単です。
③固定ページでもページネーションを設置する
固定ページでページネーションを設置する方法を解説いたします。
あえて「固定ページで」ページネーションと言っていることに疑問を持たれる方がいらっしゃるかと思います。
人によっては普通にthe_posts_pagination()関数など用意されているテンプレートタグを利用すればいいのではないか?という方もいらっしゃるかと思います。
しかし、実は固定ページではthe_posts_pagination()関数などページネーション系のテンプレートタグを使ってもページネーションが機能せず表示されないといった事態が起こる場合が多いです。
なぜかというと、固定ページは本来リストを扱うページではないからです。
リストを扱うページであるindex.phpやcategory.php、tag.php、archive.phpなど、WordPressループでデータをループさせて記事のリストを表示するといったやり方であれば、the_posts_pagination()関数で簡単に出力できますが、固定ページの場合は下記のサンプルコードをfunctions.phpにコピペすることで好きな時、好きな場所でページネーションを表示することができます。
functions.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
|
<?php function page_pagination(){ ob_start(); ?> <div class="pagination"> <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $the_query = new WP_Query( array( 'post_status' => 'publish', 'post_type' => 'post', //ページの種類(例、page、post、カスタム投稿タイプ) 'paged' => $paged, 'posts_per_page' => 10, // 表示件数 'orderby' => 'date', 'order' => 'DESC' ) ); if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?> <div><?php the_title(); ?></div> <?php endwhile; else : echo '<p>現在準備中です。</p>'; endif; ?> <div class="pnavi"> <?php //ページリスト表示処理 global $wp_rewrite; $paginate_base = get_pagenum_link(1); if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){ $paginate_format = ''; $paginate_base = add_query_arg('paged','%#%'); }else{ $paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') . user_trailingslashit('page/%#%/','paged'); $paginate_base .= '%_%'; } echo paginate_links(array( 'base' => $paginate_base, 'format' => $paginate_format, 'total' => $the_query->max_num_pages, 'mid_size' => 1, 'current' => ($paged ? $paged : 1), 'prev_text' => '< 前へ', 'next_text' => '次へ >', )); ?> </div> <?php return ob_get_clean(); } add_shortcode('add_page_pagination','page_pagination'); ?> |
上記のコードはadd_shortcode()関数を使って固定ページで便利に呼び出せるようにショートコードとしてページネーションを定義しています。
page.php
page.phpにはページネーションを表示させたい場所で上記のdo_shortcode()関数を記述します。そうすることで、記述した任意の場所にページネーションが表示されます。
④投稿画面でビジュアルモードを非表示にする
WordPressで記事の投稿画面を開くと、ビジュアルモードとテキストモードの2種類から選んで記事の投稿(執筆)ができます。
テキストモードはHTMLの中に直に文字を入れていくスタイルですが、ビジュアルモードは完全にウェブサイト上の見た目を意識して記事の投稿をすることができます。
ただ、このビジュアルモードですが、WordPressの仕様上、テキストモードで作業した後にビジュアルモードに切り替えると入力していたはずのタグが消えたり、勝手にいらないタグが挿入されてしまいます。
そうなると、主にテキストモードで作業する現場であればビジュアルモードに切り替える機能は不要であり、また誤ってビジュアルモードのタブをクリックしてしまったらタグは消えてしまうため、安全な運用を考えるとビジュアルモードのボタンを非表示にできたら大変便利です。
ここで下記のソースコードをコピペしていただくと、下図のようにビジュアルモードのタブとテキストモードのタブの両方が消えて、テキストモードのみ使えるようになります。
これでビジュアルモードに切り替えた際の崩れなどを気にする必要がなくなります。
↓
それでは下記のソースコードをfunctions.phpにコピペして動きを見てみましょう。
functions.php
|
<?php /* 投稿管理画面にあるビジュアルモードタブを非表示 */ function disable_visual_editor_pg(){ add_filter('user_can_richedit', 'disable_visual_editor'); } function disable_visual_editor(){ return false; } add_action( 'load-post.php', 'disable_visual_editor_pg' ); add_action( 'load-post-new.php', 'disable_visual_editor_pg' ); ?> |
上記のコードを記述すればビジュアルモードのボタンは消え、テキストモードのみ使えるようになります。
⑤管理画面のログインページをカスタマイズする
WordPressにログインするときに最初に表示されるログイン画面をカスタマイズする方法を解説します。
ログイン画面のカスタマイズは、お客様からのご要望や他WordPressで構築したサイトと区別をつけたいという場合などにメリットがあります。
また、カスタマイズすることによってオリジナリティをだすことができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
|
<?php // ログイン画面のカスタマイズ function my_login_style() { ?> <style type="text/css"> /* ロゴの部分 */ .login h1 a { background-image:none; background-image:url("<?php echo get_stylesheet_directory_uri(); ?>/image/logo_login.png") !important; background-position: center top; background-repeat: no-repeat; background-size: 250px !important; display: block; font-size: 20px; height: 72px !important; line-height: 1.3em; margin: 0 auto 5px !important; outline: 0 none; padding: 0; text-indent: -9999px; width: 250px !important; } /* 背景 */ body, html { background: #fff none repeat scroll 0 0 !important; } /* 「ユーザー名またはメールアドレス」の部分 */ #user_login{ border:2px solid #313131; } /* 「パスワード」の部分 */ #user_pass{ border:2px solid #313131; } /* ログインコンテナ */ #loginform{ border:2px solid #313131; } /* メッセージ */ .message{ border:2px solid #313131; color:#313131; } /* 各ラベルテキスト */ .login label{ color:#313131; } /* ログインボタン */ #wp-submit{ background:#313131; border:1px solid #313131; } /* 目玉のマーク */ .dashicons-visibility:before { color:#313131; } /* エラー */ .login #login_error, .login .message, .login .success { border-left: 7px solid #313131 !important; } /* チェックボックスの部分 */ #rememberme{ border:2px solid #313131; } /* 間隔調整マージン */ .login form{ margin-top:0 !important; } /* SiteGuard プラグイン用 */ #siteguard_captcha{ border:2px solid #313131 !important; } </style> <?php } add_action( 'login_enqueue_scripts', 'my_login_style' ); ?> |
上記のサンプルコードは下記の画像のようなログイン画面を想定しています。
それぞれサイトに合わせて色を合わせてカスタマイズして頂けるとデザイン的にも良いものが作れると思います。
具体的には、コード中の#313131の部分をお好きな色に変えていただけると下の画像の黒の線の部分が変更されて、デザインが変わります。
「.login h1 a」セレクタのbackground:url()がロゴ画像の部分になります。ロゴ画像の入ったファイルにつながるパスを記述することによって表示されます。
上記のサンプルコードを入力していただくと上記のデザインになります。
ロゴ画像はあらかじめご自身のご用意されたものをお使いいただければと思います。
⑥投稿で自動でタグが挿入するのを防ぐ
functions.php
先述しましたが、WordPressはタグが自動で挿入されるという仕様になっています。その対策の一つとして、remove_filter()関数を使います。
上記の記述を利用すれば、自動で<p>タグや<br>タグが挿入される仕様を防ぐことができます。
また、場合によってはremove_filter()関数をあるテンプレートだけ(例えば、固定ページのテンプレートであるpage.phpだけ)自動挿入をなくし、それ以外は自動挿入させるといったパターンもあるかと思います。
その場合は、自動挿入したくないテンプレートごとにコードを挿入すれば無効化されます。
例)page.php
|
<?php /* the_content()の前に記述する */ remove_filter('the_content','wpautop'); the_content(); ?> |
上記のように記述していただけると、余計なタグが自動で挿入されるのを防ぐことができます。
⑦ショートコードを作成する
funtions.phpで作成するショートコードとは、関数として定義した様々な機能を少ない文字列で投稿画面内で呼び出せるようにしたものを言います。
このショートコードの役割として言えるのは、通常記事を執筆する投稿画面内でPHPのプログラムコードを記述したとしてもプログラムが機能しませんが、functions.phpで定義したショートコードを利用することで、投稿画面内でも関数内にある機能を呼び出して使用することができます。
また、ショートコードを使うメリットは、ショートコードとして定義したプログラムを何回でも使い回すことができます。
ショートコードを作成する方法は簡単で、テンプレートタグのadd_shortcode()関数を使います。
functions.php
|
<?php /* 「これはショートコードのテストです」の文字を出力する [test]という名前のショートコードを作成する関数 */ function test_shortcode(){ return 'これはショートコードのテストです'; } add_shortcode('test','test_shortcode'); ?> |
上記はただ文字を出力するとても簡単な一例ですが、他に用途として例えばバナー画像を表示させたりサイドバーによくある新着記事一覧など、サイト内の一部の部品として作成したプログラムを定義しショートコードにして使いまわしたりすることができます。
また、テンプレートに対してfunctions.phpで定義したショートコードを使いたい場合には下記のdo_shortcode()関数を利用します。引数にはショートコードである[test]を入れ込みます。
例)page.phpにショートコードを書く場合
|
<?php /* テンプレートの中でショートコードを実行したい場合の関数 */ echo do_shortcode('[test]'); ?> |
上記のコードをテンプレートの好きな場所へ記述すればその記述した場所でショートコードとして定義した関数を呼び出すことができます。
⑧投稿画面で任意の場所にショートコードを挿入する
先述した7のショートコードですが、例えば[test]を投稿画面の任意の場所に記述すればその場所にショートコードを出力できますが、筆者がよく作る関数として下記のようなものがあります。
functions.php
|
<?php /* タイトルを出力するショートコード */ function shortcode_title(){ ?> <div class="box"> <div class="box__title"> <h2><?php the_title(); ?></h2> </div> </div> <?php } add_shortcode('test_title','shortcode_html'); ?> |
上記のサンプルコードは、投稿ページのタイトルを出力してくれるコードになります。
このショートコードの[test_title]を投稿画面で入力して記事のタイトルを出力してみるとわかると思いますが、結果的に出力したタイトルがページの上の方に来てしまい、任意の場所に出力されないのがわかるかと思います。
そこで、PHPの関数であるob_start()関数とob_get_clearn()関数の2つを利用します。
そもそもショートコードが上に来てしまう原因は、WordPressの内部処理の段階でecho文が勝手に動作してしまうために起きてしまいます。それを防ぐために、2つの関数を使ってバッファを操作します。
下記が修正したコードになります。
|
<?php /* タイトルを出力するショートコード >>>任意の場所に出力できるように修正したバージョン */ function shortcode_title(){ ob_start(); ?> <div class="box"> <div class="box__title"> <h2><?php the_title(); ?></h2> </div> </div> <?php return ob_get_clean(); } add_shortcode('test_title','shortcode_title'); ?> |
functions.phpに先ほどのコードを削除し、上記のコードに修正していただければ、課題であった要素が上に行ってしまうといった問題を解決し、任意の場所に出力することができます。
⑨検索結果を投稿タイプ別に表示する
サイト内で検索結果をカスタマイズする方法をご紹介します。
WordPressではsearch.phpとsearchform.phpの2つのテンプレートファイルを使って、サイト内検索を実装することができます。
サイト内検索もWordPressループ(メインループ)と同じで検索キーワードをもとにforeach文でループさせて検索結果を表示させます。
その出力結果をメインループと同じようにfunctions.phpから制御する方法が下記のソースコードになります。
functions.php
|
<?php /* 検索結果を「投稿のみで出力」になるようにカスタマイズする */ function custom_search_result($query){ if(!is_admin() && $query->is_main_query() && $query->is_search()): $query->set('post_type','post'); endif; return $query; } add_filter('pre_get_posts','custom_search_result'); ?> |
上記のコードを記述していただけると、サイト内検索の結果として「投稿のみ」のデータが出力されます。
また、4行目の$query->set(‘post_type’,’post’);のパラメータ2つ目’post’の部分を’page’に変更していただくことで出力結果を固定ページに絞ることができます。用途によって使い分けてください。
⑩検索結果を日付順で表示する
サイト内検索結果を日付順で表示する方法をご紹介します。種類は下記の4つご用意いたしました。
先ほどは検索結果の投稿タイプ別で制御をしましたが、下記のソースコードでは日付ベースで順番を変えることができます。
サイトに合わせていずれかを使用していただければと思います。
1、検索結果を日付順にする
2、検索結果を昇順で日付順にする
3、検索結果を降順で日付順にする
4、検索結果を順序順にする
functions.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
|
<?php /* 検索結果を日付順にする */ function custom_search_orderby(){ return 'post_date'; } add_filter('posts_search_orderby','custom_search_orderby'); /* 検索結果を昇順で日付順にする */ function custom_search_orderby(){ return 'post_date asc'; } add_filter('posts_search_orderby','custom_search_orderby'); /* 検索結果を降順で日付順にする */ function custom_search_orderby(){ return 'post_date desc'; } add_filter('posts_search_orderby','custom_search_orderby'); /* 検索結果を順序順にする */ function custom_search_orderby(){ return 'menu_order'; } add_filter('posts_search_orderby','custom_search_orderby'); ?> |
上記のいずれか1つを用途に応じてコピペして使い分けてください。
いずれもフィルターフックで設定しています。
また、先ほど解説した「9、検索結果をカスタマイズする」のサンプルコードと組み合わせていただけるとより条件を絞り込むことができます。
まとめ
今回はfunctions.phpの理解とともに実際に実務レベルで使える便利なサンプルをご用意しました。
functions.phpはWordPressを使ったサイト制作にとってかなり重要なPHPファイルの1つなので、今回の記事の内容を通して使い方や仕組みを理解していただくことをおすすめします。
また、当サイトのテーマ作成の記事でテーマ作成される際に合わせて本記事を読みながら作業されると、理解の定着がより深まり効率的にスキルアップできるかと思いますので、よろしければご活用ください。
WordPressでバックアップをとる方法【タイミング/用途別で解説】
バックアップの必要性とWordPressでバックアップをおこなうやり方を紹介します。
【最短】WordPress(ワードプレス)で問合せフォームを設置する方法
お問い合わせフォームをWordPressで簡単に設定する方法やカスタマイズする方法を解説します。
【WordPressの基礎・始め方】半日でゼロからブログを立ち上げる方法
今までサイトを開設した事がない人でも簡単にできる、WordPressを活用したブログの立ち上げ方を紹介します。
最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。
この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします
minweb編集部(株)セルリア
”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。
タイトル・URLをコピー
記事タイトルWordPress「functions.php」の効果的な作り方と便利なテクニック10選
記事URLhttps://digitor.jp/textbook/wordpress-functions-php/
記事タイトルWordPress「functions.php」の効果的な作り方と便利なテクニック10選
記事URLhttps://digitor.jp/textbook/wordpress-functions-php/
こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料
Googleサーチコンソール使い倒し活用術 <AOHON>
Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。
サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。