レンタルサーバー速度比較記事はこちらホームWordPress[WordPress]自作ウィジェットをプラグイン化した手順2018年2月26日SHAREツイートシェアはてブLINEPocket前回作成したウィジェット「広告用2カラムのカスタムHTML」をプラグイン化するにあたって、どのように行ったかを記していきます。[SANGO]2カラム広告ウィジェットをプラグイン化しました完成したプラグインも上記記事にダウンロードリンクがあります。ファイルの置き場所プラグインファイルは下記のパスに配置されています。wordpress/wp-content/plugins/MAMPなどのローカル環境でプラグイン作成を行っていく場合、上記フォルダに自作するためのフォルダを作成します。wordpress/wp-content/plugins/peralab-w2cch/フォルダ名は、世界中にある他のWordPressプラグインと被らないよう、シンプルなものは避けます。自分のサイト名や名前などを接頭語にすれば被りづらくなります。プラグイン作成にあたって、最低限必要なファイルはphpファイルひとつです。必要に応じてCSSや画像ファイルなどを追加します。今回、僕がプラグイン化するウィジェットではphpファイルの他に、cssファイルをひとつ同梱します。フォルダ構成はこのようになっています。peralab-w2cch/peralab-w2cch.phpperalab-w2cch/style/style.csscssファイルをstyleフォルダの中に入れていますが、特に決まりがあるわけではないです。将来的な管理がしやすいようにstyleフォルダを作っています。PHPファイルにヘッダー情報をつけるWordPress側にプラグインを認識させるために、phpファイルの最初に下記コメントを記述します。(プラグインのバージョン番号。GPL2)*/?>これに従って記述した結果がこちら。テーマ「SANGO」でカスタムHTMLを2カラムレイアウトで表示します。<http://www.gnu.org/licenses>.*/これでWordPress側がプラグインを認識し、プラグイン画面に出現するようになります。ライセンスについてLicenseは前述したコードの赤字部分です。理由がない限り、WordPressと同じGPL2ライセンスを適用します。GPL2ライセンスは、GPL2と書いただけではダメで、下記の文面を含める必要があります。URI}.この文面は適時更新されているようで、プラグイン作成時はこちらのページで確認してください。Codexでは別の書き方が紹介されています(2018/02/26時点)。そもそも英語版のページも前述の日本語版Codexに貼られていたリンクから飛んだわけですが...。参考するにしても自己責任でお願いします。jetpackに含まれている一部のプラグインは、紹介した書き方をしていますね。プラグインの作成CodexPHPファイルの中身ヘッダー情報を書いた後は、functions.phpに書くのと同じです。今回はウィジェットの移植なので、こちらの記事でfunctions.phpに記述した内容を丸々コピペして完了です。CSSファイルの読み込みCSSファイルを同梱するので、phpにCSSロード処理を付け足します。第1引数:ハンドルとして使われる名称になります。他のプラグイン、CSSと被らないような名称をつけます。第2引数:スタイルシート(CSS)のURLを記述します。plugins_url関数を使って取得した値を渡しています。plugins_urlpluginsフォルダへのURLを取得します。第1引数:(オプション)URLを取得したいプラグインファイルへのパス。第2引数:(オプション)第1引数が相対パスの起点とする親ディレクトリ。__FILE__)の例で言うと、第2引数を指定しているので、__FILE__からの相対パスになっています。__FILE__はPHPのマジック定数で、現在のファイル(peralab-w2cch.php)のフルパスに置き換わります。__FILE__)取得結果:http://pera-lab.com/wp-content/plugins/peralab-w2cch/style/style.cssアクションフック(wp_enqueue_scripts)ここが一番迷った所。CSSのロードはwp_enqueue_styleで読み込めますが、どのフックのタイミングで実行すればよいのか。これがそれっぽいですね。管理画面用のフックなので、enqueue_scriptsで探して見つけたのがwp_enqueue_scriptsです。こちらは説明が全く書いていませんが...。wp_enqueue_style関数のサンプル例でもwp_enqueue_scriptsが使われているので、大丈夫そうと思って実行。出力されたHTMLソースを確認すると<head>要素内の<style>でCSSがきちんとロードされていたので正解でした。API/アクションフック一覧Codexstyle/style.cssCSSファイルの中身も、移植なのでこちらの記事でstyle.cssに記述した内容を丸々コピペして完了です。"utf-8";これを先頭に記述して、後はコピペです。まとめ長々と書きましたが、これでプラグイン化が完了です。ウィジェットの移植はほとんどコピペで終わります。今回、プラグイン化するのに時間がかかったのはライセンスとCSSのロード処理を調べていたところですね。下記の参考リンクに、ヘッダーに記述したライセンスの一部翻訳があります。:WordPresswpXレンタルサーバーでサブドメインのサイトを作成WordPressで引用符の自動変換を止める方法WordPressで記事を書くのに便利なショートカットとMarkdown記法まとめムームードメインでドメイン購入からエックスサーバーで使用するまでの手順カラフルボックス(ColorfulBox)のファイルツリー丸見えを解決する方法ナビゲーションメニューを記事中にショートコードで表示する方法この記事を書いた人ぺらラボ永遠のダイエッターツクール、Cocos、Unityと触ってきて、最近ようやくWEBに手を出した移り気な人。直近の目標はダイエッター卒業。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。前の記事[SANGO]2カラム広告ウィジェットをプラグイン化しました次の記事Parallels13のトライアル期間終了後の話ぺらラボツクール、Cocos、Unityと触ってきて、最近ようやくWEBに手を出した移り気な人。直近の目標はダイエッター卒業。人気記事mixhostを1ヶ月試用したら注意点がポロポロ出てきた。初心者にオススメするならエックスサーバーかなと思った。Audible(オーディブル)レビュー。flier(フライヤー)が実用的で面白かったのでレビュー。開封&AirPodsと接続ColorfulBox(カラフルボックス)実際に使ってサーバーの実力をレビュー。