## WordPressのプラグインを
初めて自作してみた話
有限会社アップルップル 堀 悟大
## 自己紹介
### 有限会社アップルップル
### steelydylan
## 業務
- JSライブラリの開発
- a-blog cmsのUIまわりの担当
- 最近はPHPを使ったサーバー周りの処理にも携わる
- Web制作の受託案件
## OSS活動が大好き
## OSS活動が大好き
今回は初めてWordPressのプラグインという形でOSS活動してみました。
## 本日は2本立て
- OSS活動について
- WordPressプラグイン開発方法
### OSS活動とは
普段だったら社内で完結するソースコードをオープンにして、無償で利用できるようにしましょうという活動
### OSS活動とは
OSSとして提供されているソフトウェア
例）PHP, Ruby, jQuery, Bootstrap, WordPress, Firefox
### OSS活動とは
弊社が販売しているCMS, a-blog cmsのJavaScriptの部分（フロントサイド）のオープンソース化
### GitHub
[https://github.com/appleple](https://github.com/appleple)
### GitHub
### Git Awards
GitHubでのスター数が世界や地域で何位なのかが確認できるサイト
弊社現在 32位
### 弊社が配布しているオープンソース
- SmartPhoto.js
- hiraku.js
- modal-video.js
- a-table.js
### SmartPhoto.js
### SmartPhoto.js
### SmartPhoto.js
```html
```
### SmartPhoto.js
```js
$(function() {
$(".js-smartPhoto").smartPhoto();
});
```
### SmartPhoto.js
加速度センサーによる動きを無効化する
```js
$(function() {
$(".js-smartPhoto").smartPhoto({
useOrientationApi: false
});
});
```
### SmartPhoto.js
写真の拡大時に画像がプレビューエリアから
はみ出さないようにする
```js
$(function() {
$(".js-smartPhoto").smartPhoto({
resizeStyle: 'fit'
});
});
```
## 他のJSとの違い
- 設置が簡単
- イベントが取得できる
- Orieantation APIに対応
- 画像のグループ化ができる
### SmartPhoto.js
ダウンロードページ
[https://github.com/appleple/SmartPhoto](https://github.com/appleple/SmartPhoto)
### LookForward.js
### LookForward.js
下のように書いておくだけでスムーズなページ遷移ができる JavaScript
```html
```
### LookForward.js
サンプル
### hiraku.js
両サイドからの開閉
### hiraku.js
```html
### hiraku.js
```js
$(".js-offcanvas").hiraku({
btn: ".js-offcanvas-btn",
fixedHeader: ".js-fixed-header",
direction: "left",
breakpoint: 767
});
```
## 他のJSとの違い
- メニュー部分のHTMLをどこに配置してもいい。
- 美しいアニメーション
- アクセシビリティに対応
- ヘッダが固定できる。
### hiraku.js
ダウンロードページ
[https://github.com/appleple/hiraku](https://github.com/appleple/hiraku)
### modal-video.js
### modal-video.js
YoutubeやVimeoなどの動画をモーダルウィンドウで再生するためのJS
### modal-video.js
```html
```
### modal-video.js
```html
```
```js
$(".js-modal-btn").modalVideo();
```
### modal-video.js
[https://github.com/appleple/modal-video](https://github.com/appleple/modal-video)
### a-table.js
### a-table.js
テーブルを編集用のUIに変身させるJS。テーブルのセルなどの情報を取得できる。
### a-table.js
Google SpreadSheetからの貼り付けが可能
### a-table.js
```html
```
### a-table.js
```js
var table = new aTable('.table',{
lang:'ja'
});
table.afterEntered = function() {
console.log(this.getTable());
}
table.afterRendered = function() {
console.log(this.getTable());
}
```
### a-table.js
[https://codepen.io/appleple/pen/RpZqLZ](https://codepen.io/appleple/pen/RpZqLZ)
### a-table.js
ダウンロードページ
[https://github.com/appleple/a-table.js](https://github.com/appleple/a-table.js)
## WordPressプラグイン開発方法
## 今回作ったもの
### wp-smartphoto
## wp-smartphoto
さきほど紹介したSmartPhoto.jsをWordPressで簡単に使えるようにしたもの
## wp-smartphoto
エントリーの画像を拡大表示。
エントリー以外の画像でも特定のクラス名の画像を拡大表示可能
## プラグイン作成の工程
- 管理画面の作成
- フロント側の実装
## 管理画面の作成
- admin.php
## add_action
WordPressでは、特定のイベント時にそのイベントをhookしてそこに処理を挟み込むことができる。
今回は管理画面の時に処理を挟みたいので、add_action('admin_menu', 関数);を実行
## add_theme_page
SmartPhoto専用のページを用意
今回は外観の項目に入れたいのでedit_theme_optionsを指定。
## get_option
下記の記述で、プラグインの設定を呼び出せる
`get_option('smartphoto_options');`
## フロントの実装
- front.php
## add_filter
WordPressでは、できあがったHTMLを正規表現などで書き換えてあらたなHTMLを生成するための関数が用意されている。
ここでは`the-content` 記事に当たる部分をfilterで別の内容に書き換える
## Readmeの作成
[https://generatewp.com/plugin-readme/](https://generatewp.com/plugin-readme/)
```
=== wp-smartphoto ===
Contributors: steelydylan
Tags: lightbox
Requires PHP: 5.3
License: MIT
License URI: https://github.com/appleple/wp-smartphoto
wp-smartphoto enables you to enlarge images to see them clearly
```
## WordPress
プラグイン申請ページ
[https://wordpress.org/plugins/developers/add/](https://wordpress.org/plugins/developers/add/)
## さいごに
OSS配布時のコツ
- Readmeをしっかり書く
- ドキュメントをしっかりかく
## さいごに
プログラムの中身も大事だけどしっかり使ってもらえるように説明を書くのはもっと大事！
# Thank You!
Twitter: @steelydylan
GitHub: steelydylan