わりとよくあるワードプレスのカスタマイズ

ワードプレスで比較的ご依頼の多いカスタマイズをいくつか取り上げてスクリプトの解説をしてみたいと思います。企業サイトに多い店舗一覧や求人情報などの制作に必要な複合検索（絞り込み検索）の実装やカスタムタクソノミーの利用など。その際に必要なPHPやJavaScriptのコードを掲載していきます。

1. 認証機能をつけて会員様限定エリアを作成

企業サイトでは一部の顧客向けに限定コンテンツ（会員様向けの特典の告知など）をホームページ内に掲載するケースがあります。こうしたケースの会員様ログイン機能を設置してみます。ワードプレスが用意してくれている便利な組み込み関数がありますので主にそれらを利用したPHPの記述になります。

2. スクロールと連動した背景画像の拡大と固定（レスポンシブ）

スクロールと連動して背景画像が拡大するエフェクトを実装してみます。併せてbackground-size:cover; background-attachment:fixed;と同じエフェクトも実装してみます。jQueryで再現しますのでデスクトップとスマートフォンの両方で同じ動作になります。

3. 複合検索（絞り込み検索）をPHPとJavaScriptで実装（前編）

複合検索（絞り込み検索）と言いますと「エリアで探す」「間取りで探す」「家賃で探す」などの不動産物件情報サイトが思い浮かびます。もちろんワードプレスでもこうした機能は可能です。基本的な機能だけならPHPだけで可能ですがJavaScriptも併用すればより使いやすい検索機能になります。

4. Advanced Custom Fieldsの画像取り扱い注意点

ワードプレスでの企業サイト制作では画像をカスタムフィールドで入力するケースがほとんどです。プラグインAdvanced Custom Fieldsは画像を扱う際にも非常に便利ですが、サイズの取り扱いなどについてはやや注意点もあります。実際にサンプル画像をアップロードして確認してみたいと思います。

5. Shopifyのブログに目次を追加。<h2>、<h3>を自動で目次化するJavaScript（初学者向け）。

Shopifyでブログをつける（お知らせとかニュースとかではなく）とするならば目的はSEO対策ということになるでしょう。であれば、目次はSEO的にはあった方がよいとされているのでJavaScriptで作ってみたいと思います。テーマはDawn（6.0.2）です。

6. PHPで「前のページに戻る」を実装

「前のページに戻る」ボタンはJavaScriptによる実装が手軽ですが、前のページが無い場合（ブックマークからの場合）や、外部サイト（検索サイトなど）から来た場合はボタンを非表示にしたいのでPHPで実装してみたいと思います。ワードプレスではカテゴリーなどを活用している場合はあると便利なインターフェイスです。

7. SEO対策（PageSpeed Insights編）

SEO対策と言いますとワードプレスの場合は便利なプラグインがいろいろありますが、今回は遅延読み込み対策以外はプラグインを使わずに改善施策を実施しました。遅延読み込み対策もワードプレスプラグインではなくjQueryプラグインを使用しています。実際におこなった施策とその効果をご報告します。

8. 多言語サイトのインターフェースをjQueryでカスタマイズ

ワードプレスで多言語サイトを制作する場合で言語が日本語を含めて3語以上になりますとインターフェースにも工夫が必要になってきます。将来的に言語を増やす可能性も考慮すると言語が増えても対応できるインターフェースにしておきたいものです。

9. Ajaxで記事一覧を切り替える（ページビュー順、更新日順、メニューオーダー順）

前回はページビューを記録する機能をワードプレスに実装しましたので、今回はその記録されたページビューのデータを使用して記事一覧ページの表示順をページビュー順に変更してみます。併せて、最終更新日順やメニューオーダー順でも並べ替えられるようにし、これらを画面の再読込なしで切り替えられるようAjaxで実装します。

10. カテゴリー選択の窓を縦に長くして、もう少し全体が見えるように変更

カテゴリーやカスタムタクソノミーをうまく活用することでワードプレスはずいぶんと使いやすくなります。ただし、カテゴリーなどがかなり増えると管理画面の選択窓が小さく操作しづらくなります。アクションフックを使用して管理画面に独自のCSSを適用し選択窓を広げてみます。

