WordPress Widget Customizer – Tips.

WordPress 3.9 から追加された「Widget Customizer」でのTips。

「Shift + クリック」 で、ウィジェットをクリックすると、カスタマイザーの方でウィジェットが開く。

ウィジェットにマウスホバーすると、フロントのウィジェット部分がフォーカスされる。

ソースは

wp-includes/class-wp-customize-widgets.php  
wp-includes/js/customize-preview-widgets.js  

あたりを参照。

テーマ関係なく動作するはずですが、テーマによってはバッティングするかも。

それだけ。

postfix

もう季節も変わったことが感じ取れるほど、暖かくなってきました。
弊社では暑がりばかりなため、あと2週間もすれば冷房を入れ始めるのではないかと思います。

さて本題ですが、この度レガシーなPHPで稼働しているシステムを新サーバーに移行する案件を引き受けました。

内容としては、

  • apache + php 5.1.6 + MySQL で動作する一般的なWebアプリケーション
  • クライアントが現制作元との契約を切り、コスト削減のためにシステムを移行するため、情報開示に非協力的。
  • 4月末日で現在の制作会社との契約を切るため、急いで対応して欲しい。( この時点が4月25日ほど。 )

この情報のみが受注前に与えられ、やる、やらないかの2択。

一見、博打のような案件です。黒い。ドス黒い。

… ですが、金額が結構な高単価だったため、引き受けました。

まぁ、そのおかげで全く経験のなかったことをやれたのですが、
それと引き換えに睡眠時間を奪われました。

また、sugimotoさんにもTwitterから助けて貰い、本当に迷惑をおかけしました。

メモ用にちょっと記事を書いてみます。

移行の開始

新サーバーは さくらのVPS SSD 4G プランを採用しました。
正直、VPSの中ではSSDがこんな低コストで使えるのはここだけなんじゃないかな。( 海外も含めるといっぱいあるかもしれませんが。 )

まぁ、正直クライアント的にはもっと安いレンタルサーバーにしたかったみたいです。
それではいざ蓋を開けた時にどうもできないということになるといけないので、VPSに。

さくらのVPSを借りてもらい、手続きをしてもらったのですが、やり取り上のミスで実際に新サーバーが使えるようになったのが25日。あと5日しかない。

とりあえず、chef で環境を構築。

そこで旧サーバー元からやっとこさFTP、DBなどの必要情報を貰い中身を見てみると…….

な、なんじゃこりゃー!

現状のWebアプリケーションを動かしているのは、

  1. サイト本体のデータが入ったサーバー
  2. サイトの管理画面が入っているサーバー

上記2つに別れているということがわかりました。

なおかつ、2 の管理画面が入っているサーバーと、本体が入っているサーバーとではphpのバージョンも、apacheのバージョンも、Mysqlのバージョンも違うことも判明。

これ以上サーバーは借たくない。無慈悲なクライアント。

まぁ、なんとかやってみました。

PHP 基本からやり直す

パーフェクトPHP

今のままではいかんなとメモ。

PHPの言語仕様

  • エラーには大きく分けて3種類ある

    • パースエラー ( シンタックスエラー )
    • 実行時のエラー ( 実行も中断される )
    • 警告・注意 ( 実行はする )
  • エラーの種類とエラー定数

    • E_PARSE
    • E_ERROE
    • E_WARNING
    • E_NOTICE
    • E_DEPRECATED
    • E_STRICT
  • エラーに関する設定

    • error_reporting
      • php.ini ( または.htaccessに書く ) に 記述

型と演算子

PHPは動的型付け型言語なので、普段は型を記にせずプログラムを書けるが、
内部的には明確に区別されている

  • PHPの型

    • PHPには8つの型がある
      • 整数 ( int )
        • キャストしたい場合には、 (int)、または intval()関数を使用
      • 浮動小数点数 ( float )
        • floatval()、(float)でキャスト
      • 文字列 ( string )
        • シングルクオート内ではエスケープ文字は展開されない。
        • ダブルクオート内では変数を展開できる
          • スペースを開けずに展開したい時には{}をつける
        • ヒアドキュメント内でも変数は展開可能。
        • Nowdoc
          • PHP 5.3から利用可能
          • const や define に利用
          • 文字列がパースされない。 ( 変数が使えない )
        • strval() (string) でキャスト可能
        • 文字列型が特に注意が必要 ( キャストを明示的に )
      • 論理型
        • 真偽値 true , false を扱う
        • true , false の 大文字と小文字は区別されない
        • キャストには (bool)、(boolean)を使用
        • falseと判断するものは以下の7つ
          • false
          • 0
          • 0.0
          • 空の文字列
          • 要素の数がゼロの配列
          • null ( 地がセットされていない変数を含む )
          • 空のタグから生成されたsimplexmlオブジェクト
      • 配列型
      • オブジェクト型
        • クラスを new 演算子によってインスタンス化したものへの参照
      • リソース型
        • オープンされたファイルやデータベース接続など、何らかの外部リソースへの参照を保持。
          • sockets file
          • curl
          • mysql link
          • stream
      • null
        • 変数が値を持たないことを表す特別な型。
          • 定数nullが代入されている場合
          • 値が何も代入されていない
          • unset () されている場合
  • 型の明示的なキャストと変換関数

| 型 | C言語風のキャスト | 変換関数 |
|:——————-:|:————————-:|:———————–:|
| 論理型 | (bool) (boolean) | – |
| 整数 | (int) (integer) | intval() |
| 浮動小数点数 | (float) (double) (real) | floatval() , doubleval() |
| 文字列 | (string) | strval() |
| 配列 | (array) | – |
| オブジェクト | (object) | – |

  • 自動キャストについて

    • 発生する状況
      • 異なる型同士で演算を行う場合
      • 演算子、制御構造、関数やメソッドが特定の型の引数を必要としており、それとは異なる型を渡した場合
        • 関数などに、指定する型と異なる型を渡したにはエラーがでる。
  • 文字列のキャスト

    • 数値らしい文字列とは
      • 10進数を表した文字列
      • 16進数を表した文字列
    • PHPは自動キャストによって思いもしない挙動が再現する

