サイト制作のポイント・まとめ(3)WPカスタマイズ、コンテンツの作成

事業用サイト制作「CREATE ACCORDウェブサイト&ブログサイト(PURPOSE/パーパス)」で参考にしたページなどをまとめました。
これを見ながらWebサイトが作れる…とまでは言いませんが、困ったときはここを見れば答えやヒントが見つかると思います。参考になりましたら幸いです。

今回は、WordPressカスタマイズ、コンテンツの作成についてです。使用テーマ「SWELL(制作者:株式会社LOOS)」でよく使うかもしれないカスタマイズについてもまとめていますよ!

このページの文字数がめちゃくちゃ多め(SWELLの文字数情報を見たら、1.6万文字は超えてた)だけど、SWELLのカスタマイズをしようとしたらWordPressカスタマイズの方だったということも多々あるので、切り離しにいということもあるんだけど、これはWikiとして使ってほしいページとして作ったので、目次やメニューを使って目的な情報を探して見てくださいね!

当サイトは、アフィリエイトプログラム(もしもアフィリエイト、A8.net)とアフィリエイトプログラムサービス(EaseUSアフィリエイトプログラム)に参加しており、アフィリエイト広告(Amazonアソシエイト、楽天アフィリエイトを含む)を掲載しています。そのため、当記事内で広告リンク(アフィリエイト広告リンク)を貼っていますが、記事内容は公平さを心がけております。

ここで紹介している方法は、実際にクリエイトアコードが検討して問題ないと判断したものを取り扱っていますが、このページにある内容を試す際は環境の差異を了承の上で、なるべく自身でも「これは本当に必要なのか?」「シンプルな機能を持ったプラグインで対応できないか?」「このソースは問題なく使えるのか?(脆弱性がないか、バージョンアップ時に自身で対応できるか)」をご検討いただいた上でご利用いただくことを強く推奨します。特に親テーマのテンプレートを直接カスタマイズすることは上書きされてしまうことや正しい状態が分からなくなることから非推奨です。また、なるべくなら子テーマを作ることも避けた方が良く、WordPressのfunctions.phpはカスタマイズのためのファイルですが自身で適切に管理できることが前提であることをご留意ください。(同様にソースファイル管理用のプラグインを使ったカスタマイズも、自身で適切に管理できることが前提です)

目次

プラグイン編

自分がインストールしたプラグインリストですが、参考になりましたら幸いです。
運用途中で色々な事情からプラグインの入れ替えや削除をしているため、随時更新しています。
おすすめプラグインを知りたい方は、おすすめプラグイン編をご確認ください。

(注)HTMLとして表示する用のサイトマップは自分で作成しているので該当するサイトマップのプラグインは利用していません。
(注)プラグインの使用数を減らしたいが、どれも入れたり消したりが大変なので、これ以上は減らしにくいと感じている。幸いにもページ表示速度に悪影響は出ていないし……。
(注)レンタルサーバーで導入される専用のプラグインの記述(例:ConoHa WING コントロールパネルプラグイン)は省略しています。あって困らないものだけ残しています。

プラグイン名(2024年4月25日現在)
(注)プラグイン名は変更になる場合あり
用途・コメント
WP STAGING – Backup Duplicator & Migrationステージングサイト(テスト環境、テストサイト)を簡単に作成・更新・削除のために使用しているプラグイン(限定的に使用するプラグイン)
(注)後述、自作プラグインの開発時に、致命的なバグを表示させたり、気軽にデバッグモードをONにしたりしたくなり、今後のことを考えて導入した方がいいなと痛感したので導入しました
(注)2024年4月25日現在、一旦削除しています。必要になったらまた導入します(このプラグインではないものの別件でちょっと気になったことができ、常に使うわけでもない・常駐させる必要もないプラグインは一旦削除することに)
ステージング環境(ステージング機能)について
BackWPupデータベースバックアップ用プラグインとして使用
(注)ジョブの登録はせず、ダッシュボードからSQLファイルを「1クリックバックアップ」を使い、手動でダウンロードしているので、ジョブに関する不具合は当てはまっていません。phpMyAdminから逐一エクスポートするよりも楽なので使っています。手動更新のサイトのみ導入しています
Broken Link Checkerリンク切れチェック用のプラグイン
(注)参考リンクをブログに貼ることが多いので、リンク切れがあったら修正しやすいように導入した
CookieYes | GDPR Cookie ConsentCookie/GDPRに準拠させるために導入したプラグイン
EWWW Image Optimizer主にWebP変換とメタデータ(Exif情報)の削除目的で使用しているプラグイン
(注)リサイズや圧縮等はしていません
(注)アップロード時に多少圧縮されるみたいですが、基本的にファイルサイズを軽くしてからアップロードしているのでほぼ圧縮されません
Hide GTM codeタグマネージャー専用のコード挿入プラグイン
作者はクリエイトアコード(夜空きり)
SEO SIMPLE PACKでも連携できるけどページ表示速度の都合でソースコードの出力場所を変えたくて作った自作プラグイン。SWELLじゃなくても大体のテーマで(出力関数を使えなくされていない限り)使えるよ。
「Hide GTM code」について
Highlighting Code Blockソース表示用のプラグイン
(注)作者はSWELLの作者と同じ
(注)ソースコード表示は想定していなかったけど、技術的な話をするときに不可避だと感じたので追加しました
Performant Translations翻訳ファイル読み込み最適化プラグイン
(注)ページ表示高速化のために導入。主に管理画面で効力を発揮する。後々WordPressコアに組み込まれるようになったら、要らなくなるかも(削除しなくても良いという話だが……)今後を注視したいところ
Powered Cacheキャッシュプラグイン
(注)サイトヘルスで「永続オブジェクトキャッシュを使用してください」と表示されるので対策のために導入。SWELLの高速化で十分だし、設定をちゃんとしないと干渉するので注意。実のところ、この「永続オブジェクトキャッシュの使用」の影響さえなかったら、真っ先に消したいプラグインだったりもする
Query Monitorデバッグプラグイン(限定的に使用するプラグイン)
(注)2024年4月25日現在、一旦削除しています。必要になったらまた導入します(自動更新のときに一部サイトでエラーが出たので、常に使うわけでもないし……と一旦削除することに)
(注)速度が異常に遅いときや動作がおかしいときの原因調査、子テーマで対応するときの確認などで便利に使える
Redirectionリダイレクトプラグイン
(注)自分でリダイレクト処理できるけど、管理画面から管理しやすいのは有り難いので導入
Search Regex文字列検索・変換用のプラグイン
(注)ミスをしたときに広範囲に修正箇所が及んでいたので使用。便利なプラグインでもあるので、そのまま残している
SEO SIMPLE PACKSEOプラグイン
(注)SWELLと同じ作者が作成しているので、SWELLとの相性は申し分なし
注意点あり
Simple Custom CSS and JSJSとCSS追加管理用として使用しているプラグイン
(注)子テーマを作るほどじゃないカスタマイズであれば、このプラグインで事足りる
SiteGuard WP Pluginセキュリティ対策プラグイン
(注)愛用しているプラグインではあるけれど、今のところはWAF設定を有効にしても不都合を感じていないものの、SWELLユーザーやWAF設定周りで使っているレンタルサーバーとの相性が悪いと感じたら「XO Security」を試してみるのはありかも(かも、と書いている通り、使ったことがないので未検証です)
Smart Custom 404 error page [404page]404エラーページ作成用のプラグイン
(注)404エラーページを自由にカスタマイズしたくて導入
WP Mail SMTPWordPress側でSMTP設定ができるプラグイン(WordPress設置サーバーとメールサーバーが違うなら導入必須と言っても過言ではないプラグイン)
→ただし、これを導入した結果、別なところで不都合が出てきてしまい、これを機に外部のメールフォームサービスの利用に切り替えたため、プラグインを削除しました…が、後々に必要になったので再導入
WP Multibyte Patch日本語サイトなら必須のプラグイン
(注)ファイル名やスラッグを日本語にするなら、必要不可欠なプラグイン
(注)実のところ、ファイル名やスラッグ名を日本語にしていないので、なくても問題はないが、影響するものではないことから念のために入れている
WP-Optimize – クリーン、圧縮、キャッシュデータベース最適化用として使用
(注)他にもキャッシュの指定や画像の圧縮などの機能があるが、他のプラグインが適していると判断して使用していない
(注)初心者には多機能すぎるかも。「WP-Sweep」というプラグインの方が手軽に使えるかもしれない(かも、と書いている通り、使ったことがないので未検証です)
XML Sitemap & Google NewsXMLサイトマップとして利用
(注)著作ページは含めていないのと「お問い合わせ完了」ページは含めないように設定したくて導入。優先順は適当に調整している
(注)Google ニュースサイトマップが強いと個人的には考えていて、地域向けコンテンツがあるなら是非とも入れておきたいプラグインだと思っている

