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://webourgeon.com


自己紹介

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



プライム・ストラテジー

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

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

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

今日お話すること

1．WordPressとは

2．WordPressでの開発

3．WordPressハンズオン

今日のアジェンダ

WordPressとは

WordPressとは

？なぜWordPressを使うのか？

みんなが使っているから

WordPressとは

YES

WordPressとは

どういうことかというと

WordPressとは

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

WordPressとは

2014.01.08 22:40 頃

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

WordPressとは



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



GPL

WordPressとは

PHP＆

MySQL

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/

http://wordpress.org/

http://wordpress.org/

http://wpbk2.azurewebsites.net/blog/

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



wp-content


PHP

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/

http://www.warna.info/archives/279/

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/データベース構造

http://codex.wordpress.org/Image:WP3.0-ERD.png


http://wpdocs.sourceforge.jp/%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E6%A7%8B%E9%80%A0


WordPressのデータ構造


コメント

コメント属性

設定

記事

カスタムフィールド

リンク

カテゴリー紐付け

ユーザー属性

カテゴリー

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





WordPressコーディングルール


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

http://codex.wordpress.org/WordPress_Coding_Standards

http://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/

http://wordpress.org/plugins/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

http://wpdocs.sourceforge.jp/%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%B3%E3%83%BC%E3%83%89_API

http://wpdocs.sourceforge.jp/%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%B3%E3%83%BC%E3%83%89_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