WordPress

【WordPress】ページネーションをAjaxで非同期読み込みにする方法

WordPressの投稿一覧ページネーションを、ページ全体を再読み込みせずにAjaxで非同期に切り替える方法を解説します。イベントデリゲーションを使った実装のポイントや、URLの履歴・SEOへの配慮もあわせて紹介します。
Vue.js

【Vue.js】リアルタイム文字カウント機能を作る|入力制限と残り文字数表示

Vue 3でリアルタイムの文字カウンターを作る方法を解説します。lengthが絵文字や一部の漢字でずれる理由、Intl.Segmenterによる数え方、日本語入力中も更新する方法、maxlengthに頼らない上限の設計、読み上げ対応、文字数とバイト数の違いまで動くコードで紹介します。
Vue.js

【Vue.js】トースト通知を作る方法|イベントで表示・非表示を制御する簡易実装

Vue 3でトースト通知を作る方法を解説します。どこからでも呼べるuseToast、複数同時表示、読み上げソフトに伝えるrole=statusとrole=alert、ホバーで一時停止、TransitionGroupでのアニメーション、続けて通知したときにタイマーが干渉しない作り方まで動くコードで紹介します。
Vue.js

【Vue.js】モーダルウィンドウを作成する方法|スロット・クリック外で閉じる処理付き

Vue 3でアクセシブルなモーダルウィンドウを作る方法を解説します。Teleportでbody直下に描画する理由、スロットの中のemitが動かない落とし穴、Escキーとフォーカスの管理、HTML標準のdialog要素との比較、確認ダイアログとしての使い方まで動くコードで紹介します。
Vue.js

【Vue.js】ページネーション付きリスト表示を実装する方法|1ページ○件表示に対応

Vue 3でページネーション付きのリストを作る方法を解説します。computedによる表示範囲の計算、ページ番号を省略記号でまとめる方法、データが減ったときの対処、aria-currentによるアクセシビリティ、ページサイズの切り替えとURLクエリの同期まで動くコードで紹介します。
Vue.js

【Vue.js】検索フィルター付きリストの作成|computedで絞り込みを実装

Vue 3で検索フィルター付きのリストを作る方法を解説します。日本語入力の変換中も絞り込む方法、全角・半角やひらがな・カタカナの違いを吸収する正規化、複数項目の横断検索、件数の読み上げ、デバウンスまで動くコードで紹介します。
Vue.js

【Vue.js】入力フォームのバリデーション機能を実装する方法|リアルタイムでエラー表示

Vue 3で入力フォームのバリデーションを実装する方法を解説します。触れた項目と送信後にだけエラーを出す設計、送信ボタンを無効にしない理由、aria-invalidとlabelによるアクセシビリティ、ブラウザ標準の検証との関係、非同期の重複チェックの考え方まで動くコードで紹介します。
Vue.js

【Vue.js】タブ切り替えUIの作り方|アクティブなタブを動的に切り替える実装例

Vue 3でキーボード操作にも対応したタブ切り替えUIを作る方法を解説します。buttonとrole=tab、aria-selectedの付け方、矢印キーの操作、KeepAliveによる状態の保持、URLクエリとの連動まで動くコードで紹介します。
Python

【Python】定期レポートを自動でExcelに出力しメール送信するスクリプトの作成

業務の自動化を進める上で、「定期レポートを作成し、Excel形式でメール送信する」という処理は非常に需要があります。この記事
WordPress

【WordPress】カスタムブロックをGutenbergで作成する方法|Block APIによるフルカスタマイズ

GutenbergのBlock APIを使ってオリジナルのカスタムブロックをゼロから作成する方法を解説します。@wordpress/create-blockでのひな型生成から、block.json・edit.js・save.js・index.jsの正しい構成、現行のapiVersion・カテゴリー指定もあわせて紹介します。
WordPress

