Webの基礎学習– category –

はじめに 「WordPress高速化」シリーズの第11回です。当サイトでは、操作の様子を見せるために、記事にmp4の動画を入れることがあります。動画ブロックで入れた動画が、いつ読み込まれているのかを調べてみました。 結果は次のとおりです。 動画がページの...

はじめに 「WordPress高速化」シリーズの第10回です。PageSpeed Insights（PSI）で記事を計測すると、「DOM サイズを最適化する」という項目が表示されることがあります。以前は「過大なDOMサイズの回避」という名前だった項目です。当サイトの記事で、ど...

はじめに 「WordPress高速化」シリーズの第9回です。SWELLの高速化設定にある「ページ遷移高速化」のPrefetchは、「マウスを乗せると重い」という声を見かけます。当サイトもオンにしていたので、仕組みと効果を測ってみました。 結果は次のとおりです。 ...

はじめに 「WordPress高速化」シリーズの第8回です。XとInstagramの埋め込みは、記事のずっと下にあっても、ページを開いた直後に合わせて約1.1〜1.6MBを読み込みます。 この記事では、【WordPress高速化】YouTube埋め込みを遅延読み込み（以下「第3回」）...

はじめに 「WordPress高速化」シリーズの第7回です。今回は、コードブロック用のプラグインHighlighting Code Block（以下「HCB」）のCSSとJavaScriptを、コードブロックがある記事だけで読み込むようにします。 HCBは、コードブロックがない記事やトップ...

はじめに 「WordPress高速化」シリーズの第6回です。【WordPress高速化】目次の高さを見出しの数で自動設定（以下「第5回の記事」）では、PHPで見出しを数えてCSS変数に渡し、SWELLの目次の高さを記事ごとに自動で確保しました。 ただ、第5回の記事の式は...

はじめに 「WordPress高速化」シリーズの第5回です。【WordPress高速化】SWELLのCLSをCSSで改善（以下「第2回の記事」）では、SWELLの目次に min-height で高さを確保して、ページのずれ（CLS）を減らしました。 ただ、この方法では目次の高さをどの記事で...

はじめに 「WordPress高速化」シリーズの第4回です。【WordPress高速化】YouTube埋め込みを遅延読み込み（以下「前回の記事」）では、Intersection Observerを使って、YouTubeの動画を画面に近づいたときだけ読み込むようにしました。 今回は、同じ仕組み...

はじめに 「WordPress高速化」シリーズの第3回です。【WordPress高速化】SWELLのCLSをCSSで改善（以下「前回の記事」）では、ページのずれ（CLS）を直しました。今回からは、読み込むものを減らして速くする話に進みます。 今回取り上げるのは、記事に埋め...

はじめに 「WordPress高速化」シリーズの第2回です。【WordPress高速化】CLSの原因を検証ツールで探す方法（以下「前回の記事」）では、Chromeの検証ツールで、ずれた場所を見つけて高さを測る方法を紹介しました。 今回は、その続きです。当サイト（WordP...

はじめに 今回から、WordPressブログの表示速度や見やすさを改善する「WordPress高速化」シリーズを始めます。第1回は、ページの表示がガタッとずれるCLSの原因を、Google Chromeの検証ツール（DevTools）で見つける方法です。 きっかけは、当サイトで実際...

はじめに 【WordPress×PHP】カスタムフィールドの使い方を解説（以下、第14回）では、記事ごとに自由な値を保存して表示する方法を解説しました。 シリーズ最終回の今回は、子テーマに固定ページ用のテンプレートを作ります。ループ、テンプレートタグ、WP...

はじめに 【WordPress×PHP】ショートコードを自作する方法を解説（以下、第13回）では、記事の中に[ ]で書いてPHPの処理を呼び出す方法を解説しました。 今回は、記事ごとに自由な値を保存できるカスタムフィールドと、その値を取り出すget_post_meta()を...

はじめに 【WordPress×PHP】エスケープとセキュリティの基本（以下、第12回）では、値を安全に出力するためのエスケープを解説しました。 今回は、記事の中に[ ]で書くだけでPHPの処理を呼び出せるショートコードの作り方を解説します。ショートコードを自...

はじめに 【WordPress×PHP】WP_Queryで記事一覧を作るでは、好きな条件で記事一覧を自作する方法を解説しました。 ここまでの実務サンプルでは、タイトルを出力するときにesc_html( get_the_title() )、URLを出力するときにesc_url( get_permalink() )のよ...

はじめに 【WordPress×PHP】フィルターフックの仕組みと使い方では、表示される値を書き換えるフィルターフックを解説しました。 今回は、WP_Queryを使って、好きな条件で記事一覧を自作する方法を解説します。「このカテゴリーの記事だけ」「古い順に」「...

はじめに 【WordPress×PHP】アクションフックの仕組みと使い方では、決まったタイミングで処理を実行するアクションフックを解説しました。 今回は、もう1つのフックであるフィルターフックを解説します。フィルターフックを使うと、WordPressやテーマが表...

はじめに 【WordPress×PHP】オブジェクトとクラスの基本を解説では、->と::の書き方を解説しました。 ここまでの実務サンプルでは、add_action( 'swell_before_post_head', function() { … } );のように、add_action()を何度も使ってきました。今回は、...