WordPressのfunctions.phpで使える便利なカスタマイズコード41個まとめ

WordPressで使える便利なカスタマイズコードfunctions.phpまとめ

WordPressで使える便利なカスタマイズコードをまとめて紹介します。

WordPressテーマフォルダにあるfunctions.phpにコードを記述して使います。

functions.phpを使いこなせると、WordPressでできることが大きく広がります。

目次

スポンサーリンク

アドセンス広告のカスタマイズ

1. 記事の任意の場所にアドセンス広告を表示する(ショートコード)

記事の任意の場所にアドセンス広告を表示するショートコードです。記事本文中の任意の場所に「[insert_ad]」と記述することで、広告を表示することができます。

参考: WordPressでアドセンスを記事内に表示させる3つの方法

2. 見出しタグの直前にアドセンス広告を挿入する

記事本文中で最初に登場するh2見出しタグの直前にアドセンス広告を挿入します。

h2タグ以外の前に広告を挿入したい場合は、

の部分を変更します。

h3見出しや画像の前に挿入することが可能です。

広告の挿入位置をタグの前ではなく、タグの後に変更する場合は、

の部分を変更して、

とします。

1番目の見出しだけではなく、2番目、3番目の見出しにも広告を挿入する場合は、以下のようにします。それぞれに違う広告タグを設定できます。

参考: 本文記事1、2、3番目のH2見出し手前にアドセンスを挿入するWordpressカスタマイズ方法

3. AMPページでは広告タグを変更する

AMPページと通常のページで広告タグを変更します。WordPressをAMP化するプラグイン「AMP」で用意されている「is_amp_endpoint()」という関数を使います。プラグインを無効にしている場合に備えて、「function_exists('is_amp_endpoint')」で関数の存在確認を行っています。プラグイン「AMP」を使用していない場合のAMP判別については、この記事内で紹介しているAMP判別関数の項目を参照して下さい。

先程の見出しタグの直前にアドセンス広告を挿入するコードをベースにしています。

参考: WordPressのAMPプラグインで通常ページとAMPページで条件分岐する関数 is_amp_endpoint() | アンギス

4. Google Adsenseの新しいモバイル広告用フォーマット「ページ単位の広告(Adsense Page Level Ads)」をheaderに追加する

Google Adsenseで使える、スマホサイト用の新しい広告フォーマット「ページ単位の広告(Adsense Page Level Ads)」は、サイトのheader部分に共通のコードを挿入するだけで実装することができます。functions.phpに以下のコードを記述することで、サイト全体のheader部分に「ページ単位の広告」用のタグを挿入することができます。

参考: スマホサイトでの広告収益を最大化しよう!Google Adsenseでスマホ向け広告「ページ単位の広告」を表示する方法 | Web制作ナビ

コンテンツのカスタマイズ

5. リンクにtarget=”_blank”をつける

コンテンツ内のリンクにtarget=”_blank”をつけます。

ショートコードのカスタマイズ

6. 特定のカテゴリを持っていたら記事本文中にアイコンを表示する(ショートコード)

特定のカテゴリを持っている場合にアイコンを表示するショートコードを作成します。

特定のカテゴリを持っていたら記事本文中にアイコンを表示する(ショートコード)

下記のコードをfunctions.phpに記述します。

表示用のショートコードは

です。

例えばCSSはこんな感じです。

7. 本文中に他の記事へのリンクをタイトル、アイキャッチ画像付きで埋め込む(ショートコード)

ショートコードを使って、本文中に他の記事へのリンクをタイトル、アイキャッチ画像付きで埋め込みます。

こんな感じの表示になります。

2016年、人気の無料WordPressテーマ100選
2016年、人気の無料WordPressテーマ100選

ショートコードは下記のような形式で、URLを指定して記事の情報を取得します。

下記のコードをfunctions.phpに記述します。

CSSはこんな感じです。

参考: お手軽WordPress Tips:記事や投稿内で、別の記事の抜粋やリンク、アイキャッチなどを1つのショートコードで取得出来るようにする – かちびと.net

8. 記事を見出し付きで50音順に一覧表示する(ショートコード)

カスタムフィールドを使って記事を見出し付きで50音順にソートして一覧表示します。

記事を見出し付きで50音順に一覧表示する

「あ行」、「か行」、「さ行」のように行ごとの見出しを設けて、さらにその中に「ア」、「イ」、「ウ」と50音見出しを用意して、それぞれに記事を表示します。