過去に使用していて今は使っていない(今後も使わないだろうと想定される)プラグイン

よかったら、導入プラグインの参考に。

プラグイン名
(注)2024年4月25日当時のものです。プラグイン名は変更になる場合あり
用途・コメント
Breadcrumb NavXTパンくずリスト表示用のプラグイン
→最終的に、SWELLの標準のパンくずリストに戻したので、削除。(実は最新のバージョンに移行したら、構造化データが全部消えたっぽいのもあり、削除の踏ん切りがつきました)
Contact Form 7お問い合わせフォーム
→Gmailの安全性が高くなっていくのは嬉しいけど、その影響でメールサーバーを分けたら、送信で不都合が生じてしまい、その対策をしたら、別なところで不都合が出てきてしまい、これを機に外部のメールフォームサービスの利用に切り替えたため、プラグインを削除しました
Download Managerファイルのダウンロード用プラグイン
→ファイルのダウンロードにパスワードを設定したくて使用したのですが、Bootstrapを使っていたために、ダウンロードページ以外のページ表示速度もすべて低下するという事態を招き、ダウンロードページだけCSSとJSを適用する対応を試みたところ、プラグイン「Query Monitor」で不明なエラー表示がされてしまい、すごく気持ち悪かったので、結局プラグイン使わない方向に変更したため、プラグインを削除しました
DynaMoページ表示高速化のお守り
(注)WordPressは英語がデフォルト言語なので日本語サイトだと少し速くなるとのことなので導入したけど、具体的な処理について書いてあったのと別のプラグインの存在を知ったのもあり、乗り換えた
Markup (JSON-LD) structured in schema.org構造化データ対応プラグイン
(注)最終更新日が1年前なので、他に使いやすいプラグインがあったら乗り換えたい
→最終的にSWELLの構造化データのJSON-LDを自動生成機能をONにしたので、削除
Microsoft ClarityMicrosoft Clarityとの連携用のプラグイン
→最終的にタグマネージャーで管理するようになったのでプラグインを削除しました
Site Kit by GoogleGoogleツール(Googleアナリティクス)との連携用
(注)SEO SIMPLE PACKでも連携できるけどページ表示速度の都合でこちらで設定
→最終的に自作プラグインで対応することにしたので、プラグインを削除しました

SEO SIMPLE PACKを使うときの注意点

(1)OGP画像、トップページだけ設定しても反映されない

SEO SIMPLE PACKを見ると、全体設定のOGP画像設定をしていなかった。設定したら反映された。
どうやら、トップページは全体設定のOGPが優先される模様です。どちらも設定を忘れないようにしましょう!

(2)ソースが重複する

今日(2022年9月28日)、何気なく気づきまして。meta robotsの設定がWordPressのデフォルトと重複しちゃってました!
適用バージョンがいつなのかは定かではない(後述で5.7のようなのですが、それ以外の文献を見つけられず…)のですが、WordPressの検索結果はデフォルトで「noindex」が出力されるため、SEO SIMPLE PACKのプラグインを導入していると、画像内、赤枠で囲んでいるように、meta robotsの設定が被ってしまいます。

Firefoxの検証ツール(デベロッパーモード)の画面です。noindexが複数行で設定されており、重複してしまっています。

「max-image-preview:large」の設定と「noindex」の設定で複数行使われていることは「インデックス登録と表示のディレクティブの組み合わせの処理」の「複数のメタタグ」で例と示されているように問題ないのですが、
「noindex」が重複して設定されているのが、すごく気持ち悪いのです。

気持ち悪さ解消のため、
まず、WordPressのmeta robotsの「noindex」と「follow」を以下の記事を参考に表示させないようにします。
わりとゴリ押し感がありますが、スマートな方法が見つかったら差し替えようと思います。

次に、SIMPLE SEO PACKの設定を必要に応じて上書きします。
あまり気にしないのであれば、SIMPLE SEO PACKでnoindexが出力されるようなので、そのままで大丈夫です。

