Category: プラグイン

WordPressをアップデートしたあと、 「今まで表示されていたページタイトル（titleタグ）が突然消えた…」 という経験はありませんか？ 特に 自作テーマ + All in One SEO（AIOSEO） の組み合わせで、WordPress 6.9 以降にアップデートしたタイミングで といった不具合が発生するケースがあります。 この記事では、WordPress 6.9以降で起きるこの現象について 原因最短で直す方法（結論）なぜ今まで問題なかったのか？確認手順自作テーマの運用で注意する点 までまとめて、再発しない形で解決できるように解説します。 結論：自作テーマに add_theme_support(‘title-tag’)

WordPressテーマが title-tag をサポートしていない問題と対処法 「AIOSEOでタイトルを設定しているのに、検索結果に反映されない…」「<title>タグが思った通りに出ない…」 そんな経験はありませんか？ 実はこの問題、SEOプラグインの不具合ではなく、WordPressテーマ側の設定不足が原因であるケースが非常に多いです。特に WordPress 6.9 以降では、この仕様がより厳密になっています。 この記事では、 を、初心者にもわかりやすく解説します。 結論：テーマが title-tag をサポートしていないと、SEOプラグインは機能しない まず結論からお伝えします。 テーマが add_theme_support( ‘title-tag’ ) に対応していない場合、AIOSEOなどのSEOプラグインはタイトルを制御できません。

Contact Form 7（以下CF7）は、WordPressで最も利用されているお問い合わせフォームプラグインの一つです。しかし、標準のエラー表示について、次のような不満を感じたことはないでしょうか？ この記事では、CF7のエラー表示を一つにまとめ、ポップアップ（モーダル）で表示する方法を、実装手順付きで分かりやすく解説します。 プラグインの追加は不要で、JavaScriptとCSSのみで対応可能です。 この記事でできること Contact Form 7の標準エラー表示の問題点 CF7のデフォルト仕様では、以下の2種類のエラー表示があります。 この仕組み自体は親切ですが、 といったUX上の課題があります。 解決策：エラーをまとめてポップアップ表示する CF7には、バリデーションエラー発生時に実行されるJavaScriptイベントが用意されています。これを利用することで、エラー情報を取得し、まとめてポップアップ表示できます。 実装の流れ 順番に見ていきましょう。 ① デフォルトのエラー表示を非表示にする（CSS） まずは、CF7標準のエラーメッセージを非表示にします。 ※

WordPress でフォームを作成する際、多くの制作者が使っている人気プラグインのひとつが MW WP Form（MWフォーム） です。 日付入力（特に「年」のセレクトボックス）を扱うときに、「毎年手動で年数を更新しないといけないのが面倒…」と感じたことはありませんか？ この記事では、MW WP Form のセレクト項目に「現在の年〜3年後」までを自動で出力する方法をわかりやすく解説します。 毎年の手動更新が不要になり、フォーム管理もぐっとラクになります。本記事では、実装方法を 2つのパターン に分けて紹介します。どちらもコピペOKです！ なぜ「年の自動生成」が必要なのか？ たとえば以下のようなフォームを作っている場合、毎年の更新が地味に大変です。 2024年、2025年、2026年…と、年数が繰り返される項目はどうしても出てきます。 しかし、フォームの年数を固定値で書いていると、年が変わるたびにフォームを修正しないといけません。 管理者にとってはもちろん、クライアントに納品している制作会社にとっても、毎年の微調整は極力減らしたいところ。 そこでおすすめなのが、

WordPressで人気の画像最適化プラグイン EWWW Image Optimizer。画像のWebP変換やLazy Load（遅延読み込み）機能でサイトの表示速度を改善できる便利なツールですが、場合によっては「このページだけは無効化したい」というケースがあります。 例えば そんなときは、ページ単位でEWWWの機能をオフにすることが可能です。この記事では、その具体的な方法を解説します。 なぜエラーのように見えるのか？ EWWWのLazy Load機能を有効化すると、通常の画像タグが次のように書き換えられます。 src が透明PNGのプレースホルダーになり、実際の画像は data-src に格納されます。通常はJavaScript（lazysizes.min.js）が動作して本来の画像に置き換わりますが、JSが動かない環境や特定の処理と干渉する場合、プレースホルダーのまま残ってしまい「画像が表示されない」状態に見えるのです。 方法1：特定ページでWebP変換を停止する EWWWにはフィルターフック ewww_image_optimizer_skip_webp_rewrite が用意されています。これを使えばページ単位でWebP書き換えをスキップできます。 方法2：Lazy Loadスクリプトを読み込まない