あらかじめyomiというカスタムフィールドを用意して、記事のヨミガナを入力しておきます。ヨミガナは全角カタカナで入力します。

functions.phpに以下のコードを記述します。

表示用のショートコードは

です。

参考: WordPressで記事を見出し付きで50音順に一覧表示する方法 | Web制作ナビ

カスタムフィールドのカスタマイズ

9. 独自のカスタムフィールドを設定する

カスタムフィールドは「Advanced Custom Fields」などのプラグインを使う方法も、簡単なのでおすすめです。

今回は、functions.phpでカスタムフィールドを設定する方法を紹介します。

独自のカスタムフィールドを設定します

記事のヨミガナを入力するためのカスタムフィールドとして、

  • カスタムフィールドのID                             :yomi
  • カスタムフィールドの名前                         :ヨミガナ
  • カスタムフィールドを挿入する編集画面 :投稿(post)
  • カスタムフィールドの種類                         :テキストフィールド

という条件で作成します。

参考: [ WordPress ] 独自のカスタムフィールドを設定する | WebScripter.jp

カスタムタクソノミーのカスタマイズ

10. カスタムタクソノミーを作成する

例えば、ペットに関するブログの場合、「猫の種類」「犬の種類」などのカスタムタクソノミー(カテゴリーグループ、タググループ)を作成することができます。

カスタムタクソノミーのカスタマイズ

functions.phpに下記のコードを追加します。

参考: WordPressでカスタムタクソノミーを設定する方法【初心者向け】 | TechAcademyマガジン

11. ウィジェットにカスタムタクソノミーを追加する

カテゴリーウィジェットを拡張して、カスタムタクソノミーを選択できるようにします。

ウィジェットにカスタムタクソノミーを追加する

functions.phpに下記のコードを追加します。

参考: WordPress標準のカテゴリーウィジェットを拡張してカスタムタクソノミーも選択できるようにする – モンキーレンチ

抜粋のカスタマイズ

12. 抜粋の文字数を変更する

記事の抜粋を表示する「the_excerpt()」を使うと、デフォルトでは記事本文の先頭から110文字が表示されます。この抜粋表示する文字数を変更します。

「110」の部分を任意の文字数に変更します。

参考: テンプレートタグ/the excerpt – WordPress Codex 日本語版

13. 抜粋末尾の「…」を変更する

記事の抜粋を表示する「the_exerpt()」を使うと、省力される文の末尾は点点点「…」の表示になります。この「…」を任意の文字列に変更します。

「…」の部分を任意の文字列に変更します。

「…」をその記事へのリンクつきの文字列に変更することもできます。「…続きを読む」のような使い方ができます。

参考: テンプレートタグ/the excerpt – WordPress Codex 日本語版

検索のカスタマイズ

14. 検索キーワードの「ひらがな」と「カタカナ」、「半角カナ」と「全角カナ」、「全角英数」と「半角英数」を区別しないでマッチさせる

WordPressのサイト内検索で、入力されたキーワードの「ひらがな」と「カタカナ」、「半角カナ」と「全角カナ」、「全角英数」と「半角英数」などを区別せずにマッチさせます。

参考: WordPress検索でカタカナとひらがなを同じように検索できるようにする | RYUS blog

15. 検索結果に投稿記事のみを表示する

デフォルトでは検索結果には投稿ページだけでなく固定ページも表示されます。固定ページを検索結果に表示させたくない場合など、投稿記事のみを表示するように設定します。

参考: 【WordPressの「検索結果を投稿だけ」表示させる】「pre_get_posts」を使ってCodexのコードをこう書くと問題を回避できます | 今村だけがよくわかるブログ

16. 検索結果から特定の記事や固定ページを除外する

記事のIDを指定することで、検索結果から特定の記事や固定ページを除外することができます。

array(1, 2, 3)」の部分に検索結果に表示したくない記事IDを指定します。

参考: WordPress:検索結果をカスタマイズする | NxWorld

17. 検索結果に特定のカテゴリーの記事のみを表示する

検索結果に特定のカテゴリーの記事のみを表示します。functions.phpに下記を記述します。

18. 検索結果から特定のカテゴリーの記事を除外する

検索結果から特定のカテゴリーの記事を除外します。functions.phpに下記を記述します。

19. 検索フォームをオリジナルにカスタマイズする

テーマ内で「get_search_form();」で呼び出す検索フォームをオリジナルのものにカスタマイズします。

