MENU
  • プロフィールprofile
  • サービスService
    • WordPress個人レッスン
    • 起業女性に寄りそうWEBお悩み相談
  • 実績・お客さまの声portfolio
  • ブログblog
  • お問合せcontact

    カテゴリー

    • ホームページ個別レッスン
    • Web・SNS集客
    • Web系プログラミング
    • WordPressプログラミング
    • フリーランスの小技
    • Web活用相談
    • はじめてのWordPress
    • アメブロカスタマイズ
    • ホームページ制作
    • 自分で作れるおしゃれデザイン
    • アイデア・思考の整理

    タグ

    Adobe IllustratorGatsby.jsgitGitHubHTML/CSSMySQLNode.jsPythonSourcetreeSWELLWordPressおすすめWPプラグインおすすめツールアメブロエックスサーバーサーチコンソールセキュリティバレットジャーナルライブドアブログ環境構築確定申告開発環境

    アーカイブ

    • 2025年3月
    • 2025年1月
    • 2024年12月
    • 2024年3月
    • 2023年7月
    • 2023年1月
    • 2022年12月
    • 2022年11月
    • 2022年8月
    • 2022年4月
    • 2022年3月
    • 2022年2月
    • 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年5月
    • 2019年2月
    • 2019年1月
    • 2018年11月
    • 2018年9月
    • 2018年8月
    • 2018年7月
    • 2018年6月
    • 2017年10月
    • 2017年9月
    • 2017年7月
    個人事業主・女性起業家のためのWordPress・HP・ブログレッスン
    自分で作れる優しいホームページレッスン
    • プロフィールprofile
    • サービスService
      • WordPress個人レッスン
      • 起業女性に寄りそうWEBお悩み相談
    • 実績・お客さまの声portfolio
    • ブログblog
    • お問合せcontact
    自分で作れる優しいホームページレッスン
    • プロフィールprofile
    • サービスService
      • WordPress個人レッスン
      • 起業女性に寄りそうWEBお悩み相談
    • 実績・お客さまの声portfolio
    • ブログblog
    • お問合せcontact
    1. ホーム
    2. Web制作スキルアップ
    3. WordPressプログラミング
    4. WordPressプラグインを作ってみる。はじめの一歩。

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

    2022 12/19
    WordPressプログラミング
    2021-11-102022-12-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 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 日本語版

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

    WordPressプログラミング
    WordPress
    よかったらシェアしてね!
    中谷恵美
    あなたのお仕事を育てるホームページの先生
    システムエンジニア、ITコンサルタントを経て、フリーランスに。

    ・ホームページ作成
    ・ブログのカスタマイズ
    ・LINEやメルマガのセットアップ
    ・Canvaを使ったデザインの作り方
    ・Googleの分析ツール
    ・自分の強みを生かした集客
    などの、個人レッスンをしています。

    「仕事の発信に使えるようになりたい」
    「自分でも使えるスキルを身につけたい」
    ITが苦手な個人事業主さんに向けて、困ったときのWEB担当として幅広くサポートしています。

    HP作成のほかにも、心理カウンセラーとしても活動中。

    趣味は、文房具集め、ゲーム(牧場系とモンハン)、手芸(刺繍、洋裁)。
    運動が苦手で体が硬いのが悩み。今年、腰痛改善にジムに通い始めたが、果たして続くのか。。。
    詳しいプロフィールを見る
    活動実績

    【HP個人レッスン】

    ●ハワイアン伝統ロミロミサロン・Aさま
    ・2ヶ月でサロンのHPをリニューアル。新サービス立上げ時も自分でHPを作成できるように。
    「最初はパソコン音痴の私にできるか不安でしたが、とても丁寧な指導でわかりやすかったです。
    私好みの素敵なHPができあがり、とっても嬉しいです!」

    ●Mさま
    ・2回のミーティングでWordPress運営スキルを習得。オウンメディアを立上げ。

    ●Sさま
    ・5日間で無料ブログからWordPressへのお引越し。
    「半ば諦めかけていた移管を短期間で終えることが出来ました」

    【ホームページ作成】

    ●これまでご依頼いただいたお客さま
    (個人)写真家・美容サロン・弁護士・デザイナー・心理カウンセラー・占い師

    (法人)メーカー代理販売店、コンサルティング企業、人事支援企業

    【経歴・資格など】
    ・基本情報技術者
    ・簿記2級

    【営業時間】平日:10:00~19:00
    【休業日】土、日、祝、年末年始

    新着記事
    • 【個人レッスン】ホームページの紹介
      2025-03-16
      ホームページ個別レッスン
    • 【お客様の声】ゴールが明確になり、とても安心できました
      2025-03-13
      ホームページ個別レッスン
    • 【お客様の声】WordPressには自由度の高さを感じます
      2025-01-21
      ホームページ個別レッスン
    • WordPressに記事を一括アップロードするには
      2024-12-05
      はじめてのWordPress
    • 【お客様の声】等身大のちょっと先を提案してもらえた
      2024-03-08
      ホームページ個別レッスン
    人気記事
    • 【CSSコピペOK】おしゃれな引用blockquoteデザイン10選
      2018-09-13
      WordPressプログラミング
    • 【Mac】SourcetreeからGitHubへSSH接続する
      2021-08-05
      Web系プログラミング
    • 【CSS】シンプルで女性らしい囲み枠デザイン48選
      2018-08-24
      アメブロカスタマイズ
    • 自分でできる。アメブロのおしゃれなカスタマイズまとめ
      2022-11-04
      アメブロカスタマイズ
    • Node.js+ExpressでMySQLに接続して一覧表示する
      2020-04-25
      Web系プログラミング
    目次