ウェブデザインの勉強まとめサイト
WordPressをアップデートしたあと、 「今まで表示されていたページタイトル（titleタグ）が突然消えた…」 という経験はありませんか？ 特に 自作テーマ + All in One SEO（AIOSEO） の組み合わせで、WordPress 6.9 以降にアップデートしたタイミングで といった不具合が発生するケースがあります。 この記事では、WordPress 6.9以降で起きるこの現象について 原因最短で直す方法（結論）なぜ今まで問題なかったのか？確認手順自作テーマの運用で注意する点 までまとめて、再発しない形で解決できるように解説します。 結論：自作テーマに add_theme_support(‘title-tag’)
Continue reading
WordPressのSEO対策で、意外と見落とされがちなのが canonical（カノニカル） の設定です。 canonicalはGoogleなどの検索エンジンに対して、 「このページの正規URLはこれです！」 と伝える重要なタグ。 正しく設定しておかないと… といったSEO上のトラブルにつながることがあります。 今回は、SEOプラグインを使わずに WordPressでcanonicalタグを自動生成して出力する方法を、実際のコード付きで解説します。 canonical（カノニカル）とは？なぜ必要？ canonical（正規URL）とは、ページのHTMLの <head> 内に入れる下記のようなタグです。 このタグがあることで、検索エンジンは このページの本体（正規URL）はこれパラメータ違い・URL違いのページは同一扱いにする という判断ができます。 canonicalが必要になる典型例 URLが複数ある状態（重複コンテンツ） WordPressでは、同じ内容が違うURLで見れてしまうケースがよくあります。
Continue reading
〜「ただ作れる」から「更新できるサイトを作れる」へステップアップ〜 静的HTMLで作れるのに、なぜテーマ化が必要？ HTML/CSSでサイトを作れるようになると、次にぶつかる壁があります。 「デザインはできた。でも更新が大変…」「文章を少し変えたいだけで、HTMLを開いて修正してアップするの面倒」「クライアントが自分で更新できるようにしたい」 これがまさに、静的サイトの限界です。 静的HTMLサイトは制作そのものはシンプルですが、運用になると一気に弱くなります。 そこで登場するのが **WordPressの「テーマ化」**です。 テーマ化とは簡単に言うと、 HTMLで作ったサイトを「WordPressの仕組み」に組み込み、管理画面から更新できる“動的サイト”に変える作業 です。 この記事では、静的HTMLをWordPress化するための考え方と手順を、実務で困らない形でわかりやすくまとめます。 静的サイトと動的サイトの違いを理解しよう まず、用語の整理から。 静的サイト（Static site） 特徴： 動的サイト（Dynamic site /
Continue reading
サイト運営をしていると、こんな状況が発生することがあります。 このようなケースで便利なのが、 ✅ 「WordPressの管理画面以外は特定ページへリダイレクトする」設定です。 この記事では、実案件のURLなどは出さずに、サンプルURL（example.com）を使って、仕組みと実装方法をわかりやすく解説します。 「管理画面以外リダイレクト」の仕組みとは？ ✅ 目的 Webサイトにアクセスがあった際に、以下のような挙動にします。 例） アクセス先 挙動 https://example.com/ → お知らせページへ転送 https://example.com/service/ → お知らせページへ転送 https://example.com/wp-admin/ 転送しない（管理画面へアクセス可能）
Continue reading
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
Webサイト制作で「軽量・高速・柔軟」なスライダーといえば Splide。デザイン再現性も高く、WordPressや静的サイトでも幅広く利用されています。 しかし、Splide導入後に次のような症状に悩まされるケースも多いはずです。 実はこれ、ほとんどのケースで Lazy Load（画像の遅延読み込み） が原因です。 本記事では、Splide × WordPress × LazyLoad プラグインこの組み合わせで発生するトラブルと、その解決方法を実際のコード例付きで解説していきます。 なぜ Splide と Lazy Load の相性が悪いのか？ 最近のWordPressでは、以下のような仕組みが自動で働いています。
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
〜三日後から選択可・火曜無効・日本語対応のカレンダーをflatpickrで実装しよう〜 Contact Form 7（CF7）で予約フォームや日程入力欄を設けるとき、標準のdateフィールドでは「使いにくい」「見た目がさみしい」と感じたことはありませんか？ 今回は、そんな悩みを解決してくれるJavaScript製のカレンダーUIライブラリ「flatpickr」を使って、CF7のカレンダーを次のようにカスタマイズする方法をご紹介します。 初心者でもわかりやすいように、コードの貼り方や注意点も含めて解説していきます！ なぜflatpickrを使うのか？ Contact Form 7 の標準 date タグは、ブラウザ依存のため見た目や動作がばらつきます。一方、flatpickrを使えば以下のような魅力があります。 完成イメージ フォーム内の日付入力欄が以下のようになります 実装手順 flatpickr本体と日本語ロケールを読み込む まず、WordPressテーマの footer.php またはカスタムJSファイルに以下のスクリプトを読み込みます。
Continue reading
「Checkbox を選んだタイミングで、自動的にテキストボックスへ“数字や任意の値”を入力させたい」というカスタマイズは、Contact Form 7 単体では実現できませんが、JavaScript（jQueryなしでもOK）を外部から読み込むことで簡単に実現できます。 この記事では、CF7フォームのHTML例・JavaScript例・貼り付け位置まで、わかりやすくご紹介します！ 実装イメージ Contact Form7フォーム（フォーム編集画面に貼る） footer.php に貼る JavaScript（コードはサンプルです） ※Contact Form7 の入力欄へフォーム内ではなく「テーマのフッター」からJSを読み込ませることがポイントです。 JavaScriptを貼り付ける場所はどこ？ WordPressテーマのfooter.php の </body> の直前に貼り付けてください。
Continue reading
WordPressでカスタム投稿タイプを構築する際、「タグのように扱いたいけれど、管理画面ではチェックボックスで選べた方が便利だな」と思ったことはありませんか？ 実は、非階層型タクソノミー（タグ形式）でも、ちょっとした工夫でカテゴリのようなチェックボックス表示に変更することができます。 この記事では、WordPress開発者向けに、 なぜ「非階層タクソノミー」でもチェックボックス表示にしたいのか？ WordPressのタクソノミーには大きく2種類あります 種類 表示例 UI（管理画面） 階層型（例：カテゴリ） 親子関係がある チェックボックス 非階層型（例：タグ） フラットな単語の羅列 入力フィールド＋カンマ区切り 一般的には、非階層型は入力ボックスで管理されますが、「カテゴリーのように、一覧から複数選べるUIにしたい」というニーズも多くあります。 カスタム投稿タイプとタクソノミーの定義 まずは、カスタム投稿タイプとタクソノミーを登録するコードです。以下は functions.php に記述するサンプルです： //
Continue reading
美容・クリニック・サロンなどのサイト運営では、「症例」ページの充実が信頼性や集客につながる重要なポイントです。この記事では、WordPressで症例情報を効率的に管理・表示するためのカスタム投稿タイプ＋カスタム分類の構成例をご紹介します。 症例管理に必要な要素とは？ 症例ページでよく見られる構成は、次のような情報を含みます。 これらをWordPressのカスタム投稿＋カスタム分類（タクソノミー）で管理することで、運用効率が格段にアップします。 投稿タイプ「症例（case）」を作成 まずはカスタム投稿タイプ「症例（case）」をfunctions.phpに登録します。 function create_case_post_type() { register_post_type(‘case’, [ ‘labels’ => [ ‘name’ => ‘症例’, ‘singular_name’ => ‘症例’
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
ユーザーからの入力内容を確認画面に表示する場面では、特に <textarea> で改行された内容を そのまま見やすく表示したいというニーズがあります。 しかし、HTMLの仕様上、改行（\n）は自動で <br> に変換されないため、そのままだと確認画面ではすべてが一行に表示されてしまいます。この記事では、Contact Form 7（CF7）＋Multi-Step Forms を使ったフォームにおいて、ユーザーの改行を正しく表示する方法を解説します。 なぜ<textarea>の改行が反映されないのか？ HTMLの仕様では、<textarea> で入力された内容がどれだけ改行されていても、表示時にそのまま出力されると 改行文字は無視されてしまうため、次のような表示になってしまいます。 株式会社〇〇〇〇代表取締役 〇〇〇〇 が、 株式会社〇〇〇〇 代表取締役
Continue reading
はじめに：なぜスラッグで条件分岐するのか？ WordPressでサイト制作をしていると、「特定の固定ページだけにCSSやJSを読み込ませたい」「あるページだけ別のヘッダーを表示させたい」といった場面に遭遇することが多々あります。 そんなときに便利なのが、固定ページの「スラッグ（slug）」を使った条件分岐です。 この記事では、WordPressのスラッグ条件分岐の基本から実践的な活用方法まで、初心者にもわかりやすく解説します。 固定ページの「スラッグ」とは？ まずはスラッグについておさらいしましょう。 スラッグとは、固定ページや投稿のURLの一部として使われる「英数字の識別子」です。 たとえば、次のようなURLを見てみましょう。 https://example.com/about この「about」の部分がスラッグです。WordPressの管理画面で固定ページを作成・編集する際に設定できます。 条件分岐に使える関数：is_page() スラッグによる条件分岐を行うためには、WordPressのテンプレートタグ is_page() を使います。 書き方の基本 if ( is_page( ‘about’ )
Continue reading
WordPressでカスタム投稿タイプやギャラリー一覧を実装する際に、画像に Lightbox を適用したいことはよくあります。しかし、以下のようなコードを書いてしまい、エラーや意図しない動作になる方も多いのではないでしょうか？ <a href=”<?php the_post_thumbnail(‘full’); ?>”> このコードはエラーの原因になります。本記事ではその理由と、正しい記述方法を解説します。 the_post_thumbnail() の役割とは？ the_post_thumbnail() は WordPress のテンプレートタグの1つで、投稿のアイキャッチ画像を <img> タグとして直接出力する関数です。 例 <?php the_post_thumbnail(‘medium’); ?>
Continue reading
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」 ②
Continue reading
ウェブサイトのフッターでよく見かける「© 2024 COMPANY NAME All Rights Reserved.」というコピーライト表記。これ、毎年手動で修正していませんか？ 「うっかり年号を更新し忘れて、1年前のままだった…」そんなミスを防ぐには、自動で現在の年に更新される仕組みを導入するのがベストです。 この記事では、PHPとJavaScriptの2通りで「西暦を自動更新する方法」をご紹介します。 PHPで西暦を自動表示する方法（WordPressなどに最適） WordPressやPHPが使えるサーバー環境であれば、以下の1行でOKです。 <p class=”copy”>© <?php echo date(‘Y’); ?> COMPANY NAME All
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
WordPressでキャンペーン情報をスライダー表示する際、「特定の投稿（例えば注目のもの）だけを出したい」というケースは多いですよね。この記事では、ACF（Advanced Custom Fields）とSwiperを組み合わせて、「注目フラグが立っている投稿のみをスライダー表示」する実装方法を解説します。 完成イメージ ACFの準備 フィールド構成 フィールド名 フィールドタイプ 用途 campaign_featured チェックボックス or セレクト 値が ‘y’ の場合だけスライドに出す campaign_main 画像（返り値は URL 推奨）
Continue reading
WordPressのサイトを特定のユーザーだけが利用できるようにする場合、未ログインのユーザーをログインページへ自動リダイレクトする設定が必要です。本記事では、WordPressで未ログインユーザーをログインページへリダイレクトする方法を3つ紹介します。 functions.php を使ってリダイレクトする方法 WordPressの functions.php に以下のコードを追加することで、未ログイン時に /login/ へリダイレクトできます。 コード コードのポイント is_user_authenticated() でユーザーがログインしているかを判定 未ログインなら /login/ にリダイレクト is_page(‘login’) でログインページ自体はリダイレクトしない（無限ループ防止） この方法を使用すると、未ログインのユーザーはサイトのどのページにアクセスしても /login/ にリダイレクトされます。
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
WordPressの人気フォームプラグイン「Contact Form 7（CF7）」では、標準でフィールドを「必須」にすることができます。しかし、 といった動的な制御を行いたい場合、標準機能だけでは対応できません。 この記事では、Contact Form 7のラジオボタンの選択によって必須項目を動的に切り替える方法を詳しく解説します。 Contact Form 7で必須項目を切り替えたいケース 例えば、次のようなフォームを作成するとします。 このフォームでは、「請求書送付先」のラジオボタンで「上記以外」を選んだ場合にのみ、住所入力欄を表示し、必須項目にしたいとします。 Contact Form 7で必須項目を動的に切り替える方法 Contact Form 7では、required 属性を動的に追加・削除するためにJavaScriptを使用する必要があります。 問題点：CF7のバリデーションは後から追加したrequiredを認識しない
Continue reading
カスタムフィールドを活用した投稿の並び替え WordPressでは、投稿の順番を制御する方法として「カスタムフィールド」を利用できます。特に menu_order というフィールドを使えば、指定した投稿を優先的に表示し、カスタムフィールドが削除された場合は通常の新着順に戻す ことが可能です。 この記事では、カスタムフィールド menu_order を活用し、値が設定されている投稿を優先表示し、未設定の投稿は新着順に戻す 方法を解説します。 投稿を優先表示するための menu_order の仕組み menu_order の値が設定された投稿を優先的に表示小さい値ほど優先順位が高くなる（例：-10 の投稿が 0 よりも前に表示される）。 menu_order が未設定（削除）された投稿は通常の新着順に戻る投稿の公開日時が新しい順に並ぶ（date DESC）。
Continue reading
WordPressでカスタム投稿タイプの特定のカテゴリーの投稿を取得し、タグがある場合のみ表示 する方法について解説します。 実装の背景 通常、single_tag_title() を使用すると、タグアーカイブページでは機能しますが、投稿一覧ページでは正しく動作しません。そのため、個別の投稿のタグを取得し、タグがある場合のみ表示する 方法を実装する必要があります。 get_the_terms() を使ってタグを取得する get_the_terms() を使用すると、投稿のタグを適切に取得できます。以下のコードでは、post_tag のタクソノミーからタグを取得し、タグがある場合のみタグ名を表示 します。 修正後のコード（サンプル） コードの解説 single_tag_title() ではなく get_the_terms() を使用 !empty($tags) &&
Continue reading
このコード例では、WordPressのWP_Queryを使用してカスタムフィールドやタクソノミーを利用した投稿の分類と表示を実現します。このコードをカスタマイズすることで、さまざまな要件に対応する柔軟な投稿表示が可能になります。 コード概要 サンプルコード コードのポイント カスタマイズ方法 このコードの活用例 このコードを利用すれば、WordPressのカスタムフィールドを活用した効率的な投稿管理が可能です。ぜひご活用ください！ Favorite
Continue reading
WordPress を使用していると、「特定のカスタムフィールドを持つ投稿を先頭に表示したい」というケースがよくあります。この記事では、カスタム投稿タイプにおいて、特定のフィールドを持つ投稿を先頭に、それ以外をその後に表示する方法を解説します。 実現する機能 サンプルコード 以下に、目的を実現するサンプルコードを示します。このコードでは、highlight というカスタムフィールドを基準に投稿を分けています。 コードの解説 タクソノミー条件の適用 現在のタクソノミーアーカイブページの条件を取得し、投稿クエリに適用しています。これにより、現在表示しているカテゴリやタグに関連する投稿だけを表示します。 highlight フィールドを基準にしたクエリ WP_Query を2回使用して、 をそれぞれ取得し、分けて表示しています。 サムネイル画像の取得 カスタムフィールド custom_image、投稿サムネイル、デフォルト画像の順でサムネイルを表示しています。 ページネーションへの対応 サンプルコードではすべての投稿を取得していますが、ページネーションを追加する場合は posts_per_page
Continue reading