「noindexにする以上、最終的にはnofollowと併用しているのと同じになる」のであれば、はじめから両方明記する方が良いと夜空きり個人は考えているため、夜空きりは設定を上書きします。

ちょっと古い記事とはなりますが、両方明記する方が良いと考えるきっかけとなった、参考になったページを引用します。

noindex robots meta タグ を設定したページに設置してあるリンクは、たとえ、follow robots meta タグが併用されていたとしても、Googlebot が最終的にはたどらなくなります。

海外SEO情報ブログより-SEO屋は誤解していた!? noindex,followは長期的にはnoindex,nofollowと同じ。noindexページのリンクをやがてGoogleはたどらなくなる
https://www.suzukikenichi.com/blog/noindex-and-follow-is-essentially-the-same-as-noindex-nofollow-in-the-long-run/

そのため、以下を参考に、設定を「noindex, nofollow」に上書きで書き換えます。

最終的に以下のソースになっています。
SWELLの子テーマを使っているので、ソースが途中なのはご容赦ください。

    // meta rototsが重複しているので、被らないようにする。
    add_filter('wp_robots', function (array $robots) {
        $robots['noindex'] = false;
        $robots['follow'] = false;
        $robots['max-image-preview'] = true;
        return $robots;
    });
    // SIMPLE SEO PACKの設定を上書きする
    add_filter('ssp_output_robots', function ($ssp_robots) {
        if (is_search() || is_404()) {
            return "noindex, nofollow";
        }
        return $ssp_robots;
    });

ステージング環境(ステージング機能)について

後述【自作プラグイン「Hide GTM code」について】の開発中、この事業用サイトを使って開発したこともあり、流石にどうにかしないと駄目だろうと思って導入しました。

色々と考えつつ、最終的にたどり着いたプラグイン「WP STAGING」を使うことにしました。

プラグイン「WP STAGING」に関して、導入の経緯も含めてまとめた記事を書いたので、よかったら、ご覧ください!

自作プラグイン「Hide GTM code」について

Site Kit by Googleで十分満足していたのですが、このサイトやブログの情報を頻繁に更新すると、自分の編集中のアクセスもアナリティクスに反映されてしまうので、満足な計測ができなくて、困りました……。

「SIMPLE SEO PACK」にも連携機能はあるのですが、出力位置の都合でページ表示速度の低下に繋がってしまうため、やむなく、独自でコードを出力させることに。

タグマネージャー以外にもAnalyticsなど色々できたら良いかなと思ったのですが、最近、ヒートマップツール「Microsoft Clarity」は導入した方が良いように思いますし、複数登録するならタグマネージャーはコード1つで済むし、管理も楽になるので【タグマネージャーのみのシンプルなプラグイン】という形にしました。

めちゃくちゃ限定的だけど、どのサイトを見ても「タグマネージャー入れよう!」という感じでタグマネージャー推しなので、問題はないのではないかと思います。
(「Analyticsさえあればいいんだ!」という需要が多かったら考えます)

プラグインを公開したので、興味のある方は以下のページから「Hide GTM code」をご覧ください!

おすすめプラグイン編

クリエイトアコードがホームページ運用(Webサイト運用)でおすすめだと思うプラグインをまとめました。
開発者・制作者は素直に「プラグイン編」をご確認ください。
動作に干渉しにくく、表示速度に大きく影響するものはないものをピックアップしています。
SWELL利用ユーザー向けではありますが、そうじゃなくても基本的には使えるものなので、ご安心ください。

(注)HTMLとして表示する用のサイトマップは自分で作成した方がいいので、該当するサイトマップのプラグインは選んでいません。
(注)当方の環境では、サイトヘルスで「永続オブジェクトキャッシュを使用してください」と表示される対策のために「Powered Cache」を導入していますが、SWELLユーザーでもそうじゃなくても、相性が悪いテーマが少ないという話なので「WP Rocket」の方が有料で英語という導入ハードルの高さはありますが、こちらの方がオススメできます。(クリエイトアコードでは未検証です。もし、無料のプラグインをご希望の場合は「Powered Cache」の設定を、ページキャッシュ・オブジェクトキャッシュ・Gzipのみ有効または指定をして使うことをオススメします)

