チュートリアル

力技！Json から WP Theme Customizer の設定

今回は WordPress に関する小規模なハックです。

テーマに組み込んで、ユーザーさんにテーマのカスタマイズを簡単に提供する「テーマカスタマイザー」機能ですが、設定がややこしく、コードも肥大化しがちになります。

なんで、json などから手っ取り早く設定項目かけたらなと思って、
ちょっとコードを書いてみました。

めちゃくちゃなコードと英語かも知れませんが、Gist にあげているので良かったら参考にして下さい。

上記ファイルと同じ階層に以下の形式の json ファイルを作成して渡してあげると、
無事テーマカスタマイザーに反映されます( はずです )

    "gg_general_settings": { // セクション ID
        "title" : "基本的な設定", // セクションのタイトル
        "priority" : 29, // セクションの順番
        "setting" : {
            "general_keywords" : { // 設定 ID
                "transport" : "postMessage", // js でリアルタイムに反映させる場合は "postMesage", リロードさせる場合は "refresh"
                "default" : "", // デフォルトの値
                "label" : "キーワードをカンマ区切りで入力してください。", // 項目のラベル
                "type" : "option" // 設定項目のタイプ "select","radio","option","image","color"
            }
        }
    }

でも、結局あんまり意味がなかったような……あはは
こんなこともできるんだよレベルで覚えてもらえたら嬉しいです。

次は管理画面から簡単に設定できるようなプラグイン作ります。

( 最近プラグイン作ろう作ろう詐欺になりつつある )

2014年06月11日 追記 :

WordCamp kansai 2014 2日目のコントリビューターデイにて、プラグイン化しました。

https://github.com/1shiharaT/extend-theme-customizer

WP Pointer API を使って「使い方ツアー」を管理画面にさくっと導入！

以前、管理画面カスタマイズってことでアクションフックについて書きましたが、
中々まとめる時間が取れず今に至る 1shiharaT です。

一気にまとめるとすごい量になると思うので、何回かに分けて書きたいと思います。

今回は、 WP Pointer API の実装方法についてです。

初心者の方に使い方を教える一番の方法… ってなんだろう？

WordPress って、思ったより多機能です….よね。
僕のクライアントさんは企業のWeb担当者の方のような、普段は余り Web に関わらないような方が結構な数を占めます。

そんな中、デフォルトの機能に加えカスタム投稿タイプだったり、カスタムフィールドだったり、
いろいろなカスタマイズをして納品とするわけですが、
やっぱり最初は使い方を教える所から始めないといけません。

GrowGroup では、管理画面に使い方マニュアルのようなものを貼り付けていたり,
Skype でレクチャーしたり、しておりまして、最近は操作説明動画を撮影して管理画面に貼り付けていました。

でも、やはり説明出来ない所は多いですし、分からない所はやっぱり出てきます。
そんな中なんかもっといい方法ないかなーと思って色々考えていました。

よくある「ツアー形式」の使い方レクチャー

最近だと ( とは言っても結構昔かも知れませんが ) 会員登録後、自動的に始まる「使い方ツアー」なるものを見たりします。
これを WordPress で実装できたらなぁと思いまして、今回の WP Pointer にたどり着きました。

※ ちなみに、「使い方ツアー」なるイメージは下のリンク先のようなイメージです。
http://bootstraptour.com/

WP Pointer は バージョン 3.3 から搭載されている API です。
日本語での解説は高橋文樹さんの記事しか見つかりませんでした。

よくプラグインをインストールした時に見かけるかもしれません。

こういうやつ

書こうかな… と思ったら既に Gist で使えそうなコードがあったので紹介します。(手抜き)

https://gist.github.com/DevinWalker/7595475

これを元に、ちょっとだけ変更を加えました。

最初のは、1ページに1つのポインターのみ設置になっていたので、無理矢理複数設置可能にしました。
67行目から記述が始まる $adminpages という変数に配列として値を渡すことで実装できます。

