キーテイクアウト

• 獨(dú)自のWordPressの連絡(luò)先フォームプラグインを開発することで、WordPressの仕組みをよりよく理解し、Web開発スキルを向上させ、不必要な機(jī)能なしで特定のニーズに合わせたフォームを作成するのに役立ちます。
この記事では、PHPコードの書き方、フォームに基本的な検証を追加し、フォームデータを送信する方法など、WordPress用のシンプルで非臭素化されていない連絡(luò)先フォームプラグインを作成する方法に関する段階的なガイドを提供します。サイト管理者の電子メールアドレス。
結(jié)果の連絡(luò)先フォームプラグインは、WordPressダッシュボードの「プラグイン」セクションでアクティブ化し、提供されたショートコードを投稿またはページに追加することにより、任意のWordPress Webサイトに簡単に統(tǒng)合できます。
• この記事では、WordPressプラグインディレクトリで利用可能な人気のある無料の連絡(luò)先フォームプラグインについても説明します。
• ほとんどのWebサイトは、通常、連絡(luò)先フォームが配置されている専用ページを含めることにより、標(biāo)準(zhǔn)のWebプラクティスに準(zhǔn)拠するように設(shè)計(jì)されています。これにより、訪問者はサイトの所有者に簡単に手を差し伸べる方法を提供します。
簡単に言えば、連絡(luò)先フォームには、訪問者が記入する一連の質(zhì)問とフィールドがあります。情報(bào)は通常、サイト管理者または別の指名された電子メールアカウントに電子メールで自動的に送信されます。このメールアドレスが訪問者に表示されないことは注目に値するため、連絡(luò)先フォームを使用すると、インターネット上の裸のメールアドレスを収穫するボットから電子メールスパムが減少します。連絡(luò)フォームは、ユーザーからフィードバック、問い合わせ、その他のデータを収集するために使用されるWebサイトで非常に重要な役割を果たします。

あなたのウェブサイトがWordPressを搭載している場合、あなたのウェブサイトに連絡(luò)先フォームをシームレスに統(tǒng)合する多數(shù)のプラグインがあります。 この記事では、無料のWordPress連絡(luò)フォームプラグインのリストを提供します。また、自分の連絡(luò)先フォームを転がすことを検討すべき理由についても説明します。次に、獨(dú)自のWordPress連絡(luò)フォームプラグインを構(gòu)築する方法を示す短いチュートリアルを提供します。

WordPressお問い合わせフォームプラグイン

開始する前に、WordPressプラグインディレクトリで利用可能な人気のある無料の連絡(luò)先フォームプラグインをいくつか説明します。これらは使用するのに最適ですが、獨(dú)自のプラグインを作成し始めたときから學(xué)ぶ方がさらに良いです。 以下は、WordPress用の最も評価されている無料の無料連絡(luò)フォームプラグインの一部です。

フォーム7の連絡(luò)先 - これは、1800萬を超えるダウンロードを備えた2番目に人気のあるプラグインであり、WordPress Webサイトの事実上の連絡(luò)先フォームプラグインとみなすことができます。フォーム7の連絡(luò)先は複數(shù)の連絡(luò)先フォームを管理でき、フォームと電子メールのコンテンツを簡単なマークアップでカスタマイズできます。フォーム機(jī)能には、Ajax駆動の提出、Captcha、Akismet Spamフィルタリングなどが含まれます。

連絡(luò)先フォームへのメール - このプラグインは連絡(luò)先フォームを作成するだけでなく、指定されたメールアドレスにデータを送信するだけでなく、連絡(luò)先フォームデータをデータベースに保存し、選択したデータを印刷可能なレポートとオプションを提供します。 csv/excelファイル

Formget連絡(luò)フォーム - 簡単なオンラインドラッグアンドドロップ連絡(luò)フォームビルダーツール。必要なのは、フォームに必要なフィールドをクリックするだけで、數(shù)秒以內(nèi)に連絡(luò)先フォームの準(zhǔn)備ができています。

BestWebsoft連絡(luò)フォーム - Webページまたは投稿にフィードバックフォームを簡単に実裝できます。非常に簡単で、プレイできるものがありますが、追加の設(shè)定は必要ありません。

なぜあなた自身の連絡(luò)先フォームプラグインをロールするのですか？

より良い開発者になる

獨(dú)自のWordPressプラグインを開発することで、WordPressが「フードの下」の仕組みをよりよく理解することで、より経験豊富なWeb開発者になるのに役立ちます。 WordPressプラグインディレクトリには何萬ものプラグインがありますが、他のプラグインを変更および拡張できることは非常に便利なスキルです。 より良いフォームを構(gòu)築する

多くのWordPress連絡(luò)フォームプラグインが肥大化しています。これらには、使用できない多くの機(jī)能が含まれています。 JavaScriptおよびCSSファイルの重い使用法は、標(biāo)準(zhǔn)の連絡(luò)先フォームプラグインの一部でも一般的です。これにより、WordPressのパフォーマンスに悪影響を與えるHTTP要求の數(shù)が増加します。

