Web制作

WordPressの管理画面から条件分岐を設定するカスタマイズ

WordPressを使っていて「かゆい所に手が届かない」みたいなことが多々あります。その一つに「管理画面から条件分岐が使いたい」というのがあります。

管理画面で条件分岐が使えれば、「投稿」や「固定ページ」の本文、ウィジェット、カスタマイザーで設定した内容を、特定の条件下でのみ出力するといったことが可能になります。

今回は、実際に使用している、管理画面で条件分岐を設定するためのカスタマイズ方法をご紹介します。

PHPのpreg_replace関数を使用して、HTML・CSS・JS各コードの無駄な空白文字列 (半角スペース・タブスペース・改行) を取り除いて圧縮 (minify) する正規表現を紹介します。

WordPressなどのPHPを使用したCMSでも使用できます。

WordPress 5.0 から導入されたブロックエディタで投稿を作成した際、投稿内容から自動生成される抜粋 (the_excerpt) が表示されない不具合に遭遇したので、その原因と改善方法を紹介します。

投稿の抜粋は「the_excerptテンプレートタグ」を使用して出力しますが、その内部で使用されている「get_the_excerptテンプレートタグ」で抜粋が取得できない場合にも有効な改善方法です。

ウェブページで画像を表示させるために「img要素」が使われますが、このimg要素に設定できる属性の1つに、画像の代わりとなる文章「代替テキスト」を設定する「alt属性」があります。

代替テキストを適切に設定することは「SEO」や「ウェブアクセシビリティ」において重要です。しかし、どのような文章を設定すればいいのか分からない方も多いのではないでしょうか？

そこで今回は適切な代替テキストを設定するための考え方を紹介します。

Google Search Console から「モバイルユーザビリティで問題が検出されました」というメールが送られてきました。

その内容は「テキストが小さすぎて読めません」と「クリック可能な要素同士が近すぎます」というものでした。

今回は、こうした内容のメールが送られてきたときの対策方法です。

WordPressのバージョンを5.4.1に更新したところ、「投稿」の個別ページが表示されず、アーカイブページが表示される不具合が発生したので、その原因と解消方法をご紹介します。

ブロックエディタのカスタマイズをしていますが、ブロックエディタのカスタマイズ方法に関する情報がネット上にはまだ少なく、検索しては開発環境でコードを書き、ビルド後に検証するというのを繰り返してします。

そんな中で、今回は、各ブロックのツールバーに、特定の文字列をマークアップするためのボタンを追加するカスタマイズ方法をご紹介します。

良いデザインにはマージン (余白) が適切に設定されているものです。

Webデザインの場合、マージンはCSSのmarginプロパティで設定しますが、「マージンの相殺 (margin collapse)」「入れ子になった要素への対処」「汎用性」などを考慮しなければなりません。

そこで今回は、長年の研究により編み出した、全称セレクタ (ユニバーサルセレクタ) を活用した、使い勝手の良い垂直マージンの設定方法をご紹介します。

Web制作を長くやっている人なら、IE6の「要素拡張問題 (Expanding Box Problem)」を知っているのではないでしょうか？

この「要素拡張問題」は、要素に指定した横幅を無視して、要素の内容が要素の幅を押し広げてしまうというものです。

CSS Grid Layoutのカラム (列) でも、同様の問題が起こったため、その解決方法をご紹介します。

CSSで使用できる単位の vw (Viewport Width) をうまく使えてますか？

親要素の横幅を基準にする % と異なり、vw はブラウザの表示領域を基準にするため、祖先要素の横幅に依存しない相対的な幅を設定することができます。

この vw にはブラウザの表示領域に表示されるスクロールバーの幅も含まれます。

スクロールバーの幅は、ブラウザによって異なるだけでなく、コンテンツの量や閲覧環境 (PC・タブレット・スマートフォン) によって、表示されたり表示されなかったりするので、vw は使いづらい印象があります。

今回は、スクロールバーの幅や表示・非表示の影響を受けずに 100vw を活用するためのテクニックを紹介します。