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

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

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

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

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

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

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

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

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

  • *

【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上でのみ稼働します。

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

使いやすい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を目指す!管理画面カスタマイズ – アクションフック編をお送りします。

(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 )を使用してデバイスごとに適応。

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 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

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のバージョンも違うことも判明。

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

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

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/

【webサービス】3Dプリンタが今熱い!【その他】

最近、FREEなどでも有名なクリス・アンダーソンの「MAKERS―21世紀の産業革命が始まる」を読みました。

メイカーズでも核となるのは「3Dプリンタ」です。3Dプリンタ自体の存在自体は知っていたのですが、すごいな~と思うぐらいであまり関心を持っていませんでした。

しかし、調べてみると思いのほか熱い!!

今後さらなる発展が予想される3Dプリンタ業界についての記事をまとめたいと思います。

Welcome to Ghost

You’re in! Nice. We’ve put together a little post to introduce you to the Ghost editor and get you started. Go ahead and edit this post to get going and learn how it all works!

Getting Started

Writing in markdown is really easy. In the left hand panel of Ghost, you simply write as you normally would. Where appropriate, you can use formatting shortcuts to style your content. For example, a list:

  • Item number one
  • Item number two
    • A nested item
  • A final item

or with numbers!

  1. Remember to buy some milk
  2. Drink the milk
  3. Tweet that I remembered to buy the milk, and drank it

Want to link to a source? No problem. If you paste in url, like http://ghost.org – it’ll automatically be linked up. But if you want to customise your anchor text, you can do that too! Here’s a link to the Ghost website. Neat.

What about Images?

Images work too! Already know the URL of the image you want to include in your article? Simply paste it in like this to make it show up:

The Ghost Logo

Not sure which image you want to use yet? That’s ok too. Leave yourself a descriptive placeholder and keep writing. Come back later and drag and drop the image in to upload:

Quoting

Sometimes a link isn’t enough, you want to quote someone on what they’ve said. It was probably very wisdomous. Is wisdomous a word? Find out in a future release when we introduce spellcheck! For now – it’s definitely a word.

Wisdomous – it’s definitely a word.

Working with Code

Got a streak of geek? We’ve got you covered there, too. You can write inline <code> blocks really easily with back ticks. Want to show off something more comprehensive? 4 spaces of indentation gets you there.

.awesome-thing {
    display: block;
    width: 100%;
}

Ready for a Break?

Throw 3 or more dashes down on any new line and you’ve got yourself a fancy new divider. Aw yeah.


Advanced Usage

There’s one fantastic secret about Markdown. If you want, you can write plain old HTML and it’ll still work! Very flexible.

That should be enough to get you started. Have fun – and let us know what you think 🙂

人柱になりました。WordPressからGhostへのお引越し。

最近は作業に追われ、ブログの更新も絶え絶えな日々を送っていました。

このままでは、いかん。

…ということで、今まではWordPressでサイトを構築・更新していたのですが、

WordPressから今話題?の Ghost という javascript ベースのCMSに移行してみました。

我ながら突拍子もない…..ですが。

普段の業務では,nodeJSを使用した仕事なんてそうそうないので、ブログを実験台代わりに。

目次

Ghost って?

今回移行したGhostは、以前からkickstarterで注目を集めていました。
Node.js + sqllite3 + Handlebars.js で構築できるブログソフトウェアです。

http://www.kickstarter.com/projects/johnonolan/ghost-just-a-blogging-platform

Kickstarterで1900万円以上の資金を調達したプロジェクトが今回見事にローンチされました。

簡単に長所を上げると、

  • オープンソースかつ非営利のプロジェクトである。
  • 複数人での更新がしやすい。
  • スマートフォン・タブレットへの最適化。管理画面も含め。
  • マークダウン記法でのブログ更新を軸に構築。
  • シンプルに記事を更新。
  • 結構WordPressに似ている箇所が幾つか。構築しやすい?

…..こんなところでしょうか。

