作成したい WordPressのプラグイン ? このチュートリアルでは、その方法を説明します。

プラグインは、コーディングの知識がなくても素晴らしい Web サイトを作成できるため、WordPress の人気に貢献しています。

には 50 以上のプラグインがあります。 rWordPress ディレクトリ  さまざまな目的のために設計されています。 見つけるだろう WordPressのプラグイン 以下のために ニュースレターの購読 セキュリティ et  電子商取引 . 名前を付けるだけです。

これらがなければ、WordPress Web サイトは単なる静止画像とテキストのブロックのコレクションになります。 プラグインを使用すると、コンテンツ管理システムは信じられないレベルのカスタマイズを実現できます。

Web サイトにカスタム プラグインが必要な場合でも、プラグインを作成したい場合でも、 WordPressのプラグイン そしてそれを収益化しましょう。

コンテンツ

よくある質問

WordPressプラグインはお金を稼ぎますか?

はい。 ザ WordPressのプラグイン 金を持ち込む。 プラグインは、Web サイトまたはサードパーティのマーケットプレイスで販売できます。

CodeCanyon Themeforest そしてモジョ 市場  プラグインを販売するのに最適な 3 つの Web サイトです。

プラグインの無料バージョンを WordPress リポジトリに追加して、追加機能を備えたプレミアム バージョンを提供することもできます。

WordPress プラグインの作成は難しいですか?

の作成 WordPressのプラグイン 必要な機能に応じて、比較的簡単な場合もあれば、難しい場合もあります。

WordPress の開発と PHP プログラミングの基本に慣れていれば、プラグインの作成は簡単です。 そうでない場合は、非常に難しい場合があります。 このガイドに示されているように、単純なプラグインから始めるのが最善です。

プラグイン開発者はいくら稼げますか?

Zip Recruiter によると、開発者の平均時給は WordPressのプラグイン 米国では 35 時間あたり 72 ドルです。 これは、年間約 000 ドル、月額 6 ドルに相当します。

プラグインを販売すると、販売数に応じて月額最大 5 ドルを獲得できます。 プラグインのカスタマイズ サービスを提供すると、000 時間あたり 20 ドルから 200 ドルの収入が得られます。

WordPress プラグインの作成に必要なもの

プラグインを作成するのに、WordPress のエキスパートである必要はありません。 始めるために必要なのは、基本的なコーディングの知識だけです。

  • PHP プログラミングの基礎知識: WordPress プラグインは PHP で記述されているため、始める前に言語とその構文を理解する必要があります。
  • 基本的な HTML と CSS:  HTML と CSS を使用すると、プラグインの表示と外観を制御できます。 したがって、WordPress プラグインを作成するには、基本を理解することが重要です。
  • WordPress に精通していること:  WordPress プラットフォームとその主な機能、および WordPressのコーデックス (WordPress 開発のオンラインマニュアル)。
  • 開発環境: プラグインを開発してテストするには、WordPress をローカル マシンまたは開発サイトにインストールする必要があります。 これにより、ライブ Web サイトに影響を与えることなくプラグインをテストできます。 これを行う方法については、次のセクションで説明します。
  • テキストエディタ: プラグイン コードを記述するには、テキスト エディターが必要です。 Sなど豊富なオプションをご用意崇高なテキスト, アトム et Visual Studio Code.

7 つのステップで WordPress プラグインを作成する方法

ステップ 1: WordPress プラグインの仕組みを理解する

WordPress はプログラミング言語で書かれているため、コーディングの知識があれば誰でも WordPress コードにアクセスして変更できます。

これがまさにプラグインの仕組みです。 特定の PHP 関数を使用して WordPress と直接やり取りすることで、WordPress の機能を変更および拡張できます。

WordPress プラグインの作成とコードの追加は、フックを使用して PHP 関数を呼び出す場合にのみ実行されます。 フックは、プラグインがコアファイルを編集することなく WordPress とやり取りできるようにするものです。