プラグイン名(2024年2月14日現在)
(注)プラグイン名は変更になる場合あり
用途・コメント
BackWPupデータベースバックアップ用プラグインとして使用
(注)ジョブの登録はせず、ダッシュボードからSQLファイルを「1クリックバックアップ」を使い、手動でダウンロードしているので、ジョブに関する不具合は当てはまっていません。phpMyAdminから逐一エクスポートするよりも楽なので使っています。
(注)SWELLユーザーの引っ越しは注意事項も多いので、「All-in-one WP Migration」プラグインのようにまとまったバックアップファイルだけだと状況次第では詰んでしまいます。このプラグインじゃなくても良いので、メディアライブラリとデータベースの両方を別々にバックアップできるプラグインの利用または手動でバックアップを取ることを検討してください。WordPressの標準エクスポート/インポートは留意事項がありますが、バックアップ目的にも使えます。どちらにしても、一度別の環境で復旧テストを行うことを強く推奨します。
Broken Link Checkerリンク切れチェック用のプラグイン
CookieYes | GDPR Cookie ConsentCookie/GDPRに準拠させるために導入したプラグイン
(注)今は、どのサイトもCookie規制をしておくと良いので、おすすめプラグインのリストに加えています
EWWW Image Optimizer主にWebP変換とメタデータ(Exif情報)の削除目的で使用しているプラグイン
(注)基本的にファイルサイズを軽くしてからアップロードした方がいいです。WebPの変換を求められないなら不要。導入するときは、リサイズや圧縮等はしない最小限の設定にしておくと良いです
Hide GTM codeタグマネージャー専用のコード挿入プラグイン
作者はクリエイトアコード(夜空きり)
SEO SIMPLE PACKでも連携できるけどページ表示速度の都合でソースコードの出力場所を変えたくて作った自作プラグイン。SWELLじゃなくても大体のテーマで(出力関数を使えなくされていない限り)使えるよ。
Performant Translations翻訳ファイル読み込み最適化プラグイン
(注)ページ表示高速化のために導入。主に管理画面で効力を発揮する。後々WordPressコアに組み込まれるようになったら、要らなくなるかも(削除しなくても良いという話だが……)今後を注視したいところです。いらなくなったら、このリストからも消えます
Redirectionリダイレクトプラグイン
(注)管理画面から管理しやすいので導入したい人やよく分からない人は必須。自分で設定できる人には不要
Search Regex文字列検索・変換用のプラグイン
(注)特に文字列検索したり変換したりすることがないなら不要
SEO SIMPLE PACKSEOプラグイン
(注)SWELLと同じ作者が作成しているので、SWELLとの相性は申し分なし。そうじゃなくても使える。これでアナリティクス等の連携もできるけど、ページ表示速度を気にするなら、連携に関しては「Hide GTM code」の方をご利用ください
(注)ちょっと注意点もあるけど、気にしなくても良いレベルではあります
Simple Custom CSS and JSJSとCSS追加管理用として使用しているプラグイン
(注)子テーマを作るほどじゃないカスタマイズであれば、このプラグインで事足りるけど、カスタマイズしない人には不要なプラグイン
SiteGuard WP Pluginセキュリティ対策プラグイン
(注)愛用しているプラグインではあるけれど、今のところはWAF設定を有効にしても不都合を感じていないものの、SWELLユーザーやWAF設定周りで使っているレンタルサーバーとの相性が悪いと感じたら「XO Security」を試してみるのはありかも(かも、と書いている通り、使ったことがないので未検証です)
Smart Custom 404 error page [404page]404エラーページ作成用のプラグイン
(注)404エラーページを自由にカスタマイズしたい人が導入するプラグインなので、こだわりがない人には不要なプラグイン
WP Mail SMTPWordPress側でSMTP設定ができるプラグイン(WordPress設置サーバーとメールサーバーが違うなら導入必須と言っても過言ではないプラグイン)
(注)WordPressのログインや通知をGmailで管理するなら導入必須とも言えるプラグイン。ホームページのドメインと同じドメインで一個メールアドレスを作って管理するなら不要なプラグイン
WP Multibyte Patch日本語サイトなら必須のプラグイン
(注)ファイル名やスラッグを日本語にするなら、必要不可欠なプラグイン。自分しか使わないなら、「ファイル名に日本語は使わない」という運用ルールでカバーできるので不要なプラグイン
WP-Optimize – クリーン、圧縮、キャッシュデータベース最適化用として使用
(注)正直、なくてもいい。リビジョンを消したいときやプラグイン削除時のゴミを消したいときは便利。使う場合は、他にもキャッシュの指定や画像の圧縮などの機能は使わないことをおすすめする(干渉するので)
(注)初心者には多機能すぎるかも。「WP-Sweep」というプラグインの方が手軽に使えるかもしれない(かも、と書いている通り、使ったことがないので未検証です)
XML Sitemap & Google NewsXMLサイトマップとして利用
(注)Google ニュースサイトマップが強いと個人的には考えていて、地域向けコンテンツがあるなら是非とも入れておきたいプラグインだと思っているが、著作ページも含めて、サイトマップに含めたくないページが特にないのなら、WordPress標準のサイトマップで十分ではある

コンテンツ編

今回、運営者情報にパーパスを追加していたのですが、パーパスの追加は限定的だと思われたので参考にしたリンクなどは省略します。

コンテンツは、情報の過不足がないことと、「知りたい」「行きたい」「したい」「買いたい」といった閲覧者の行動目的を達成できるページになっていることを意識して作ることがオススメです。
画像・データ(表)・疑問に対する回答・ストーリー性を意識してみましょう。
サイト同様、キーワードも需要があるかどうかを意識してくださいね!

ページのコピーコンテンツかどうかのチェック

サービス詳細ページを作ったときに使用しました。

OGP情報・title(タイトル)タグ・meta description(メタディスクリプション)

OGP確認

SWELLにはアイキャッチ画像がサムネイルで表示されるので問題ないとは思いますが、テキストなどは確認できるわけではないので、一括でチェックできるツールを使うと楽です。エラーで表示してくれるので、アイキャッチ画像の設定漏れが見つけやすいのも有り難いです。

TITLE & META情報抽出

大体問題ないけど、たまに「もう少し、ここはこうした方が良いかな?」という文章が見つかるので、有り難いです。

スマホサイトのテーブルのUI

スマートフォンのテーブルのときに見づらくて困ったことと、できる限りスクロールさせたくなかったので、見やすいテーブルが載っていないかなぁ…と探したときに利用したページです。
最終的に2列にする方向でテーブルを整えることで落ち着きました。

プライバシーポリシー・免責事項の書き方

プライバシーポリシー自体はノウハウがあったんだけど、重要な情報ならともかく、プライバシーポリシー改定の度にお知らせをするのも…と思ったので、「公表されたら適用」としたくて例文を探すのに見ていました。

構造化データ(JSON-LD)

SWELLの構造化データを確認していて、気になったところがいくつかあった(例:組織ではないのに「Organization」がデフォルトで組み込まれていた)ことと、分からないまま何でも従って対応するのは私の職責から無責任ではないかと考えたこと、運営者情報ページで運営者情報の要素を入れたかったことから、私はSWELLの構造化データの自動出力をOFFにしてプラグインを導入する形で対応しています。

分からないまま何でも従って対応するのは私の職責から無責任ではないかと考えたことの他、パンくずリストをはじめ、色々と気になることもあったので、SWELLの構造化データの自動出力をやめてプラグインを導入する形で対応していたのですが、構造化データのドキュメントを今一度振り返ってみたところ、パンくずリスト以外はSWELL標準で問題がないと判断できたため、パンくずリストよりも優先したかったことが色々とあったことから、構造化データをSWELL標準にしました。

そのとき、どのように考えて結論を出したのかは、別の記事で書いてますので、よろしければ参考までに。

もし、構造化データを自分で調べた内容で自前で対応したい人または信用できるプラグインで対応したい人は、「SWELL設定」の「構造化データ」タブを開いて「JSON-LDを自動生成する」のチェックを外した上で、自前で用意するかSEO対策系のプラグインを導入して対応すると良いと思いますよ!

基本の書き方を知らない人用の記事があります。
あまり見慣れない文字列が多いと思いますので、少々難しく感じると思います。基本的にはSWELLのデフォルトで問題ないのですが、知っておくと便利なので是非ご一読ください。

