WordPressで独自のカスタムウィジェットを作成しますか?

ウィジェットを使用すると、アイテムをWebサイトの準備ができているサイドバーまたはウィジェット領域にドラッグアンドドロップできます。 したがって、この記事では、カスタムWordPressウィジェットを簡単に作成する方法を紹介します。

しかし、前に、WordPressをインストールしたことがない場合は、 WordPressのブログ7の手順をインストールする方法 et あなたのブログにワードプレスのテーマを、見つけインストールしてアクティブにする方法 

それから私たちがここにいる理由に戻りましょう。

WordPressでカスタムウィジェットを作成する

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

WordPressウィジェットには、Webサイトのサイドバーまたはウィジェットに適した領域に追加できるコードが含まれています。 単純な「ドラッグアンドドロップ」インターフェイスを使用してさまざまな要素を追加するために使用できるモジュールと考えてください。

デフォルトでは、WordPressには、任意のWordPressテーマで使用できるウィジェットの標準セットが付属しています。 

発見も 最高のプレミアムWordPressテーマ.

Wordpressダッシュボードウィジェット

WordPress では、開発者が独自のカスタム ウィジェットを作成することもできます。 たくさんのテーマと WordPressのプラグイン サイドバーに追加できる独自のカスタム ウィジェットが付属しています。

たとえば、追加できます お問い合わせフォーム, ログインフォーム カスタムまたは フォトギャラリー コードを書かずにサイドバーで。

とはいえ、WordPressで独自のカスタムウィジェットを簡単に作成する方法を見てみましょう。

ワードプレスのカスタムウィジェットを作成する方法

このチュートリアルは、Web開発の知識がある人を対象としています。

開始する前に、このチュートリアルのウィジェットコードを貼り付けるWebサイトに特定のプラグインを作成することをお勧めします。

WordPressテーマの「functions.php」ファイルにコードを貼り付けることもできます。 ただし、その特定のWordPressテーマがアクティブな場合にのみ使用できます。

このチュートリアルでは、訪問者を単に迎えるシンプルなウィジェットを作成します。 このコードを見て、それを特定のプラグインに貼り付けて、動作を確認します。

//ウィジェット関数を登録してロードしますwpb_load_widget(){register_widget( 'wpb_widget'); } add_action( 'widgets_init'、 'wpb_load_widget'); //ウィジェットクラスの作成wpb_widgetextends WP_Widget {function __construct(){parent :: __construct(//ウィジェットのベースID'wpb_widget '、//ウィジェット名はUIに表示されます__(' BPC Widget '、' wpb_widget_domain ') 、//ウィジェットの説明配列( 'description' => __( 'Simple WordPress Widget'、 'wpb_widget_domain')、)); } //パブリックフロントエンドウィジェット関数ウィジェットの作成($ args、$ instance){$ title = apply_filters( 'widget_title'、$ instance ['title']); //ウィジェットの引数の前後はテーマによって定義されますecho $ args ['before_widget']; if(!empty($ title))echo $ args ['before_title']。 $タイトル。 $ args ['after_title']; //ここでコードを実行し、出力を表示しますecho __( 'Simple Widget'、 'wpb_widget_domain'); echo $ args ['after_widget']; } //ウィジェットバックエンドパブリック関数フォーム($インスタンス){if(isset($ instance ['title'])){$ title = $ instance ['title']; } else {$ title = __( '新しいタイトル'、 'wpb_widget_domain'); } //管理フォームウィジェット?> get_field_id( 'title' ); ?>" name="get_field_name( 'title' ); ?>" type="text" value="" />

コードを追加した後、「 外観>ウィジェット 」。 新しいウィジェット「 PCBウィジェット 使用可能なウィジェットのリスト。 このウィジェットをサイドバーにドラッグアンドドロップする必要があります。

Wordpressカスタムウィジェット

ブログにアクセスすると、問題のウィジェットを追加したサイドバーにウィジェットが表示されます。

次に、このコードを見てみましょう。

まず、「 wpb_widget そして、カスタムウィジェットをロードしました。 次に、このウィジェットの機能とダッシュボードに表示する方法を定義しました。

最後に、ウィジェットに加えられた変更を処理する方法を定義しました。

さて、あなたが知りたいことがいくつかあります。 たとえば、目的は何ですか? wpb_text_domain "?

WordPressは「gettext」を使用して翻訳とローカライズを管理します。 だから」 wpb_text_domain 「と __e 翻訳文字列が存在する場合に取得する方法をgettextに指示します。

WordPressテーマ用のカスタムウィジェットを作成する場合、「wpb_text_domain」をテーマのドメインのテキストに置き換えることができます。

プレミアムWordPressプラグインもご覧ください  

他にも使えます WordPressのプラグイン モダンな外観を与え、ブログやウェブサイトの取り扱いを最適化します。

ここでは、そのためのプレミアムWordPressプラグインを提供しています。

1。 ギャラクシーファンダー

Galaxy Funderは、WooCommerceWebサイト向けに設計された機能満載のクラウドファンディングシステムです。 使い方 WordPressのプラグイン プレミアム Galaxy Funder を使用すると、独自のクラウドファンディング Web サイトを管理したり、WooCommerce オンライン ストアのヘッダーに募金キャンペーンを追加したりできます。

Galaxy Funder woocommerceクラウドファンディングシステムプラグインワードプレス

あなたも使用することができます WooCommerceがサポートする支払いゲートウェイ. 「GalaxyFunder」はオンラインストアページで直接機能するため、ユーザーの投稿プロセスが簡単になります。

ダウンロード | デモ| ウェブホスティング

2。 WhatsAppチャットをクリック

Le WordPressのプラグイン プレミアム Click to WhatsApp Chat を使用すると、WordPress のお客様は、WhatsApp アカウントを使用して、Web サイトの所有者またはカスタマー サポートに簡単に接続できます。 

ワードプレスプラグインのwhatsappチャットをクリックします

WhatsAppアカウントをクリックするだけで、デフォルトのメッセージとともにモバイルWhatsAppアカウントに直接送信されます。 また、クライアントがデスクトップまたはラップトップ上にある場合、WhatsApp Webにリダイレクトされます。

このプラグインには、Webサイトの所有者またはサポートチームが話し合うために使用するWhatsApp番号と日時が必要です。 チャットボタンをWooCommerce製品詳細ページに追加できます、この製品に直接関連しています。

ダウンロード | デモ | ウェブホスティング

3.画像ウォーターマークをダウンロードします

Cette WordPress プラグイン プレミアムでは、画像に透かしを簡単に追加できます 簡単にデジタルダウンロード。簡単なデジタル・ファイル・ダウンロード・画像透かし

これらの 透かし 著作権記号画像、 会社のロゴ、または透明なPNG画像としてのブランドの一部。

ダウンロード | デモ | ウェブホスティング

その他の推奨リソース

また、以下のリソースを参照して、Webサイトとブログの把握と管理をさらに進めてください。

まとめ

出来上がり! これでこのチュートリアルは完了です。WordPressブログでカスタムウィジェットを作成できるようになることを願っています。 持っていれば commentaires または提案、予約セクションでお知らせすることをheしないでください。

しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi:史上最高のWordPressテーマ.

しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する

...