MENU
  • プロフィール
  • 無料相談
  • サービス
    • オンライン自習講座
    • 単発レッスン
    • HP作成5回レッスン
  • 実績・お客さまの声
  • ブログ
  • お問合せ

    カテゴリー

    • WordPress
    • ブログ・SNS運営
    • 便利ツール
    • お知らせ
    • 活動実績・ご感想
    • プログラミング

    タグ

    ChatGPTHTML/CSSinstagramSEOSWELLWPプラグインアメブロエックスサーバーセキュリティデザイン見本初回無料相談制作実績単発レッスン技術ブログへ移動継続レッスン

    アーカイブ

    • 2025年10月
    • 2025年9月
    • 2025年8月
    • 2025年7月
    • 2025年6月
    • 2025年3月
    • 2025年1月
    • 2024年12月
    • 2024年3月
    • 2023年7月
    • 2023年1月
    • 2022年12月
    • 2022年11月
    • 2022年8月
    • 2022年4月
    • 2022年3月
    • 2022年1月
    • 2021年12月
    • 2021年11月
    • 2021年10月
    • 2021年9月
    • 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年2月
    • 2019年1月
    • 2018年11月
    • 2018年9月
    • 2018年8月
    • 2018年7月
    • 2018年6月
    • 2017年9月
    • 2017年7月
    やりたいことを、自分で育てるWebの場所
    EmiのWebノート
    • プロフィール
    • 無料相談
    • サービス
      • オンライン自習講座
      • 単発レッスン
      • HP作成5回レッスン
    • 実績・お客さまの声
    • ブログ
    • お問合せ
    EmiのWebノート
    • プロフィール
    • 無料相談
    • サービス
      • オンライン自習講座
      • 単発レッスン
      • HP作成5回レッスン
    • 実績・お客さまの声
    • ブログ
    • お問合せ
    1. ホーム
    2. プログラミング
    3. WordPressプラグインを作ってみる。はじめの一歩。

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

    2025 7/18
    プログラミング
    2021-11-102025-07-18

    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 Handbook | Developer.WordPress.org 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 日本語版

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

    プログラミング
    技術ブログへ移動
    よかったらシェアしてね!
    中谷恵美
    東京在住のフリーランス。システムエンジニア、ITコンサルタントを経て、現在はホームページ・ブログ作成、集客などのレッスンをしています。

    趣味は、文房具、ゲーム。最近は英語学習中。運動が苦手で体が硬いのが悩み。最近、腰痛改善にピラティスを始めた。
    人気記事
    • 【CSSコピペOK】おしゃれな引用blockquoteデザイン10選
      2018-09-13
      ブログ・SNS運営
    • 【CSS】シンプルで女性らしい囲み枠デザイン48選
      2018-08-24
      ブログ・SNS運営
    • 自分でできる。アメブロのおしゃれなカスタマイズまとめ
      2022-11-04
      ブログ・SNS運営
    • ブログで使えるタイトル付き囲み枠のCSS
      2022-12-21
      ブログ・SNS運営
    • 大人かわいいブログヘッダーの作り方
      2022-11-09
      ブログ・SNS運営
    WordPressの始め方

    目次