もちろん短所も有ります。

  • まだ、発展途上である。 (現在 0.3 ver)
  • nodeJS を使用するため、サーバーを選ぶ。
  • カスタマイズをするなら、根本的なコードから構築しなければならない。
  • ドキュメントが少ない。

というか、はっきり言ってWordPressからGhostへ移行するメリットは、現時点ではありません。

今回の移行は完全に趣味です。

お、なんか試してみたいなという方のご参考になればと思います。

Ghostへの引越し準備

まずはGhostへの引越し準備をしましょう。

今回は、WordPressからの引越しなんですが,
探したらWordPressのプラグインが用意してありました。

http://wordpress.org/plugins/ghost/

プラグインをインストールすると、メニューの「ツール」に「Export to Ghost」が表示されます。

上記画面下部の「Download Ghost File 」をクリックし、jsonファイルをダウンロード。
この中にこれまでの記事情報が保存されていますが、注意点が幾つか。

  • エクスポートされるのは「投稿記事」のみ。固定ページはエクスポートされません。
    (そもそも、Ghostにまだ固定ページ・投稿ページといった概念がない。)
  • 内容によってはインポート時にエラーがでることも。
  • もちろん、記事内でショートコード等使用している場合にはそのまま出力されます。
  • 画像データはURLとして出力されるので、残しておく必要・または新しく置くディレクトリ階層に置換する必要があります。( URLに含まれる文字・ /[スラッシュ] は[バックスラッシュ]でエスケープしてあるので気をつけて下さい。 )

まぁ、完全にコンテンツを移行できるもんではありません。

サーバー環境を整える。

今回使用したサーバー概要です。

  • amazon web service s2 / t1.micro
  • OS : centos 6.4
  • 基本的なパッケージは導入ずみ。

Ghostはインストール手順がOS環境によって変わります。

今回はcentos ですので,

http://www.howtoinstallghost.com/how-to-install-ghost-on-centos-server-6-4/

を参考にしました。

