25
WordPress ののののののののののPHP のののの by のの

Webデザイナーのためのphp wordpress

  • Upload
    galluda

  • View
    581

  • Download
    0

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Webデザイナーのためのphp wordpress

WordPress のプラグインから学ぶ!PHP のキホン

by 古庄

Page 2: Webデザイナーのためのphp wordpress

自己紹介 古庄と申します Web では「がる」というハンドルでふらついており

ます 本職は技術者です。現役プログラマーやってます あわせて設計とかインフラとか教育とか色々やって

ます 引っかかりやすい Google 向けキーワードとしては

「古庄道明」「エンジニア 親方」「エンジニア 禅」「がる」あたりでしょうか。

あちこちのサービスで「 gallu 」って ID でふらふらしてます はてな、 twitter 、 github など

Page 3: Webデザイナーのためのphp wordpress

本日のお題 簡単な PHP コードを組む 「出力」をする、簡単な WordPress プラグインを

組む

Page 4: Webデザイナーのためのphp wordpress

まずは install !! 環境を作っていきましょう

PHP は、原則として「サーバ側」で動く だから、普段は「サーバに PHP ファイルをアップ」する XAMPP は「 PC にサーバの兼任をお願いする」

Page 5: Webデザイナーのためのphp wordpress

セキュリティ: admin ユーザネーム注意 最近、 admin ユーザに対するブルートフォース攻

撃が頻発している模様!! 以下の手順で、インストール直後の WordPress か

ら、速やかに「 admin ユーザを削除」しておきましょう 新しい「管理者」ユーザを一つ作る 一度ログアウトする 作ったアカウントでログインしなおす admin を削除する

「すべての投稿を以下のユーザーにアサイン」

Page 6: Webデザイナーのためのphp wordpress

まずは「 Hello, world! 」 プログラムのコツは「小さく書いて」「コツコツ確

認」 「世界で一番有名な」 Hello world プログラムを書

いてみましょう!! プログラムは、 wordpress インストール直下に

「 t.php 」の名前でファイルを作りましょう

<?php

echo 'Hello, world!';

Page 7: Webデザイナーのためのphp wordpress

Hello world をプラグイン化 概ね、以下の手順で「単純な出力コード」を

「 WordPress のプラグイン」として使えるようにしていきます コメントを書く 関数化&ファイル名を適切に変更 ファイルを適切な場所に設置する プラグインを有効化する テンプレートからプラグインを call する 確認する

Page 8: Webデザイナーのためのphp wordpress

コメントの書き方

/*Plugin Name: First pluginPlugin URI: http://www.example.comDescription: 初めてのプラグインAuthor: がるVersion: 0.1Author URI: http://www.example.com*/

Page 9: Webデザイナーのためのphp wordpress

ファイル名「 first_plugin.php 」<?php/*Plugin Name: First pluginPlugin URI: http://www.example.comDescription: 初めてのプラグインAuthor: がるVersion: 0.1Author URI: http://www.example.com*/function first_plugin() { echo 'Hello, world!';}

関数化&ファイル名を適切に変更

Page 10: Webデザイナーのためのphp wordpress

ファイルを適切な場所に設置する ~wordpress/wp-content/plugins/

Page 11: Webデザイナーのためのphp wordpress

プラグインを有効化する 管理画面から、有効化してみましょう

Page 12: Webデザイナーのためのphp wordpress

テンプレートからプラグインを call する テンプレートを修正

「外観」→「テーマ編集」→「ヘッダー」 「ファイルを更新」が出ない場合、ファイルパーミッ

ション ヘッダーにいれてみましょう サイドバーにいれてみましょう

<?php first_plugin(); ?>

Page 13: Webデザイナーのためのphp wordpress

メインになるプラグイン:おみくじ メインになる「おみくじ」を作成していきましょう

おみくじの仕組み おみくじ箱から番号を1つ引いて 番号に対応する紙をもらう

ちょっと抽象化すると 配列から配列の key を1つ選択して key に対応する値を出力する

Page 14: Webデザイナーのためのphp wordpress

おみくじで必要そうな要素 配列 乱数

Page 15: Webデザイナーのためのphp wordpress

配列を確認 配列を作ってみましょう ( array.php ) wordpress インストール直下にファイルを作ります

<?php$awk = array(

' 配列要素 1',' 配列要素 2',

);var_dump($awk);

Page 16: Webデザイナーのためのphp wordpress

乱数の確認 乱数を使ってみましょう ( rand.php )

<?php$i = mt_rand(0, 100);var_dump($i);

Page 17: Webデザイナーのためのphp wordpress

おみくじプログラム ( 日本語版 ) kuji.php

<?php// おみくじ箱を用意する// おみくじ箱から1つを選ぶ// 選んだものに対応する紙を得る

Page 18: Webデザイナーのためのphp wordpress

おみくじプログラム kuji.php

<?php// おみくじ箱を用意する$kuji_array = array (

' 吉 ',' 凶 ',

);// おみくじ箱から1つを選ぶ$i = mt_rand(0, count($kuji_array) - 1);

// 選んだものに対応する紙を得る$kuji_string = $kuji_array[$i];echo $kuji_string;

Page 19: Webデザイナーのためのphp wordpress

おみくじプログラム 動かしてみましょう

Page 20: Webデザイナーのためのphp wordpress

おみくじプラグイン コメントを書く 関数化&ファイル名を適切に変更 ファイルを適切な場所に設置する プラグインを有効化する テンプレートからプラグインを call する 確認する

Page 21: Webデザイナーのためのphp wordpress

おみくじプラグイン:コメント

/*Plugin Name: kuji pluginPlugin URI: http://www.example.comDescription: おみくじプラグインAuthor: がるVersion: 0.1Author URI: http://www.example.com*/

kuji_plugin.php

Page 22: Webデザイナーのためのphp wordpress

おみくじプラグイン:関数ラッピング kuji_plugin.php

/*Description: おみくじプラグイン*/function kuji_plugin() {

前述のコード}

Page 23: Webデザイナーのためのphp wordpress

有効化してテンプレート修正 ファイルを設置する

~wordpress/wp-content/plugins/ 管理画面から有効化する テンプレートを修正

「外観」→「テーマ編集」→「サイドバー」 サイドバーにいれてみましょう

<?php kuji_plugin(); ?>

Page 24: Webデザイナーのためのphp wordpress

ここから少し発展させて… 日時は使いやすい

「時間」にあわせた挨拶 日付や月にあわせた挨拶

date 、という関数を調べてみましょう!!

Page 25: Webデザイナーのためのphp wordpress

まとめ 出力のプラグインは「普通の PHP 」での作成となん

ら変わりがないです 「出力以外 ( フィルターとか ) 」がじゃぁ「普通の PHP

と違うのか」というと、まずもって違わないのですが PHP プログラムの基本は「小さく作って」「コツコ

ツ試す」 分からなければ「書いてテスト」 何十行もあると大変なので、小さく作るのは 10行以内

質量転換の法則 まず「動かして」、その後で「動いている理屈」に思いをはせましょう

プログラムを「楽しんで」ください ^^ノ