〜三日後から選択可・火曜無効・日本語対応のカレンダーをflatpickrで実装しよう〜 Contact Form 7（CF7）で予約フォームや日程入力欄を設けるとき、標準のdateフィールドでは「使いにくい」「見た目がさみしい」と感じたことはありませんか？ 今回は、そんな悩みを解決してくれるJavaScript製のカレンダーUIライブラリ「flatpickr」を使って、CF7のカレンダーを次のようにカスタマイズする方法をご紹介します。 初心者でもわかりやすいように、コードの貼り方や注意点も含めて解説していきます！ なぜflatpickrを使うのか？ Contact Form 7 の標準 date タグは、ブラウザ依存のため見た目や動作がばらつきます。一方、flatpickrを使えば以下のような魅力があります。 完成イメージ フォーム内の日付入力欄が以下のようになります 実装手順 flatpickr本体と日本語ロケールを読み込む まず、WordPressテーマの footer.php またはカスタムJSファイルに以下のスクリプトを読み込みます。

「Checkbox を選んだタイミングで、自動的にテキストボックスへ“数字や任意の値”を入力させたい」というカスタマイズは、Contact Form 7 単体では実現できませんが、JavaScript（jQueryなしでもOK）を外部から読み込むことで簡単に実現できます。 この記事では、CF7フォームのHTML例・JavaScript例・貼り付け位置まで、わかりやすくご紹介します！ 実装イメージ Contact Form7フォーム（フォーム編集画面に貼る） footer.php に貼る JavaScript（コードはサンプルです） ※Contact Form7 の入力欄へフォーム内ではなく「テーマのフッター」からJSを読み込ませることがポイントです。 JavaScriptを貼り付ける場所はどこ？ WordPressテーマのfooter.php の </body> の直前に貼り付けてください。

お問い合わせフォームや注文フォームで、「未入力の項目」や「未定の選択肢」がそのまま確認画面に表示されてしまって困った経験はありませんか？ 本記事では、Contact Form 7 + Multi-Step Forms を使っている方向けに、確認画面で空の項目を自動的に非表示にする方法をご紹介します。 よくある困りごと：「未定」や未入力もそのまま表示される… 例えば、以下のようなフォーム内容があるとします。 <div class=”form-group event-block”> <dl> <dt>イベント参加可否</dt> <dd> <span id=”cf7msm_event-status”>未定</span> <span id=”cf7msm_event-date”>

