WordPressで動的ウィジェットを作成する方法

WordPress ウィジェットは、Web サイトを動的にし、訪問者と効果的に対話するのに役立ちます。 使用できる WordPress ウィジェットが多数あります。 ただし、カスタマイズされた WordPress ウィジェットを作成すると、選択したコードを WordPress Web サイトに追加するのに役立ちます。

ほとんどすべての Web サイトは、ユーザー エクスペリエンスを向上させるためやその他の目的で動的ウィジェットを使用しています。 WordPress ウィジェットを使用して、お問い合わせフォーム、ログイン フォーム、サブスクリプション カード、ライブ トラッキング、その他多くの機能を Web サイトに作成できます。

ウィジェットの作成は簡単です。この投稿を参考にすると簡単に作成できます。 それでは、時間を無駄にすることなく、WordPress で動的ウィジェットの作成を始めましょう。

 

WordPressで動的ウィジェットを作成する方法

この投稿では、このトピックを XNUMX つの主要な部分に分けて説明します。

 

パート 1: 始める前にいくつかのことを理解する

動的な WordPress ウィジェットの作成方法を学ぶ前に、いくつかのことを知っておく必要があります。

これらは、ウィジェットの基本と、WordPress で動的ウィジェットがどのように構成されるかに関連しています。 この部分は非常に役立つため、無視したり、無視したり、スキップしたりしないでください。

この部分を構成要素として考えてください。 ただし、WordPress ウィジェット、コーディング、プラグイン、関数などに精通している場合は、スキップしても問題ありません。

 

WordPress ウィジェットとは何ですか?

WordPress ウィジェットは小さなブロックであり、このブロックは WordPress Web ページのどこかに配置されます。

ウィジェットを使用すると、何もコーディングせずに、訪問者に独自のコンテンツと機能を提供できます。 ウィジェットを作成するには、WordPress のコーディングを少し行うだけで十分です。

購読ボックスのポップアップ、通知、お問い合わせフォームのポップアップ、ライブデータ更新などは、WordPress ウェブマスターが使用する一般的なウィジェットです。

 

静的ウィジェット

静的ウィジェットは一方向の通信のみであるため、ユーザーとの対話はありません。 変化しない情報を提供したり、ユーザーからの情報を簡単に収集したりするために使用されます。

 

動的ウィジェット

動的ウィジェットはユーザーと効果的に対話し、さまざまな API を使用して更新されるデータを提供します。 また、これらのウィジェットは動的に使用しながら情報を収集します。 完全な自動化機能が動的ウィジェットにあります。

 

組み合わせ

最近のほとんどの Web サイトでは、静的ウィジェットと動的ウィジェットを組み合わせて使用​​されています。 これらのウィジェットでは、動的な機能とともに静的な情報が提供されます。 

 

知っておくべきこと

これで、WordPress ウィジェットとその種類について理解できました。 WordPress はユーザーに多くの組み込みウィジェットを提供します。 ただし、サイト用にカスタマイズされた WordPress ウィジェットを作成したい場合は、次のものが必要になる場合があります。 

 

基本的なコーディング

PHP の基本的な OOP (オブジェクト指向プログラミング) に精通している必要があります。 

 

元のコードをバックアップする

WordPress コードをいじってみることに注意してください。 問題を回避するには、元の WordPress コードをバックアップする必要があります。

 

コードの配置

WordPress ウィジェットはコードを使用して開発されますが、これらのコードはどこに配置されるのでしょうか? WordPressテーマの中にウィジェットコードを配置できます。 Functions.php ファイル。 これらのウィジェットは、テーマをアクティブにするとアクティブになります。

 

WordPress ウィジェットの基本

WordPressは  WP_Widget  動的ウィジェットを作成するクラス。 動的 WordPress ウィジェットを作成するには、要件に従って関数を追加してこのクラスを拡張する必要があります。 以下に追加できる XNUMX つの基本関数を示します。   WP_Widget   とに提供されます。

• コンストラクター関数。
• ウィジェットのコンテンツを表示するには、  ウィジェット 機能。
• ウィジェットの設定を更新するには、  アップデイト 機能。
• ユーザーから情報を収集するために、  フォーム 機能。

動的ウィジェットでは、これら XNUMX つのウィジェット関数のいくつかを使用します。 その後、次を使用してウィジェットを登録します  ウィジェットを登録します。 

 

パート 2: WordPress の動的ウィジェットを作成しましょう

WordPress の動的ウィジェットの作成には長いプロセスがかかります。 初めて行う場合は複雑に感じるかもしれませんが、簡単にできるようにしました。

プロセス全体を XNUMX つの簡単なステップに分けました。 以下の XNUMX つの簡単な手順に従って、WordPress の動的ウィジェットを作成します。

 

ステップ 1: 空のプラグインを作成する

最初のステップは、WordPress ウィジェット用の空のプラグインを作成することです。このステップはシンプルで簡単です。 プラグインやウィジェットを作成したことがある方は、これを見たことがあるかもしれません。

このプラグインにウィジェットを追加し、そのプラグインを WordPress サイトに追加するため、プラグインを作成しています。

これを行うには、に行く必要があります  /wp-content/plugins/。 WordPress サイト用のプラグインを作成する際、新しいディレクトリを追加し、それに応じて名前を付ける必要があります。

好きな名前を付けることができます。 ディレクトリ内に、   インデックス.php。   このインデックス ファイルには次のサンプル コードが含まれます。