Yahooのパフォーマンスルールによると：

エンドユーザーの応答時間の80％は、フロントエンドに費(fèi)やされます。この時間のほとんどは、畫像、スタイルシート、スクリプト、フラッシュなど、ページ內(nèi)のすべてのコンポーネントをダウンロードする際に縛られています。コンポーネントの數(shù)を減らすと、ページのレンダリングに必要なHTTP要求の數(shù)が減ります。これは、より高速なページの鍵です

あなたが私のようであり、あなたがただ動作するだけの単純な連絡(luò)先フォームプラグインを望んでいるなら、読んでください。獨(dú)自のプラグインを開発する簡単なプロセスをご案內(nèi)して、さようなら肥大化したプラグインにキスできるようにします。この例では、追加のCSSとJavaScriptファイルは必要ありません。HTML5を使用して行われた検証。

フォームプラグインの開発

にお問い合わせください

5分で、シンプルなWordPress連絡(luò)フォームの開発方法を?qū)Wびます。それは約束です！準(zhǔn)備はできましたか？セット？ GO！

すべてのWordPressプルインは、/wp-content/plugins/directoryにあるphpファイルです。この例では、ファイルはsp-form-example.phpと呼ばれます。 FTP/SFTP/SCPまたはSSHを使用してサーバーに接続するのに満足していると思います。

フォローしたい場合は、sp-form-example.phpというファイルを作成するだけです（記事の最後に最終的な完全な例が利用可能になります）：

次に、連絡(luò)先フォームhtml：

を含む関數(shù)html_form_code（）を追加します

パターン入力屬性を介して基本的な検証がフォームに追加されました。

連絡(luò)先フォームの正規(guī)表現(xiàn)は、次のフィールド検証を行います。

• [a-za-z0-9]：名前フィールドで許可されている文字、スペース、數(shù)のみ。特別なシンボルは無効であるとみなされます
  [a-za-z]：件名フィールドでは文字とスペースのみが許可されています。
• 電子メールフォームコントロールは電子メールフィールドを検証するため、パターン屬性は必要ありません。
  これがどのように機(jī)能するかの詳細(xì)については、HTML5を使用したクライアント側(cè)のフォーム検証に関する私の記事を読んで、パターン屬性がフォーム検証を支援する方法を理解してください。
急いで！

• わかりました、何分殘りましたか？ 4分！まだこれをやり直す時間があります。

関數(shù)配信_mail（）フォームデータを消毒し、WordPress管理者のメールアドレスにメールを送信します。

フォームデータの衛(wèi)生は、次のWordPress內(nèi)部関數(shù)によって行われます。

sanitize_text_field（）：ユーザー入力からのデータを消毒します

sanitize_email（）：電子メールで許可されていないすべての文字を取り除きます。

ESC_TEXTAREA（）：

<span><span><?php
</span></span><span><span>/*
</span></span><span><span>Plugin Name: Example Contact Form Plugin
</span></span><span><span>Plugin URI: http://example.com
</span></span><span><span>Description: Simple non-bloated WordPress Contact Form
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>*/
</span></span><span>    <span>//
</span></span><span>    <span>// the plugin code will go here..
</span></span><span>    <span>//
</span></span><span><span>?></span></span>

メッセージ

テキスト領(lǐng)域値を逃がします

コードget_option（ 'admin_email'）プログラムでプログラムで、WordPress管理者のメールアドレスをデータベースから取得します。
• 連絡(luò)先フォームにメールを管理者に送信したくないですか？変數(shù)$を目的のメールアドレスに設(shè)定するだけです。

  関數(shù)wp_mail（）によるエラーなしで電子メールが正常に処理された場合、テキスト

  私に連絡(luò)していただきありがとうございます。応答がすぐに表示されることを期待します。 ??>が表示されます。
• 1分と30秒の殘り
  関數(shù)cf_shortcode（）は、連絡(luò)先フォームショートコード[sitepoint_contact_form]がアクティブなときに呼び出されるコールバック関數(shù)です。
• 上記の関數(shù)は、html_form_code（）およびderver_mail（）関數(shù)を呼び出して、連絡(luò)先フォームhtmlフォームを表示し、フォームデータをそれぞれ検証します。

  最後に、ショートコード[sitepoint_contact_form]がWordPressに登録されます。したがって、単純に追加してください：

  3、2、1…時間が上がる！

おめでとうございます、私たちは獨(dú)自のWordPress連絡(luò)フォームプラグインを成功裏に開発し、以前の約束を果たしました。

ここで、このプラグインをWebサイトで使用するには、WordPressダッシュボードの「プラグイン」セクションの下にアクティブ化してから、投稿またはページを作成してから、フォームを表示したいショートコードを追加するだけです[sitepoint_contact_form] 。

ページをプレビューすると、以下に示すように表示される連絡(luò)先フォームが表示されます。

結(jié)論

プラグインの構(gòu)築方法とWordPressサイトに実裝する方法をさらに理解するには、以下のコードをコピーし、ファイルに貼り付けて/wp-content/プラグイン/ディレクトリにアップロードします。