私の場合、運営者情報ページに運営者情報を追加しています。
authorの画像を参考に情報を更に追加して、公式ページで使えるプロパティを更に追加しました。(ここでは、sameAsを追加)その他、構造化データ「Person」の参考として、Schema.org公式サイトも見ていました(更に追加したのは「image」と「jobTitle」と「honorificPrefix」)

記事・ニュース記事・ブログタイプについて分からなくなることがあったので、そういうときに便利なまとめページも有りました。
今回事業用サイトを作っていて、構造化データについては勉強不足であると痛感するばかりでした。

画像アップロード編

これらのツールを愛用しています。私自身は画像をあまり使うことないため、無料版で十分ですが、画像をたくさん使う人はプラグイン版(無料・有料)「TinyPNG – JPEG, PNG & WebP image compression」もあるので、是非ご検討ください。

何にしても、できる限り軽くしてから画像をアップロードすることでサーバー容量の肥大化を抑えることができますし、何よりもページ表示速度が遅くなりにくくなるので、是非とも画像をアップロードするときは軽くすることを意識してくださいね!

(注)「EWWW Image Optimizer」プラグインと併用すると「重複してるよー」って警告メッセージを出すのが気になることと、画像を使うときってパソコンで画像を作成するので、こまめに圧縮してからアップロードでいいかな…と思って入れませんでした。

EWWW Image Optimizerだけじゃない、WordPressで自動生成されるファイルの種類について

自動生成されるファイルは(自作テーマじゃなければ特に)何が使われているのか分からないこともあり、基本的にはデフォルトの設定にしています。

次世代画像フォーマット【WebP】を生成する都合でWebP形式もメディアライブラリのフォルダ内(wp-content/uploads)に含まれるので、「150」「300」「768」「1024」《この辺に1024よりも大きいサイズが何種類か》「元サイズ」の画像が2セット(WebP形式、元の拡張子)生成されることになりますし、フォルダが分かれていないと気持ち悪いと感じるかもしれません。

ただ、WordPressの仕様、WordPressテーマの仕様・設定サイズを把握していないまま、気にせずに対応した結果、思わぬ不具合(エラー)が出て困ることも。

カスタマイズは時には必要で大切なことだけど、使っているシステムの仕様に反することはしちゃ駄目。仕様に反するなら、仕様に反する理由と説明付け、その後のアップデートに伴う変更にも責任を持って対応しよう!

この記事は結構参考になるよ!

不要な画像を削除したいときは?

長年運用していくと使っていない画像の削除をし忘れてしまい、ついついたまりがち……。全体のファイル容量が増えるので、サーバーの容量だけではなく、バックアップも取りにくくなります。

たまに未使用画像を削除するプラグインを使って削除すると良いと思います。
今は削除するほど画像をアップロードしていないので使っていませんが、別のサイトでは「Media Cleaner」プラグインを使っています。未使用画像を削除するプラグインは、どのプラグインでも、使っているのに設定の都合で「未使用画像」として検出されてしまうものもあるので、可能なら個別で削除することをオススメしています。

どちらにしても、特に削除前はバックアップ必須ですよ!

サーバー側で自動バックアップ(設定)ができますが、必ずうまくいくものでもないので、可能なら、自分でもバックアップを取っておくと安心です。
真似しないでほしいのですが私は作成した画像は手元にあるし、それこそ何年も運用していったら現実的じゃない容量にもなってくるので、もしも消えたら、そのときはそのとき!」と開き直ってサーバー任せにしちゃってます……。

余談:画像を縮小・拡大するときのリサンプリング方法

いつもどっちかどっちなのか忘れるので、備忘録として残しておきます。

SWELL・WordPressカスタマイズ編

(注)ここから先は、ほぼ自分用のコンテンツです。SWELLやWordPressで自分なりにカスタマイズしたいときの備忘録として使うために記載していますが、参考になりましたら幸いです。
(注)WordPressテーマ「SWELL」は株式会社LOOSが制作・販売しています。

合言葉「変なことしていないのに存在するページが404エラーになったときはパーマリンク設定で何もせず更新してみよう」

(注)何かしていて対応したのに解決していないときもやってみてね。あと、必ず解決するとは限らないので、解決しなくても恨まないでね。

PHPファイルの修正が増えるので、phpのエラーチェックができるテキストエディタを使うのがオススメです。
PHPのサンプルソース内の1行目はPHPファイルの開始宣言なので、2行目からコピーして使用してくださいね。

WordPress共通

ここでは、基本的にはどのWordPressテーマでも問わず使えるカスタマイズを紹介しています。
プラグインで対応するものも多分に含まれているので、自力で対応したい場合はリクエストをください。気が向いたらまとめます。
中にはテーマに機能内に含まれている機能もあるので、テーマの仕様・機能をご確認の上でご一読ください。

(注)Contact Form 7の情報が増えてきたので、分離させました。リンクは変えていないので、WordPressカスタマイズを求めて本ページを見ている人も大丈夫だと思います。

Contact Form 7専用

クリエイトアコード(夜空きり)は使い慣れていることからContact Form 7をよく利用しています。Contact Form 7の情報が増えてきたので、分離させました。
中にはテーマに機能内に含まれている機能もあるので、テーマの仕様・機能をご確認の上でご一読ください。

メールフォームについて留意事項

個人事業主や企業のようにビジネス利用のために独自ドメインを所有している場合、運用面から見てもウェブサーバーとメールサーバーを分けることをオススメしたいです。メールが届かないとか迷惑メールフォルダに入る可能性をできる限り低くするために。
そうなると、最初から自分で対応するためにプラグインで入れようとせずに「formrun」「formzu(フォームズ)」「フォームメーラー」のようなツールを使うことを考えても良いかもしれません。
「管理者メールアドレス、ログイン用にも使われるメールアドレス、メールフォームが全部Gmailまたは個人用メールアドレス(同じメールアドレス)だけで対応する」ならプラグインでも問題ないと思います。個人的にはブロックエディタにも対応している「Snow Monkey Forms」をオススメします。機能面はとてもシンプルなので、要件によってはContact Form 7の方を薦めることもありますが。
個人的にはContact Form 7は使いやすくて好きなんですけどね。ブロックエディタが非対応なところだけを除けば……。
選ぶときは、デザインや機能面で総合的に考えて判断することをオススメします!

クリエイトアコードは最終的にContact Form 7からformzu(フォームズ)に乗り換えました