WordPress プラグインの基本を理解するために、角括弧と関数の関係を見てみましょう。

ワードプレスの機能:

WordPress のコードは、サードパーティのコードが WordPress とやり取りできるようにする関数に基づいて構築されています。 そのため、プラグインやテーマには多くの機能があります。 各関数には名前があり、その後に中括弧と中括弧内のコードが続きます。

Voici未exemple:

function sticky_header() {

  ?>

  <script>

  // Select the header element

  var header = document.querySelector(‘header’);

  // Get the offset position of the header

  var sticky = header.offsetTop;

  // Add the sticky class to the header when you reach its scroll position. Remove “sticky” when you leave the scroll position

  function addSticky() {

    if (window.pageYOffset > sticky) {

      header.classList.add(“sticky”);

    } else {

      header.classList.remove(“sticky”);

    }

  }

  // Add the sticky class to the header when you scroll the page

  window.onscroll = function() {

    addSticky();

  };

  </script>

  <?php

}

add_action( ‘wp_footer’, ‘sticky_header’ );

コードを実行する場所に sticky_header() と入力することで、WordPress プラグインでこの関数を直接呼び出すことができます。 ただし、問題が発生する可能性があるため、これは悪い習慣です。 コード内で関数を直接呼び出さない理由が XNUMX つあります。

まず、直接呼び出しは、コンテンツをテーマ ファイルに追加するなどの基本的な機能に対してのみ機能します。 また、このアプローチを使用すると、複数の場所で関数を使用するために関数を複数回呼び出す必要があり、コード ファイルでは時間がかかり面倒です。

コーディングに慣れていない場合、関数を手動で呼び出すのも難しい場合があります。 プラグインを作成するときのベスト プラクティスは、プラグインをフックにアタッチすることです。 これにより、複数の場所で関数を呼び出す必要がなくなります。

WordPress フック 

フックは、独自のカスタム関数を実行できる WordPress コード内の特定のポイントです。 フックには、アクション フックとフィルター フックの XNUMX 種類があります。

アクションフック

アクション フックを使用すると、WordPress 実行サイクルの特定の時間にカスタム関数を実行できます。 アクションフックの構文は次のようになります。

add_action('hook_name', 'my_custom_function');

Le  フック名  使用するアクション フックの名前です。

WordPress にはいくつかのアクションフックがあります。 あなたはそれらを見つけることができます cオデックスワードプレス.

my_custom_function  実行するコードを含む関数です。 この関数は、関数の前に定義する必要があります add_action.

上記のスティッキー ヘッダー関数をフックにアタッチするための構文は次のようになります。

add_action( 'wp_footer', 'sticky_header' );

この関数は、wp_footer アクション フックが呼び出されたときに sticky_header() 関数を実行します。 wp_footer を選択したフック名に置き換えることで、関数を特定のフックにアタッチすることもできます。

例えば:

add_action( 'init', 'sticky_header' );

これにより、WordPress init アクションが呼び出されたときにスティッキー ヘッダー関数が実行されます。

フィルターフック

フィルター フックを使用すると、データを表示またはデータベースに保存する前にデータを変更できます。 以下は、ブログ投稿のタイトルをすべて大文字に変更するフィルター フックの例です。

add_filter( ‘the_title’, ‘uppercase_title’ );

function uppercase_title( $title ) {

  return strtoupper( $title );

}

この関数は、ブログ投稿の元のタイトルである単一の引数 $title を受け入れます。

次に、関数は関数を使用します strtoupper() タイトルを大文字に変換し、変更された値を返します。

アクションフックとフィルターフックの違い

アクション フックを使用すると、WordPress 実行サイクルの特定の時間にカスタム関数を実行できます。 上記の例では、アクション フック wp_footer タグの直前に呼び出されます。

一方、フィルターフックを使用すると、WordPress コードベースを通過するときにデータを変更できます。

上記の例のように、フィルターフック タイトル では、Web サイトに表示される前にブログ投稿のタイトルを編集できます。

