【WordPress】特定ページのみカスタムフィールドを追加する方法
今回の記事では、特定の固定ページや投稿にのみ、カスタムフィールドを追加する方法を解説します。 カスタムフィールドの追加方法を知りたい方は、こちらの記事を参考にしてください。カスタムフィールドを追加する方法構文カスタムフィールドの追加は、add_meta_box()を使用する
tech
78JavaScriptでページネーション実装【ライブラリなし】
今回の記事では、自作ページネーションのコードをご紹介します。検索エンジン内には、jQueryやVueなどのフレームワークに依存した実装方法の紹介記事が多かったので、汎用性を意識して、生のJSで処理を組んでみました。■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選
【WordPress】一般設定に項目を追加する方法を解説
今回の記事では、管理画面の一般設定に項目を追加する方法について紹介します。一般設定は、サイトの基本情報を格納していますが、デフォルトの設定項目に加えて、追加で情報を格納したいケースもあります。要件今回は下記の情報を一般設定に追加します。電話番号FAX番号郵
JavaScriptで個別リソースの取得時間を計測する方法
前回の記事で紹介した「Navigation Timing API」では、「サイト全体の処理時間 = ユーザーがどれだけ待たされているか」の全体像を知ることができましたが、個別リソース(****.jsなど)の情報については取得できませんでした。JavaScriptでサイトパフォーマンスを計測
JavaScriptでナビゲーションの種類を調べる方法
今回の記事では、Navigation Timing APIを使用して、ブラウザ上のナビゲーションの種類を取得する方法について解説します。概要まずナビゲーションとは、ユーザーがWEBページにアクセスした際に、新しくHTML、CSS、JS、画像などのリソースを読み込み、WEBページを描
JavaScriptでサイトパフォーマンスを計測する方法
今回の記事ではJavaScriptpのNavigation Timing APIを使用して、サイトのパフォーマンスを計測する方法について解説します。Google DevToolsを使用すれば、多角的に分析結果を確認することができますが、計測を自動化できないという短所があります。JavaScript
Chromeの「Network」を使用したパフォーマンス測定方法
サイトパフォーマンスを計測する際には、Chrome DevToolsの「NetWorkタブ」を使用することで、各リソースの読み込みにかかる時間を把握することができます。サイト改善業務の際には、遅延の原因になっている「ボトルネック」を洗い出す作業が必要になりますが、Networkを使用すれば、効率よ
WEBサイトのパフォーマンス測定の重要指標「RAIL」とは？
RAILはGoogleの開発者によって提案されたWEBサイトのパフォーマンスモデルである。このモデルは人間が感じる「速さ」を具体的なパフォーマンス指標に落とし込んでいる。指標はResponse（応答）、Animation（アニメーション）、Idle（アイドル処理）、Load（読み込み）の四つに分類
【WordPress】メニューをテンプレートで出力する方法
今回の記事では、管理画面で設定したメニューをテンプレートで出力する方法を紹介します。管理画面での設定からテンプレートでの出力まで、一連の流れを解説しています。テンプレートをカスタマイズする際に参考にしていただけましたら幸いです。必要になるケーステンプレートをカスタマイズする際に使用
【セキュリティ】WEBサイトの脅威となるサイバー攻撃手法一覧
セキュリティの学習を深める中で、WEBサイトの脅威となるサイバー攻撃手法一覧についてまとめました。攻撃手法解説ゼロディ攻撃対策方法が確立されていない脆弱性を公開することで、その脆弱性をついて攻撃されること。マルウェアウィルスやワームのような攻撃先に損害を与える悪意のあるソフトウェア【主な種
【JavaScript】背景画像を動的に切り替える方法
今回の記事では、JavaScriptで背景画像を動的に切り替える方法について解説します。実装では、最速最軽量のJavaScriptフレームワーク「Vanilla JS」(素のJavaScript)を使用しております。結論だけ知りたい方のために、ソースコードだけ先に共有します。具体的な要件や
BEMを使用したCSS設計 | サンプルコードで解説
今回は、BEMを使用したCSS設計について解説します。前回、SMACSSを使用したCSS設計について解説をしました。SMACSSが、CSSの構成全体(ファイル管理、命名、レイアウトやモジュールの分離など)に関する概念で、BEMは、厳格なclass名の命名ルールを定めたものです。SM
【WordPress】カスタムフィールドの追加方法
WordPressで、オリジナルのカスタムフィールドを追加する方法を解説します。処理は全部で3段階ありますので、それぞれの処理についても解説します。それでは早速、要件から整理していきましょう。要件オリジナルのカスタムフィールドを追加して、入力値をサイトに表示させる(下記画像がゴール
SMACSSを使用したCSS設計 | サンプルコードで解説
SMACSSは、CSSを定義する上での規則を、下記の5種類に分類しています。 ベースレイアウトモジュール状態(state)テーマそれぞれの使用方法について、あまり整理ができていない方は一定数いるのではないでしょうか。この記事を読むことで、
【CSS設計】CSSの破綻とは何かを考える
今回の記事では、WEB制作・開発の現場において、注意すべきCSSの破綻について解説をしていきます。CSSの破綻とはCSSの破綻は、細かく例を挙げるとキリがありませんが、 制作現場で特に注意しなければならないCSSの破綻については下記のように思います。 (私がこれまでしてきたCSS記
【WordPress】カスタムフィールドを検索対象にする方法
前回の記事でWordPressのサイト内検索の仕組みについて解説しました。こちらがまだの方は、まず下記の記事で構造的な理解を深めてください。【WordPress】サイト内検索の仕組みについて解説今回の記事では、サイト内検索対象に「カスタムフィールド」を加える方法
【WordPress】サイト内検索対象から固定ページを除外する方法
前回の記事でWordPressのサイト内検索の仕組みについて解説しました。こちらがまだの方は、まず下記の記事で構造的な理解を深めてください。【WordPress】サイト内検索の仕組みについて解説今回の記事では、WordPressにデフォルトで用意されているサイト内検索対象か
【WordPress】サイト内検索対象をタイトルのみに変更する方法
前回の記事でWordPressのサイト内検索の仕組みについて解説しました。こちらがまだの方は、まず下記の記事で構造的な理解を深めてください。【WordPress】サイト内検索の仕組みについて解説今回の記事ではサイト内検索の検索対象をタイトルに限定する方法について解説します。
【WordPress】サイト内検索の仕組みについて解説
WordPressにはデフォルトでサイト内検索機能が備わっています。任意のキーワードを入力すると固定ページ・投稿ページなどのコンテンツがヒットします。この記事では、サイト内検索を行った際に、バックエンドでどのような処理が行われているのかを解説します。SQLの処理を確認するた
【WordPress】データベース構造について解説
WordPressテーマやプラグイン開発の過程で、データベースの構造を理解しておくことで効率的に開発を行うことができます。今回の記事では、WordPressで使用されているデータベースの構造を整理しました。WordPress内のどの入力部分がデータベースに反映されるのかを画像付きで解説して
