MENU
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ

カテゴリー

  • 趣味
  • WordPress
  • 本棚
  • プログラミング
  • 日記
  • WEBデザイン
  • フリーランス

タグ

Adobe Illustrator Gatsby.js HTML/CSS MySQL Node.js Python SWELL WordPressプラグイン おすすめツール エックスサーバー セキュリティ バレットジャーナル 確定申告 開発環境

アーカイブ

  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年8月
  • 2020年10月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年8月
  • 2019年5月
  • 2019年2月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2017年10月
プログラミングとデザインでものづくりを楽しむブログ
ゼロの森
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ
ゼロの森
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ
  1. ホーム
  2. WordPress
  3. WordPressプラグインを作ってみる。はじめの一歩。

WordPressプラグインを作ってみる。はじめの一歩。

2021 11/19
WordPress
2021-11-10 2021-11-19

WordPressプラグインを作り方を調べるため、ハンドブックを読み始めました。

ドキュメンテーションなどを読みときながら、プラグインを実際に作る過程を記事にしていきます。

私の事前知識
  • HTML/CSS、JavaScriptとPHPの基本はわかる
  • サーバー/ドメインを設定してWordPressをインストールできる
  • WordPressの子テーマを使ってカスタマイズできる

目指すのは、記事ごとにToDoメモを貼り付けるプラグイン、ランダムに記事を表示するプラグイン。

すでにそういったプラグインは出ていると思いますが、勉強のために自作します。

目次
スポンサーリンク

プラグインって何なん?

Plugins are packages of code that extend the core functionality of WordPress. WordPress plugins are made up of PHP code and can include other assets such as images, CSS, and JavaScript.

What is a Plugin? | https://developer.wordpress.org/plugins/intro/what-is-a-plugin/

プラグインはWordPressの機能を拡張するプログラムファイル。
主にPHPで記述されるが、CSSやJavaScriptなどのファイルを含めてもOK

プラグイン「Hello Dolly」を見てみる

WordPressを始めてインストールすると、「Hello Dolly」なるプラグインが入っています。
特に用途がないので、大体の場合は削除して使い始めると思いますが、今回はサンプルとしてみてみます。

WordPressのインストールディレクトリを開きます。

wp-content > plugins

プラグインはpluginsフォルダに入っています。

Hello Dollyはルイス・アームストロングの歌詞をランダムにダッシュボードに表示するプログラムみたい。

有効化されると、確かに右上(表示アプションの左)に「You’re still goin’ strong」って表示されている…!

Hello Dollyのhello.phpを開いてみます。

<?php
/**
 * @package Hello_Dolly
 * @version 1.7.2
 */
/*
Plugin Name: Hello Dolly
Plugin URI: http://wordpress.org/plugins/hello-dolly/
Description: This is not just a plugin, it symbolizes the hope and enthusiasm of an entire generation summed up in two words sung most famously by Louis Armstrong: Hello, Dolly. When activated you will randomly see a lyric from <cite>Hello, Dolly</cite> in the upper right of your admin screen on every page.
Author: Matt Mullenweg
Version: 1.7.2
Author URI: http://ma.tt/
*/

function hello_dolly_get_lyric() {
    /** These are the lyrics to Hello Dolly */
    $lyrics = "Hello, Dolly
Well, hello, Dolly
It's so nice to have you back where you belong
You're lookin' swell, Dolly
I can tell, Dolly
You're still glowin', you're still crowin'
You're still goin' strong
I feel the room swayin'
While the band's playin'
One of our old favorite songs from way back when
So, take her wrap, fellas
Dolly, never go away again
Hello, Dolly
Well, hello, Dolly
It's so nice to have you back where you belong
You're lookin' swell, Dolly
I can tell, Dolly
You're still glowin', you're still crowin'
You're still goin' strong
I feel the room swayin'
While the band's playin'
One of our old favorite songs from way back when
So, golly, gee, fellas
Have a little faith in me, fellas
Dolly, never go away
Promise, you'll never go away
Dolly'll never go away again";

    // Here we split it into lines.
    $lyrics = explode( "\n", $lyrics );

    // And then randomly choose a line.
    return wptexturize( $lyrics[ mt_rand( 0, count( $lyrics ) - 1 ) ] );
}

