【WordPressサイト制作・SWELL】サイト制作のポイント・まとめ（2）WordPressカスタマイズ、コンテンツの作成

WordPress共通

ここでは、基本的にはどのWordPressテーマでも問わず使えるカスタマイズを紹介しています。
中にはテーマに機能が含まれていることもあるので、テーマの仕様・機能をご確認の上でご一読ください。

URLに含まれる文字列で条件分岐したい

Gimmick log

URLに含まれる文字列で条件分岐する｜Gimmick log wordPressでページ送りをした時に、2ページ目以降（urlにpageを含む）は違う見せ方をしたい時に利用しました。 （他にもっといいやり方はあるかもしれません。。）

ブログサイト「パーパス」を作るときに使用しました。

（使用例）「URLにブログサイトのカテゴリーが含まれていなかったら表示する」といった分岐を入れるのに使用

WordPressのURL・URIパスを取得したり出力する関数を知りたい

「home_url()」が非推奨かどうかを知りたくて調べてました。（結論：大丈夫でした）
他にも掲載されているので、参考になると思ったので掲載しておきます。更新日が2022年なので問題ないとは思いますが、使用する前に非推奨関数になっていないかを調べてから使うと安心です。

404エラーページをカスタマイズする

わえのブログ

SWELLで404エラーページをカスタマイズしてサイト離脱率を下げる方法 WordPressテーマのSWELLで、404エラーページをカスタマイズして、サイト離脱率を下げる方法について解説します。404ページをデフォルトのままにしておくのはもったいないで…

404エラーページ作成するときに見たページです。
最終的にプラグイン「404page」を使用しました。この方法はSWELL以外でも使えるよ。

カテゴリーページのURLから「category」を消す

岡山のWordPressを使ったホームペ…

【WordPress】カテゴリーページのURLから【category】を消す３つの方法 WordPressのカテゴリーページ（URL）から【category】の文字列を消す３つの方法をご紹介します。いずれの方法も3分程度で導入できる簡単なものばかり。ご自身の環境にあっ…

Webサイトの階層構造を考えたら許容できなかったので利用しました。（後述「補足：Webサイトの階層構造について」参照）
せめて「category」がページとして見える状態になっていれば良かったんだけど……。

そして、URLから「category」を消すと、カテゴリーの2ページ目以降と子カテゴリーが404エラーになることがあります。（無理に「category」をURLから消したため、仕方ないのですが……）
そのため、修正した状態に合わせてカテゴリーの2ページ目以降と子カテゴリーのパーマリンクの設定も修正する必要があります。

補足：Webサイトの階層構造について

あわせて読みたい

Webサイトの設計について「Webサイトの役割・階層構造」 Webサイトの設計について「Webサイトの役割・階層構造」 Webサイト（ホームページ）が生まれた経緯は、HTML（マークアップ言語）の起源から分かります。簡潔に言うなら…

Webサイトの階層構造と何を問題視しているのかは、このページで解説しています。
簡単に結論だけを記載すると、
私は『存在していないコンテンツの階層』が適していないと考えたため、「category」をURLから消したいと考えたため、カスタマイズしました。

パンくずリスト作成

Let'sプログラミング

Breadcrumb NavXTプラグインの使い方(パンくずリストの表示) Breadcrumb NavXT プラグインは WordPress を使ったブログにパンくずリストを表示してくれるプラグインです。パンくずリストはカテゴリ―やタグ、日付などをベースに表示さ…

愛用しているプラグイン「Breadcrumb NavXT」
なぜ愛用しているのかというと、構造化やCSSのクラスの指定など、細かい調整がしやすいからです。
テーマのカスタマイズ（子テーマ）が不可避になってしまうため、特にこだわりがない人はテーマ固有のパンくずリストを使うと良いと思います。

子テーマの修正をしたい方は次でまとめているので、パンくずリストの項目を御確認ください。

次回のまとめ記事

【WordPressサイト制作・SWELL】サイト制作のポイント・まとめ（3）事業用サイトのカスタマイズ編 【WordPressサイト制作・SWELL】サイト制作のポイント・まとめ（3）事業用サイトのカスタマイズ編 事業用サイト制作「CREATE ACCORDウェブサイト＆ブログサイト（PURPOS…

構造化データ（JSON-LD）のパンくずリスト

パンくずリスト（見た目）を作成したあと、構造化データのパンくずリストも用意しておきます。
構造化データを自力で対応できる程まだ不慣れだったこと、テーマのカスタマイズが多岐にわたってしまうことを懸念してプラグインを利用して対応することにしました。

※当サイトでは、パンくずリスト・記事（ブログ）・WebSiteの設定で使用しています。パンくずリスト以外はヘルプページ見なくても大体分かるので大丈夫だとは思います。情報が多いのでプラグイン名で検索すると他の設定マニュアル記事も出てくると思いますよ！

Contact Form 7にショートコードを登録したい

埋め込みでプライバシーポリシーを表示させたかったので使用しました。

※「WPCF7_Shortcode」は非推奨になっていて、「WPCF7_FormTag」になっているから気をつけてね！

Contact Form 7に完了ページ（サンクスページ）を追加したい（GA4でコンバージョンとして設定したい）

ウインドミル

Contact Form 7 プラグインで完了画面（サンクスページ）に移動させる方法 Contact Form 7で、プラグインを使ったサンクスページ（送信完了画面）の表示方法を紹介します。今回はメール送信後のアクションを追加できるプラグイン「Redirection for …

コンバージョン（目標）を設定するなら、あった方がいいお問い合わせ完了ページ。特にGA4で設定するときは設定が楽になるので設定しておきたい。