演算子

  • PHPの演算子には3種類ある

    • 単項演算子
    • 二項演算子
    • 三項演算子
  • PHPの演算子の種類

    • 代入演算子
      • その名の通り、代入演算を行う
        • $a = 10; // 変数 $a に 10 を代入
    • 代数演算子
        • : 加算
        • : 減算
        • : 積
        • : 商
      • % : 剰余
    • ビット演算子
      • & : ビット積 : 両辺のビットどちらにも立っているビット
      • | : ビット和 : 両辺のいずれかで立っているビット
      • ^ : 排他的論理和 : 両辺のビットのどちらかにしか立っていないビット
      • ~ : 否定 : ビットの反転
      • << : 左シフト
      • >> : 右シフト
    • 文字列演算子
      • . : 文字列の結合
        • 文字列ではない変数との結合をすると、自動的に文字列にキャストされる。
        • 整数値を直接文字列と結合する場合には前後にスペースを忘れずに
    • 複合演算子
      • 左辺 演算子= 右辺
        • $a += 1; // $a に 1 を追加
    • 加算子・減算子
      • ある変数に1を加える ( 引く ) という演算を行い、結果を代入。
      • ++
      • 演算子を前置すると、まず演算を行い結果を返す
      • 演算子を後置すると、結果を返し、演算を行う
    • 論理演算子
      • && 及び and : 論理積
      • || 及び or : 論理和
      • xor 排他的論理和
      • ! : 否定
        • 論理積と論理和では2通りあるが、優先順位が違う
      • if ( isset( $argv[1] ) && $argv[1] ) // まず引数があるか確認し、ある場合はそれが真か調べる
    • 比較演算子
      • 2の値を比較し、その結果を論理値で返す
        • ==
        • != または <>
        • === : 右辺と左辺が等しいとは true 。 キャストが行われない
        • !== : 右辺と左辺が等しくない場合には true 。キャストが行われない。
        • < : 右辺より左辺が小さい場合に true
        • >
        • <=
        • >=
      • 二項が異る型の場合は自動的にキャストされる
    • 型演算子
      • instanceof : 右辺が特定のクラスのインスタンスである場合に真となる。
        • if ( $a instanceof SomeClass )
      • また、型演算子では下記の2項を調べることも出来ます
        • 特定のクラスを継承したクラスのインスタンスか
        • 特定のインターフェースを実装したクラスのインスタンスか
    • 三項演算子
      • 条件演算子とも呼ばれる
        • 条件式 ? 式1 : 式2
        • $param = isset( $args[1] ) ? $args[1] : ‘default’;
        • 条件式と式1が同じな場合 , 式2は省略可能
          • 条件式 ?: 式1
      • 三項演算子の結合規則
        • 三項演算子をネストして用いる場合には、必ず明示的に () を使用する
  • 演算子の優先順位

    • $b = $ a = 2 * 3 + 5 ;
      • $b = ( $a = ( ( 2 * 3 ) + 5 ) ) ;
    • 演算子にはそれぞれの結合法則と優先順位があり、ルールに従って式は評価される
  • 配列

    • 添字配列 : 配列の先頭から順に列挙し、その番号でアクセスする配列
      • 配列の要素にアクセスするには変数にブランケット [] をつけ、キーとなる添字を指定
      • ブランケットを使った配列の初期化は、初めて使われる変数に対してのみ有効
    • 連想配列
      • キーに名前をつけ、キーでアクセスできる配列
      • 初期化時にキーが重複していた場合、後に定義された要素が用いられる
    • キー
      • 配列のキーとして用いることができるのは以下の2つ
        • 整数
        • 文字列
      • 論理型、不動小数点数型、nullを用いることもできるが、それぞれ文字列文字列、数値型にキャストされる
    • 多次元配列
      • 連想配列の中に連想配列を入れることもできる
    • PHPの配列の特徴のまとめ
      • 添字配列と連想配列が同じ配列型として扱われる
      • 添字配列と連想配列を混ぜて使うことができる
      • 連想配列は入力順が保証される、順序付マップである
    • 配列のキーがセットされてあるか調べる
      • arraykeyexits() という関数がある
      • でもisset()でも調べることが可能かつ速い

制御構造と関数