// This just echoes the chosen line, we'll position it later.
function hello_dolly() {
    $chosen = hello_dolly_get_lyric();
    $lang   = '';
    if ( 'en_' !== substr( get_user_locale(), 0, 3 ) ) {
        $lang = ' lang="en"';
    }

    printf(
        '<p id="dolly"><span class="screen-reader-text">%s </span><span dir="ltr"%s>%s</span></p>',
        __( 'Quote from Hello Dolly song, by Jerry Herman:', 'hello-dolly' ),
        $lang,
        $chosen
    );
}

// Now we set that function up to execute when the admin_notices action is called.
add_action( 'admin_notices', 'hello_dolly' );

// We need some CSS to position the paragraph.
function dolly_css() {
    echo "
    <style type='text/css'>
    #dolly {
        float: right;
        padding: 5px 10px;
        margin: 0;
        font-size: 12px;
        line-height: 1.6666;
    }
    .rtl #dolly {
        float: left;
    }
    .block-editor-page #dolly {
        display: none;
    }
    @media screen and (max-width: 782px) {
        #dolly,
        .rtl #dolly {
            float: none;
            padding-left: 0;
            padding-right: 0;
        }
    }
    </style>
    ";
}

add_action( 'admin_head', 'dolly_css' );

コメントでコードの解説をしてくれていますね

hello_dolly_get_lyric()
  1. Hello Dollyの歌詞の文字列を用意する
  2. 歌詞を1行ごとに分割する
  3. ランダムな一行を返す
hello_dolly()
  1. hello_dolly_get_lyric()を呼び出し、英語で歌詞を表示する
  2. admin_noticesにhello_dollyをセット
    admin_noticesは管理画面にメッセージを表示させる用のアクションフック。
    アクションフックは後ほど説明しますが、WordPressのプログラム内でこのアクションが呼ばれた時に、セットされた関数が実行される仕組みのこと。
dolly_css()
  1. hello_dollyのCSS装飾をセットする。
  2. admin_headにdolly_CSSをセット
    admin_headは管理画面のヘッダー出力時に呼び出されるアクションフック。管理画面用のCSSを読み込んだり、JavaScriptを記述したりするのに使う。

プラグインの基本構成

プラグインのフォルダにPHPファイルを格納する。

plugins
 ┗ plugin-name
   ┗ plugin-name.php

PHPファイルにはヘッダーコメントとして、必ずプラグイン名は入力します。

複数のPHPファイルがあっても、コメントは一つでOK。

WordPressはプラグインをロードする時には、pluginsフォルダ内でヘッダーコメントのあるPHPファイルを探して動くようです。

/**
 * Plugin Name: YOUR PLUGIN NAME
 */

そのほかヘッダーコメントに書く項目

Plugin Nameプラグイン名
Plugin URIプラグインのホームページURL
Descriptionプラグインの説明
Versionプラグインの現状のバージョン (1.0 など)
Requires at least プラグインが動くために最低限必要なWordPressのバージョン
Requires PHP必要なPHP
Authorこのプラグインの作者
Author URI作者のホームページのURL
Licenseライセンス
License URIライセンスのURL
Text Domainプラグインのテキストドメイン(おそらく、他言語対応の時に使うやつ)
WordPress Developer Resources
Header Requirements | Plugin Developer Handbook | WordPress Developer Resources As described in Getting Started, the main PHP file should include header comment what tells WordPress that a file is a plugin and provides…

アクションフックとフィルターフックって何だ??

WordPressフックを使って処理を登録しておくと、WordPressのプログラムが実行されるタイミングで、登録された処理を実行できるようになる。(イベントトリガーみたいなものかな?)

2種類「アクションフック」と「フィルターフック」が用意されている。

  • アクションフックは、WordPressの機能を追加/変更するもの
  • フィルターフックは、表示内容を変更するためのもの

フックを使うことで、コアのプログラムに手を入れずに、機能を追加したり改善できるようになる。

プラグインを作ってみる

今回の学び
  • 基本的にはpluginsにプラグイン用のフォルダを準備。PHPファイルに、コードを記述していく形
  • PHPファイルには、ヘッダーコメントにPlugin Nameを記述する。
  • アクションフック、フィルターフックでWordPressの動作をカスタマイズできる。

ここまでで学んだことをふまえて、簡単なプラグインを作ってみます。

プラグインを作るときはローカル環境で試すと動作検証が早いです。