参考: WordPressの検索機能をもっと使いやすくする | Webクリエイターボックス

ヘッダーのカスタマイズ

20. ヘッダーにFacebookのApp ID(fb:app_id)を追加する

headタグ内にfacebookのApp IDを設定します。

参考: WordPressにOGP設定・プラグインなしでFacebook/Twitter Cards対応 | EasyRamble

タイトルのカスタマイズ

21. 詳細ページやカテゴリごとにタイトルタグ全体を変更する

詳細ページやカテゴリごとにtitleタグを変更します。「pre_get_document_title」を使って、「WordPressのfunctions.phpで使える便利なカスタマイズコード100個まとめ | Web制作ナビ」のように、ブログ名を含めたタイトルタグ全体を変更します。

セパレーターを変更する場合は、「$separater = ' | ';」を、それぞれのタイトルを変更する場合は、各「if」内の「$title = 」の部分を変更します。

参考: WordPress4.4  title要素のカスタマイズ – WordPress Snippet

22. 詳細ページやカテゴリごとにタイトルタグの一部を変更する

詳細ページやカテゴリごとにtitleタグを変更します。「document_title_parts」を使って、titleタグの一部を変更できます。「$title['title']」で、投稿名やカテゴリ名の部分を変更できます。「WordPressのfunctions.phpで使える便利なカスタマイズコード100個まとめ | Web制作ナビ」の場合、ブログ名はそのままで、「WordPressのfunctions.phpで使える便利なカスタマイズコード100個まとめ」の部分のみを変更できます。

$title['title']の他にも、

  • $title['site'] (サイト名)
  • $title['tagline'] (フロントページで表示されるサイトのキャッチフレーズ部分)
  • $title['page'] (ページ送り時の2ページ目以降の表示)

を変更することができます。

参考: WordPress4.4以降でカスタムフィールドを使い、投稿ごとにタイトルタグを自由に編集する方法(フィルターフック使用) – マイペースクリエイターの覚え書き

23. タイトルタグのセパレーターを変更する

titleタグのセパレーター(デフォルトでは「-」)を変更します。

参考: WordPress 4.4 から wp_title関数が 非推奨になりました – ねんでぶろぐ

24. the_title()で表示される記事タイトルを変更する

the_title()で表示される記事のタイトルを変更します。記事タイトルの前後に文字列を入れたり、記事タイトル事態を変更することができます。

参考: [WordPress]the_titleへのフィルターフックで前後のページヘのリンクのタイトルまで変わってしまう現象への対応 | Wood-Roots.blog

25. カテゴリーページやタグページで表示される「カテゴリー:」「タグ:」の表示を削除する

テーマによってはカテゴリーやタグのアーカイブページで「カテゴリー:」「タグ:」と表示されます。この「カテゴリー:」「タグ:」の表記を削除します。

single_cat_title('', false)」の1つ目のパラメーターに設定した文字列が、タイトルの前に出力されます。「カテゴリー:カテゴリー名」と表示したい場合は、「single_cat_title('カテゴリー:', false)」とします。「single_tag_title('', false)」も同様です。

参考: WordPressの様々なアーカイブページのタイトル表示に便利な「get_the_archive_title ()」を使う。さらにフィルターフックを使って表示テキストなどを変更しよう | 今村だけがよくわかるブログ

予約投稿のカスタマイズ

26. 公開日時が未来の記事を予約投稿状態のまま表示する

公開日時が未来の記事を予約投稿状態のまま表示します。

参考: wp query – How to Get All Posts with any post status? – WordPress Development Stack Exchange

管理画面のカスタマイズ

27. 管理画面で独自のCSS、JavaScript を読み込む

管理画面で独自のCSS、JavaScriptを読み込みます。コードを直接記入する方法、CSSやJSファイルを読み込む方法があります。また、読み込み位置はhead内、body終了タグ直前を指定できます。JavaScriptは、jQueryの場合はコードが異なるので、注意してください。

functions.phpに下記のコードを記入します。

管理画面のhead内にCSSを設定する(コードを直接書き込む)

管理画面のhead内にJavaScriptを設定する(コードを直接書き込む)

管理画面のbody終了タグ直前にJavaScriptを設定する(コードを直接書き込む)

管理画面のhead内にCSSファイルを読み込む

管理画面のhead内にJavaScriptファイルを読み込む

管理画面のhead内にJavaScriptファイルを読み込む(jQueryコードの場合)

