2014 01-11-tdc-6th-anniversary

TDC 6th AnniversaryWordPressワークショップ

WordPressで　　効率的な開発を

自己紹介

2011年WordBench東京スピーカー2013年WordBenchしずおかスピーカー

フリーランスでの活動の後、WordPressのインテグレーションサービスを提供するプライム・ストラテジー株式会社のWordPressエンジニアに。

相原知栄子（うぇぶるじょん）

WordBench千葉

BOOKS（共著）

自己紹介

@Webourgeon_com

http://webourgeon.com/

Chieko.Aihara.Bokettch

自己紹介

http://wordpress.org/plugins/stop-the-bokettch/

プライム・ストラテジー

WordPressのインテグレーションサービスを提供

プライム・ストラテジーは世界に52社ある

「WordPressコンサルタント」のうちの1社

今日お話すること

1．WordPressとは

2．WordPressでの開発

3．WordPressハンズオン

今日のアジェンダ

WordPressとは

？なぜWordPressを使うのか？

みんなが使っているから

WordPressとは

どういうことかというと

WordPressとは

世界最大シェアのオープンソースCMSソフトウェア

WordPressとは

2014.01.08 22:40 頃

http://en.wordpress.com/stats/

WordPressとは

All Website 21.0%CMS 59.8%

トップ　1000万サイト

WordPressとは

All Website 21.2%CMS 60.0%

2014.01.08

2014.01.11

http://w3techs.com/technologies/overview/content_management/all

WordPressとは

PHP＆

WordPressとは

プラグインWordPressとは

http://wordpress.org/plugins/

テーマWordPressとは

http://wordpress.org/themes/

WordPressとは

プラグイン

WordPressとは

プラグインテーマ

WordPressとは

コミニュティ

WordPressとは

コミニュティ開発情報

WordPressとは

コミニュティ開発情報

WordPressとは

開発コストの削減

WordPressとは

CMS・アプリケーションプラットフォームとして

開発コストの削減

WordPressとは

それだけ？

WordPressとは

ではありません

WordPressとSEO

WordPressとは

SEOプラグイン

WordPressとSEO

WordPressとは

（意訳）

ワードプレスを選ぶことは、非常に良い選択です。

なぜなら、ワードプレスは、SEOに関する多くの問題を自動的に解決してくれて、

SEO（サーチエンジン最適化）の手法の80%～90%に対応するように作られているから

です。

WordPress is a great choice

WordPress automatically solves a ton of SEO issues.

WordPress takes care of 80-90% of

(the mechanics of)

Search Engine Optimization (SEO)

WordCamp San Francisco 2009　　Matt Cutts

WordPressとソーシャル

WordPressとは

WordPressとデバイス

WordPressとは

レスポンシブデバイス切り替えhttp://wpbk2.azurewebsites.net/ http://wpbk2.azurewebsites.net/blog/

WordPress3.8 WordPressとは

WordPressとは

WordPress3.8

WordPressとは

WordPress3.8

管理画面もレスポンシブに

WordPressとは

事例紹介

WordPressとは

事例紹介

カスタマイズした投稿画面

WordPressとは

事例紹介

マルチデバイス対応

キャッシュ更新性

自動化

WordPressとは

WP SiteManager

SEO + SNS + デバイス切り替え + キャッシュ + α

WordPressでの開発

WordPressのファイル構成WordPressでの効率的な開発

管理画面

設定

管理画面

コアファイルカスタマイズ

管理画面

コアファイル

設定

管理画面

コアファイル

設定

管理画面

コアファイル

設定

カスタマイズ

wp-content

HTMLCSSPHP

テーマWordPressでの効率的な開発

Twenty Fourteen

http://codex.wordpress.org/Image:Template_Hierarchy.png

WordPressでの効率的な開発

テーマテンプレート階層

style.css index.php

テンプレート階層テーマ

/* Theme Name: WebourgeonTheme URI: http://webourgeon.com/Description: サンプルテーマAuthor: うぇぶるじょんAuthor URI: http://webourgeon.com/Version: 1.0*/

style.css

テーマとして認識

http://codex.wordpress.org/Template_Tags

the_content()

get_the_date()

wp_list_categories()

記事本文を出力

カテゴリーリストをリンク付きで出力

=> 記事が書かれた日を取得

テンプレートタグ

the_content()

get_the_date()

wp_list_categories()

記事本文を出力

カテゴリーリストをリンク付きで出力

=> 記事が書かれた日を取得

テーマテンプレートタグ

get_header()

get_footer()

get_templatepart()

テーマインクルードタグ

header.php

footer.php

ヘッダー、サイドバー、フッター以外のテンプレートパーツ

モジュール化

is_single()

is_page()

is_category()

テーマ条件分岐タグ

個別投稿

固定ページ

is_admin()

