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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

10. SEO対策（PageSpeed Insights編）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

18. ネイティブCSSの復元

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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