空のプラグイン内の上記の詳細はすべて、WordPress によって管理パネルにプラグインの詳細を表示するために使用されます。 このコードを追加した後、空のプラグインを作成します。 WordPress 管理パネルに表示されます。 次に、このプラグインを有効にする必要があります。

 

ステップ 2: サンプル ウィジェット コードを作成する

XNUMX 番目のステップは、サンプル ウィジェット コードを作成することです。 XNUMXつの基本機能を活用して、使いやすさを拡張していきます。  WP_Widget  とに提供されます。

class Example_Widget extends WP_Widget { public function __construct() { } public function widget( $args, $instance ) { // サンプル ウィジェットを作成します } } // ウィジェット関数を登録します register_sample_widget() { register_widget( 'My_Custom_Widget' ); add_action( 'widgets_init', 'register_sample_widget' );

上記のコードセクションでは、次のことがわかります。  WP_Widget は、construct 関数を使用して拡張されます。 ブロックの最後の部分では、サンプル ウィジェットをどのように登録したかがわかります。  ウィジェットを登録します。 

サンプル ウィジェットを作成して登録した後、それに動的関数を追加する必要があります。 使用できます  ウィジェット,  フォーム、 および  アップデイト 私たちの要件に従って機能します。

ボーナスチップ： スタイルの詳細を追加するには、CSS を使用できます  クラス。   これを HTML DOM に追加すると、ウィジェット全体の表示がスタイル化されます。 

 

ステップ 3: ページにウィジェットを追加する

コーディング部分が完了したら。 ウィジェットをページに追加できます。 ウィジェットにはまだ動的な情報やデータ ソースを追加していないことに注意してください。

それを動的にするには、動的情報ソースを追加する必要があります。 次のステップでそれを実行します。 現時点では、この新しく作成したカスタマイズされたウィジェットを WordPress サイトのページに追加します。

ページに追加するには、WordPress 管理パネルに戻る必要があります。 そこでは、に行く必要があります 外観 サイドバーのオプション。 に行く 外観>ウィジェット。

ここでは、ヘッダー、フッター、サイドバーなど、ページ上の任意の場所にウィジェットを追加できます。

 

ステップ 4: 動的データをウィジェットに追加する

これで半分以上の工程が完了しました。 動的データをウィジェットに追加します。 あらゆるソースから動的データを取得できます。

たとえば、世界中の新型コロナウイルス感染症のリアルタイムの症例を表示するウィジェットを作成している場合は、WHO やメディア サイトなどの Web サイトからデータを取得する必要があります。

情報の URL を取得し、追加します。  APIキー それに。 現在使用しているのは、 ウィジェット この関数と「GET」命令を使用すると、(例によると) 新型コロナウイルス感染症 (COVID-19) の最新の詳細を取得できます。  

APIキー 「GET」リクエストと一緒に使用すると、ウィジェット内のデータまたは情報が取得されて表示されます。 ウィジェット内のデータを更新するには、JSON 文字列と変数に関するヘルプを参照してください。

 

ステップ 5: プラグインのアップロード

必要なコードをすべて追加したら、ウィジェットをプレビューできます。

最後のステップは、WordPress 管理パネルにプラグインをアップロードすることです。 このためには、プラグインを zip ファイルに圧縮する必要があります。 今すぐに行きます プラグイン>新規追加>プラグインのアップロード そしてプラグインをアップロードします。

 

パート 3: 要素、プラグイン、ウィジェットを XNUMX か所で取得する

プラグイン、ウィジェット、要素の作成と追加は難しいように思えますか? 心配しないでください。幸いなことに、現在では手動で何もする必要はありません。

沢山あります Wordpressのテーマ、プラグイン、ウィジェットが利用可能です。 ほとんどの要件は、これらの既成のカスタマイズ可能なウィジェットで満たすことができます。 以下は利用可能な最良のオプションです。

 

Deep ワードプレスのテーマ

　 Deep WordPressのテーマ The Webnus が提供するものは、プレミアム WordPress テーマ、要素、プラグインなどを入手するための最良のオプションの XNUMX つです。これらすべてを使用して、WordPress Web サイトに動的ウィジェットを配置できます。 以下は、 deep Webnus による WordPress テーマ。

 

加速装置

ページ上の余分なコードは、ページの読み込み速度に影響します。 ただし、このテーマでは追加のコードをロードする必要はありません。 これにより、ページの読み込みが速くなります。 CSS 要素と JS 要素はページのソース コードに読み込まれます。 そのため、少ないコードでスムーズに読み込むことができます。

 

スーパーレスポンス

Web ページでのユーザー エクスペリエンスが向上します。 強化された UX は、サイト訪問者にスーパー レスポンス機能を提供するのに役立ちます。

 

簡単な操作

Deep テーマインポーターは非常に簡単ですぐに使用できます。 これにより、テーマを WordPress Web サイトにインポートする際に、非常に快適かつ便利な方法で作業することができます。

 

本物の価格

を使用すると大幅に節約できます deep Webnus による WordPress テーマ。 すべてのテーマ、プラグインは正規価格でご利用いただけます。

 

まとめてみましょう！

この投稿では、動的 WordPress ウィジェットとは何か、およびその作成方法を学びました。

データの追加から基本的なウィジェットの作成まで、プロセス全体のあらゆる側面をカバーしました。 この投稿で説明されている手順に従えば、動的な WordPress ウィジェットを簡単に作成できます。

また、Webnus から既製のプラグイン、ウィジェット、要素などが入手できることもわかりました。 を使用している間、時間とお金を節約できます。 deep Webnus による WordPress テーマ。