ワードプレスで作成した企業サイト内に求人コンテンツを掲載し、その情報をXMLフィードでIndeed（インディード）に送信することで求人情報を連携させることができます。そのためのXMLフィードの自動生成などの仕組みをPHPを使ってプラグイン風に実装してみたいと思います。
※XMLフィードによる連携が可能なのは求人情報件数が数千件ある場合で、それ以下の場合は一覧ページのURLを共有する形になるようです。

12. フォームにリンク元ページの情報を引っ張ってきて表示

ワードプレスでフォームを実装する際にリンク元のなにがしかの情報を引っ張ってきてあらかじめ表示したいケースがあるかと思います。例えば求人情報を掲載してフォームから応募していただくケースやイベントなどの申込みフォームもそうでしょう。プラグイン（MW WP Form）を利用してそうした機能を実装してみます。

13. カスタムフィールドを使って一覧への表示・非表示ボタンを実装

ワードプレスで特定のコンテンツの表示・非表示をコントロールするにはカテゴリーを利用することでも可能ですが、カスタムフィールドを利用した方が管理画面での操作がわかりやすいものになります。その際のカスタムフィールドの設定方法やPHPの記述方法などについて解説します。

14. ソーシャルメディア公式ボタン（リンク集）

Facebook、Twitter、はてなブックマーク、Pocket、feedlyの公式ソーシャルボタンへのリンク集です。functions.phpにてhead内へのフィードのリンク出力とフィードの生成を制御する記述も掲載しました。

15. リライトルールを追加して読み込むテンプレートを切り替える

カスタム投稿などを利用した際にパーマリンクを調整していると404NotFoundが出てしまうことがあります。そうしたときはリライトルールを追加することで解決できることもあります。具体的な例をあげて基本的なリライトルールの追加方法を解説してみます。

16. Shopifyの商品詳細画面、オプション選択のJavaScriptの処理を考察（初学者向け）

Shopifyのテーマをカスタマイズする場合に商品詳細画面のテンプレート（main-product.liquid）をいちから作ることはほとんどないとは思うのですが、そうはいっても、どう処理しているのかわからないのも気持ちが悪いので試しに再現してみましたのでJavaScript、CSSを掲載します。テーマはDawnです。

17. 投稿一覧をランダムに表示する

ワードプレスの標準ループでは通常、投稿は時系列に取り出され最新の投稿から順に並びます。しかし、時系列とは関係性の薄いコンテンツの場合、アクセスごとに表示順を変えて変化を出すことも時として有効です。標準ループに少しだけ手を加えることで可能ですのでその方法を見ていきましょう。

18. .htaccessによるURL書き換え（転送）

サイトを運営していると一部のページのURLを変更したり、あるいはサイト全体を別ドメインに移行（引っ越し）したりすることがあります。その場合に利用すると便利な.htaccess（ドットエイチティアクセス）によるURL書き換え（転送）の基本的な記述を確認してみましょう。

19. ページビューを記録して管理画面に表示する

記事ページのページビューを記録して記事一覧表示をページビュー順に並べ替えてみたいと思います。今回はその前半部分、ページビューを記録する機能をSQL文を使用して作成しワードプレスに実装します。併せて、管理画面もカスタマイズして記事一覧ページにページビューの表示項目を追加してみます。

20. JavaScriptでシンプルなスマホ用メニューを実装

スマートフォンサイトでよく見るハンバーガーアイコンとメニューを実装してみます。使用するのは簡単なJavaScriptのみで特にプラグインは使用しません。カスタマイズがし易いようにわかりやすくシンプルな形で作ってみたいと思います。

21. ネイティブCSSの復元

オリジナルのテンプレート・スタイルシートで企業サイトを作成する場合、管理画面からエディタで入力するコンテンツにはワードプレスのネイティブCSSが適用されるようにしておかなくてはなりません。ワードプレスには固有のCSSクラスがありますのでこれらを復元していきます。

22. 求人情報をXMLフィードで出力（後編）

前編ではIndeed（インディード）向けのXMLフィードの完成イメージの確認からXMLツリーの出力とファイル生成、アクションフックを利用した自動生成までを解説しました。この後編では手動更新用の管理画面の作成と、クラスを作成してのプラグイン化をしてみたいと思います。
※XMLフィードによる連携が可能なのは求人情報件数が数千件ある場合で、それ以下の場合は一覧ページのURLを共有する形になるようです。

23. ループの入れ子で親子カテゴリー（ターム）の一括出力

