【ワードプレスのプラグイン作成】HelloWorldを出力させてみる

ちょっとワードプレスで欲しいプラグインがあるので、作ってみようかなあとか思ったりした。けど、プラグイン作ったことないしなあ、何にも分からんなあ、ということなのでHelloWorldを表示するプラグインを作ってみる。

プラグインのファイルを作る

自分はエックスサーバーを使っているので、サーバーにログイン後ファイルマネージャーに入っていじる。プラグインを追加したいドメインのディレクトリを辿る。public_html/wp-content/pluginsの中に作るプラグインのディレクトリを作る。

f:id:utr066:20180501230556j:plain

画面からフォルダを作成。思ったけど、これsshで接続してやったほうが楽で速いような気がしてならない。ただ、鍵置いたり面倒なのでまあこのままやります。

f:id:utr066:20180501230726j:plain

で、フォルダを作っただけだからこの中はもちろん空。ここにプラグインを構成するファイルを置いていく。

プラグイン情報の記述

hello-world.phpを作って情報を記述する。

<?php
/*
Plugin Name: Hello World
Plugin URI: 
Description: Hello Worldを表示する
Version: 1.0.0
Author:utr
Author URI: http://example.com
License: GPL2
*/
?>

ライセンス情報の記述

<?php
/*  Copyright 作成年 プラグイン作者名 (email : プラグイン作者のメールアドレス)
 
    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License, version 2, as
     published by the Free Software Foundation.
 
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.
 
    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/
?>

変更するのは「作成年」「ラグイン作者名」「プラグイン作者のメールアドレス」の3点のみです。他の文言を1文字でも変更するとライセンスが無効になるので注意してください。

f:id:utr066:20180501231400j:plain

保存してワードプレスの管理画面から見てみると作ったプラグインが表示されています。これを有効化。

管理画面に設定メニューを表示する

プラグインを追加すると、ワードプレスの管理画面から設定をいじることができるようになりますよね。あれを表示します。さっき作ったhello-world.phpに以下のように書く。

function hello_world() {
     add_menu_page( 'hoge','hoge','manage_options','myplugin_setting' );
}
add_action( 'admin_menu', 'hello_world' );

これでメニューに表示される。add_menu_pageの引数はページタイトルやメニュータイトルを表すみたい。

【WordPress】管理画面にメニューを追加する方法 - Qiita

でもこれだとメニューをクリックした時にエラー出るね。ちょっと改造。

class HelloWorld {
  function __construct() {
      add_action('admin_menu', array($this, 'add_pages'));
    }

  function add_pages() {
      add_menu_page('HelloWorld','HelloWorld',  'level_8', __FILE__,array($this,'hello_world_option_page'), '', 26);
   }
 
  function hello_world_option_page() {
    ?>
      <p>HelloWorld!</p>
    <?php
  }
}

$hello = new HelloWorld;

インスタンス化した時にワードプレスの管理画面にメニューを加えるようにする。とりあえずHelloWorldを表示。

f:id:utr066:20180501234122j:plain

なんとなくメニュー画面をつくる方法は分かった。

ワードプレスの管理画面のメニューはadmin_menuで表される
プラグインのメニューページを作る関数はadd_menu_page()
プラグインの詳細画面はadd_menu_page()をいじることで可能

関数を呼び出す

作った関数がちゃんと呼び出されるか確認してみます。hello_world()を追加して、それをワードプレスのsingle.phpから呼び出す。

class HelloWorld {
  function __construct() {
      add_action('admin_menu', array($this, 'add_pages'));

  }

  function add_pages() {
    add_menu_page('HelloWorld','HelloWorld',  'level_8', __FILE__,
    array($this,'hello_world_option_page'), '', 26);
  }

  function hello_world_option_page() {
    ?>
      <p>HelloWorld!</p>
    <?php
    }

  function hello_world() {
    echo 'HelloWorld';
  }
}

$hello = new HelloWorld;

<?php
    $hello->hello_world();
?>

f:id:utr066:20180502124425p:plain

ちゃんと表示されますね。

ウィジェットを作る

プラグインを作ったのはいいけど、これにウィジェットも入れたい。なので、新たにWidgetsディレクトリを作って、その中にウィジェットのファイルを置くことにする。

f:id:utr066:20180502131737p:plain

どうやらプラグインのファイルの読み込みの起点は、最初に作ったhello-world.phpになるらしい。それ以外のファイルはただ作っただけでは読み込まれないようなので、includeの記述をする。

include(plugin_dir_path(__FILE__) . 'widgets/hello_widget.php');

これでhello_widget.phpが読み込まれるようになる。

<?php
/*
Plugin Name: HelloWorldWidget
*/
 
class HelloWorldWidget extends WP_Widget {

  function __construct() {
    // ウィジェットの説明文
    $widget_ops = array('description' => 'HelloWorldを出力するウィジェットです。');
    // 管理画面上での表示サイズ
    $control_ops = array('width' => 400, 'height' => 350);
        parent::__construct(
            false,
            'HelloWorld', // ウィジェットタイトル
            $widget_ops,
            $control_ops
        );
  }

    //公開側での表示
    function widget($args, $instance) {
        echo "HelloWorld!!";
    }

    //ウィジェットの設定画面で
    function update($new_instance, $old_instance) {}

    //ウィジェットの設定画面
    function form($instance) {}
}

add_action(
    'widgets_init',
    create_function('', 'return register_widget("HelloWorldWidget");')
);

中身をこうすると、ウィジェットを確認することができる。

f:id:utr066:20180502152615p:plain