制御構造

  • プログラムの構成要素と制御要素
    • プログラムの実行は、上から下へ、記述されたプログラムが流れるように実行される → 遂次実行 (ちくじ実行)
    • 文とグループ文
      • 「文・グループ文」「式」「制御構造」
        • 複数の文を中括弧 {} で囲むことで、文をグループ化する。
          • 文ですむ処理は{}で囲む必要はない
          • でも可読性が悪くなるので気をつける
      • PHPに於ける式とは、値をもつすべての物のこと。
    • 制御構造
      • if – elseif – else 文
      • while
      • do – while
        • 必ず do を実行
      • for
        • 反復を行う時に初期化をする変数、反復条件、反復ごとに実行する文を定義する
        • 最初の初期化式では、 , (カンマ)で区切り何個も式を書ける
          • 一般的には余りそういうことをしない
      • foreach
        • 反復可能なデータ構造を順番に処理するための制御構造
        • foreach を使うと、配列の要素を先頭から順にすべて出力するような処理を簡単に記述できる
        • PHPにはブロックスコープがない
          • foreach で 指定した変数は外でも使用可能
        • 反復時に参照を用いることができる
          • foreach ( $array as &$hoge ) // $hogeがそれぞれの値と同等になる
      • break
        • for , foreach , while , do-while, switch のブロックから抜けるために用いられる
        • 特定の条件時に反復を終わらせたい時
      • continue
        • 現在の繰り返し処理を途中で終了し、次の繰り返し処理をする場合に用いられる
      • switch
        • 複数の条件で複雑な分岐を行いたい場合、switch構文を用いることで、スマートに記述
        • break 文がない場合は、次のbreak文まで処理が継続する
          • これを利用して、複数のcase処理を行える
      • return
        *
      • exit
        • プログラムの実行を終了
      • require / requireonce
        • 別のファイルに記述されたスクリプトを読み込む
        • ファイルが見つからなかったらそこで実行が止まる ( エラーとなる )
      • include / includeonce
        • 外部ファイルを読み込むための構文
        • require と違い、実行は継続する
      • goto
        • ラベル付けされた箇所へジャンプするための構文
          • ラベルは ラベル名: の形で定義
        • 一般的にあまり使用されない
    • 関数
      • 再利用されうるコードのかたまりのロジックをまとめて関数を定義する
      • 関数の基本
        • function [&] 関数名 ( [引数[, ….]] )
      • 引数のデフォルト値
        • デフォルト値を持つ引数は、持たない引数より後に書く
      • タイプヒンディング
        • 引数に型を指定し、それ以外の型を持つ引数が渡された場合に致命的なエラーを返す
        • 実行が中段
        • function hogehoge( array $args ) { // 配列以外が渡されるとエラー
      • 関数の呼出
      • コールバック関数
        • PHPには引数に関数を指定すると特定の処理にその関数を呼び出すような関数がある。
        • コールバック関数には、定義済みの関数やユーザー定義関数の関数名を文字列で指定する他、次のような指定もできます。
          • 関数名を表す文字列
          • 無名関数
          • クラスやクラスのインスタンスとメソッド名を持つ配列
          • クラスの静的メソッドを表す文字列
      • 可変関数
        • 可変変数と同じように、関数名の代入された変数を使って呼び出すことが出来る。
          • $name(); // $name = ‘date’ の場合 , date 関数が呼び出される
      • calluserfunc() と calluserfuncarray()
        • 可変関数よりもより高度な関数呼び出しパターン
          • mixed calluserfunc ( callback コールバック関数 , [mixed 引数, …] );
          • mixed calluserfuncarray ( callback コールバック関数 , array 引数のリスト );
        • コールバック関数には、無名関数も指定できる
        • static メソッドの場合、クラス名を文字列で指定できる
        • static メソッドの場合、「クラス名::メソッド名」でも指定できる
        • インスタンス変数と、メソッド名でも指定出来る
        • calluserfunc と calluserfuncarray の違い
          • calluserfunc = 予め呼び出す関数の引数を知っておく必要がある
          • calluserfuncarray = 第二引数に配列として与えることができるため、呼び出す関数の実装を知らずに用いることができる
      • 参照による引数と返り値
        • function addone ( &$value ) // これでグローバル内の変数にも影響を与える
        • 引数を参照で渡す関数の場合には、直接引数を渡すことはできない
      • 無名関数
        • その名の通り、名前の無い関数
        • PHP 5.3 から実装された
        • 関数型プログラミングの際に用いられる
        • 関数をオブジェクトのように扱うことができる
      • クロージャ
        • use()構文を持ちいて使用
        • 名前空間を解決するための手段
    • クラスとオブジェクト
      • PHPには本格的なオブジェクト指向でプログラミングするための機能が揃っている
      • クラス
        • PHP5から本格的なオブジェクトの機能が備わってきた。
        • クラス名も関数と同じように、グローバルに命名定義される。
        • インスタンスの生成と使い方
          • クラスを使う時は new 演算子を用いてクラスをインスタンス化する
          • メソッドの呼出には アロー演算子 -> を用います。
          • 複製する時は clone 演算子を使う
          • アクセス修飾子
            • public
              • クラスの外側から呼出
            • private
              • 自分のクラスの内側からのみ参照・呼出
            • protected
              • 自分のクラスの内側、または自分のクラスを継承したクラスの内側からのみ参照・呼出が可能
        • プロパティ
          • クラスの中に保持している変数
            • メソッドと同じように、アロー演算子でアクセス
          • $this
            • インスタンス化を行うとクラスのメソッド内で使用できる $this という変数が自動で定義される
            • $this は自分自身のオブジェクトの参照
          • クラス定義時に宣言しないプロパティ
            • PHP では、宣言していないプロパティへの読み書きも可能
          • static プロパティ
            • 静的なプロパティ
            • メソッドの宣言時に static をつけると、インスタンスしていなくてもアクセスが可能となる
            • そのクラスに共通の変数のようなもの
            • ダブルコロン (::) をつけてアクセスします
            • この値がすべてのオブジェクトで共通ということを示す
          • self
            • クラスコンテキストの内部で、そのクラス自体を示す
            • ダブルコロン (::)と一緒に用いる
            • 似たようなキーワードとして parent , 遅延性的束縛という機能で用いられる static キーワードがある
          • 定数
            • クラス定数は const キーワードを用いて定義
            • 定数に使用できるにはスカラーの値のみ ( 配列などは無理 )
            • クラス定数は ダブルコロン (::)と定数名を持ちいてアクセス
        • メソッド
          • クラスに属する関数
          • 関数の定義と変わらない
          • static メソッド
            • 静的なメソッド。 static メソッド内では $this は使用できない
              • static メソッド内では self:: を使う
        • コンストラクタとデストラクタ
          • クラスのインスタンスが作られたり、消されたりスルタイミングで自動的に呼び出されるメソッド
          • 省略できる
          • 通常、コンストラクタはオブジェクトを生成する上で必要なパラメータや、そのクラスのオプションなどを引数と受け取り、プロパティにセットするなどという役割
          • コンストラクタとデストラクタは マジックメソッド。 _ ( アンダースコア 2つ )のものはマジックメソッド
        • 継承
          • あるクラスのメソッドやプロパティを引き継いで新しいクラスを定義すること
          • 一般的に継承されたクラスを親クラス, 継承したクラスを小クラス という
          • PHP では多重継承は許されていない
          • クラス名に続けて extends キーワードと継承するクラス名を指定
          • final キーワード
            • 継承された派生クラスでオーバーライドできなくなる
        • 標準クラスとキャスト
          • stdClass : プロパティやメソッドを一切持たない 標準クラス
          • 整数型や文字列型などのスカラー値をオブジェクト型にキャストした場合 ‘scalar’ というプロパティにその値を持つインスタンスとなる。 echo $foo->scalar
        • 抽象クラス
          • アブストラクトクラス
            • 共通の機能を抽象的な親クラスで定義し、特有の機能は個々の小クラスで実装させたい時に使用
            • 抽象クラスは abstruct キーワードを使用して宣言
            • 抽象クラスはそれ自体をインスタンス化することはできない
            • 必ずその抽象クラスを継承したクラスをインスタンス化する必要がある
            • abstract クラス名 { abstract アクセス件 function メソッド名 }
            • 抽象化されたabstract メソッドを可鳴らす実装しないと致命的なエラーがでる
        • インターフェイス
          • 機能の実装を規格するための仕組み
          • インターフェイスを用いると,特定のオブジェクトが特定の機能 ( メソッド )を有することが保証される
          • インターフェイスの定義には実体のあるメソッドを定義できない
          • インターフェイスを暮らすに実装する場合 implements キーワードを使う
          • 複数のインターフェイス を同時に実装することもできる
          • インターフェイスに定義されているメソッドを実装しないと致命的なエラーとなる
          • 定義済みインターフェイス
            • Iterator : foreach 構文で扱うことができるようになるイテレータインターフェイス
            • RecursiveIterator : 再帰的にいてレートを可能にするためのイテレータインターフェイス
            • SeekabkeIterator : シーク可能なイテレータインターフェイス
            • ArrayAccess : 配列のようにブラケット([])によるアクセスを可能にするインターフェイス
            • Serializable
            • Coutable
          • インターフェイスを定義し、それを実装させることのメリットは、それを実装したクラスのオブジェクトであれば、特定の機能を必ず実装していること。
        • クラスとオブジェクトの機能と特徴
          • マジックメソッド
            • 特定の条件で呼び出されるメソッド
            • マジックメソッドはどのようなクラスにも定義出来、定義されている場合に必要に応じて呼び出される
            • マジックメソッドは必ず public で定義しなければならない
            • PHP には 14 のマジックメソッドが用意されている
              • get : アクセス不能なプロパティを取得しようとする
              • set : アクセス不能なプロパティに代入する
              • call : アクセス不能なプロパティに対して isset () か emptyを実行
              • callStatic
              • sleep
              • wakeup
              • construct
              • destruct
              • isset
              • unset
              • toString
              • invoke
              • setstate
            • オーバーロード
              • デフォルトの挙動を上書きする
          • 遅延性的束縛
            • static キーワードを持ちいて、子クラスのメソッドをコールすることができる
          • オートロード
            • クラスを必要な時に呼び出す仕組み
            • 定義されていないクラスを使おうとした時、指定されたオートロード関数が呼び出される
            • autoload () 関数 : 引数に使おうとしたクラス名を受け取る
            • Class名とファイル名は、同じにしなければならない
      • 名前空間
        • PHP 5.3 から実装された機能
        • クラスや関数の使える名前の集合を限定し、関数名やクラス名の衝突を防いだり、機能の参照をわかりやすくするための機能
        • 名前空間はいわばディレクトリのようなもの
        • 名前空間の区切りにはバックスラッシュ ( ) を用いる
        • 名前空間を定義した場合、グローバルな関数やクラスは先頭にバックスラッシュをつけ、グローバルな名前空間から参照しなければいけない
        • 非修飾名 : 名前空間区切り ( ) を含まない識別子 ( 例 Cake )
        • 修飾名 : 名前空間区切り ( ) を含むh識別子 ( 例 FoodDweets )
        • 完全修飾名 : 名前空間区切り ( ) から始まる識別子
        • 名前空間の定義
          • namespace 名前空間;
          • namespace 名前空間サブ名前空間
          • 名前空間の影響を受けるのは、クラス、関数、定数 ( constのみ )
        • インポートルール
          • use as キーワードを使うことで名前空間のエイリアスを作成できる
        • 動的な名前空間の使用も可能 : 基本、シングルクオートで囲む
      • 例外
        • PHP の例外
          • throw new 例外クラス名 ( [メッセージ, [エラーコード,[前の例外オブジェクト]]])
          • 例外は try ブロックで囲むことで補足できる
          • try 文にはそれに対応した catch 文が必要
          • 最も簡単な例外の使い型は、すべての例外の基底となる Exception クラスを使うこと。
          • 例外を拡張する場合でも、すべての例外クラスは Exception クラスを継承しなければならない
      • 参照
        • PHPにおける参照 (リファレンス) とは、ある値を指し示すものを言います。別の言い方をすると、変数のもつある値の格納領域を指し示す別の名前をもつ変数のこと。

使いやすいWordPressを目指す!管理画面カスタマイズ – プラグイン編

WordPress も来週には3.9が出るということで、今回はWordPressネタを書いてみます。

WordPressは更新しにくい?

最近よく聞く言葉です。

確かにWordPressはブログ型のCMSですので、ページを編集する….といった時は直接テンプレートを編集したりなど、HTML,CSSなどの知識が必要になることが多いかもしれません。

ただ、次に出る3.9でも 「テーマのカスタマイズ」 でウィジェットを挿入できるようになったり、
その次バージョンではフロントエンドでの記事編集機能が予定されていたりなど、直感的な操作で記事を作成する改善が見受けられます。

現状、そしてこれからのWordPressで施策するときっと便利であろうカスタマイズ方法をババーンと幾つか紹介します。

今回はプラグイン編ということで、主にプラグインを使用して簡単にできるカスタマイズをお送りします。

目次

  1. ダッシュボードのカスタマイズ
  2. ウィジェットのカスタマイズ
  3. 投稿方法のカスタマイズ

ダッシュボードのカスタマイズ

WordPressでログインして一番最初に表示される「ダッシュボード」。
ここをカスタマイズして、ユーザーが必要な情報を出してあげます。

Dashboard Widget Sidebar

このプラグインを使うと、ダッシュボードにウィジェットがおけるようになります。

さらに後述する Black studio tinyMCEを合わせて使うと、もう怖いものなしです。

僕はダッシュボードに、説明動画、ショートカットリンク、トラブルシューティングなどを置くようにしています。

PDFなどでマニュアルを作ったりするより、20分程度の説明動画をとってダッシュボードに貼り付けておいた方がクライアントさんからするとわかりやすいようです。

また、ショートカットリンクも3.8から管理画面で使えるようになった dashiconsを使ってアイコンを使用して見立たせたり、
できるだけ気を使えばとてもわかり易いものになります。

ウィジェットのカスタマイズ

冒頭に説明したように、3.9からテーマカスタマイザーでウィジェットを追加することができるようになりました。

これは便利そうですね!

まだまだウィジェットを使用していないサイトもたくさん見ますが……あと、メニューも。

制作する上でも、ウィジェットはだいぶ役立ちます。そこら辺をご紹介できれば。

Black Studio TinyMCE Widget

ヴィジュアルエディターがウィジェットとして使えるようになるプラグインです。

もちろん、メディアのアップロードから画像を挿入できます。
サイドバーのバナーなんてのも、これで管理すると変更しやすいですよね。

3.9のウィジェットカスタマイザーでも動作します。

( 最初は動かないと思ってサポートフォーラムに書き込んだらもう改善済みでした ; バージョンが違ったという…. )

Display Widgets


ウィジェットの表示をコントロールできるプラグインです。

  • ユーザーのログイン状態
  • テンプレート
  • カテゴリー
  • カスタム投稿タイプ / カスタム投稿タイプアーカイブ
  • 固定ページ
  • 投稿IDを指定

上記の条件を組み合わせて、ウィジェットを選択したページでのみ表示することが可能です。

jetpackにも同じ機能があるのですが、こちらのほうが機能も多く便利な印象。

これで、sidebar-page.phpとか、”header-hogehoge.php”とか、乱雑なテンプレートを作る必要がなくなります。

投稿方法のカスタマイズ

WordPressでサイトを制作するからには、新着情報やニュース・ブログなど、更新頻度が高いコンテンツが多いのではないでしょうか。

標準の投稿機能であるWYSIWYGではそもそもレイアウトが難しく、ショートコードやクイックタグでの記事編集に嫌悪感をもつ方もいます。

世界中でもWordPressでの投稿方法を考えている人( または企業 )は多く、
Visual Composerや、Motopresspagelinesなど、革新的な記事編集方法を売りに、いっぱい金を稼いでいます。

かといって日本人に、上記のようなインターフェースは無理です。( 全部英語だし )

他の手段で簡単に組み込みるものをまとめました。

Advanced Custom Fields

言わずもがな知れた、カスタムフィールドを簡単に作成出来るプラグインです。

このプラグインにはアドオンも複数あり、

この2つにはお世話になっている人も多いんじゃないでしょうか。

上記のプラグインの組み合わせで、コンテンツブロック型の投稿方法をいとも簡単に実装することができます。

こんな形でブロックを積み立てていく形式の投稿方法が可能になります。

ここらへんは我らがWordBench 名古屋のアイドル yamadaさんのカスタムフィールドで作るカンタン投稿システム
が参考になるでしょう。

デザイニング インブラウザ の考えで流行っている、CSSのモジュール化などの面から見ても相性はバッチリ。

HTML + CSSモジュールの側面で追加するとなおよしです。

ただ、ACFは内部的なキーの持ち方が特殊でして、絞り込み検索などを想定する場合には
カスタムタクソノミー使うなど代替手段をおすすめします。

メモ : ACF 5の可能性

実はgithubにてACF 5の開発が進められています。

https://github.com/AdvancedCustomFields/acf5-beta

このバージョンがそのままリリースされるとなると、
ウィジェットにフィールドを追加できるようになります。

つまりは、ウィジェットは空のままコピペで作成し、ACFでフィールドを追加するということも可能にナルわけです。

Page Builder by SiteOrigin

ウィジェットベースでの記事作成が可能になるプラグインです。

![](/content/images/2014/Ap
r/admin_pagebuilder-2.gif)

メリット

  • カラム数を指定して追加
  • ウィジェットがほぼほぼ全て挿入できる
  • カラム幅をドラッグで変更可能
  • ウィジェットの複製、ドラッグ&ドロップでのウィジェット移動、テンプレート機能など、編集効率が上がる機能が盛りだくさん

デメリット

  • ビジュアルエディター・テキスト・エディターが( ほぼ )使えなくなる。
  • 動的にCSSを出力しているため、表示速度が遅くなる。
  • 基本英語 ( 翻訳ファイルはあるが、未対応部が多い)
  • 今後追加されるWordPress Front end Editorなどとの互換性が心配

といったデメリットも有ります。

GPL +3で、WordPress公式プラグインリポジトリでも配布しています。

特に、エディター関連は今後どんどんアップデートされるので、
導入には気をつけてください。

あとがき

いかがでしたでしょうか?

WordPressも日々進化するCMSであり、その使い方次第では何倍も便利になります。
他にも、こんなテクニックがある!といったことがあれば、教えてください。

次回は、使いやすいWordPressを目指す!管理画面カスタマイズ – アクションフック編をお送りします。

WordPress、投稿方法のベストプラクティス

今回は、WordPressの投稿方法について色々書き綴っていきたいと思います。

使いやすい?WordPressのWYSIWYGエディター

WordPressは長いことTinyMCEを使用したWYSIWYGエディターによる投稿方法が実装されてきました。

さて、もうそろそろ….ということで、Make core の方では既に次世代のエディターの開発が行われています。

WYSIWYGエディタはあくまでも文章を入力するためのツールです。
確かにWordPressはブログツールですので、そのまま使用することができます。

では、どんな時に使いにくいか。

思い浮かべて欲しいのですが、
文章以外の用途にヴィジュアルエディターを使用する時って、使いづらい、投稿しづらいイメージがありませんか?

  • 複雑なレイアウト
    • 2カラム・3カラムなどのブロック型
    • *

  • *

FC2 blogがオープンソースになったらしいので使ってみた。

https://github.com/fc2blog/blog

FC2ブログがオープンソースになったなったとのことを聞き、ちょっと触ってみました。
ライセンスはMIT。
下の方にインストールから内部的にどうなっているのかざっくりざっくり書きますが、
まず、触ってみて感じた感想を書き出したいと思います。

触ってみた感想。

  • 簡単・シンプル。
  • 1つのCMSで、簡単に複数のブログ運営が可能( サブディレクトリ型 )。
  • テーマも独自のテンプレートタグで記述。phpは書かなくて平気。
  • ドキュメントもそこそこ。
  • 管理画面も日本っぽいデザインのため、馴染みやすい。
  • スマートフォンの管理画面が使いやすい。
  • テンプレートの種類も豊富 ( ださいけど )
  • なぜか管理画面も標準で英語に対応している。
  • 静的なページの作成は当然だがない。

こんな所ですかね。ブログの作成という目的なのであれば、WordPressより簡単にできると思います。

インストール完了まで

データベースなどの設定は、

public/config.php.sample

を編集します。
丁寧に日本語でコメントがしてあるのでなんなく設定。

その後、config.php.sample をconfig.phpにリネームします。
次に http://example.com/admin/install.php にアクセス。

salt値を変更してくださいとのことで、例をそのままコピペし次へ。

IDやパスワードを入力してインストール完了です。

そして管理画面へ。

…./

おお!スマホのUIは使いやすい。

カテゴリやタグ・コメント機能といった、ブログの機能はだいたいそろっています。

内部的なこと

独自テンプレートエンジン

テンプレートは管理画面から編集・作成することができますが、データベースにまるまる保存し、phpに変換しているようです。

app/config/fc2_template.php

上記のファイルにテンプレートタグと変換するphpのリストがのっています。

コンパイルされたphpファイルは、

app/temp/blog_template/

フォルダの奥深くに保存されています。

基本的に1ページでURLから渡されるパラメーターで分岐しているようです。

プラグインというWordPressでいうウィジェットのような機能もありますが、
おんなじようなことをしているようです。

….ごく普通のブログエンジン

他のファイルもそろっとみてみましたが、いたって普通の?ブログエンジン的な作りになっていました。

まとめ

とにかく軽量!シンプル!なブログウェアです。

wigsygエディタには http://elrte.org/ が使用されています。

ただ、実際に使うかというと…..
その時はFC2ブログ使えばいいかと思いました!

そうか!これが作戦なのか!やるね!FC2!

metalsmith – シンプルな静的サイトジェネレーター

metalsmith という静的サイトジェネレーターを見かけたのでメモ。

http://www.metalsmith.io/

EVERYTHING IS A PLUGIN

すべてがプラグインである。

このキャッチフレーズに惹かれてちょっと試してみました。
金物細工師って意味も好きですね。
何よりメタル。
以前メタルにハマっており、slipknotとか、Dragon Forceとかメロメロでした。

そんなmetalsmithですが、
ベースはnode.jsで書かれております。

1. ファイル階層を準備します。

非常にシンプルな静的サイトジェネレーターのため、ファイル構造などは自信で設定します。

今回は下記の階層を想定し、jekyllみたいなことをやってみます。

demo /
    _layouts/
        index.html
    _posts/
        post01.md
    _site/

_layout フォルダにはラップするhtmlをいれ、
_posts フォルダにはマークダウンを記事として保存します。
_site フォルダには構築後のhtmlファイルが入るとします。

2. package.jsonの用意

まずは package.json を書きます。
metalsmith本体と、プラグイン郡を用意します。

{
  "name": "metalishihara",
  "private": true,
  "dependencies": {
    "metalsmith-watch": "0.0.2",
    "metalsmith-sass": "0.1.1",
    "metalsmith-drafts": "0.0.1",
    "metalsmith-templates": "^0.1.0",
    "metalsmith-markdown": "^0.2.1",
    "metalsmith-permalinks": "^0.1.0",
    "swig": "^1.3.2",
    "metalsmith": "^0.2.3",
    "metalsmith-sass": "~0.1.1"
  }
}

そのままコマンドでインストール。

$ npm install 

これで、metalsmithをはじめとするパッケージ郡がインストールされます。

3. metalsmith.jsonの用意

metalsmithでは、javascriptを書いて構築する方法と、
metalsmith.json という設定ファイルを作り、コマンドから構築する方法の2つがあります。
今回はめんどくさいので
同じ階層に metalsmith.json を用意します。

{
  "source": "./_posts",
  "destination": "./site",
  "metadata": {
    "title": "hogehogehoge",
    "description": "hogehogehogehogehogehoge!"
  },
  "plugins": {
    "metalsmith-watch": "*.md",
    "metalsmith-drafts": true,
    "metalsmith-markdown": true,
    "metalsmith-sass": {
        "outputStyle": "expanded"
    },
    "metalsmith-permalinks": {
      "pattern": ":title"
    },
    "metalsmith-templates": {
      "engine": "swig",
      "directory": "_layouts"
    }
  }
}

jsのテンプレートエンジンもswigとかhandlebarsjsとかお好きなのをどうぞ。

まぁ、デモなのでいろいろ適当に書いていきましょう。

_layouts/post.html

<html>
<head>
  <title>これは投稿です。</title>
</head>
<body>
  <h1>{{ title }}</h1>
  <time>{{ date | date('Y-m-d') }}</time>
  {{ contents | safe }}
</body>
</html>

_posts/post01.md

---
title: 最初の投稿
date: 2012-08-20
template: post.html
---

# これは最初の投稿です。

* これはリストですこれはリストです
* これはリストですこれはリストです
* これはリストですこれはリストです
    * これはリストですこれはリストです
    * これはリストですこれはリストです
    * これはリストですこれはリストです
    * これはリストですこれはリストです

    * マークダウンでかけます。
    * 自動でコンパイルもかけてくれます。

そして、

$ node node_modules/.bin/metalsmith

というコマンドを打つと、
_siteフォルダ内に書き出ししてくれます。

…… 。
上記のほとんどは examples内にまとめられていますので、参考にしてください。

感想

node.jsでのコーディングにおいて参考になるかなと思いました。
( metalsmith.ioのソースも公開されています。 )

バリバリコード書いて、カスタマイズするにはむいているのかなと思いますが、敷居は少し高いのかなと思いました。

これからですかね。

Sublime Text 3 からEvernoteへ。~ そしてマークダウンで ~

普段僕はVimかSublime Text 3を主力のエディタとして使用しています。

特にSublime Textでは手軽に拡張できるPackage Control という機能があります。

先日、Package Control – the Sublime Text package managerをしらーと見ていると、おもしろそうなプラグインを発見したので、
感想を書き綴ります。

Sublime TextからEvernoteへ

元々、SublimeText2用にプラグインがあったのですが、
そこからフォークしてフォークして作られたプラグインです。

https://github.com/bordaigorl/sublime-evernote

SublimeText3からEvernoteへマークダウンを保存できるというプラグインなのですが、
なぜエディタは人をそこまで突き進めるのか謎ですねホント。
別に他のでいいんじゃねと。

上記のgifでもちょっとでてますが、タグやノートの設定なども可能です。

まぁでも、便利ですね(ほっこり)。
作成していただいた方に感謝です。

ちなみに

Vimではもっと高機能なevervimがあります。
うーむ。すごい。

デザインツールのあれこれ

HTML5名古屋 #11 で「デザインツールのあれこれ」というテーマでLTをしました。

スライド内で紹介できなかったものも多々あったので、
(非常に) 簡単に書き出してみました。

Photoshop Plugin

1. BlendMeIn

ベクター素材をPhotoshop内で表示。ライセンスにはご注意を。

BlendMeIn

2. Flat Icon

フラットなアイコン素材をPhotoshop内でクロール・挿入。

Flat Icon

3. Ink

幅・高さ。Opacityといったのレイヤー情報を「_Ink」ディレクトリ内に、レイヤーとして書き出し。

Ink

4. Socail Kit

FacebookやTwitterなどのPSDテンプレートを用意。

Socail Kit

5. Zeick

選択したレイヤー(文字・シェイプなどのベクターに限る)を、ワンクリックでSVG書き出し。

Zeick

6. Random user generator

ランダムなユーザー画像・情報を表示・挿入可能に。

Random user generator

7. SUBTLE PATTERNS PHOTOSHOP PLUGIN

高品質なパターン素材をPhotoshop内でクロール・挿入。

SUBTLE PATTERNS PHOTOSHOP PLUGIN

8. PNG HAT

選択したレイヤーをBase64や、png・2xでの書き出しが一瞬で可能に。

PNG HAT

9. LAYER CONTROL

複数のレイヤー・グループのリネームや、使用していないエフェクトの削除

LAYER CONTROL

10. render.ly

命名規則に従うことで、一つのPSDファイル内でページを分けて書き出しできるように。

render.ly

11. composer

複数のレイヤー・グループ操作が可能に。

composer

12. Renamy

先に紹介したLAYER CONTROLより、柔軟なリネームが可能です。
また、よく使われる単語をサジェストで表示してくれます。

Renamy

13. Slash

名前・キャラクターの予想通り、スライスのためのphotoshopプラグインです。
しかし、自動で連番をつけたり、ディレクトリ階層を再現したりと他のスライス拡張ツールよりも多機能

Slash

14. Transform each beta

photoshopの時間がかかる作業の一つである、レイヤーのリサイズがしやすくなるスクリプトです。
各レイヤーの起点はそのままに、大きさだけリサイズできます。

Transform each beta


For Sketch.


https://gist.github.com/1shiharaT/9368608#file-design-tool-md


情報収集の取り組み

HTML5名古屋 #10で20分程お話しをさせていただきました。

前に軽くまとめていたのですが、今回発表者が少ないということで。

かなり簡素な作りになってますw

情報収集に関しては人それぞれ方法があると思うので一概には言えないですが、

僕の場合はこんな感じです。

こもりまさあきさんのSNSフィードも情報がものすごく早いので、
是非!

https://www.facebook.com/proteanim?fref=ts

WordPress でレスポンシブ対策には必須のプラグイン?「BJ Lazy Load」


投稿内の画像を自動で遅延ロード、最適化、リサイズ、キャッシング。
さらには、画面の解像度までみて判断してくれる優れもの。

WordPressでレスポンシブwebデザインを実装するならもはや必須的なプラグインだと思います。

遅延ロードというのは、画像が表示領域に入るまでは別の画像 ( 極端にサイズが小さいもの 、透明の画像とか) を表示しておいて、表示領域に入った際に読み込むというテクニックです。

もちろん、レスポンシブwebデザインでなくても使えますので、ぜひともご参考にー。

BJ Lazy Load

2013/11/11 ~ 14日 Bookmarks.

2013/11/11 ~ 14日に読んでおお!と思ったweb関連記事まとめ。

1. ink

レスポンシブなEmailを作成できるフレームワーク

  • tool 、Framework

2. Glyphs

アイコンPSD

http://glyphs.bulb9.com/

3. SVGeneration

SVGをGUIで。Data URLでの取得も可能。

http://www.svgeneration.com/

4. OpenNote

Evernote、 MicroSoft OneNoteライクなwebアプリケーションを作成できる。
(ライセンスはどうなのか知らない。)

http://stardrive.us/OpenNote/index.php?folderID=7399&noteID=6936

5. Free vectors icons for download and Icon font | Flaticon

Photoshopのプラグインまで用意してあるフラットなiconセット。

http://www.flaticon.com/

6. Formoid – Beautiful CSS Form Generator

お問い合わせフォームを簡単に作成可能なアプリ。無料版だとformanoidの表記がフッターに入る。

http://formoid.com/

7. Typeform

ダイナミックなお問い合わせフォームの構築ツール。無料プランあり。

https://www.typeform.com

8.Dropzone.js

ドラッグアンドドロップでアップロード出来るエリアを表示するjavascriptライブラリ。

Dropzone.js : http://www.dropzonejs.com/

WordPress Development Bookmarks.md

Ghostに移行した後の記事がWordPress関連という、なんとも言えない感じ。

ってことで、WordPressに関するリソースを僕なりにまとめてみました。
あとでGithubなんかに公開したいと思います。
案外時間かかるもんですね。これから更新し続けようと思います!

もし、おすすめのツールとかありましたら教えてください。

元ネタは https://github.com/dypsilon/frontend-dev-bookmarks

github : https://github.com/1shiharaT/WordPress-Developement-bookmarks

WordPress Development Bookmarks

(no title)

Responsive and Adaptive Design

レスポンシブ & アダプティブ webデザイン


すっかり普及しているレスポンシブwebデサイン ( 以降 RWD )。
しかし、問題点も数多くあります。

UXを考えたUIを表現しにくい。デバイスごとに最適化しにくい。

デスクトップとモバイル機器の違いは何も画面サイズだけではありません。

使う「場所」も違えば、操作するツールも違う。

ニーズを持つユーザー層や、接続するスピードも違います。

デバイスごとに最適化されているサイトと、
レスポンシブでCSSの範囲で作られているサイト。

どちらが優れたUXをもたらすデザインを考えやすいのか。

いうまでもないと思います。

パフォーマンスが落ちる。

スマホがいくら高性能になってきたからといっても、

デスクトップ・ラップトップとの性能差は大きな壁として存在しています。

javascriptの処理スピード。
ネットへの接続状況。

javascriptがandroidのあの端末だけ異常に重い…….

なんてこともよくある話です。

構成から実装まで複雑である。

RWDでもしフレームワークを使わずに、
一から設計、実装をやる。

経験したことがある人にはわかると思いますが、
多大な時間と労力がかかるものですよね。

開発費用にコストがかかる。

多くの人が未だに、

RWD = ワンソースマルチユース

ワンソース? = コストが低いのでは?

と考えている方がまだまだいます。

しかし現実は、デバイスごとにサイトを作成するのと同程度、
または、それ以上にコストがかかってしまうこともあります。

( もちろんやり方によっては、RWDで制作することにより、コストを削減できます。)


以上、RWDの問題点について簡単に書き出してみました。

レスポンシブwebデザイン。
確かに多様化するデバイスの中、
我々制作者が対応していくには必須の技術だと思いますが、
まだまだ考えるべき課題はたくさんあります。

レスポンシブwebデザインで以下に効率よく制作するか。
にいては、

Web Design Process for The Fiture – こもりまさあき さん –

のスライドがものすごく参考になるので是非目を通してみて下さい。

( 実際に僕もセミナーで発表をきいたのですが、衝撃的でした。)

臨機応変に手法を変える。

僕は別にレスポンシブwebデザイン自体がダメだとは思っておりません。

上記のデメリットについては、

Responsive Web Design is Not the Future

から拝借させて頂きましたが、
僕は、

A Response to ‘Responsive Web Design is Not the Future’

の意見に賛成です。

技術者の努力・知識によって解決出来る問題もたくさんあります。

そこで僕は、

  • レスポンシブwebデザインで素晴らしいサイトを作るためにどんな手法があるのか、

  • これからのレスポンシブwebデザインはどう変わっていくのか。

調べてみました。


レスポンシブwebデザインに広まっている誤解


今のレスポンシブWebデザインは誤解されている

といった文献も見受けられました。

「今のレスポンシブWebデザインは誤解されている」英の著名デザイナーAndy Clarke氏が話す3つの修正点

Responsive and Adaptive Design: Defined

RWDはあくまでも可変するものです。

これがレスポンシブ。

.container{
    width:90%;
    max-width:1200px;
    margin:0 auto;
}

そしてこれが、アダプティブ。

.container{
    width:700px;
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
    .container{
        width:420px;
    }
}
@media only screen and (max-width: 767px) {
    .container{
        width:300px;
    }
}

例とすると、

MR.SIMON COLLISON

が典型的なAWDとして紹介されています。

メディアクエリーを利用していますけど、
コンテンツの配置・幅自体は3段階しか種類がありませんね。

RWDは、デバイスのサイズに常に応答する(サイズが可変する)物。
という考え方が、どうやら海外では主流なようです。

でも、このやり方でもいいと思うんですけどもね。僕は。

もちろんクライアントには説明しますが、

予算は少ないけれど、スマートフォン・タブレットでも見たい。
という方にはぴったりなような気がします。

各メディアクエリーの最小幅に合わせないと崩れるというのがちょっとたまに傷ですが。


3つの「アダプティブwebデザイン」


アダプティブwebデザイン。

こちらもレスポンシブwebデザインが考えられた際に時同じく考案された手法です。

Responsiveが「応答性」なのに対し、

Adaptiveは「適応性」という意味。

いろいろ調べ直した結果、
今現在では、4つのアダプティブwebデザインという概念?があるような気がしました。

一つは、先ほど紹介した、メディアクエリーを利用したアダプティブデザイン。
しかし、こちらはなんだかレスポンシブwebデザインの下位互換として広まっています。

そして2つ目が、
デバイスごとに適応させたサイトを作る方法のこと。

ユーザーエージェントごとにスマートフォン専用サイトや、タブレット専門サイトにリダイレクトさせるものアダプティブwebデザインだそうです。

気になる3つ目は、RWDを内包した概念とした立ち位置のAWD。

以下の図をみるとよくわかります。

title

プログレッシブ・エンハンスメントは、最新のブラウザにはよりリッチに、古いブラウザには最低限の見れるものを、というあの概念です。

RWDというのは、 AWDという考え方の中の一つの手法でしかない、というわけです。

最後は、ユーザーのコンテキストに合わせて表示する内容を切り替えるAWD。

レスポンシブからアダプティブへ – 必要な情報を、必要なときに、必要としている人へ

性別、場所、年齢、といったユーザー属性や、ユーザーの行動を分析し、それに合わせたサイト設計をする。

ということらしいです。

上記の記事・元になったスライドでは、主にセンサーを利用した判別方法を使用していました。

確かに、

  • wifiにつながっている時だけ、背景で動画を流す。
  • 高齢者向けにサイトを用意する

なんてこともできますよね。
ポータルサイトでも、アクセスした地域によってスタートページを変えるということも今までよくあったと思います。

これは、結構面白い考え方だなと感じました。


レスポンシブwebデザイン + アダプティブwebデザイン = ?


………ってことで、

  • レスポンシブwebデザイン ≠ アダプティブ webデザイン

  • これからのデザインはアダプティブ web デザイン。

  • センサーや位置情報を利用したもの

  • RESS ( Responsive web design + Server SIde Compornent )を使用してデバイスごとに適応。

【nginxはやい】AWSにサーバーを移行しました。その際のメモ。

先月のAWS(Amazon Web Service)の勉強会に参加した時に決意したこと。


 AWSでサーバーを構築して見せる!!(ドンっ)

…みたいな感じだったんですが、nginxでつまづき気づけば2週間。

いやー、やっぱりサーバーって難しいです。

この2週間黒い画面とにらめっこでなんとか今日解決しました。

長かった。そして長かった。ホントーにながかったです。

nginxのconfigファイルとどれだけにらめっこしたか….

そして結局php-fpmのほうの設定という熱い展開でした。

苦労したのでメモっときます。

ちょっと寄り道 – Amazon Web Serviceについて

Amazon Web Service(以下AWSとします)は、かの有名な米Amazon社が提供するクラウド・コンピューティングwebサービスのことです。

Iaas呼ばれているサービス形態ですが、他にはwindows Azureや、

Google Apps engineが有名どころです。

クラウド・コンピューティングについては以下の記事が参考になるのではないかと。

5分でわかるクラウド・コンピューティング – アットマークIT

平たくいうと、PC(サーバー)をインターネットを通じて借りるといったサービスです。

AWSのメリットといえば安い早い。そして簡単にできる
とよく言われています。

僕もAWSについては早い段階から知っていたのですが、今まで使う機会が中々ありませんでした。

実際に使うにはクレジットカードとPCがあれば使用出来ますので、是非試して下さい。

nginx(エンジンエックス)について

nginxとはオープンソースのWebサーバです。
webサーバーには他にも様々な種類があります。
普段皆さんがよく使っているapache(アパッチ)や、
Microsoft製のIIS(Internet Information Services)というものもあります。

前者の2つ、nginxとapacheはオープンソースであり、大抵のOSに対応していますが、
後者のIISの方はwindows上でのみ稼働します。

コチラはよく使われているものですね。