ウェブデザインの勉強まとめサイト
WordPressテーマが title-tag をサポートしていない問題と対処法 「AIOSEOでタイトルを設定しているのに、検索結果に反映されない…」「<title>タグが思った通りに出ない…」 そんな経験はありませんか？ 実はこの問題、SEOプラグインの不具合ではなく、WordPressテーマ側の設定不足が原因であるケースが非常に多いです。特に WordPress 6.9 以降では、この仕様がより厳密になっています。 この記事では、 を、初心者にもわかりやすく解説します。 結論：テーマが title-tag をサポートしていないと、SEOプラグインは機能しない まず結論からお伝えします。 テーマが add_theme_support( ‘title-tag’ ) に対応していない場合、AIOSEOなどのSEOプラグインはタイトルを制御できません。
Continue reading
Contact Form 7（以下CF7）は、WordPressで最も利用されているお問い合わせフォームプラグインの一つです。しかし、標準のエラー表示について、次のような不満を感じたことはないでしょうか？ この記事では、CF7のエラー表示を一つにまとめ、ポップアップ（モーダル）で表示する方法を、実装手順付きで分かりやすく解説します。 プラグインの追加は不要で、JavaScriptとCSSのみで対応可能です。 この記事でできること Contact Form 7の標準エラー表示の問題点 CF7のデフォルト仕様では、以下の2種類のエラー表示があります。 この仕組み自体は親切ですが、 といったUX上の課題があります。 解決策：エラーをまとめてポップアップ表示する CF7には、バリデーションエラー発生時に実行されるJavaScriptイベントが用意されています。これを利用することで、エラー情報を取得し、まとめてポップアップ表示できます。 実装の流れ 順番に見ていきましょう。 ① デフォルトのエラー表示を非表示にする（CSS） まずは、CF7標準のエラーメッセージを非表示にします。 ※
Continue reading
WordPress でフォームを作成する際、多くの制作者が使っている人気プラグインのひとつが MW WP Form（MWフォーム） です。 日付入力（特に「年」のセレクトボックス）を扱うときに、「毎年手動で年数を更新しないといけないのが面倒…」と感じたことはありませんか？ この記事では、MW WP Form のセレクト項目に「現在の年〜3年後」までを自動で出力する方法をわかりやすく解説します。 毎年の手動更新が不要になり、フォーム管理もぐっとラクになります。本記事では、実装方法を 2つのパターン に分けて紹介します。どちらもコピペOKです！ なぜ「年の自動生成」が必要なのか？ たとえば以下のようなフォームを作っている場合、毎年の更新が地味に大変です。 2024年、2025年、2026年…と、年数が繰り返される項目はどうしても出てきます。 しかし、フォームの年数を固定値で書いていると、年が変わるたびにフォームを修正しないといけません。 管理者にとってはもちろん、クライアントに納品している制作会社にとっても、毎年の微調整は極力減らしたいところ。 そこでおすすめなのが、
Continue reading
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スクリプトを読み込まない
Continue reading
お問い合わせフォームや注文フォームで、「未入力の項目」や「未定の選択肢」がそのまま確認画面に表示されてしまって困った経験はありませんか？ 本記事では、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”>
Continue reading
1. ゴールイメージ before after [mwform_select] を置くと手入力の “固定選択肢” だけ 年が 最新（今年）→100 年前 まで自動で並ぶ新年になっても放置で OK 基本コンセプト フォーム編集画面での設定 functions.php に追記するコード /** * birth_year
Continue reading
SEO対策の基本でもある「meta description」。WordPressではAll in One SEO（AIOSEO）プラグインを使えばdescriptionの管理ができますが、「投稿ごとにカテゴリに応じて内容を変えたい」と思ったことはありませんか？ この記事では、特定のカテゴリに属する投稿だけdescriptionをカスタムフィールドから生成し、それ以外は本文から自動抜粋する方法を、サンプルコード付きで解説します。 想定シナリオ カテゴリ 使用するフィールド 内容 news custom_excerpt 投稿の要約 company company_name, company_location, company_message 3つの項目を結合して紹介文に event event_summary
Continue reading
Contact Form 7を使用していると、エラーが発生した際にフォームの該当箇所へ自動でスクロールさせたい場面があります。本記事では、jQueryを使ってエラーが発生したときに適切にスクロールする方法を紹介します。 問題点 以下のコードでは、エラーが発生した際に .wpcf7-not-valid:first の要素までスクロールしようとしていますが、いくつか問題があります。 このコードの問題点 解決策：適切にスクロールする方法 以下のコードに修正することで、エラーが発生した最初の要素へ正しくスクロールすることができます。 修正ポイント .wpcf7-not-valid:first の取得方法を修正→ $(“.wpcf7-not-valid”).first() を使用し、最初の .wpcf7-not-valid 要素を適切に取得 エラー要素が存在するかを確認→ if (firstErrorEl.length)
Continue reading
はじめに Contact Form 7 を使用してフォームを作成する際、お支払い方法によって送付先の表示を切り替えたい場合があります。 また、送付先の選択内容に応じてメール送信時の内容も動的に変更することが求められることがあります。 本記事では、JavaScript を使用して動的にフォームの表示を変更し、メールの送信内容を最適化する方法を解説します。 実装の概要 本記事で実装する内容は以下のとおりです。 この機能を実装することで、ユーザーにとって分かりやすく、適切な情報が送信されるフォームを構築できます。 フォームの HTML 構造 Contact Form 7 でフォームを作成し、[hidden dynamic-service] を追加します。
Continue reading
Contact Form 7は、WordPressで非常に人気のあるフォームプラグインです。その使いやすさから、多くのサイトで使用されていますが、都道府県選択や生年月日の入力フィールドの設定は少し手間がかかる場合があります。今回は、簡単に都道府県選択や生年月日入力フィールドを追加できるテンプレートの作成方法を紹介します。 都道府県セレクトボックスの実装 日本の都道府県をフォームで選択できるようにするためには、選択ボックス（<select>タグ）を使用します。以下は、都道府県のリストを含むコードです。 <label>都道府県： [select* prefecture include_blank “北海道” “青森県” “岩手県” “宮城県” “秋田県” “山形県” “福島県” “茨城県” “栃木県” “群馬県” “埼玉県”
Continue reading
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
Continue reading
WordPressサイトのフォーム作成プラグインとして人気のある「MW WP Form」には、さまざまなカスタマイズ機能があります。今回は、その中でも年月日のセレクト項目を動的に出力する方法について解説します。この方法を使うことで、ユーザーがフォームを使いやすくし、入力ミスを減らすことができます。 MW WP Formの基本設定 まずは、MW WP Formの基本的な設定について確認します。MW WP Formは、WordPressの管理画面からプラグインをインストールし、フォームを作成することができます。 プラグインのインストールと有効化 フォームの作成 以上で基本的なフォームの作成は完了です。次に、年月日のセレクト項目を動的に出力する方法について具体的に見ていきましょう。 年月日のセレクト項目を動的に出力する方法 MW WP Formでは、フォームフィールドに動的な値を設定するために「MW WP Form
Continue reading
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:
Continue reading
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
Continue reading
Contact Form 7はWordPressで最も広く使用されているコンタクトフォームプラグインの一つで、その柔軟性と拡張性により多くのウェブマスターに愛用されています。しかし、多くの場合、標準的なフォーム機能ではユーザーの特定のニーズを満たせないことがあります。ここで重要なのが、「カスタムバリデーション」の役割です。 この記事では、Contact Form 7でカスタムバリデーションルールを追加し、より高度なフォーム管理を実現する方法について詳しく解説します。カスタムバリデーションを使うことで、フォームの入力値をより厳密にチェックし、サイト訪問者からの適切な情報収集を助けることができます。 コンタクトフォーム7の記述 必須設定の必要はないです。 functions.phpへの記載方法 変更方法 text-746、ext-747はどちらか一方必須にしたい部分の内容を記載します。 $result->invalidate( ‘text-747’, ‘どちらか記載してください。’ );どちらに入力もれのアラートを出すかを指定します。確認画面などの設定がある場合はエラーになる可能性があります。 フィルターフック一覧 名称 概要 wpcf7_acceptance フォームの受け入れを許可するかどうかを返す
Continue reading
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: それぞれ、都道府県、市区町村、町域、建物名などを自動入力するフィールドです。 ショートタグの設定
Continue reading
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.設定完了後画像の設定を行います。
Continue reading
MW WP Formでフォームの選択肢に応じて項目を表示・非表示する方法を解説。WordPressで条件分岐のフォームを簡単に実装するテクニックを初心者にもわかりやすく紹介します。カスタムフォームでユーザー体験を向上させましょう。 MW WO Formの項目を追加します。 表示・非表示を切り替えたい部分にclassとvalueを付与します。 Cssを追加します。 条件分岐のJavaScriptを記載します。 確認画面の設定 自動返信の設定 サンクスメール 管理者宛メール 必須項目を切り分ける 上記内容で表示非表示になったものを、表示された場合に、必須項目に切り替える。 Favorite
Continue reading
コンタクトフォームはウェブサイトで重要な役割を果たしますが、フォームが長すぎるとユーザーの離脱率が上がる可能性があります。この問題を解決するために、「Contact Form 7 Multi-Step Forms」プラグインを使用することができます。このプラグインを使うことで、フォームを複数のステップに分割し、ユーザーが分かりやすく入力できるようにすることができます。今回は、「Contact Form 7 Multi-Step Forms」の使い方について解説します。 プラグインのインストールと有効化 WordPressのダッシュボードにログインし、「プラグイン」セクションから「新規追加」を選択します。 プラグイン検索バーに「Contact Form 7 Multi-Step Forms」と入力し、プラグインを検索します。プラグインが表示されたら、「インストール」をクリックしてプラグインをインストールします。 有効化すると、上記画像のメッセージが表示されるので「スキップ」をクリックして次に進みます。 新規フォームの作成 新しいコンタクトフォームを作成します。通常のContact Form
Continue reading
アンケートやユーザー登録などのフォームでは、しばしば入力項目が増加してしまいます。しかし、設問が多すぎると、ユーザーは面倒くささを感じて離脱しやすいことがあります。 こうした課題に対処するのに役立つのが「Conditional Fields for Contact Form 7」です。これはお問い合わせフォームを簡単に条件分岐できる便利なプラグインで、ユーザーに必要な入力項目だけを表示できます。この記事では、Conditional Fields for Contact Form 7に関する設定方法や導入の利点を、具体的な例を交えて紹介します。 「Conditional Fields for Contact Form 7」とは何か 「Conditional Fields
Continue reading
Jetpackとは？ Jetpackはスパム対策やSNSとの連携する際に簡単に設定できます。 また、アクセスの状況サイト統計情報まで見れてとても便利です。 Jetpackの使い方 Jetpackのインストールから使い方をご説明致します。 Jetpackをインストール 「プラグイン」→「新規追加」→「Jetpack」で検索します。 そして「新規追加」をクリック そのまま「有効化」をクリックしてください。 WordPress.comと連携 「Jetpack設定」のボタンをクリックします。 「WordPress.com」のアカウントがない場合は、「アカウント新規作成」をクリックします。 メールアドレス ユーザー名 パスワード を記入し、「アカウント作成」をクリックします。 連携の際に読み込みの画面が表示されます。 「無料プラン」が下部にございますので、「無料」で始めることも可能です。 下記の画面が出てきて、「有効化」を設定で「連携と設定」が完了します。 SNSとの連携
Continue reading