【WordPress】管理画面に独自の設定画面を追加する方法|add_menu_pageの基本と応用

WordPressの管理画面にadd_menu_page()を使って独自の設定ページを追加する方法を解説します。Settings APIによる設定値の保存・読み込み、サニタイズの重要性、保存完了メッセージの正しい表示方法もあわせて紹介します。
WordPress

【WordPress】ヘッドレスCMS化への第一歩|REST APIを使って外部アプリと連携する方法

WordPressをヘッドレスCMSとして活用するための第一歩として、REST APIを使った外部アプリとの連携方法を解説します。標準エンドポイントの使い方、認証方法、カスタムエンドポイントの追加、公開アクセス範囲のセキュリティ上の注意点もあわせて紹介します。
WordPress

【WordPress】WP_Queryで複雑な条件検索を実装する方法|AND・OR・NOTの組み合わせ方

WordPressのWP_Queryでmeta_query・tax_queryを使い、AND・OR・NOTを組み合わせた複雑な条件検索を実装する方法を解説します。relationキーの使い分けや、meta_queryとtax_queryの併用パターンもあわせて紹介します。
WordPress

【WordPress】任意の記事にのみ共通パーツを表示する方法|条件分岐で柔軟にカスタマイズ

WordPressで特定の記事にだけバナーや共通コンテンツを表示する方法を解説します。投稿ID・スラッグ・カスタムフィールド・カテゴリーによる条件分岐の使い分けと、複数の手法を組み合わせる際の注意点もあわせて紹介します。
WordPress

【WordPress】カスタム投稿タイプのアーカイブページを任意の順序で並び替える方法

WordPressのカスタム投稿タイプのアーカイブページを、menu_orderやカスタムフィールドを使って任意の順序に並び替える方法を解説します。メタキー未設定の投稿がアーカイブから消えてしまう典型的な落とし穴と、名前付きmeta_queryクラスを使った正しい回避方法もあわせて紹介します。
WordPress

【WordPress】検索結果を高速化するカスタムクエリ最適化術|meta_query・tax_queryの使い分け

WordPressの検索・絞り込みクエリを高速化するための、meta_queryとtax_queryの使い分け、インデックス設計、トランジェントキャッシュの活用方法を解説します。OR条件を分割する際に起こりがちな集合演算の誤りにも注意しながら実装例を紹介します。
WordPress

【WordPress】特定の投稿タイプだけでエディター機能を無効化する方法|クラシックエディタとの使い分け

WordPressで特定の投稿タイプだけ本文エディターを無効化する方法を解説します。register_post_type()のsupports指定やremove_post_type_support()での完全な無効化と、Gutenberg/クラシックエディタの切り替えとの違いもあわせて紹介します。
WordPress

【WordPress】画像をLazy Loadする方法|パフォーマンス改善とSEO対策の両立

WordPressで画像のLazy Load(遅延読み込み)を実装する方法を解説します。WordPress 5.5以降の標準対応の仕組みと、5.9以降でファーストビュー画像が自動的に除外される仕組み、Lazy Loadが効かない場合のチェックポイントもあわせて紹介します。
WordPress

【WordPress】サイドバーウィジェットをページごとに出し分ける方法|条件分岐とregister_sidebar活用

WordPressでregister_sidebar()と条件分岐タグを使い、ページの種類ごとにサイドバーウィジェットを出し分ける方法を解説します。特定ページやカスタム投稿タイプごとの出し分け、if/elseifの分岐順序で起こりがちな落とし穴もあわせて紹介します。
WordPress

【WordPress】メディアライブラリの画像を自動でWebP化して軽量化する方法

WordPressにアップロードした画像を自動でWebP形式に変換し、サイトを軽量化する方法を解説します。リサイズ済みの各サイズもWebP化する完全な実装方法と、WordPress 5.8以降の公式フィルターimage_editor_output_formatを使ったよりシンプルな方法もあわせて紹介します。