ステップ 2: テスト環境をセットアップする

WordPress プラグインを作成するための XNUMX 番目のステップは、テスト環境または開発環境をセットアップすることです。 目標は、実際のサイトでの実験を避けることです。

プラグインの作成には、前後の作業が必要になる場合があります。 また、ウェブサイトに損害を与える間違いを犯す可能性もあります。

コンピューターをローカル サーバーとして使用して、プラグインを作成およびテストできるテスト WordPress サイトをホストできます。

あなたの計画なら宿泊施設 テスト サイトの作成をサポートしているので、それを使用することもできます。 ここでは最初の解決策を使用します。

テスト環境をセットアップするには、 ダウンロードローカル 、WordPress Web サイトをローカルでホストするための開発ツール。

ダウンロードが完了したら、コンピューターでソフトウェアを起動し、 +アイコン をクリックして、新しいローカル サイトを作成します。

WordPressプラグインを作成する

から選ぶ 新しいサイトを作成する ボタンをクリックします Continue.

次に、画面の指示に従ってサイト名を追加し、環境をセットアップして、WordPress のログイン情報を作成します。

完了したら。 ボタンをクリックします サイトを追加します。 サイトを追加したら、ローカル ダッシュボードで Web サイトを選択し、WordPress 管理ダッシュボードを起動します。

管理者ログイン ページが開いたら、 ユーザー名ワードプレスのパスワード ダッシュボードにアクセスするために上記で作成したもの。

完了しました。 テスト環境の準備が整いました。 WordPressプラグインの作成を始めましょう。

ステップ 3: プラグイン フォルダーを作成する

テスト環境が整ったら、最初に行う必要があるのは、サイト ディレクトリにプラグイン ファイルを作成することです。 デフォルトでは、WordPress はすべてのプラグインをディレクトリに保存します。 wp-content/plugin.

WordPress サイトにインストールされたすべてのプラグインは、このディレクトリにフォルダーを持ちます。 したがって、プラグインの場合、このディレクトリ内にフォルダーを作成し、名前を付ける必要があります。

このチュートリアルでは、フォルダーに移動します。 wp-content/plugin ローカル サイト ディレクトリにあります。 方法は次のとおりです。

注意:  中間サイトを使用している場合も、プロセスは同じです。

ローカル ダッシュボードで、  サイト フォルダに移動 . ローカル サイト ディレクトリにリダイレクトされます。

選択 アプリ オプションで、をクリックします 公共 それから WP-コンテンツ. このディレクトリにはさまざまなフォルダーが表示されます。

フォルダを開きます プラグイン プラグインの名前を持つ新しいサブフォルダー。 ここで使用します スティッキーヘッダー これは作成したいプラグインの名前だからです。

ステップ 4: プラグインのメイン PHP ファイルを作成する

プラグイン フォルダーを作成したら、次のステップはこのフォルダーに PHP ファイルを追加することです。 これは、プラグインのコードと機能が利用できる場所です。

このチュートリアルでは、WordPress でスティッキー ヘッダーを作成する単純なプラグインに必要な PHP ファイルは XNUMX つだけです。

高度な機能を備えたより複雑なプラグインの場合、CSS や JavaScript など、プラグイン フォルダーに異なるファイル タイプが存在する場合があります。 この場合、単一の PHP ファイルで十分です。

これを行うには、下のスクリーンショットのように、プラグイン フォルダーに PHP ファイルを作成します。

ファイルの準備ができたら、プラグインに情報を追加します。

ステップ 5: プラグイン情報を構成する

プラグイン ファイル ヘッダーとも呼ばれるプラグイン情報は、プラグイン名、バージョン、URL、作成者名とその Web サイト、ライセンスなど、プラグインに関する詳細を含む PHP コメント ブロックです。

これは、プラグインをインストールした後に WordPress プラグイン ページに表示される情報です。

あなたは見つけることができます WordPressコーデックスのプラグインファイルヘッダー . このように見えます。