正直なところ、WordPressのお問い合わせフォームで良いプラグインも多々あるのですが、初心者には不向きなこと、スパム対策やコンバージョンの可視化等の設定でカスタマイズが不可避で、研究も兼ねているとはいえ、正直なところメンテナンスコストと効果が見合っていないなと感じてきているので、検討中だったのですが、別のプラグインに乗り換えても問題が解決しないこと、無料プランでは限界があったこと、最終的にUIが使いやすかったこともあり、最終的に「formzu(フォームズ)」のビジネスプランを契約して乗り換えました。利用頻度が低いのに有料プランにするのは迷いましたが、サービス購入前同意書のシステムのことを思うと有料プランしか対応できなかったので必要経費として割り切りました。

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

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

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

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

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

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

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

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

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

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

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

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

パンくずリスト作成

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

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

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

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

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

JS・CSSを追加したい!

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

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

高速化(gzip圧縮)したい!

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

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

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」の上)に設置してください。
(注)他のプラグインのコードも入っている可能性もあるので、その場合は一番上に設置。

ファイルのダウンロードを設定したい!

ダウンロードページ以外でもプラグインのCSSとJSを読み込む影響で、ページ表示速度に悪影響が出てしまったので、この方法を使うのをやめました……。

資料のダウンロードを追加するときにダウンロードにパスワードを設定したかったため、プラグイン「Download Manager」を導入しました。
ボタンのデザインをCSSで調整することも考えたのですが、メンテナンスコストもかかるので、できるだけプラグインの設定準拠で進めようと考えると、このページがなかったら、困っていたと思います。大変有り難かったです……!(特にダウンロードボタン周り)

セキュリティ対策のために、メディアライブラリフォルダの中に「PHPを実行しない」htaccessファイルを入れていたのですが、このせいで400エラーが出てダウンロードできないことが分かったので、取り外ししました。このプラグインを使っている人で、該当する場合は気をつけてくださいね!
(プラグインを別なものに変えたり、調べたりで、原因調査と解決にしばらくかかっちゃいました……)

固定ページの末尾をスラッシュありで統一!

スラッシュありなしで混同してしまったのか、サーチコンソールのインデックス除外(リダイレクト)とか気になっちゃったので、対策しました。

固定ページや投稿ページのテンプレートを追加・選択できるようにしたい!

投稿や固定ページのURLを日本語にしないようにしたい!

通常のブログ記事であまり深い知識のない投稿者が、URL(スラッグ)を毎回決めるのは大変なので、なるべく投稿ハードルを下げたい。そのため、カスタマイズとして対応しました。可能なら、SEOを深く意識した記事を書くようにサポートしていきたいのですが、それにより投稿ハードルが上がって更新しなくなるデメリットの方が大きいときに使います。

投稿から固定ページ、固定ページから投稿に変更したい!

固定ページだと都合が悪くなってしまったので投稿ページに変えたいけど、なかなか数があって手作業で移行するのが大変なときに便利です。逆に投稿ページから固定ページに変更することもできます。

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

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

(注)「WPCF7_Shortcode」は非推奨になっていて、「WPCF7_FormTag」になっているから気をつけてね!

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

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

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

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

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

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

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

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

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

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

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

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

後日談:差出人が英語、内容は日本語で送ってきたので、差出人にも同じように対応しました。
textareaをtextに、ぁ-ん→a-z|A-Zに変えるとできますよ!(ソース掲載は差し控えます)

<?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;
}

Contact Form 7の送信元をGmail、またはメール送受信トラブル

Contact Form 7に限らないのですが、WordPressを設置しているサーバーのIPアドレスとメールサーバーのIPアドレスが異なると、セキュリティの観点から、メール側でブロックしてしまいます。
例えば、お問い合わせ送信先メールアドレスがGmailのケースが該当しますね。

Gmailといえば、常にセキュリティ対策を強化し続けているためか、自動返信メール等で、独自ドメインのメールアドレスからGmailアドレス宛にメールを送信する場合、迷惑メールに振り分けられるケースもあります。
なりすまし対策としてSPFに対応しているレンタルサーバーは多いのですが、それをしていても、迷惑メールに振り分けられてしまうことも。

残念ながら、クリエイトアコードも該当してしまい、迷惑メールに振り分けられてしまうようになってました……。

SPFに加えてDKIMを設定する必要がありますが、残念ながら、2023年9月29日現在、さくらインターネットでは対応していません。

事業用サイトはさくらインターネットに設置していますので、メールサーバーを別にする他ない状況になってしまい、夜空きり名義でアフィリエイトブログサイトを作るとき用に契約したConoHa WINGはDKIM設定に対応していたために「使える」と判断し、アフィリエイトブログサイトとメールをConoHa WINGで管理することに変更したのが2023年9月8日頃のことです。

メールサーバーだけ契約することも考えたのですが、セキュリティ対策もバッチリだけど料金が高いか、DKIM設定に対応しているのかが定かではないところが多く、断念しました……。
ConoHa VPSのメールサーバーサービスは対応していて安いのですが、前述の通り、ConoHa WINGを既に契約しているので、新しく契約するよりもサーバーを活用しようと考えた次第です。

本件のことを失念していたこと、しばらくお問い合わせフォームが活用されることがなかったこと、最近は、エックスサーバーを使うケースが多く、そうじゃなくても、メールフォームは別システムを使う事例が増えてきたことから、お問い合わせフォームからのメールが届かないことに気づくのが遅れてしまいました。使っていない技術は忘れがちなので、本件については反省しないとです……。

エックスサーバーはDKIMに対応しているのですが、利用者が多すぎる弊害なのか使えなくなってしまう事例がありました。
原因を調査しても解決せず、そのときはエックスサーバーの利用を断念した記憶があります。
もしかして、サーバーIPがブラックリストに入っているのか……? と考察しているページを見て、そうなのかなと思った記憶があります。
DKIM対応前の話なので、DKIM対応後の今は問題ないかもしれません。DKIMは2023年2月14日に対応したそうです。(公式サイト調べ)

対策としては、メールフォームプラグインの利用をやめてメールフォームサービスを利用するのが一点。もう一つは、WordPressからメールを送るときのSMTP設定をするプラグインを導入して設定することです。

使いやすくて有名なのが「WP Mail SMTP」です。

「WP Mail SMTP」の使い方