// 例 
$adminpages = array(
    // 表示させたいページのスクリーンIDを指定
    'customize' => array(
        // 1ページに何個も表示させたいため、更に囲みます
        array(
            'content' => 'ポインターの内容をここに。h3 タグがタイトルとして装飾されます。',
            // ポインターを表示したい要素のセレクター
            'id' => '#menu-appearance', 
            'position' => array(
                // ポインター矢印の位置 : top left right bottom 
                'edge' => 'left',       
                // ポインターの位置     : top left right bottom 
                'align' => 'left'      
            ) ,
            // ボタンのテキスト
            'button2' => '次へ' , 
            // ボタンをクリックした時に実行する挙動
            'function' => 'window.location="' . admin_url('widgets.php?welcome_tour=2') . '";'
        ) ,
    ) ,
);

雑なコードで申し訳ないです….

まだまだ改善の余地ありまくりなので、
管理画面から内容を操作できるようにプラグイン化しますー！

WordPress の制作効率UP！ 「TGM-Plugin-Activation」

今日は、ちょっとした制作効率を上げる Tips です。

普段 WordPress でサイトを制作する際に、独自に制作している内部的なテーマを使う会社も多いんじゃないかなと思います。

そこで、実際にサイトを制作する際に繰り返す作業が「プラグインのインストール」作業です。

大体、サイト制作する時に必須なプラグインって決まってきますよね？ (僕だけ？)

そんな非効率な作業を今回短縮できるソフトウェアを紹介します。

TGM-Plugin-Activation

Github で公開されている TGM-Plugin-Activationというリポジトリがあります。

結構前から公開されていまして、なにができるかと言いますと….

プラグイン一括インストール & 有効化 です。

予めPHPファイルに、インストールさせたいプラグインを記述しておき、管理画面から一括インストールすることができます。

設置方法

Github で公開されていますので、zip で落としてくるなり、
フォークして自分のリポジトリ作っておいたり、なんなりと。

今回はとりあえず、zip で落としてくるパターンの設置方法を説明します。

1. テーマ内にディレクトリを作成

テーマ構成をとりあえず仮定しときます。
hogehoge というテーマの場合です。

/hogehoge/
    /assets
    /includes
    style.css
    functions.php
    index.php
    page.php
    single.php
    .....

とりあえず、テーマ内の第一階層に 「plugins」 というディレクトリを作成します。

/hogehoge/
    /assets
    /includes
    /plugins
    style.css
    functions.php
    index.php
    page.php
    single.php
    .....

2. ダウンロードしたzipファイルを解答し、先程作った「plugins」ディレクトリ内に展開

/hogehoge/
    /assets/
    /includes/
    /plugins
        /plugins/..
        /composer.json
        /README.md
        /class-tgm-plugin-activation.php
        /example.php
    style.css
    functions.php
    index.php
    page.php
    single.php
    .....

zip でダウンロードしたものを、先程作成した plugins フォルダ内に展開すると、上記のようなファイル構成になります。

3. example.php をリネームし、functions.php で読み込む

plugins フォルダ内に入っている example.php をそのままではかっこ悪いので、plugins-install.php 等にリネームします。

リネーム後、functions.php で読み込みましょう。

require get_template_directory . '/plugins/plugins-install.php';

4. plugins-install.php を編集

やっと、一括インストールしたいプラグインの情報を追加していきます。

既に、plugins-install.php には、サンプルコードが書いてありますので、それを編集していきましょう。

※ 上記ファイルは確認していないサンプルコードです。

wordpress.org にホスティングされているプラグインであれば、

http://downloads.wordpress.org//plugins/zip/[プラグインのスラッグ名].zip

がダウンロードする zipファイルまでの絶対パスとなります。

スラッグ名は、プラグインのページURLを見ればわかります。

http://wordpress.org/plugins/[ここの部分]/

5. 管理画面からインストール

管理画面の「外観」メニューに「Install Plugins」というメニューができていますので、
そこからプラグインを一括インストールします。

これで、サーバーの設定などに問題がなければ、通常のプラグインと同じようにプラグインがインストールされていきます。

長々書きましたが、出来る人だと 5分ぐらいでできるはずです。

フォークして自分用に作っておくと便利ですね。

あとがき

一応、正規のリポジトリからインストールするので、ライセンスなどは問題ないかとは思います。
どうなんでしょうか。ご意見いただけたら幸いです。

有料でテーマを配布するなんて時には使ったらまずいと思いますが、
社内で使うテーマなどのにおいての効率化には使えるんじゃないでしょうか。

WP CLI を使って自動化すれば良い話かもしれませんが、世の中そんなに黒い画面が出来る人ばかりではないので….

現場からは以上です。