CODE
-
CSS Gridで進捗カードを並べる。PCとスマートフォンで列数を変える最小例
プロジェクトの進捗をWebページにまとめるとき、「計画中」「制作中」「公開済み」のような情報をカードで並べると、全体の状況を見渡しやすくなります。 ただし、PC…
-
WordPressの投稿メタへ配列を保存する。ユーザーID一覧を扱う最小例
WordPressでは、投稿ごとに追加情報を保存できます。例えば社内ポータルで「このお知らせを確認してほしいユーザー」を管理する場合、対象ユーザーが複数人ならI…
-
WordPressの検索対象を調整する。pre_get_postsとメインクエリを理解する
PROJECT 002でWordPressの検索画面を整えたとき、見た目だけでなく「検索結果に何を含めるか」も調整しました。そこで使ったのが、検索を実行する前に…
-
WordPressの検索語を安全に表示する。get_search_query()の役割を理解する
WordPressの検索結果ページでは、「何を検索した結果なのか」を画面へ残す必要があります。検索フォームから送られた文字をそのまま表示するだけに見えますが、U…
-
WordPressのスレッドコメントを理解する。親コメントと返信を結ぶ仕組み
コメントへの返信を作るとき、見た目を少し右へずらすだけでは親子関係は残りません。どのコメントに対する返信なのかをデータとして結び、その関係に沿って表示する必要が…
-
WordPressのコメントを完全削除せず、ゴミ箱へ送る仕組みを理解する
WordPressでコメント削除ボタンを作るとき、最初に確認したかったのは「押したら何が起きるか」でした。画面から消えるだけなのか、管理画面のゴミ箱へ移動するの…
-
WordPressを10分で自動ログアウトさせる。共有PCのアイドル判定を実装する
共有PCでWordPressへログインしたまま席を離れると、次に使う人が前の利用者名で投稿やコメントをする可能性があります。 そこで、通常ログインの利用者に操作…
-
WordPressのwp_slash()とは？ コメント編集でバックスラッシュが消えた原因を理解する
WordPressでコメント編集機能を作ったとき、新規投稿では残っていたWindowsパスのバックスラッシュが、編集して保存すると消える問題が起きました。 画面…
-
同じ見出しデータからPC・モバイルの目次を作る。JavaScriptの処理を共通化してみた
MANIARUのカテゴリー記事では、PCとスマートフォンで目次の見せ方を変えています。PCでは本文横のサイドバー、モバイルでは本文先頭の折りたたみ目次です。 表…
-
スクロール位置に合わせて目次を切り替える。JavaScriptで現在の見出しを判定してみた
MANIARUのカテゴリー記事では、本文を読み進めると、現在読んでいるH2またはH3に対応する目次項目が青く切り替わります。PCでは右側の追従目次、モバイルでは…