このプラグインを利用する前に注意事項。
セキュリティ対策プラグインでログイン通知がメールで届くようになっている場合、WordPressからのメールが届く場合は不都合が生じる可能性があります。
「管理者メールアドレス、ログイン用にも使われるメールアドレス、メールフォームが全部Gmailまたは個人用メールアドレス(同じメールアドレス)だけで対応する」なら問題ありませんが、逆にそうじゃないケースだと、クリエイトアコードのように「お問い合わせフォームからのメールは届くようになったけど、メールアドレスを全部統一するように修正しないとWordPressのサイトから送信される他のメールが届かなくなってしまった」というような不都合が生じる可能性があります。
それ以外の回避方法となると「WordPressでメールフォームプラグインを使うのをやめる」か「サブドメインやサブディレクトリでお問い合わせフォーム専用のWordPressサイトを作って埋め込む」以外には思いつかなかったので、前者の方が楽なんじゃないかと思います。

なんとなく個人的に「セットアップウィザード」は使いにくいと感じているので、ダッシュボード(プラグインの設定画面)にアクセスした後は画面の項目名に合わせて設定をしていきます。

「送信元メールアドレスを強制使用」のような強制使用と「送信元アドレスを返信パス (return-path) として設定」は必要ならチェックを入れてください。「送信元メールアドレスを強制使用」はチェックを入れた方がいいかもしれません。

STMPサーバーやユーザーID・パスワード等の設定については、サーバー側のメール設定ヘルプページをご確認ください。
送受信テストを行い、問題がなければ設定完了です。
管理面でも、Webサーバーとメールサーバーを分けておくのはオススメの方法と言えますが、こういう落とし穴には気をつけていきましょう!

Contact Form 7とreCAPTCHA v3

Contact Form 7には「Contact Form 7 の設定を検証する」ツールが備わっていますが、「最低限reCAPTCHAは必須である」と指摘および注意喚起がありました。
理想は「Akismet」と組み合わせることとページには記載されていますが、商業利用は有料のプラグインのため、予算との相談になるでしょう(クリエイトアコードは商業利用になります。アフィリエイトブログも商業利用の区分になるそうです)

Googleが提供する「reCAPTCHA」は無料で使えるので、設定することをおすすめします。
設定の仕方ですが、GoogleのreCAPTCHAページにアクセスします。
ここで「v3 Admin Console」を選択します。

青いボタン「Get Started with Enterprise」のリンク先にアクセスすると戸惑うし、目的が達成できないので注意。

その後、「新しいサイトを登録する(または+)」をクリックして、ラベル(自分が分かればOK)とreCAPTCHA タイプ(Contact Form 7はv3を選択)を設定、ドメインを入力して送信してキーを発行します。

ここで得られたキーをWordPressの管理画面「Contact Form 7」のメニューから「インテグレーション」を選択し、reCAPTCHAを選び、進んだセットアップ画面に入力すると設定が完了します。

ただ、お問い合わせフォーム以外の全部のページで表示される上にページ表示速度も遅くなるんですよね……ありがたいけど、正直邪魔です。
ここから先はカスタマイズが必要になりますが、気になる人は、下記のコードを入力してください。フォームがあるページが一つじゃない場合は、「 || 」 でつなげて記入します。

add_action( 'wp_enqueue_scripts', function() {
    if(is_page('contact')) return;
    wp_deregister_script( 'google-recaptcha' );
}, 100, 0);
add_action( 'wp_enqueue_scripts', function() {
    if(is_page('contact1') || is_page('contact2')) {
        return;
    }
    wp_deregister_script( 'google-recaptcha' );
}, 100, 0);

欲を言うなら、お問い合わせフォームがあるページ以外の「Contact Form 7」のJavaScriptとCSSの読み込みも廃止したいところなのですが、実現できなくはないけど、それを対応するコストと対応結果が見合うわけではなく、バージョンアップに対応していくメンテナンスコストを考えると、今はパフォーマンスがそこまで悪いとは体感的にも感じていないこともあり、対応を保留しています。

難しいしややこしくなるにしても、もう少し「必要な部分だけ必要なものを読み込む」設定が楽にできれば良いのですが……思いつかないので、思いついたら紹介しようと思います。(余談ながら、広告も似たような感じで……。フックとかあったら自動で説明文を入れられるのになぁ)

Contact Form 7で勝手にPタグが入るのをなんとかしたい!

SWELLでレイアウトを作って、中のHTML部分だけを利用してフォームの表示部分を作成しています。
今まで特に問題がなかったのですが、たまたま見たらレイアウトが崩れているのに気づきました。
調べてみると、空のPタグ(中にはbrタグ)がいる…! それもたくさん…!!

解決方法を調べてみたところ、自動改行を行う定数「WPCF7_AUTOP」の値をfalseにすることで解決できるとのこと。
falseの仕方はwp-config.phpファイルに記述するだけ。コメントの「~の前に書いてください」は守ってね!

define ('WPCF7_AUTOP', false);

SWELL固有

当サイトは、WordPressテーマ「SWELL」を使って制作しています。
ここでは、SWELL固有のカスタマイズ方法を掲載しています。

先人達に感謝です…!

SWELLカスタマイズするとき、総合的に見るといいページ

SWELLのヘッダーの右側に「お問い合わせ」「電話番号」ボタンを設置したい!

最終的にブログパーツを呼び出す方法で対応したのですが、右側に「お問い合わせ」「電話番号(リンク)」等のコンバージョン(目標)を設置するときに活用するといいと思います!

SWELL「この記事を書いた人」の設定変更(または非表示)

別で運営者情報を記載してリンク先を「運営者情報」に繋げるつもりだったので非表示にするために確認したページです。

SWELLのテキストリンクのホバー演出の装飾を追加する

ホバー演出が大体ついているのにテキストリンクのホバー演出だけ付いてないのが逆に不思議だなと思った。

SWELLのグローバルメニュー(ヘッダーメニュー)を2行にしたい!(アイコンを追加したい!)

SWELL、長いメニュー名にするとブラウザの幅を狭めたときにメニューが見切れてしまうので、2行の英語表記「Service」で補完する方法を選びました。メニューの数とメニュー名の文字数は少なくするといいと思います。

SWELLでカテゴリーページを編集したい!

正直、まだカテゴリーページを整備する程の記事数がないのですが、コンテンツが充実してきたら順次対応していくつもりで参考にしたいページとして紹介しておきます。

SWELLのNO IMAGE(ノーイメージ)画像を設定したい!

大体「外観>カスタマイズ」で辿れば設定項目(設定ページ)が見つかるんだけど、ついつい検索してしまう……せっかくなので紹介しておきます。