( その他のサーバーに関しても http://www.howtoinstallghost.com/ に掲載されてますのでご参考に。)

Node.jsをインストール

$ mkdir ~/tmp
$ cd ~/tmp 
$ wget -N http://nodejs.org/dist/node-latest.tar.gz
$ tar xzvf node-latest.tar.gz
$ cd node-latest
$ make
$ sudo make install 

上記でインストール完了。
最後に、

$ node -v
$ npm -v 

を実行し、バージョンが表示されたらNode.jsのインストール完了です。

Ghostのインストール

ついに本題であるGhostのインストールです。

https://ghost.org/signup

から登録し、ダウンロードすることもできますが、githubのレポジトリからも直接ダウンロードすることもできます。

https://github.com/TryGhost/Ghost

が無難に公式サイトからダウンロードするのが無難かと。

まずは、サーバーの公開ディレクトリに最新のghostをダウンロードしてきます。

$  curl -O  https://ghost.org/zip/ghost-0.3.3.zip

次に展開します。

$ unzip ghost-0.3.3.zip

config.sample.jsというファイルをconfig.jsという名前でコピー。

$ cp config.sample.js config.js

次にconfig.jsを編集していきます。

// # Ghost Configuration
// Setup your Ghost install for various environments

var path = require('path'),
    config;

config = {
    // ### Development **(default)**
    development: {
        // The url to use when providing links to the site, E.g. in RSS and email.
        url: 'http://web-layman.com', //公開するサイトのURLへ変更

        // Example mail config
        // Visit http://docs.ghost.org/mail for instructions
        // ```
        //  mail: {
        //      transport: 'SMTP',
        //      options: {
        //          service: 'Mailgun',
        //          auth: {
        //              user: '', // mailgun username
        //              pass: ''  // mailgun password
        //          }
        //      }
        //  },
        // ```

        database: {
            client: 'sqlite3',
            connection: {
                filename: path.join(__dirname, '/content/data/ghost-dev.db')
            },
            debug: false
        },
        server: {
            // Host to be passed to node's `net.Server#listen()`
            host: '0.0.0.0',  //127.0.0.0から 0.0.0.0へ変更
            // Port to be passed to node's `net.Server#listen()`, for iisnode set this to `process.env.PORT`
            port: '80'  //2368から80へ変更
        }
    },

       // ### Production
    // When running Ghost in the wild, use the production environment
    // Configure your URL and mail settings here
    production: {
        url: 'http://web-layman.com',  //公開するサイトのURLへ変更
        mail: {},
        database: {
            client: 'sqlite3',
            connection: {
                filename: path.join(__dirname, '/content/data/ghost.db')
            },
            debug: false
        },
        server: {
            // Host to be passed to node's `net.Server#listen()`
            host: '0.0.0.0', //127.0.0.0から 0.0.0.0へ変更
            // Port to be passed to node's `net.Server#listen()`, for iisnode set this to `process.env.PORT`
            port: '80' //2368から80へ変更
        }
    },

    // **Developers only need to edit below here**

    // ### Testing
    // Used when developing Ghost to run tests and check the health of Ghost
    // Uses a different port number
    testing: {
        url: 'http://0.0.0.0:2369', // 127.0.0.0:2369から0.0.0.0:2369へ変更
        database: {
            client: 'sqlite3',
            connection: {
                filename: path.join(__dirname, '/content/data/ghost-test.db')
            }
        },
        server: {
            host: '0.0.0.0', //127.0.0.0から0.0.0.0へ変更
            port: '2369'
        }
    },

    // ### Travis
    // Automated testing run through Github
    travis: {
        url: 'http://0.0.0.0:80', // 127.0.0.0:2368から0.0.0.0:80へ変更
        database: {
            client: 'sqlite3',
            connection: {
                filename: path.join(__dirname, '/content/data/ghost-travis.db')
            }
        },
        server: {
            host: '0.0.0.0', //127.0.0.0から0.0.0.0へ変更
            port: '80' // 2368から80へ変更
        }
    }
};

// Export config
module.exports = config;

config.js を編集完了後、以下を実行。

$ npm install --production

これでGhostはインストール完了です。
次に、

$ npm start

と恐る恐る入力してください。
Ghostが無事起動した方はおめでとうございます!

失敗した方はご愁傷様です。

結構サーバーの環境によってはエラーをはきます。 ( nodejsやnpm関係 )

もしできない方は、

http://docs.ghost.org/

や、

https://ghost.org/forum/

にて探して下さい。( すみません。 )

データをインポート・運用

無事にGhostがインストールされたら管理画面にアクセスしてみましょう!

http://hogehoge.com/ghost

(hogehoge.comはご自身のURL)

アカウント名・パスワードを入力。

( ここのアカウントがhttp://ghost.org で登録したアカウントと連動しているのかは未検証です。…..っていうか連動してなきゃおかしいな。)

WordPressの記事データをインポートしたい場合は

http://hogehoge.com/ghost/debug/

にアクセスするとExport・inportができる画面が表示されます。

実際の使用感

この記事が初めての投稿記事なんですが、
正直後悔している部分も……(泣)

  • タグ機能は用意されているが、アーカイブなどの実装はまだ。
  • 投稿時のjsがやたら重い。スマートフォンだと動かない。( 本末転倒な展開 )
  • 拡張性がまだ低い。
  • etc….

ちなみにスマホだとこんな感じの管理画面。

まぁ、まだ出たばかりのCMSですのでこんなもんかなと。

集中して記事を書くには今のところ問題無いかも!( 震え声

普通の個人的なブログをやる分には問題は無いかな。
けど、最終的にはWordPressに近づくんでしょうかね。

ローカル環境でのインストールは比較的簡単だと思うので、
是非試してみて下さいー!

参考リンク

【サイト構築】wordpressの構造を理解!初心者から中級者にスキルアップ【wordpress】

僕がサイト構築する際に一番使用するCMSはwordpressです。

もともとブログサイト用としてのCMSですが、現在ではコーポレートサイト・ECサイト・ポータルサイト等様々な目的のサイト構築に使用されています。

僕自身触り始めた時点ではphpに関する知識が乏しかったため、google大先生に何回も何回も教えを乞いながら制作していました。

今回の記事ではphpの構文の書き方から、wordpressの関数の仕組みまで僕なりに解説していきたいと思います。

wordpressの仕組み!

wordpressは膨大なphpファイルによって構築されています。

phpにはユーザー定義関数という仕組みがあり,

function 関数名() {
    処理に必要なプログラム  
}

という書き方で関数名を指定して呼び出すだけで定義されている処理を呼び出すことができます。

例えば、wp_title() というページタイトルを呼び出すテンプレートタグはwp-includesフォルダ内のgeneral-template.phpというファイル内で定義されています。

function wp_title($sep = '&raquo;', $display = true, $seplocation = '') {
    global $wpdb, $wp_locale;//データベースと日付設定をグローバル化

    $m = get_query_var('m');
    $year = get_query_var('year');
    $monthnum = get_query_var('monthnum');
    $day = get_query_var('day');
    $search = get_query_var('s');
    $title = '';

    $t_sep = '%WP_TITILE_SEP%'; // Temporary separator, for accurate flipping, if necessary

    // 投稿の場合
    if ( is_single() || ( is_home() && !is_front_page() ) || ( is_page() && !is_front_page() ) ) {
        $title = single_post_title( '', false );
    }

    // カテゴリ・タグページの場合
    if ( is_category() || is_tag() ) {
        $title = single_term_title( '', false );
    }

    // 分類がある場合
    if ( is_tax() ) {
        $term = get_queried_object();
        $tax = get_taxonomy( $term->taxonomy );
        $title = single_term_title( $tax->labels->name . $t_sep, false );
    }

    // 投稿者ページの場合
    if ( is_author() ) {
        $author = get_queried_object();
        $title = $author->display_name;
    }

    // 投稿タイプアーカイブの場合
    if ( is_post_type_archive() )
        $title = post_type_archive_title( '', false );

    // 月別アーカイブの場合
    if ( is_archive() && !empty($m) ) {
        $my_year = substr($m, 0, 4);
        $my_month = $wp_locale->get_month(substr($m, 4, 2));
        $my_day = intval(substr($m, 6, 2));
        $title = $my_year . ( $my_month ? $t_sep . $my_month : '' ) . ( $my_day ? $t_sep . $my_day : '' );
    }

    // 年別アーカイブの場合
    if ( is_archive() && !empty($year) ) {
        $title = $year;
        if ( !empty($monthnum) )
            $title .= $t_sep . $wp_locale->get_month($monthnum);
        if ( !empty($day) )
            $title .= $t_sep . zeroise($day, 2);
    }

    // 検索ページの場合
    if ( is_search() ) {
        /* translators: 1: separator, 2: search phrase */
        $title = sprintf(__('Search Results %1$s %2$s'), $t_sep, strip_tags($search));
    }

    // 404ページの場合
    if ( is_404() ) {
        $title = __('Page not found');
    }
    $prefix = '';
    if ( !empty($title) )
        $prefix = " $sep ";
    // パンくずのセパレータと方向の位置を決定
    if ( 'right' == $seplocation ) { // sep on right, so reverse the order
        $title_array = explode( $t_sep, $title );
        $title_array = array_reverse( $title_array );
        $title = implode( " $sep ", $title_array ) . $prefix;
    } else {
        $title_array = explode( $t_sep, $title );
        $title = $prefix . implode( " $sep ", $title_array );
    }
    $title = apply_filters('wp_title', $title, $sep, $seplocation);
    // 出力
    if ( $display )
        echo $title;
    else
        return $title;

}

このようにwp_title()というテンプレートタグが上記の処理を呼び出す役目をしているわけですね。

処理の内容は理解できなくてもこういう仕組みなんだなーということだけでも頭の片隅に置いといてください。

テンプレートタグ?条件分岐タグ?インクルードタグ??そもそもタグってなんだ?!

wordpressを構築する際に様々なサイトを訪問すると思いますが、必ずと言っていいほどこの言葉が出てくると思います。

タグとは簡潔にいうとwordpressの関数です。wp_title()のような処理の集合体のことですね。

wordpressには膨大な数の関数が定義されており、ユーザーはそれを簡単にコピペで使うことができるのです。(す、すごい)
関数のことを説明する際、便宜上いくつかの種類に分けて説明します。それが、テンプレートタグや条件分岐タグです。

  • テンプレートタグ
    テンプレートタグはその名の通り、テンプレートファイル内で使用するタグのことです。
    wordpress テンプレートタグ一覧
  • 条件分岐タグ
    条件分岐タグは、テンプレートファイル内で表示される内容や、特定のページ内容を表示する条件を設定するのに使います。
    条件分岐タグ – WordPress Codex 日本語版一覧

    このタグこそ初心者から中級者へのかべ!(ドドーン)。このタグを使いこなせば、構築できるサイトの質もターンと広がります。
  • その他wordpressで定義されている関数
    wordpressには上記のもの以外でもたくさんの関数が定義されています。たとえば[php][/php/]


    この関数(タグ)はデータベースから登録されているユーザーのメタデータを取得するものです。
    これ単体では何の表示もできませんが、
    [php]
    user_login . “n”);
    echo(‘ユーザーレベル: ‘ . $user_info->user_level . “n”);
    echo(‘ユーザーID: ‘ . $user_info->ID . “n”);
    ?>
    [/php]
    上記のソースを書くことによって各ユーザーデータを表示できます。
    この関数自体は調べればすぐ出てきますが、大事なのはどうプログラムを組み立てるか。です。
    関数リファレンス – WordPress Codex 日本語版

    では、次項でphpの書き方について説明します。

基礎の基礎!引数(パラメーター)の渡し方

タグ(関数)には「引数を指定しないでも作動するもの」と「必ず引数を指定しなければいけないもの」、または「指定することでその条件に合った動きをさせる」があります。この引数とは、関数の()内のことです。
[php][/php]
を使って説明すると、(‘url’)の部分が引数となり、サイトのurlを呼び出します。この部分を(‘template_url’)とするとテンプレートファイルのurlが呼び出されるようになります。
このように同じ関数でも因数によっておこる動作は違います。この関数はほかにどんな引数があるの?と疑問に思ったときは
WordPress Codex 日本語版

で確認するのがベターです。

上記の関数は一つの引数ですのでシングルクォート(’)で引数を囲めばいいだけなのですが、
複数の引数を指定する関数もあります。
また例を使って説明してみます。

[php] ‘, ‘

‘); ?> [/php]

the_date()は日時を呼び出すタグです。

出力結果は
[html]

2013-01-14

[/html]
となります。
書式として[php] [/php]
と記述してありますね。(書式はあくまでも書式なのでそのまま書くものではありませんのでご注意を)
the_date()には以下のパラメータがあります。

  • format (文字列)- 日時の出力形式。デフォルト値は管理画面のオプションで設定した形式。
  • before (文字列)- 投稿/更新日の直前に出力するコードやテキスト。デフォルト値は空。
  • after (文字列)- 投稿/更新日の直後に出力するコードやテキスト。デフォルト値は空。
  • echo (true/false)- 取得した値の処理方法。

         true(デフォルト。日付をページ内に出力)
         false(PHPで使用できる値として日付を返す)

またパラメーターにはデフォルト値が決まっているものと、必ず値を指定しなければならないものがあります。

the_dateではデフォルト値が設定されているのでthe_date()とカッコ内は未記入でも値を出力してくれます。

また、最初につまづきやすいのが( ) 内の書き方です。
これには大きくわけて3種類あります。

1.カンマで区切る

シングルクオートで囲んであるパラメーターの指定値をカンマで区切り値を渡す

パラメーター=パラメーターの指定値&パラメーター=パラメーターの指定値……..の書式でパラメーターを渡す