プラグイン全體の例：

<span><span><?php
</span></span><span><span>/*
</span></span><span><span>Plugin Name: Example Contact Form Plugin
</span></span><span><span>Plugin URI: http://example.com
</span></span><span><span>Description: Simple non-bloated WordPress Contact Form
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>*/
</span></span><span>    <span>//
</span></span><span>    <span>// the plugin code will go here..
</span></span><span>    <span>//
</span></span><span><span>?></span></span>

これは単なる簡単な例です。プラグインの開発についてもっと知りたい場合は、さらに推奨される読書をご覧ください。

単純なWordPress Administrationプラグイン（チュートリアル）

• a wordpressウィジェットプラグイン（チュートリアル）
• 公式のWordPress Codexプラグイン開発者のドキュメント
• SitePoint PHPチャンネル
コメントであなたの考えや質(zhì)問を教えてください。

あなた自身のWordPress連絡(luò)フォームプラグインに関するよくある質(zhì)問（FAQ）

獨(dú)自のWordPress連絡(luò)先フォームプラグインを作成することの利點(diǎn)は何ですか？

獨(dú)自のWordPress連絡(luò)フォームプラグインを作成すると、フォームのデザイン、機(jī)能性、およびデータ処理を完全に制御できます。フォームをカスタマイズして、Webサイトの美學(xué)に合わせて、特定のニーズに応えるユニークなフィールドを追加し、ビジネスオペレーションに合った方法で収集されたデータを管理できます。さらに、サードパーティのプラグインの必要性を排除します。サードパーティプラグインは、ウェブサイトを遅くしたり、セキュリティリスクを引き起こす可能性があります。 、PHP、HTML、およびCSSの基本的な知識は、WordPress連絡(luò)フォームプラグインを作成するために必要です。ただし、このプロセスはガイドで簡素化されており、初心者でもアクセスできます。コーディングに慣れていない場合は、よりユーザーフレンドリーなドラッグアンドドロップインターフェイスを提供するWordPressフォームのビルダープラグインが多數(shù)あります。 ？

カスタムWordPress連絡(luò)フォームのセキュリティを確保するには、データの検証と消毒、フォームの提出のためのNoncesの使用、Captchaなどを使用したSPAMに対する保護(hù)などの測定値を?qū)g裝する必要があります。テクニック。フォームのセキュリティを維持するためには、定期的な更新と監(jiān)視も重要です。

WordPress連絡(luò)フォームにカスタムフィールドを追加できますか？カスタムフィールドを追加する機(jī)能。これは、単純なテキスト入力から、ファイルのアップロード、デートピッカー、またはカスタムドロップダウンなどのより複雑なフィールドにまで及びます。このプロセスには、フォームのHTMLを変更し、PHPコードでデータを適切に処理することが含まれます。

WordPressの連絡(luò)先フォームをスタイリングして、Webサイトのデザインに合わせてスタイリングするにはどうすればよいですか？

??

WordPressの連絡(luò)先フォームをスタイリングしてWebサイトのデザインに合わせてCSSを使用して実現(xiàn)できます。フォーム要素にカスタムクラスを追加し、テーマのCSSファイルまたはカスタムCSSプラグインのスタイルを定義できます。これにより、フォームの色、フォント、レイアウトなどを制御できます。ニーズに応じてさまざまな方法で処理されます。データをメールアドレスに送信したり、WordPressデータベースに保存したり、CRM Systemsや電子メールマーケティングプラットフォームなどのサードパーティサービスと統(tǒng)合することもできます。これには、フォームの送信を処理するために追加のPHPコーディングが必要です。

マルチステップのWordPress連絡(luò)フォームを作成できますか？コーディング。これには、複數(shù)のフォームページを作成し、セッションまたは非表示フィールドを使用してステップ間でデータを管理することが含まれます。マルチステップフォームは、長いフォームを管理可能なセクションに分解することでユーザーエクスペリエンスを向上させることができます。 Google RecaptchaのようなCaptchaサービスと統(tǒng)合。これには、サービスからAPIキーを取得し、必要なHTMLとPHPコードをフォームに追加する必要があります。 captchaは、フォームをスパムや自動提出から保護(hù)するのに役立ちます。

レスポンシブワードプレスの連絡(luò)先フォームを作成できますか？優(yōu)れており、すべてのデバイスサイズで機(jī)能します。これには、フォーム要素の適切な幅、マージン、およびパディングの設(shè)定、メディアクエリを使用してさまざまな畫面サイズのスタイルを調(diào)整します。 WordPressの連絡(luò)先フォームには、問題を識別し、コードをエラーのかどうかを確認(rèn)し、さまざまな條件下でフォームをテストすることが含まれます。一般的な問題には、フォームが電子メールを送信せず、フォームが正しく表示されない、または保存されていないフォームの提出物が含まれます。問題を解決できない場合は、WordPressコミュニティまたはプロの開発者に支援を求めることを検討してください。

以上が5分で獨(dú)自のWordPress連絡(luò)フォームプラグインを作成するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。