SWELLでブログカードを設定したい!

ブログカード欲しくて調べた。
これを見つけたとき、脳内で「あー!なるほどー!!」と言ってました。多機能なので、まだまだ把握しきれてないみたいです。SWELLの場合は「ブログカード=関連記事ブロック」と覚えておくと良さそうです。

SWELLの記事スライダーを別のページでも表示したい!

使ってないけど、役に立つと思って収集した情報です。
私は、更にカスタマイズしてショートコードで呼び出せるようにしました。
設定はSWELLの記事スライダーに準拠するので、細かい条件を指定したい場合は不向きなのでご注意ください。

<?php
/*
* 記事スライダー拡張(ショートコード)
*/
add_shortcode('slide_box', function () {
    get_template_part('parts/top/', 'post_slider');
});

カテゴリーページとタグページをカスタマイズしたい!

カテゴリーページとタグページはなるべく何のページであるか、ページの特徴や補足説明などを加えてカスタマイズしましょう。SWELLはブログパーツを指定できるので、独自コンテンツを追加することもできますよ!

PCでハンバーガーメニューを表示させたい!

SWELLの仕様を活かしつつ、HTMLをなるべくシンプルに出力させるかを考えたとき、ヒントを探して見つけたページにあった「PCでハンバーガーメニューを表示させる」方法が一番シンプルかつHTMLのソースで不満に思っている点も解決できると考えたので採用しました。

対応方法のヒント自体は無料で読めます。答えは有料の中にあります。
買い切り500円で済むので、ぜひ買ってほしいのですが、意地でも無料が良い人にヒント「ブラウザの検証用ツールを駆使してみよう!」

実は購入せずに実際に対応できちゃったんですけど、500円の払いきりであること、「ライターではないけど文章を書くのが好きであること」「『札幌に拠点を構える』オンライン文章教室」を見て、購入することにしました。
自力で対応するまでに気づきにくいので、もう一つヒント「deta-spmenuを探してみよう」

この方法を使うときは、グローバルナビメニューを空にする必要があるのですが、テーマの仕様上、空のnavとulが残されてしまいます。親テーマ側で直接書かれているため、現時点で削除する方法はありません。(パンくずリストもです……せめてフックがあるといいのですが、仕様に反していること、少数派であることから、やむを得ず子テーマで対応しています)
保守管理がない場合・保守管理が終わる場合は、潔く「空のnavとulが残される」で妥協するか、子テーマで対応した場合はその旨を明記するようにしましょう。

メニューに対して思うこと

メニューが増えたとき、SWELLの標準のままだと使い勝手が悪くなってしまいます。
可能なら、スマートフォンもハンバーガーメニューは使わず、主要なメニューを最大でも4つまでに抑えてそのままパーツとしてトップビジュアル(ファーストビュー)の上に設置することを推奨したい派ですが、次の点を考慮して、今はハンバーガーメニューでも「Menu(メニュー)」を併記すること、「目標(コンバージョン)はメニューの外かつデバイス問わずファーストビュー内に設置する」ことを最低条件にハンバーガーメニューを許容しています。

  • ハンバーガーメニューの認知度が上がっていること
  • 「Menu(メニュー)」の表記を併用することで、分かりづらさも解消されていること
  • テーマの仕様に反して実装したときの対応リスク

どんなサイトかにもよるので、必ずしもハンバーガーメニューが最適というわけではありません。
トップに大きくメニューを用意してあげたり、検索窓を用意してあげた方が良いこともあります。利用者・閲覧者が使いやすいサイトを意識しましょう。

メニューは、本当に閲覧者が必要とするものだけに絞って用意して、サブページは主要ページ内からリンクを飛ばすようにし、迷子にさせないようにしましょう。
可能なら、メガメニューで画像(アイコン)+テキストの組み合わせで利便性も上げましょう。

メニューが増えすぎても「目標(コンバージョン)への誘導効果が弱くなる」可能性もあります。

カスタマイズしたいけど不安な方はご相談ください!

お困りの方は、ぜひ「Web技術サポート・Webコンテンツサポート」をご利用ください。

おまけ:事業用サイトのカスタマイズ編

クリエイトアコード(夜空きり)が納得のいかない部分などは独自でカスタマイズを入れています。
親テーマの更新の度に同じ修正を子テーマにするつもりなので、マニュアル目的で残すため、記事にしました。
参考になりましたら幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

サイト運営者

クリエイトアコード

ホームページのリニューアル/改善・SEO対策・Web集客のお手伝い屋さん【Web技術サポーター&Webコンテンツサポーター】

ソフトウェア&ゲーム開発会社でプランナーとして従事しながら、ディレクション・マネージメント、資料作成の知識を実践形式で学ぶ。その後はリサイクルショップのWebサイト担当者として従事しつつ、SEOやWordPressの実践形式での研究を深めた。転職をした会社や兼業(副業)としての活動でも今までに学んだ知識と技術を活用しながらも更なる向上に努めていたが、様々な人のお悩み解決をしていきたいという思いが強くなったため、転職から二年後に独立。2022年5月10日に開業して個人事業主になった。
現在は、今までに得た知識や技術(SEO・WordPress・Webマーケティング・Web集客)を活かしながら「人と人を調和し、創造を支援する」「自分で色々動きたいので技術面をサポートしてほしい人や自分も考えたいが技術面については知見がないのでフォローしてもらいたい人を応援する」ことを目的に「訪問者に届けるコンテンツを作る」お手伝いをするための活動をしている。

事業の他、ソフトウェア&ゲーム開発会社時代に無理をした働き方をしたために自律神経のバランスが乱れやすいことや精神的にもダメージを負ったことから「抑うつ状態」と診断されて数年かけて寛解した経験から、同じような人が苦しまずに働くことができるように自身を実験台に「スキルを活用した生活に困らないかつ無理をしない働き方」の確立を目指している。


ご相談・お問い合わせ

ホームページ制作・リニューアル・運用・SEO・Web集客、Webマーケティング・Webサイト制作技術・タスク・スケジュール・プロジェクト管理や業務改善のお悩みなどを遠慮なくご相談ください。

資料ダウンロード

サービスのご利用を社内で検討したい方のために、実績やサービス概要、料金表などのクリエイトアコードの案内資料をPDFでダウンロードすることができます。ご自由にダウンロードください。

目次