あわせて読みたい
【Mac】Localなら超簡単!WordPressのローカル環境を作る。 この記事では「Local」というソフトを使い、WordPressサイトをローカルPC上で動かす環境を作成していきます。 この記事はこんな方におすすめ WordPressで本格的にテーマ…

プラグイン「Hello Dolly」さんをカスタマイズさせてもらって、

  • 管理画面にメッセージを表示させる
  • 管理画面から不要なメニューを削除する
    という機能が入ったプラグインを作ってみたいと思います!

下記のように、プラグインのフォルダとプログラムファイルをpluginsの中に配置します。

plugins
 ┗ simple-customize
   ┗ simple-customize.php
<?php
/*
Plugin Name: Simple Customize
Description: This plugin cusmizes admin area.
*/

// ①管理画面の右上にメッセージを表示
function my_hello_message() {
    $words = "こんにちは。今日もいいブログ日和ですね!";
    printf(
        '<p id="message">%s</p>',
        $words
    );
}
add_action( 'admin_notices', 'my_hello_message' );

function my_message_css() {
    echo "
    <style type='text/css'>
    #message {
        float: right;
        padding: 5px 10px;
        margin: 0;
        font-size: 16px;
        line-height: 1.6666;
    }

    .block-editor-page #message {
        display: none;
    }
    @media screen and (max-width: 782px) {
        #message{
            float: none;
            padding-left: 0;
            padding-right: 0;
        }
    }
    </style>
    ";
}
add_action( 'admin_head', 'my_message_css' );

// ②管理画面上部のバーから不要なメニューをオフにする
function my_remove_adminbar_menu( $wp_admin_bar ) {
    $wp_admin_bar->remove_menu( 'wp-logo' );      // WPロゴ
    $wp_admin_bar->remove_menu( 'comments' );     // コメント
}
add_action('admin_bar_menu', 'my_remove_adminbar_menu', 101);

// ③管理画面左のバーから不要なメニューをオフにする
function my_remove_admin_menu( $wp_admin_bar ) {
    remove_menu_page( 'edit-comments.php' );          // コメント
}
add_action('admin_menu', 'my_remove_admin_menu');
WordPressプラグイン試作品

プラグインを有効化すると、右上にメッセージが表示されていますね。そして、上部と左のメニューもカスタマイズされています。

よく使うWordPerssのカスタマイズをまるっとプラグインに設定しておくと、WordPressをインストールした後、手動で設定している部分を省略できるかもしれないですね。

参考記事

  • Plugin Developer Handbook | WordPress Developer Resources
  • プラグインの作成 – WordPress Codex 日本語版

プラグインを自作するまで、試行錯誤で進んでいきます。
よかったらお付き合いくださいませ。

WordPress
WordPressプラグイン
よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • 今月のゼロ森 | 2021年10月| 結果よりも継続を大事にしたい。
  • Snow Monkey Formsでお問合せフォームを作成する

関連記事

  • 【2022年版】Smash Balloon Social Photo Feedの使い方〜インスタグラムを表示できるプラグイン〜
    2022-03-25
  • WordPressでホームページを作れるようになるまでに私が学んだこと
    2022-01-30
  • 【図解】WordPressのテーブル構造はどうなっているの?
    2021-12-03
  • WordPressの投稿に管理者用メモをいれるプラグインを作る
    2021-11-29
  • 記事をランダム表示するウィジェットを作る
    2021-11-27
  • Snow Monkey Formsでお問合せフォームを作成する
    2021-11-17
  • 【初心者向け】WordPressを安全に使いたい!Wordfence Securityの設定方法
    2021-10-31
  • WordPressをサブディレクトリにインストールする手順
    2021-10-28
Zero Forest
カテゴリー
  • WordPress (30)
  • プログラミング (17)
  • WEBデザイン (6)
  • フリーランス (7)
  • ライフログ (10)
    • 趣味 (2)
    • 本棚 (3)
    • 日記 (5)
タグ
Adobe Illustrator (2) Gatsby.js (3) HTML/CSS (7) MySQL (1) Node.js (2) Python (2) SWELL (1) WordPressプラグイン (10) おすすめツール (3) エックスサーバー (4) セキュリティ (3) バレットジャーナル (2) 確定申告 (1) 開発環境 (3)
  • サイトマップ
  • サイトポリシー

© Zero*forest

目次
閉じる