このコードをコピーしてプラグインの PHP ファイルに貼り付け、プラグインに合わせて詳細を編集します。 この場合、スティッキー ヘッダー プラグイン ファイル リーダーは次のようになります。

<?php

/*

Plugin Name: Sticky Header

Plugin URI: https://wordpress.org/plugins/sticky-header/

Description: Make your website header sticks to the top of every page on your website as users scroll.

Author: The Team

Author URI: https://blogpascher.com/sticky-header

Text Domain: Sticky Header 

Domain Path: /languages

*/

このファイルを保存すると、新しいプラグインが作成され、サイトに既にインストールされているプラ​​グインのリストに表示されます。

テスト サイトの WordPress ダッシュボードにログインして、 Plugins>Plugins installés.

スティッキー ヘッダー プラグインの詳細が表示されます。 ここにあります。

WordPressプラグインを作成する

これでプラグインを有効化できますが、まだ機能を追加していないため何もしません。 それでは、プラグインに何かをさせてみましょう。

ステップ 6: プラグインにコードを追加する

これを行うには、上記の WordPress 関数とフックを学習するときに使用したスティッキー ヘッダー コードを追加します。 方法は次のとおりです。

プラグインの PHP ファイルを開きます。 ヘッダーの詳細の下で、これらのコード スニペットをコピーしてプラグインのメイン PHP ファイルに貼り付け、保存します。

function sticky_header() {

  ?>

  <script>

  // Select the header element

  var header = document.querySelector(‘header’);

  // Get the offset position of the header

  var sticky = header.offsetTop;

  // Add the sticky class to the header when you reach its scroll position. Remove “sticky” when you leave the scroll position

  function addSticky() {

    if (window.pageYOffset > sticky) {

      header.classList.add(“sticky”);

    } else {

      header.classList.remove(“sticky”);

    }

  }

  // Add the sticky class to the header when you scroll the page

  window.onscroll = function() {

    addSticky();

  };

  </script>

  <?php

}

add_action( ‘wp_footer’, ‘sticky_header’ );

このコードは、次の XNUMX つの重要なことを行います。

ラフティング スティッキーヘッダー ユーザーがページをスクロールするとアクティブになり、スクロールが止まると停止します。

第二に、アクション add_action('wp_footer', 'sticky_header'); アドレスを使用してください....

コードを保存してください。 ユーザーがスクロールしたときにウェブサイトのヘッダーを貼り付ける WordPress プラグインを作成できました。

ステップ 7: プラグインをアクティブ化する

サイトに戻り、プラグインを有効にします。

サイトのライブ バージョンをスクロールすると、サイト ヘッダーがページの上部に残ります。

WordPressプラグインを作成する

デモ サイトで新しいプラグインの効果を確認したら、実際のサイトで試してみましょう。

その前に、バグと脆弱性についてプラグインをテストしたことを確認してください。 該当する場合は、それらを解決します。 予防策として、 WordPress サイトをバックアップする 新しいプラグインをデプロイする前に。

サイトでのプラグインのパフォーマンスに満足している場合は、プラグインを WordPress プラグイン リポジトリにアップロードできます。 ウェブサイトの所有者は無料で使用するため、何をどのように改善すべきかについてのフィードバックを受け取ることができます。

プラグインでお金を稼ぎたい場合は、上記のウェブサイトのいずれかで販売できます。

まとめ

ここまで来れば、WordPress プラグインの作成は比較的簡単であることに同意するでしょう。 このガイドの手順に従うことで、基本的な WordPress プラグインを作成できます。 必要なだけ多くの機能を試して、プラグインの機能を改善できます。

複雑なプラグインの作成も同じ方法に従います。 機能が増えるということは、プラグイン ファイルの機能が増えることを意味します。

WordPress プラグインを作成しようとしたことがありますか? 以下のコメントセクションであなたの経験について話しましょう.

Pinterestの上でそれをピン