ワードプレスではカテゴリー（またはカスタムタクソノミー）をうまく活用することで、店舗一覧などの動的生成表示がずいぶんとラクになります。店舗の増減はもちろん店舗の分類も管理画面で増減できますので企業サイトを制作する際は積極的に活用したいものです。

24. add_theme_supportでタイトルを任意に書き換える

ワードプレス標準のテーマtwentynineteenなどのheader.phpを見るとタイトルタグの記述がないことに気がつきます。これはワードプレス4.1から利用可能になったadd_theme_support('title-tag')を使用していることが理由です。wp_titleに代わるこの組み込み関数を使ったタイトルの書き換え方法を確認していきます。

25. サイト制作時の定番プラグイン10選

ワードプレスのプラグインは非常にたくさんありますが、企業サイトの制作では必要最低限のものだけ使用します。ここにあげた10個のプラグインはどれも実績十分で安心して使用できる定番プラグインです。

26. 複合検索（絞り込み検索）をPHPとJavaScriptで実装（後編）

複合検索（絞り込み検索）の実装後編ではループ表示とページング機能を作るとともに、JavaScriptとAjax（jQuery）を使用してより使いやすい複合検索（絞り込み検索）フォームにしてみたいと思います。ワードプレスではAjax用のリクエストルートも用意されていますので確認していきます。

27. PHPでスマートフォンかどうかを判別（is_mobile()の作成）

スマートフォンかタブレット＆デスクトップという分け方をする場合、ワードプレスの組み込み関数wp_is_mobile()では対応できません。wp_is_mobile()ではiPadやKindleなどのタブレットもモバイル端末として認識してしまうからです。スマートフォンだけを判別するユーザー定義関数を作ってみます。

28. ワードプレスのセキュリティ対策

WEBアプリーケーションを作成するためのフレームワークには基本的なセキュリティ対策は施されています。もちろんワードプレスもそうですが、カスタマイズするのであればセキュリティ対策への理解も必要になってきます。ワードプレスの代表的な組み込み関数を紹介します。

29. 正規表現でつくる画像ナビゲーション

ワードプレスにはカスタムメニューという機能がありますが、オリジナルでグローバルナビゲーションを作成したり、画像を使用したナビゲーションを一から作る場合に役立つ正規表現の使い方をご紹介します。

30. スクロールスナップを自作（jQuery版、JavaScript版）

カッコいい系や高級感を出したいときなどに余白を大きくとったデザインをしたくなるときがありますが、そんなときに便利なのがスクロールスナップです。ブロック単位でしかスクロールできなくなりますので、こちらが意図したデザインをユーザーに見せることができます。できるだけシンプルに作ってみます。

31. タームの一覧表示を利用した複合検索、店舗一覧などの実装

タームを出力する場面はおもに２つあります。一つはターム単独で一覧として表示するケース。もう一つは投稿が属するタームを一覧で出力するケースです。タームを利用することでいろいろな表現が可能になります。ワードプレスの組み込み関数get_terms、get_the_termsを使った記述を解説します。

32. カスタムフィールドを対象にしたキーワード検索を実装

ワードプレスで企業サイトを制作する場合、店舗情報や求人情報など共通のフォーマットが多ページある場合はカスタムフィールドを使用して処理することがほとんどです。しかし、ワードプレスのキーワード検索機能はこのカスタムフィールドには対応していませんのでPHPとSQLを使用して実装してみます。

33. jQueryでスクロールと連動した画像の切り替え（斜めトリミング）を実装

スクロールと連動させて画像が切り替わるエフェクトを実装してみます。切り替わる際に使用するマスクを平行四辺形にすることで斜めから徐々に画像が切り替わっていくようにします。レスポンシブ対応にするためにwidthやheightなどもjQueryで動的に設定していきます。

34. Shopifyの商品詳細画面、オプション選択のバリエーションを文字ではなく画像で表示するJavaScriptを考察（初学者向け）

今回は『Shopifyの商品詳細画面、オプション選択のJavaScriptの処理を考察（初学者向け）』で取り上げた話を一歩進めまして、バリエーションを文字ではなく画像で表現する方法を考察してみたいと思います。といっても、前回の延長戦ですからそんなに難しいことではありません。テーマはDawn（6.0.2）です。

PHP・JavaScriptの記述を解説