カテゴリーアーカイブ

=> 管理画面

あるものは使う

あるものは使う効率

安全

<?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <?php the_title(); ?> <?php the_content(); ?> <?php endwhile; ?><?php endif; ?>

WordPressループ

記事表示の基本

投稿データがあるか

投稿データを$postにセット

functions.phpWordPressでの効率的な開発

if ( ! isset( $content_width ) ) { $content_width = 700;

//アイキャッチ画像add_theme_support( 'post-thumbnails' );

set_post_thumbnail_size( 200, 200, true );

// カスタムメニューregister_nav_menus( array ( 'utility' => 'ユーティリティナビ', 'global' => 'グローバルナビ', 'footer' => 'フッターナビ' ) );

プラグインfunctions.php

テーマ固有の機能

テーマ固有の機能テーマを変えても有効

WordPressの動作原理

ファイルの実行順序http://www.warna.info/archives/279/

1．初期化

WordPressが動作する前提としての必要な前処理や設定・ファイルの読込

wp-config.php wp-settings.php

1．初期化実行環境の均一化

WordPress関数の読み込み

データベース接続

プラグイン読み込み

functions.php読み込み

2．解析

アクセスされたURLをもとに、WordPressの内部パラメータに変換、表示条件を導き出す。

wp-includes/class-wp.php

2．解析

m, p, posts, w, cat, withcomments, withoutcomments, s, search, exact, sentence, debug, calendar, page, paged, more, tb, pb, author, order, orderby, year, monthnum, day, hour, minute, second, name, category_name, tag, feed, author_name, static, pagename, page_id, error, comments_popup, attachment, attachment_id, subpost, subpost_id, preview, robots, taxonomy, term, cpage, post_type

パラメーターは46個

2．解析

m, p, posts, w, cat, withcomments, withoutcomments, s, search, exact, sentence, debug, calendar, page, paged, more, tb, pb, author, order, orderby, year, monthnum, day, hour, minute, second, name, category_name, tag, feed, author_name, static, pagename, page_id, error, comments_popup, attachment, attachment_id, subpost, subpost_id, preview, robots, taxonomy, term, cpage, post_type

パラメーターは46個

URLにパラメーターと同じ名前のものがあると404エラーになりやすい

2．解析

リライトルール

[" category/(.+?)/?$ "] => "index.php?category_name=$matches[1]"

デフォルト以外のパーマリンクではURLをパラメーターに変換

3．抽出

内部パラメーターをもとに、データベースのSQL文を生成し、条件にあった記事データを取得する

wp-includes/query.php

3．抽出 SQLの生成とデータベースからの記事取得

テンプレートで使用できるグローバル変数（＄post)などを利用できるように

4．表示

テーマのテンプレートファイルを用いて、Webページを表示する

wp-includes/template-loader.php

4．表示抽出条件をもとに、表示するテンプレートを決定し、読み込む

テンプレートを用いて、Webページを出力

理解することで適切な開発が行える

WordPressのデータ構造

http://codex.wordpress.org/Image:WP3.0-ERD.pnghttp://wpdocs.sourceforge.jp/データベース構造

WordPressのデータ構造

コメント属性

設定

記事

カスタムフィールド

リンク

カテゴリー紐付け

ユーザー属性

カテゴリー

カテゴリーhttp://codex.wordpress.org/Image:WP3.0-ERD.pnghttp://wpdocs.sourceforge.jp/データベース構造

WordPressコーディングルール

WordPress Coding Standardshttp://codex.wordpress.org/WordPress_Coding_Standards

つかえるものはつかう

効率的な開発

共通のルール

デザイナーコーダー　

　　PHP開発者

ハンズオン

WordPressの準備はよろしいですか？　

WordPressハンズオン

最も単純なテーマを作ってみましょう

wp-content/themes/bokettch

style.css

index.php

style.csscharset "utf-8";/*Theme Name: BokettchTheme URI: http://webourgeon.com/Description: サンプルテーマAuthor: ぼけっちAuthor URI: http://webourgeon.com/Version: 1.0*/

index.php

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>テーマ</title> </head> <body> <h1>テーマサンプル</h1> </body></html>

有効化して表示確認してみましょう

WordPressループでコンテンツを表示

<?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?> <?php endwhile; ?><?php endif; ?>

表示確認してみましょう

wp_head　　　wp_footer

わすれちゃいけない

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>テーマ</title> <?php wp_head(); ?> </head> <body><?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?> <?php endwhile; ?><?php endif; ?>

<?php wp_footer(); ?> </body></html>

http://wordpress.org/plugins/theme-check/

Theme-Check

http://wordpress.org/plugins/theme-check/

Debug Bar http://wordpress.org/plugins/debug-bar/

プラグインを作ってみましょう

テーマ作成の時を思い出してください　