管理画面のbody終了タグ直前にJavaScriptファイルを読み込む

管理画面のbody終了タグ直前にJavaScriptファイルを読み込む

管理画面のbody終了タグ直前にJavaScriptファイルを読み込む(jQueryコードの場合)

投稿画面など特定のページでCSS、JavaScriptを読み込む

「ページファイル名」の部分に、CSSやJavaScriptを読み込みたいページのファイル名を指定します。例えば、新規投稿画面の場合は、「admin_print_styles-post-new.php」になります。

参考: [WordPress] 管理画面に独自の CSS・JavaScript を適用させる方法まとめ | memocarilog

管理画面 > 投稿一覧のカスタマイズ

28. 投稿一覧の表示項目にスラッグ、アイキャッチ画像、記事の文字数、記事のIDを追加する

管理画面の投稿一覧ページに表示する項目を追加します。スラッグ、アイキャッチ画像、記事の文字数、記事のIDを出力します。同じ要領で、他の項目を追加することも可能です。

投稿一覧の表示項目にスラッグ、アイキャッチ画像、記事の文字数、記事のIDを追加する

参考: WordPress:投稿一覧にサムネイル・ID・スラッグ・文字数の項目を追加する方法 | NxWorld

29. 投稿一覧の表示項目にカスタムタクソノミー(カスタム分類)、カスタムフィールドの値を追加する

スラッグ、アイキャッチ画像、記事の文字数、記事のIDと同様の方法で、カスタムタクソノミー(カスタム分類)、カスタムフィールドの値を管理画面の投稿一覧ページの表示項目に追加することが可能です。

参考: カスタムフィールドの値をWordPressの投稿一覧画面に表示させる方法 | InfinityScope
参考: カスタム投稿タイプの管理画面の記事一覧にカスタムタクソノミーを表示する – gamme’s direction is as pleasing to the soul.

30. 投稿一覧画面にタグでの絞り込みプルダウンを追加する

投稿一覧画面にタグでの絞り込みプルダウンを追加

投稿一覧画面にはデフォルトでカテゴリーでの絞り込みが付いています。これと同様のプルダウンを使った絞り込み機能をタグでも実装することができます。

参考: WordPress管理画面の投稿一覧に「タグ」と「投稿者」での絞り込み機能を追加するカスタマイズ方法

31. 投稿一覧画面に投稿者(ユーザー)での絞り込みプルダウンを追加する

投稿一覧画面に投稿者(ユーザー)での絞り込みプルダウンを追加する

投稿一覧画面に投稿者(ユーザー)での絞り込みプルダウンを追加します。

参考: WordPress管理画面の投稿一覧に「タグ」と「投稿者」での絞り込み機能を追加するカスタマイズ方法

32. 投稿一覧画面にカスタムタクソノミーでの絞り込みプルダウンを追加する

投稿一覧画面に、カスタムタクソノミーでの絞り込みプルダウンを追加します。

$taxonomy = 'cattype';」の部分を、絞り込み表示したいカスタムタクソノミーの名前に変更します。

参考: メディアライブラリに絞り込み用の「投稿タグ」を追加する:WordPress私的マニュアル

管理画面 > 記事編集画面のカスタマイズ

33. 投稿画面のビジュアルエディターにオリジナルのスタイルシートを適用する

ビジュアルエディターにオリジナルのスタイルシートを適用します。編集画面の見た目を記事のスタイルと統一することができます。

テーマフォルダ内、「css」フォルダの中にある「editor-style.css」がビジュアルエディターのスタイルとして読み込まれます。

以下のようにカンマで区切ることで複数のファイルを読み込むことも可能です。

参考: WordPressのビジュアルエディターのスタイルをカスタマイズする方法いろいろ

34. 記事のスラッグ(URL)が日本語にならないようにする

パーマリンク設定を投稿名「%postname%」に設定していると、スラッグを変更しなかった場合、記事タイトルがスラッグに設定されます。

記事タイトルが日本語の場合、スラッグ名が日本語になってしまい、URLを共有するときなど「https://www.webtoolnavi.com/%E3%83%86%E3%82%B9%E3%83%88/」のようになってしまい、見栄えがよくありません。

スラッグ名に日本語(マルチバイト文字)が入力されて場合、強制的に「{投稿タイプ}-{記事ID}」に変更する方法です。

参考: WordPress の投稿スラッグを自動的に生成する | Simple Colors