※本当はパラメーター等でどこの完了ページなのか一発で分かるようにしたかったけど、うまく動作しなかったので諦めました。GA4の経路データから見ることにします。

2022年9月6日追記：後日やっぱり複数の完了ページ（サンクスページ）が必要になったので。

もう少し、なんとかできないか探してみたところ、良いページを見つけまして。

じゅんぺいブログ

【Contact Form 7】サンクスページの作り方と複数のお問い合わせフォームを振り分ける方法 コーディング案件の単価と作業効率を上げる！ Brain総合ランキング1位獲得 ＆ 3日で500部突破 累計660部突破 クチコミ約360件 （平均スコア） 今だけ！5つの無料特典あり🎁

このおかげで複数の完了ページ（サンクスページ）を用意することができました。
細かいところまでちゃんと判別するとページの管理が大変になってしまうので、種別問わず「お問い合わせ」は「お問い合わせ完了ページ」、「サービス購入前同意書」は「サービス購入前同意書同意完了ページ」、「資料請求」は「資料ダウンロードページ」をそれぞれ表示することにしました。

「送信」→「送信完了ページ」への移動の時間が、ちょっと遅くなるのが懸念事項ですが、他で遅くなっているわけではないので、許容範囲ではあると思います。（何かを送っているというのは伝わるので、ブラウザ（タブ）を即閉じする人…いないといいなぁ……）

※お問い合わせ完了ページの経路についてはGA4の経路データから見ることにします。

お問い合わせフォーム（Contact form 7）スパム対策

reCAPTCHAが手っ取り早いのですが、ログイン画面でもないのにあると煩わしさがあるので。これをテキストエリア（お問い合わせ内容）のところに入れておけば大丈夫かなと思います。ひらがなが必ず入るのは日本語のみなので使える方法ですね。

reCAPTCHAを設定したい方はプラグイン公式ヘルプページに設定方法が載っているので参考にしてください。

Contact Form 7

reCAPTCHA (v3) reCAPTCHA はスパムやその他の自動化された嫌がらせからあなたを守ります。Contact Form 7 …

※これを適用すると日本人以外からは受け付けなくなっちゃうので、ターゲットが国内限定の方のみ、ご活用ください。

<?php
// 英語スパムメールの防止
add_filter('wpcf7_validate_textarea', 'wpcf7_validation_textarea_hiragana', 10, 2);
add_filter('wpcf7_validate_textarea*', 'wpcf7_validation_textarea_hiragana', 10, 2);
function wpcf7_validation_textarea_hiragana($spam_result, $target_tag)
{
    $target_name = $target_tag['name'];
    $target_value = (isset($_POST[$target_name])) ? (string) $_POST[$target_name] : '';
    // テキストエリアが複数ある場合は、IF文内の後ろに「 && $target_name == 'your-message'」を追加（your-messageは指定の名前に変更ください）
    if ($target_value !== '' && !preg_match('/[ぁ-ん]/u', $target_value)) {
        $spam_result['valid'] = false;
        $spam_result['reason'] = array($target_name => '申し訳ありません。この内容は送信できません。お手数をおかけいたしますが、今一度ご入力ください。');
    }
    return $spam_result;
}

JS・CSSを追加したい！

「Simple Custom CSS and JS」プラグインを愛用しています。
管理画面上から追加・修正できるのがものすごく便利。
私は有料版にはしていませんが、有料版にするとページごとに読ませるようにもできるので、必要なページにのみ適用したいCSSやJSがある人には便利な機能です（カスタマイズとして追加したいCSSやJSだけど、一部のページだけしか使わないなら、読み込まないようにできるので、データが少し軽くなる分、ページ表示高速化の助けにもなると思います）

※保守管理やページ表示速度のことを考えると、それくらいになるまでCSSを追加することのないようにした方が良いです。

高速化したい！

プログラミングを学ぶ

【WordPress】【さくらのレンタルサーバ】GZIP圧縮を有効にする – プログラミングを学ぶ 目次やりたいこと手順動作確&#3546 … “【WordPress】【さくらのレンタルサーバ】GZIP圧縮を有効にする” の続きを読む

サーバー側で圧縮に対応しているか確認するために見ていました。

※エックスサーバーはデフォルトで圧縮に対応しているので不要かも。

WebP変換したい！

【厳選】Wordpressテーマおすすめ…

EWWW Image Optimizer でWebP変換！【設定・使い方】 「EWWW Image Optimizer」の設定方法と使い方【次世代フォーマットWebP変換方法も】を解説！ 画像の圧縮を自動でしてくれる過去画像の圧縮をまとめて行える次世代画像フォ…

私はリサイズなし・WebPのみにして使用しています。

※SWELLのフルワイド機能で背景画像を使っている人は、遅延読み込みのチェックを外さないと「表示されたり表示されなかったり」といった不都合が起こりますので、要注意です。

WebP変換を適用するときは、htaccessファイルにWebPの設定をする必要があります。
普段使っているコードを掲載します。よかったらご利用ください。

※クリエイトアコード（夜空きり）のやり方を載せていますが、プラグインの情報をコピペしても問題ありません。
※コメントアウトするときは#（半角シャープ）を使います。

#
# WebP
#

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_URI} (?i)(.*)(\.jpe?g|\.png)$
RewriteCond %{DOCUMENT_ROOT}%1%2.webp -f
RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1$2\.webp [L,T=image/webp,R]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>
<Files ~ ".(webp)$">
Header set Cache-Control "max-age=864000, public"
</Files>

「#BEGIN WordPress」の上（「SiteGuard WP Plugin」プラグインを入れた場合は「#SITEGUARD_PLUGIN_SETTINGS_START」の上）に設置してください。
※他のプラグインのコードも入っている可能性もあるので、その場合は一番上に設置。