wp_head　　　wp_footer

テーマ作成の時を思い出してください　

wp_head　　　wp_footerフック

WordPressは、プラグインをWordPress 本体に “引っ張り込む (hook into)” ためのフックを用意している

WordPress Codex プラグインAPI

アクションフック

実行中の特定のポイントもしくは特定のイベント発生時に WordPress のコアが起動させる

投稿の公開テーマの変更管理画面の表示

動作原理のそれぞれのフェィズでどんなアクションフックがあるでしょうか

1．初期化 plugins_loaded => プラグインの読込完了直後 setup_theme => 翻訳ファイルの読込直前 after_setup_theme => テーマのfunctions.php読込直後 init => 初期化完了時

2．解析 parse_request => 内部パラメータへの変換直後

send_headers => レスポンスヘッダー送信直後

3．抽出 pre_get_posts => SQL文を生成する直前

posts_selection => データベースアクセスの直前 wp => グローバル変数設定直後

4．表示 template_redirect => テンプレートファイル選択直前

wp_head => headタグ出力中

wp_footer => bodyタグ出力直前 shutdown => WordPress実行終了時

さっそく使ってみましょう

まずは表示させるだけのプラグイン

プラグインとして認識させる

wp-content/plugins/hello-bokettch

<?php/** * @package Hello_Bokettch * @version 0.1 *//*Plugin Name: Hello BokettchPlugin URI: http://webourgeon.com/Description: ただなにか出すだけのプラグインAuthor: WebourgeonVersion: 0.1Author URI: http://webourgeon.com/*/

hello-bokettch.php

他とかぶらない名前

function hello_bokettch() {

echo 'ことしはボケない';

}add_action('wp_footer','hello_bokettch');

head にstyleを追加してみましょう　

WordPressハンズオンfunction hello_bokettch() {

echo '<p id="hello-bokettch">ことしはボケない！！</p>';

}add_action('wp_footer','hello_bokettch');

function hello_bokettch_style() { echo ' <style type="text/css"> #hello-bourgeon { font-size: 30px; font-weight: bold; color: red; text-align: center; } </style> ';}

add_action( 'wp_head', 'hello_bokettch_style' );

フィルターフック

データベースに追加する前やブラウザのスクリーンに送り出す前にさまざまなタイプのテキストを改造するために WordPress が起動させるフック

the_content

function content_bokettch ( $content ){ $target = '/(。|ボケ|ぼけ|ぼけっち)/'; $bokketch = '「ぼけっち~！」'; $content = preg_replace( $target ,$bokketch, $content ); return $content;}add_filter('the_content', 'content_bokettch');

表示してみましょう

ショートコード　　

[gallery]

定型文

投稿エディタに直接書けないテンプレートタグや PHPコードなど

ショートコードを使うプラグイン　

Contact Form 7

Trust Form

Simple Map

アドセンス

add_shortcode('bokketch', 'bokketch_shortcode');

function bokketch_shortcode() {

return '<p>お鍋こがしました(́；ω；｀)ｳｯ…</p>'; }

[bokketch]

できましたか？

ショートコードは属性も持てる

[gallery id="123" size="medium"]

囲み型ショートコード[caption]My Caption[/caption]

http://wpdocs.sourceforge.jp/ショートコードAPI

管理画面に表示　

function add_bokketch_admin_menu() { add_options_page('Bokketch Admin Menu 設定', 'Bokketch Admin Menu', 'manage_options', 'bokketch_admin_menu.php', 'bokketch_admin_menu_page' );}add_action('admin_menu', 'add_bokketch_admin_menu');

function bokketch_admin_menu_page() { echo 'とりあえず管理画面になんか表示'; }

page_title

page_title menu_title

page_title menu_titleaccess_level/capability

page_title menu_titleaccess_level/capability file

page_title menu_titleaccess_level/capability file function

Fb admins

この後はWordPressの教科書にのっている

などを作ってみると理解が進むかも。。

プラグインとの関わり方

http://wordbench.org/2013/12/07/wordbench-tokyo-201312-report/

WordBench 東京12月: プラグインについて話そう！振り返りレポート

ありがとうございました

2014 01-11-tdc-6th-anniversary

Technology

tdc ex_8_2013_acciaio

anniversary notebook

présentation tdc

tdc accaio

dce.kar.nic.indce.kar.nic.in/files...

vogue's anniversary

tdc ex_10_2013_acciaio

st. luke serbian orthodox church 50th anniversary · st....

aletas tdc

problemario tdc

flores tdc

mira newsletter-6th issue newsletter-6th issue.pdfcelebrate...

portafolio tdc

tdc | história

giannini tdc

olstein anniversary

tdc cancer

programme - ysu.am · ysu sss 6th international conference...

tdc hometrio_dm2010

ga611 6th anniversary