35. 記事編集画面でアイキャッチ画像を使えるようにする

テーマでアイキャッチ画像を使えるようにします。「set_post_thumbnail_size()」でアイキャッチ画像のサイズを指定します。3番目の因数で「true」を指定すると、はみ出して部分がカットされます。

参考: Cat Speak | アイキャッチ画像を表示する

36. 記事編集画面の「ここにタイトルを入力」を変更する

記事編集画面のタイトル入力欄に表示される「ここにタイトルを入力」というプレースホルダを変更します。

記事投稿画面の「ここにタイトルを入力」を変更する

「ここにタイトルを入力」の部分を任意の文字列に変更します。

条件分岐で投稿、固定ページ、カスタム投稿タイプごとにプレースホルダに表示するテキストを変更することもできます。

「news」の部分は設定したカスタム投稿タイプ名を指定します。

参考: WordPressの投稿画面で「ここにタイトルを入力」をカスタマイズする方法 | Plan B works

基本設定のカスタマイズ

37. セルフピンバックを無効にする

WordPressには、記事で他のサイトなどにリンクを貼ると、自動でトラックバックを送る機能がついています。ですが、デフォルトでは、自サイトの過去記事にもピンバックを送ってしまいます。

このセルフピンバックを無効にします。

参考: WordPressでセルフピンバックを無効にする4つの方法 – OBOLOG

38. リサイズされる画像の画質を100%にする

WordPressでは画像をリサイズする際に画像の圧縮を行います。デフォルトでは画質が90%になります。通常は90%で全く問題ありませんが、写真サイトなど画質が重要なサイトなどでは画質を100%に設定します。

画質を変更するには、「100」の部分を変更します。100%が最も高画質です。

画質30%
画質30%

画質90%
画質90%

画質100%
画質100%

参考: WordPressにアップロードしてリサイズされたJPG画像の画質を1行のコードで改善させる – かちびと.net

AMP判別のカスタマイズ

39. AMPページを判別する(プラグインAMPを使用している場合)

通常ページとAMPページを判別します。WordPressをAMP化するプラグイン「AMP」を使用している場合に使える判別関数です。プラグインで用意されている「is_amp_endpoint()」という関数を使います。プラグインが無効になっている場合に備えて、「is_amp_endpoint()」の存在確認を行っています。

参考: WordPressのAMPプラグインで通常ページとAMPページで条件分岐する関数 is_amp_endpoint() | アンギス

40. AMPページを判別する(プラグインAMPを使用していない場合)

通常ページとAMPページを判別します。プラグイン「AMP」を使用せずに、テーマでAMP対応をしている場合に使える判別関数です。今回は、「https://www.webtoolnavi.com/wordpress-code-snippets/?amp=1」のような形で、URLに「amp=1」というパラメーターが入っているかどうかどうかで、AMPページか通常ページかを判別しています。URLのパターンが異なる場合は、変更が必要です。

参考: WordPressの投稿本文をAMP化する方法

セキュリティ関連のカスタマイズ

41. Rest APIを無効にする

参考: WordPress4.7より追加されたREST API エンドポイントを無効にする | サイトスパイラル(Sitespiral) – 沖縄で ホームページ制作 / WordPressのことなら

Jetpackのカスタマイズ

42. Jetpackが出力するog:image「blank.jpg」をオリジナル画像に変更する

Jetpackの共有機能を使うとFacebookやTwitter共有用の画像としてog:imageがソースコードのheadタグ内にセットされます。記事のog:imageはアイキャッチ画像が指定されますが、トップページやアイキャッチ画像が設定されていない記事のog:imageは「blank.jpg」になります。この「blank.jpg」をオリジナル画像に変更します。

https://www.webtoolnavi.com/ogimage.png」の部分を指定したいog画像のURLに変更します。

参考: 【改訂版】JetpackのOGPのimageがブランクのときはサイトのロゴに | RYUS blog

おまけ

今回紹介したコードは、functions.phpに記述して使います。

functions.phpを直接編集してもいいのですが、テーマのアップデートがあると、追記した内容が消えてしまいます。

functions.phpのコードを管理できるWordPressプラグイン「Code Snippets」を使うと、functions.phpに記述するコードをプラグイン内で管理することができるのでおすすめです。テーマをアップデートしたり、他のテーマに変更しても影響を受けません。

スポンサーリンク

人気の記事

コメントを投稿する

  • Posted on 2017.02.16
  • Views 922