サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
都知事選
www.webdesignleaves.com
WordPress ショートコードの作成 WordPress では記事に直接 PHP を記述することはできませんが、ショートコードを使うとあらかじめ設定しておいた PHP のコード(関数など)を呼び出すことができます。 WordPress で独自のショートコードを作成する方法やショートコードを使って Youtube の動画や Googlemap を表示する方法についての覚え書きです。 ショートコードに関する参考ページ ショートコード(日本語 Codex) ショートコード API(日本語 Codex) Codex/Shortcode Codex/Shortcode API Plugin Handbook/Shortcodes 概要 xxxx と言う名前のショートコード(shortcode)を functions.php に作成しておくと、投稿記事に [xxxx] のような短いコード(ショート
PHP メールフォームの作り方 PHP を使った基本的なメールフォーム(コンタクトフォーム)の作り方についての覚書です。以下で取り扱っている例は確認画面なしのコンタクトフォームです。 入力された値の検証は基本的に PHP で行いますが、クライアントサイドの検証として HTML5 の検証機能や JavaScript を使っています。 また、再読み込みによる二重送信の防止や自動返信の方法、PHPMailer を使ったメールの送信方法、reCAPTCHA v2/v3 を使ったスパム対策の実装方法についても記載しています。 [更新 2021/11/11] クライアントサイドの検証を jQuery から JavaScript に変更し、POST メソッドなどで送信した値は filter_input() を使うように書き換えました。 [更新 2024/03/25] PHP8.1 からは trim()
npm とは npm(Node Package Manager)は、Node.js のパッケージ(Package)を管理するツールです。 npm はパッケージをインストールする際に各種ライブラリなどの依存関係を管理・解決してくれ、パッケージの検索や更新、バージョン管理、アンインストールなどもできます。 また、npm を使ってインストールした複数のパッケージの環境を簡単に複製することができます。 npm は Node.js をインストールすると自動的にインストールされるので、使用するには Node.js をインストールする必要があります。 関連ページ: nvm を使って Node.js を Mac にインストール Node.js を Mac にインストール(nodebrew の使い方) Node.js がインストールされていれば、ターミナルで以下を実行して npm のバージョンを確認すること
Font Awesome の使い方(ver5.9以降) Font Awesome のバージョン 5.9 以降を利用するにはメールアドレスを登録してアカウントを作成する必要があります。 5.9 以降では、Kit(アイコンやスタイル、設定などの一式)という仕組みが導入され、初回アカウント作成時に Kit を使用するためのコード(Kit Code)が発行され、それを読み込むことでアイコンフォントを使用することができます。Kit は個別に設定が可能で、また、アカウントに紐付けられているので Font Awesome 側では各アカウントの使用状況(表示回数)なども把握できるようになっているようです。 以下は Kit に関する Font Awesome のブログ記事です。 Introducing Font Awesome Kits Free Kits, A Retrospective 現時点では従来の
React の環境構築(セットアップ) React を使うための環境を構築する方法についての覚書です。CDN を参照して React を使う方法や Create React App を使った環境構築、独自に Bable と webpack を使って環境を構築する方法など。 関連ページ: React を使ってみる React 要素、React コンポーネント、インスタンス React Hooks の基本的な使い方
webpack の基本的な使い方 以下は webpack のインストール方法や webpack.config.js の設定方法、Loaders ローダー、Plugins プラグイン、splitChunks、webpack-dev-server、v5 で導入された Asset Modules などの基本的な使い方の覚書です。 Node.js がインストールされていることを前提にしています。 ※ webpack5 (バージョン 5) 用に内容を更新しました(2021年12月31日)。 以下で使用しているパッケージのバージョン node: 16.13.2 npm: 8.1.2 webpack: 5.65.0 webpack-cli: 4.9.1 webpack-dev-server: 4.7.2 関連ページ: nvm を使って Node.js を Mac にインストール Node.js を Ma
WordPress はプラグインを WordPress 本体に “引っ張り込む (hook into)” ためのフックを提供しています。これはつまり、特定のタイミングでプラグインの関数を呼び出したり、それによってプラグインを作動させたりするためのものです。 フックとは WordPress がページを表示する特定のタイミングで何らかの処理を実行するためのイベントトリガー(処理を実行させるきっかけ)と言えます。 フックを使うと WordPress の処理の一部を変更したり、何らかの処理を追加したりすることができます。 例えば、jQuery ならイベントが発生した場合、登録してあるイベントリスナを使って何らかの処理をするように、WordPress では WordPress がページを表示する処理の特定のタイミングでそのフックに登録した関数を使って何らかの処理をすることができます。 WordPre
スライダープラグイン Swiper の使い方 jQuery 不要でレスポンシブ及びタッチデバイス(スマホやタブレット)対応のスライダープラグイン Swiper の基本的な設定方法や使い方についての解説(覚書)です。 バージョン 7 では、スライダーのメインコンテナに指定するクラスが swiper-container から swiper に変更になったため、以下はバージョン 7 に合わせて書き換えました(実質的にはメインコンテナのクラスの変更と若干のオプションの追加だけです)。 また、2022年3月時点での最新版はバージョン 8 です。バージョン 7 と 8 では Swiper Angular でのイベントの処理方法を除いて大きな変更はないようです(バージョン 7 から 8 へのアップグレード)。 このページのサンプルはバージョン 7 でもバージョン 8 でも同様に動作します(このページでは
フォームの利用 フォームはユーザーが情報を入力することを可能にする要素で、「テキストフィールド」「ラジオボタン」「チェックボックス」「テキストエリア」「サブミットボタン」などの部品があります。 これらのフォームの要素にユーザーが入力した内容は、「サブミットボタン」をクリックすることによりサーバーに送信されます。 HTML にはフォームを表示する form タグがあり、<form> で始まり、</form> で終わります。フォーム要素の詳細は「フォームの設置」を参照ください。 フォームを構成する各部品は、form タグの中に配置します。
スラッグの取得 スラッグ(slug)は、投稿や固定ページなどのページの固有の識別子として登録される値で、ページの識別子として URL の一部(最後の部分)に使われます。また、パーマリンクの設定によってその値は変わってきます。 ループの中でスラッグを取得 テンプレートで現在表示されている投稿や固定ページのスラッグを取得するには、以下のような方法があります。 スラッグは投稿オブジェクト(global $post)の post_name プロパティから取得できます。
WordPress All-in-One WP Migration を使ってデータを移行 簡単に WordPress のデータを移行できるプラグイン「All-in-One WP Migration 」の使い方についての覚書です。 「All-in-One WP Migration 」はボタンをクリックするだけで WordPress のデータ(テーマのファイルやデータベース、画像など)をエクスポート及びインポートできる便利なプラグインです。 WordPress のデータの移行 WordPress で作成したサイトのデータの移行はデータベースをエクスポートして移行先の環境に合わせてデータベースの内容を置換したりと手間のかかる作業で、例えばサーバーからローカル環境へのデータの移行の場合、以下のような作業が必要です。 サーバーのデータベースをエクスポート データベースファイルの編集 ローカル環境のデ
MAMP のインストールと初期設定(環境構築) Mac で MAMP をダウンロードしてインストールする方法と初期設定や Apache の設定(バーチャルホスト)、httpd.conf の文法エラーをチェックする方法についての覚書です。 MAMPには MAMP(無料)と MAMP PRO(有料) がありますが、以下は無料版の MAMP についての説明で、MAMP のバージョンは 6.6 (Mac OS は Monterey)になります。 関連ページ:MAMP をアップデート(新しいバージョンをインストール) MAMP のダウンロード 以下のMAMP のダウンロードページから環境(Intel または M1 プロセッサ)に合わせてインストーラーをダウンロードします。 https://www.mamp.info/en/downloads/ 以下は MAMP&MAMP PRO 6.6(Intel)
Microsoft Remote Desktop 10 を使って Mac から Windows へリモートデスクトップ接続(カスペルスキー インターネット セキュリティ 2019) CATEGORY: HTML/CSS 2019年8月7日 Microsoft Remote Desktop 10 を使って Mac から Windows へリモートデスクトップ接続する方法の覚書です。 また、ウィルス対策ソフト「カスペルスキー インターネット セキュリティ 2019」を使っている場合の設定方法についても記載しています。 目次 Windows 側の確認 リモートデスクトップ接続するには、Windows PC の IP アドレスが必要です。 また、Windows PC でリモートデスクトップ接続(RDP)を許可しておく必要があります。 「コントロール パネル」>「システムとセキュリティ」で「リモート
WordPress Contact Form 7 Conditional Fields Contact Form 7 でフォームで選択した内容によって次に表示させる内容を変更・決定できる条件分岐機能を追加するプラグイン Contact Form 7 Conditional Fields の基本的な使い方やサンプルです。 Contact Form 7 Conditional Fields の概要 Contact Form 7 Conditional Fields はお問い合わせフォームのプラグイン Contact Form 7 に機能を追加するプラグインなので、Contact Form 7 がインストールされている必要があります。 Contact Form 7 Conditional Fields を使うと、お問い合わせフォームでユーザがチェックボックスやラジオボタン、セレクトメニューなどの
正規表現とは ある文字列に対して、「XXで始まって○○で終わる」や「○○または△△またはXXを含む」、「□の後に○△が続く」などの複雑な検索や置換を行うパターンをチェックする方法です。 例えば、日本の郵便番号にマッチするかどうかを調べるコードは、以下のようになります。 <?php $str = "123-4567"; if(preg_match('/^[0-9]{3}-[0-9]{4}$/', $str)) { echo "マッチします。"; }else{ echo "マッチしません。"; } ?> 正規表現はマッチさせる文字のパターンを表現します。 上記の例では「'/^[0-9]{3}-[0-9]{4}$/'」がパターン(正規表現)になります。 正規表現を利用することで、E-mail アドレスや URL、 HTML のタグなど、より複雑な文字列のパターンを抽出したり置換したりすることがで
WordPress のURL URI パスを取得・出力する関数 HTML ファイルの場合、通常は画像や他のファイルへのパスはそのファイルが置いてある場所から相対的な場所(位置)を指定しますが、WordPress では指定の方法が異なります。 静的な HTML ファイルの場合はファイルの位置はその構造に一致しているので相対的なパスで指定できますが、WordPress の場合は URL の構造とファイルの物理的な構造が一致しているわけではないので、 URL やパスを取得するにはテンプレートタグを使います。 関連ページ:「WordPress のフォルダ構成/テーマのディレクトリへのパス」
Dart Sass (scss) の基本的な使い方 Sass の公式サイトの Dart Sass のドキュメントを元に作成した基本的な使い方に関する覚書です。 公式に推奨されている実装環境が Dart Sass になって、@import や除算演算子としてのスラッシュの使用が非推奨(将来的には廃止)になり、@use や @forward が導入され、Sass 関数からビルトインモジュールへ移行されるなどの変更(Breaking Changes)があったため内容を書き換えました。 2021年12月21日 Dart Sass (scss) の基本的な使い方 Sass は Syntactically Awesome Style Sheets (構文的に素晴らしいスタイルシート) の略で、CSS を便利に使えるように拡張した言語です。 Sass には SCSS 構文とインデント構文(Sass 構文
Google Fonts(https://fonts.google.com/)の基本的な使い方・利用方法について。 Google Fonts は「Open Source Fonts」で商用・非商用に関わらず誰でも無料で使用することができる Web フォントを提供するサービスです。 All the fonts in our catalog are free and open source, making beautiful type accessible to anyone for any project.(Google Fonts/About から) 基本的な使い方 使い方はとても簡単で、使いたいフォントを選択して、表示されるフォントの読み込みのコードと font-family の指定のコードをコピーして使うだけです。 使いたいフォントの右上に表示される+のアイコン をクリックします。 画
WordPress ブロックエディター Gutenberg に対応 WordPress 5.0 から導入されたブロックエディター(Gutenberg)を使った場合に、作成したテーマを対応させるための覚え書きです。 テーマにブロックエディターのスタイルを適用させたり、逆にブロックエディターにテーマのスタイルを適用させる方法などについての個人的なメモです。 テーマにブロックエディターのスタイルを適用 ブロックエディター(Gutenberg)を使ってコンテンツを作成すると、使用したブロックにより特定のクラス(wp-block-xxxx や has-text-color 等)やインラインのスタイルなどが追加されます。 また、add_theme_support() などを使用してオプションのスタイルや機能を有効にすると、それに伴い追加のスタイルが読み込まれたりもします。 デフォルト(初期状態)では、
レスポンシブ Web デザインは、単一の HTML を画面のサイズに応じて適用する CSS を切り替えることで、PC、タブレット、スマートフォンなどのデバイスに最適化したデザイン・レイアウトを設定して表示する手法のことです。 レスポンシブ Web デザインに対応したページを作成するには、以下のようなテクニックを使用します。 Viewport の設定(デバイスの幅に応じた表示サイズの設定) メディアクエリを使った、画面サイズに合わせたレイアウトの切り替え 画面サイズに合わせて伸縮するレイアウト(相対的な単位の使用) 画面サイズや解像度にに合わせて画像を最適化 Viewport(ビューポート) スマートフォンの多くは Viewport(ビューポート)と呼ばれる仮想ウィンドウサイズが設定されていて、設定された Viewport サイズに従って Web ページを表示します。 Viewport には
WordPress に関する参考資料・解説等の目次ページ
functions.php はテーマに機能を追加するテンプレートファイルの1つで、テーマで使う関数(ファイルの読み込みや機能)などを記述します。以下は functions.php の記述上の注意点やテーマの作成時に記述するよく使う設定などに関する覚書です。 functions.php ファイル テーマを作成する際に使用するファイルの1つ functions.php は、機能に関する設定を記述するテーマファイルで、テーマと一緒に wp-content/themes のテーマ用ディレクトリに配置します。
Font Awesome 5 の基本的な使い方 Font Awesome のバージョン 5.9 以降を利用するにはアカウントを作成する必要があります。バージョン 5.9 以降でのアカウントの登録方法や使い方に関しては以下を御覧ください。 Font Awesome の使い方(ver5.9以降) 以下はバージョン 5.8 以前に関する説明です(アイコンの表示方法などは基本的に同じです)。 Font Awesome 5 について(ver5.8 以前) Font Awesome はバージョンが5になって、以下の2つの方法で利用できるようになっています。 今までと同じ Web フォントとして使う方法(Using Web Fonts with CSS) SVG と JavaScript で使う方法(Using SVG with JavaScript) 「SVG と JavaScript で使う方法」で
WordPress テーマにウィジェット機能を追加 WordPress の作成したテーマでウィジェット機能を追加して利用する方法について。register_sidebar や dynamic_sidebar の使い方など。 WordPress には予め色々なウィジェットが用意されていて、それらを管理画面で編集して表示できるようなっています。WordPress の既存のウィジェット以外にも、プラグインを追加したりウィジェットを自作して追加することもできます。 但し、デフォルトではこの機能は有効になっていないので、作成したテーマでウィジェットを利用するには register_sidebar() を使って機能を有効化します。 register_sidebar() は「サイドバー」を定義する関数です。 「サイドバー」は元々はテーマの左右のサイドバーで使うことを想定して作られたテーマ機能のためこのよ
Mac ターミナルの基本的な使い方・操作方法(1) Mac のターミナルを使う方法の覚書です。ターミナルの設定や基本的なコマンド、リダイレクトやパイプの使い方など。zsh(Catalina 以降のデフォルトのシェル)に対応するように更新しました。 Mac のターミナル Mac のターミナルは「アプリケーション」→「ユーティリティ」にあります。 ターミナルのアイコンをダブルクリックするとターミナルが起動します。 Finder からターミナルを開く Finder でフォルダを右クリックして、メニューから「フォルダに新規ターミナル」を選択すると、そのフォルダをカレントディレクトリとしてターミナルを開くことができます。「フォルダに新規ターミナルタブ」を選択すると、既存のターミナルのウィンドウに新たなタブが開かれます。 または、Finder のパスバーに表示されているフォルダを右クリックして「ターミ
推奨される読み込み方法 CSS や JavaScript の読み込みを header.php 等の head 要素内に link 要素や script タグを使って記述することもできますが、その場合プラグインなどのファイルと重複したり、同じファイルを複数回読み込んだり、また、ファイルに依存関係がある場合に正しい順序で読み込まれなかったりする可能性があります。 そのため、スタイルシートは wp_enqueue_style()、スクリプトは wp_enqueue_script() を使って、ファイルを登録及び読み込みキューに追加し、アクションフックで読み込むことが推奨されています。 読み込むエリアによって、以下のようなアクションフックを使用します(スクリプト及びスタイルシートの両方の読み込みに使えます)。 wp_enqueue_scripts – サイト公開側に読み込む場合 login_enq
WordPress のフォルダとファイル ダウンロードした WordPress のフォルダを見ると以下のようになっていて、wp-admin、wp-content、wp-includes の3つのフォルダ(ディレクトリ)と wp- から始まるファイル等があります。 ファイルの場所やファイル名などは一定のルールに従って動作するようになっています。
XAMPP のダウンロード・インストール方法と基本的な使い方 XAMPP を使うと簡単にローカル環境を構築することができます。以下は Windows 環境への XAMPP のインストール方法と基本的な使い方についての解説です。 XAMPP とは XAMPP とは、Web アプリケーションの開発環境(Apache + MySQL + PHP)をローカルに簡単に構築できるパッケージです。また、XAMPP は、完全に無償で利用することができます。 XAMPP 日本語公式サイト:https://www.apachefriends.org/jp/index.html XAMPP は Windows、Linux、OS X の3つの OS 向けのものがあります。 Windows 用の最新版(安定版)は、「Windows 向け XAMPP」のボタンをクリックすると、ダウンロードすることができます。 左下の
WordPress ナビゲーションメニュー(カスタムメニュー) 柔軟なメニューの出力を可能にする WordPress のナビゲーションメニュー(カスタムメニュー)機能について。register_nav_menus() を使った登録方法や wp_nav_menu() を使ったメニューの出力方法、管理画面でのメニューの作成方法などについて。 WordPress のナビゲーションメニューは、テーマのメニューを管理画面から動的に表示できるようにする機能です。 ナビゲーションメニューはカスタムメニューやカスタムナビゲーションメニューとも呼ばれます。 ナビゲーションメニューの機能を使うと管理画面でメニュー項目を追加したり、それらの表示順を変更したり階層関係をつけたり等メニューを柔軟に管理することができます。 また、メニューは複数設置することができ、テンプレートファイルの表示したい位置に関数を記述すれば
次のページ
このページを最初にブックマークしてみませんか?
『Web 制作リファレンス / Web Design Leaves』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く