1. ゴールイメージ before after [mwform_select] を置くと手入力の “固定選択肢” だけ 年が 最新（今年）→100 年前 まで自動で並ぶ新年になっても放置で OK 基本コンセプト フォーム編集画面での設定 functions.php に追記するコード /** * birth_year

WordPressでお問い合わせフォームを簡単に設置できるプラグイン「Contact Form 7（CF7）」。この記事では、フォーム送信完了後に自動で「サンクスページ（完了画面）」へリダイレクトさせる方法を、初心者にもわかりやすく解説します。 できること こんな方におすすめ 使用する仕組み：wpcf7mailsent イベント Contact Form 7では、JavaScriptで「フォーム送信完了」を検出できるカスタムイベント wpcf7mailsent を提供しています。 実装方法 ① フォームIDを確認 WordPress管理画面で以下の手順で数値IDを確認します： 例） https://example.com/wp-admin/admin.php?page=wpcf7&post=123→ この場合、フォームIDは「123」 ②

Advanced Custom Fields（ACF）は、WordPressサイトにカスタムフィールドを簡単に追加できるプラグインで、開発者やサイト管理者に非常に人気があります。ACFを使用すると、ページや投稿に追加のデータを保存し、そのデータをテンプレートで柔軟に表示することができます。今回は、ACFのカスタムフィールドで選択肢のラベルにHTMLを使用する方法について説明します。 選択肢の設定 ACFで選択肢を設定する際、通常は以下のように「値:ラベル」の形式で入力します。 red : Redblue : Blue この例では、「red」や「blue」が実際に保存される値で、「Red」や「Blue」がユーザーに表示されるラベルです。しかし、ACFの素晴らしい点は、ラベル部分にHTMLを使用できることです。これにより、ラベルの表示をカスタマイズし、スタイルやアイコンなどを追加することが可能になります。 HTMLを含むラベルの設定 例えば、選択肢のラベルに色を指定したい場合、以下のように入力することができます。 red : <span style=”color: red;”>Red</span>blue : <span

WordPressサイトのフォーム作成プラグインとして人気のある「MW WP Form」には、さまざまなカスタマイズ機能があります。今回は、その中でも年月日のセレクト項目を動的に出力する方法について解説します。この方法を使うことで、ユーザーがフォームを使いやすくし、入力ミスを減らすことができます。 MW WP Formの基本設定 まずは、MW WP Formの基本的な設定について確認します。MW WP Formは、WordPressの管理画面からプラグインをインストールし、フォームを作成することができます。 プラグインのインストールと有効化 フォームの作成 以上で基本的なフォームの作成は完了です。次に、年月日のセレクト項目を動的に出力する方法について具体的に見ていきましょう。 年月日のセレクト項目を動的に出力する方法 MW WP Formでは、フォームフィールドに動的な値を設定するために「MW WP Form

WordPressの人気フォームプラグイン「MW WP Form」において、「ajaxzip3」を使用して郵便番号から住所を自動入力する機能を実装する方法について解説します。この機能を追加することで、ユーザビリティの向上とフォーム入力の効率化を図ることが可能です。 ajaxzip3とは？ ajaxzip3は、日本の郵便番号データを使用して、郵便番号から住所情報を自動で検索し、フォームフィールドに入力するためのJavaScriptライブラリです。このライブラリを使用することで、ユーザーは郵便番号を入力するだけで自動的に住所欄が埋まるため、入力の手間が省け、ユーザーエクスペリエンスが向上します。 MW WP Formでの実装方法 Step 1: ajaxzip3ライブラリの追加 まず、ajaxzip3ライブラリをWordPressサイトに追加する必要があります。これは、<head>タグ内または<body>タグの終了タグ直前に以下のスクリプトタグを挿入することで実現できます。 Step 2: フォームフィールドの準備 MW WP Formでフォームを作成または編集し、郵便番号と住所の入力フィールドを準備します。フィールドにはそれぞれ固有のIDまたはクラス名を割り当てることが重要です。 Step 3:

SEO（検索エンジン最適化）は、デジタルマーケティング戦略の中心的な要素であり、ウェブサイトの可視性とトラフィックを大幅に向上させることができます。WordPressでウェブサイトを運営している場合、All in One SEO Packプラグインは、サイトのSEOを簡単かつ効果的に管理するための強力なツールです。この記事では、特定のページとカテゴリーでタイトルとディスクリプションをカスタマイズする方法をステップバイステップで説明します。 All in One SEO Packの概要 All in One SEO Packは、WordPressのプラグインの中でも特に人気のあるSEOツールの一つです。このプラグインを使用すると、サイト全体のSEO設定を簡単に管理し、ページごとのメタデータを最適化することができます。検索エンジンでのランキング向上に不可欠な、タイトルタグやメタディスクリプションなどの重要なSEO要素の編集が可能になります。 タイトル変更(置き換え)方法 functions.phpに記載します。 ディスクリプション変更(置き換え)方法 まとめ All

Contact Form 7はWordPressで最も広く使用されているコンタクトフォームプラグインの一つで、その柔軟性と拡張性により多くのウェブマスターに愛用されています。しかし、多くの場合、標準的なフォーム機能ではユーザーの特定のニーズを満たせないことがあります。ここで重要なのが、「カスタムバリデーション」の役割です。 この記事では、Contact Form 7でカスタムバリデーションルールを追加し、より高度なフォーム管理を実現する方法について詳しく解説します。カスタムバリデーションを使うことで、フォームの入力値をより厳密にチェックし、サイト訪問者からの適切な情報収集を助けることができます。 コンタクトフォーム7の記述 必須設定の必要はないです。 functions.phpへの記載方法 変更方法 text-746、ext-747はどちらか一方必須にしたい部分の内容を記載します。 $result->invalidate( ‘text-747’, ‘どちらか記載してください。’ );どちらに入力もれのアラートを出すかを指定します。確認画面などの設定がある場合はエラーになる可能性があります。 フィルターフック一覧 名称 概要 wpcf7_acceptance フォームの受け入れを許可するかどうかを返す

WordPressのウェブサイト運営において、「Contact Form 7」は最も人気のあるコンタクトフォームプラグインの一つです。その柔軟性とカスタマイズ性により、さまざまな用途のフォームを簡単に作成できます。今回の記事では、このプラグインを使用して住所フィールドを自動入力する方法に焦点を当てます。 住所の自動入力機能は、ユーザーにとって便利なだけでなく、フォームの入力ミスを減らし、データの正確性を向上させる効果もあります。また、ユーザーエクスペリエンスを向上させ、ウェブサイトのプロフェッショナルな印象を与えることができます。 この記事では、Contact Form 7を使用して住所自動入力機能を設定する方法、それに必要なプラグインやAPIの利用、そして実際にフォームを作成する手順について詳しく解説していきます。この機能をウェブサイトに実装することで、ユーザーからの問い合わせや登録プロセスをよりスムーズに行えるようになります。 YubinBangoで簡単に実装する YubinBangoは、オープンソースのJavaScriptライブラリで、ユーザーが郵便番号を入力すると、自動的に住所欄を埋める機能を提供します。このライブラリは、日本の郵便番号システムに最適化されており、簡単に導入できることが最大の特徴です。 YubinBangoライブラリの導入 以下のスクリプトタグを、ウェブページの<head>タグ内か、または</body>タグの直前に挿入します。 functions.phpで読み込む方法 フォームの準備 p-postal-code: 郵便番号を入力するフィールドです。p-region, p-locality, p-street-address, p-extended-address: それぞれ、都道府県、市区町村、町域、建物名などを自動入力するフィールドです。 ショートタグの設定

WordPressサイトでの画像最適化の重要性について Webサイトにおいて、画像は魅力的なビジュアル要素を提供すると同時に、ページの読み込み速度に大きく影響を与えます。大きな画像ファイルは、サイトのパフォーマンスを低下させる主要な原因の一つとなり得ます。適切に最適化されていない画像は、ページのロード時間を延長し、ユーザー体験を損ない、最終的にはサイトの離脱率の増加につながることがあります。 さらに、Googleをはじめとする検索エンジンはページのロード速度をランキング要因として考慮します。つまり、画像最適化はSEO（検索エンジン最適化）にとっても重要な側面なのです。画像を最適化することで、サイトのロード速度を改善し、検索エンジンにおけるサイトの可視性を高めることができます。 EWWW Image Optimizerプラグインの役割 EWWW Image Optimizerプラグインは、WordPressサイトの画像を効率的に最適化し、サイトのパフォーマンスを向上させるツールです。このプラグインは、画像のファイルサイズを小さくすることで、ページのロード速度を速めるのに役立ちます。EWWW Image Optimizerは、JPEG、PNG、GIFなど様々なフォーマットの画像に対応しており、画質を保持しつつファイルサイズを削減します。 プラグインは自動的に新しくアップロードされた画像を最適化するだけでなく、サイト上の既存の画像に対してもバルク最適化を行うことができます。これにより、サイトの全体的なパフォーマンスを一度に向上させることが可能です。また、EWWW Image Optimizerはサーバー上で直接画像を処理するため、外部サービスへの依存がありません。これにより、プロセスの速度とセキュリティが向上します。 プラグインのインストール方法 1.プラグインを検索します。 2.今すぐインストールをクリック 3.有効化すると「設定」の部分に表示されます。 4.設定を進めていきます。 5.設定完了後画像の設定を行います。

MW WP Formでフォームの選択肢に応じて項目を表示・非表示する方法を解説。WordPressで条件分岐のフォームを簡単に実装するテクニックを初心者にもわかりやすく紹介します。カスタムフォームでユーザー体験を向上させましょう。 MW WO Formの項目を追加します。 表示・非表示を切り替えたい部分にclassとvalueを付与します。 Cssを追加します。 条件分岐のJavaScriptを記載します。 確認画面の設定 自動返信の設定 サンクスメール 管理者宛メール 必須項目を切り分ける 上記内容で表示非表示になったものを、表示された場合に、必須項目に切り替える。 Favorite

コンタクトフォームはウェブサイトで重要な役割を果たしますが、フォームが長すぎるとユーザーの離脱率が上がる可能性があります。この問題を解決するために、「Contact Form 7 Multi-Step Forms」プラグインを使用することができます。このプラグインを使うことで、フォームを複数のステップに分割し、ユーザーが分かりやすく入力できるようにすることができます。今回は、「Contact Form 7 Multi-Step Forms」の使い方について解説します。 プラグインのインストールと有効化 WordPressのダッシュボードにログインし、「プラグイン」セクションから「新規追加」を選択します。 プラグイン検索バーに「Contact Form 7 Multi-Step Forms」と入力し、プラグインを検索します。プラグインが表示されたら、「インストール」をクリックしてプラグインをインストールします。 有効化すると、上記画像のメッセージが表示されるので「スキップ」をクリックして次に進みます。 新規フォームの作成 新しいコンタクトフォームを作成します。通常のContact Form

アンケートやユーザー登録などのフォームでは、しばしば入力項目が増加してしまいます。しかし、設問が多すぎると、ユーザーは面倒くささを感じて離脱しやすいことがあります。 こうした課題に対処するのに役立つのが「Conditional Fields for Contact Form 7」です。これはお問い合わせフォームを簡単に条件分岐できる便利なプラグインで、ユーザーに必要な入力項目だけを表示できます。この記事では、Conditional Fields for Contact Form 7に関する設定方法や導入の利点を、具体的な例を交えて紹介します。 「Conditional Fields for Contact Form 7」とは何か 「Conditional Fields