SlideShare ist ein Scribd-Unternehmen logo
1 von 41
Downloaden Sie, um offline zu lesen
WordPress初心者が
基本アーキテクチャを
ざっくりと学ぶ
参:エンジニアのためのWordPress開発入門
自己紹介!
WP歴
ざっと本一冊目
勉強会5回
10時間くらい
運用経験:なし
所属 職業
WEBプログラマー
エンジニアのためのWordPress開発入門
書店にあったなかでは、一番詳しそうかな…
WordPress って何?
コンテンツ管理システム(CMS)
HTMLやCSSを知らなくても、Webサイトを構築できる
ようになるツールのこと。
ブログもその一種
WordPress以外のCMS
Movable Type XOOPScocrete5
EC-CUBE Moodle MobileApps
基本的な機能
管理画面から記事を投稿して、公開できる。
・投稿ページ
・固定ページ
カスタマイズしたい時には
見た目をカスタマイズ…テーマ
機能をカスタマイズ…プラグイン
テーマとプラグイン
管理画面からインストールして使うことができる
自作するには?
物足りない
カスタマイズするからには
WPの仕組みを知りたい
ファイル構成
/index.php アクセスのエントリポイント
/wp-config.php 設定ファイル
/wp-admin/ 管理画面用のファイル群
/wp-content/ サイトのデータを格納
┗/language/ 言語ファイル
┗/themes/ テーマ
┗/plugins/ プラグイン
┗/uploads/ アップロードファイル
/wp-includes/ コアファイル
テーマを作ってみよう!
/wp-content/themes/
・style.css
・index.php
/*
Theme Name: booklog
Author: ClimbFrog
Author URI: https://wordpress.org/
Description: Sample Theme
Version: 1.0
License: GNU General Public License v2 or
later
License URI:
http://www.gnu.org/licenses/gpl-2.0.html
*/
できた!!!
データ構成
DB構造
・12個のテーブル
wp_posts 投稿記事、ページ、ナビゲーションなど
wp_postmeta 各投稿記事特有の情報(カスタムフィールド)
wp_terms 投稿およびリンクの分類(カテゴリ・タグ)に使われる語句
wp_term_taxonomy 投稿およびリンクの分類上の語句(カテゴリ・タグ)データ
wp_term_relationships オブジェクトと↑のカテゴリ・タグとの関連付け情報
wp_user 登録ユーザ
wp_usermeta 各ユーザ特有のユーザ・メタデータを格納
wp_comment コメント・トラックバック・ピンバックデータ
wp_commentmeta コメントのメタデータ
wp_options 管理>設定で設定された情報
wp_links リンク作成で作成されたリンク情報
wp_postsテーブルをみてみよう
作
っ
て
み
た
index.phpを編集してみた
<?php get_header(); ?>
<?php get_footer(); ?>
get_header()って何?
WordPress Codex
WordPressの公式オンラインマニュアル
 https://wpdocs.osdn.jp/関数リファレンス/get_header
 現在のテーマディレクトリの header.php テンプレートファイルを読み
込みます。
 その他のテンプレートタグ例
bloginfo()
get_sidebar()
  wp_register()
header.phpを編集してみた
 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>"
type="text/css" />
</head>
<body>
<header>
<img src="<?php header_image(); ?>" alt="<?php bloginfo('name');?>">
<span><?php bloginfo('name'); ?><span>
</header>
functions.phpを編集してみた
 WordPressのデフォルト機能の動作を変更する
 
// カスタムヘッダー
$args = array(
'width' => 980,
'height' => 60
'default-image' => get_template_directory_uri() .  
'/images/header.jpg',
 'uploads' => true,
);
add_theme_support( 'custom-header', $args); 
 
著者への想いもぶつけたい!!!
そんなマルコスが出会った
のが
カスタム投稿タイプ
・投稿ページ
・固定ページ
以外のページを作れます
やり方は簡単!
register_post_type($post_t
ype, $options);
関数を使って投稿タイプを追加するだ
け!
どうせなら著者にタグ付けしたいな
そんなマルコスが出会ったの
がタクソノミー
カスタム投稿タイプに分類を設定できま
す。
やり方は簡単!
register_taxonomy('autho
r_category', 'author',
$args_tax);
関数を使ってタクソノミーを追加するだけ
wp_termsテーブルをみてみよう
wp_term_taxonomyテーブルをみてみよう
タイトルと本文以外も入力したいな
そんなマルコスが出会った
のが カスタムフィールド
我儘いうな
カスタムフィールドのデータ追加
update_post_meta(74, ‘birthplace,’長野県’);
カスタムフィールドのデータ取得
$birthplace = get_post_meta(74, ‘birthplace,true);
が、管理画面の投稿ページで入力させるUIを作るのは面倒な作業が必要
プラグイン:Advanced Custom Fields などを使う
1.基本的な処理の流れ
URLルーティング
メインクエリ
URLルーティング
リクエスト解析
MVC WordPress
コントローラー
モデル
ビュー テンプレート
フック
フック
WordPress処理フローの途中のポイントに
割り込んで、独自の処理を追加すること
 アクション
処理を追加する
  add_action($tag, $function, $priority, $args);
 フィルター
  データや処理を変更する
add_filter($tag, $function, $priority, $args);
 実際は曖昧なところがあり、厳密に考えなくていい
フックを使ってみた
function check_post_date($content){
global $post;
$past_days = floor((time() - strtotime($post->post_date)) / 86400);
if($past_days >= 2){
$str = '<p class="message">投稿日から' . $past_days . '日以上が経過し
ています。</p>';
}
return $str . $content;
}
add_filter('the_content', 'check_post_date');
WordPress Codex
WordPressの公式オンラインマニュアル
 https://wpdocs.osdn.jp/プラグイン_API 
 
 プラグインAPI
WordPressの規定の処理を追加、変更するためのAPI
  フックなどで使用できる
メインクエリ
 URLリクエストが解析されて記事を取得するクエリが
 自動的に発行される。
 取得された情報はグローバル変数$wp_queryに格納される。
 
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php the_time('Y年m月d日'); ?>
<?php endwhile; else : ?>
//記事がない場合に表示
<?php endif; ?>
メインループ
テンプレート階層
トップページ home.php index.php
投稿ページ single-{post_type}.php single.php
固定ページ page-スラッ
グ.php
page-ID.php page.php
カテゴリー category-ID.php category.php archive.php
タクソノミー taxonomy-{taxonom
y}-{term}.php
taxonomy-{taxonom
y}.php
404 404.php
検索結果 search.php
プラグインの基本的な作り方
~略~
ご健闘をお祈りします

Weitere ähnliche Inhalte

Was ist angesagt?

オブジェクト指向エクササイズのススメ
オブジェクト指向エクササイズのススメオブジェクト指向エクササイズのススメ
オブジェクト指向エクササイズのススメ
Yoji Kanno
 
オブジェクト指向できていますか?
オブジェクト指向できていますか?オブジェクト指向できていますか?
オブジェクト指向できていますか?
Moriharu Ohzu
 

Was ist angesagt? (20)

ドメイン駆動設計 ( DDD ) をやってみよう
ドメイン駆動設計 ( DDD ) をやってみようドメイン駆動設計 ( DDD ) をやってみよう
ドメイン駆動設計 ( DDD ) をやってみよう
 
ドメイン駆動設計 の 実践 Part3 DDD
ドメイン駆動設計 の 実践 Part3 DDDドメイン駆動設計 の 実践 Part3 DDD
ドメイン駆動設計 の 実践 Part3 DDD
 
ドメインオブジェクトの設計ガイドライン
ドメインオブジェクトの設計ガイドラインドメインオブジェクトの設計ガイドライン
ドメインオブジェクトの設計ガイドライン
 
イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)
 
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
 
オブジェクト指向エクササイズのススメ
オブジェクト指向エクササイズのススメオブジェクト指向エクササイズのススメ
オブジェクト指向エクササイズのススメ
 
オブジェクト指向できていますか?
オブジェクト指向できていますか?オブジェクト指向できていますか?
オブジェクト指向できていますか?
 
ドメイン駆動設計 モデリング_実装入門勉強会_2020.3.8
ドメイン駆動設計 モデリング_実装入門勉強会_2020.3.8ドメイン駆動設計 モデリング_実装入門勉強会_2020.3.8
ドメイン駆動設計 モデリング_実装入門勉強会_2020.3.8
 
イミュータブルデータモデルの極意
イミュータブルデータモデルの極意イミュータブルデータモデルの極意
イミュータブルデータモデルの極意
 
3週連続DDDその1 ドメイン駆動設計の基本を理解する
3週連続DDDその1  ドメイン駆動設計の基本を理解する3週連続DDDその1  ドメイン駆動設計の基本を理解する
3週連続DDDその1 ドメイン駆動設計の基本を理解する
 
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
 
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
 
ドメイン駆動設計入門
ドメイン駆動設計入門ドメイン駆動設計入門
ドメイン駆動設計入門
 
イミュータブルデータモデル(世代編)
イミュータブルデータモデル(世代編)イミュータブルデータモデル(世代編)
イミュータブルデータモデル(世代編)
 
オブジェクト指向プログラミングのためのモデリング入門
オブジェクト指向プログラミングのためのモデリング入門オブジェクト指向プログラミングのためのモデリング入門
オブジェクト指向プログラミングのためのモデリング入門
 
Apache Avro vs Protocol Buffers
Apache Avro vs Protocol BuffersApache Avro vs Protocol Buffers
Apache Avro vs Protocol Buffers
 
ゼロから始める転移学習
ゼロから始める転移学習ゼロから始める転移学習
ゼロから始める転移学習
 
本当は恐ろしい分散システムの話
本当は恐ろしい分散システムの話本当は恐ろしい分散システムの話
本当は恐ろしい分散システムの話
 
「再代入なんて、あるわけない」 ~ふつうのプログラマが関数型言語を知るべき理由~ (Gunma.web #5 2011/05/14)
「再代入なんて、あるわけない」 ~ふつうのプログラマが関数型言語を知るべき理由~ (Gunma.web #5 2011/05/14)「再代入なんて、あるわけない」 ~ふつうのプログラマが関数型言語を知るべき理由~ (Gunma.web #5 2011/05/14)
「再代入なんて、あるわけない」 ~ふつうのプログラマが関数型言語を知るべき理由~ (Gunma.web #5 2011/05/14)
 
テストコードの DRY と DAMP
テストコードの DRY と DAMPテストコードの DRY と DAMP
テストコードの DRY と DAMP
 

Ähnlich wie Word press初心者が 基本アーキテクチャを ざっくりと学ぶ

ユニキャストワークショップ2013 はじめてのWebプログラミング#1 ~WordPressからはじめよう~
ユニキャストワークショップ2013 はじめてのWebプログラミング#1 ~WordPressからはじめよう~ユニキャストワークショップ2013 はじめてのWebプログラミング#1 ~WordPressからはじめよう~
ユニキャストワークショップ2013 はじめてのWebプログラミング#1 ~WordPressからはじめよう~
Unicast Inc.
 
WordPressってブログじゃないの?
WordPressってブログじゃないの?WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
 
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
PHPがわからないデザイナーでもできる、簡単カスタマイズ術PHPがわからないデザイナーでもできる、簡単カスタマイズ術
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
Eri Sawada
 
Webデザイナーが身に付けておきたい定番スキル ー WordPress 初級・導入編 ー
Webデザイナーが身に付けておきたい定番スキル ー WordPress 初級・導入編 ーWebデザイナーが身に付けておきたい定番スキル ー WordPress 初級・導入編 ー
Webデザイナーが身に付けておきたい定番スキル ー WordPress 初級・導入編 ー
Kite Koga
 
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズCSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
 

Ähnlich wie Word press初心者が 基本アーキテクチャを ざっくりと学ぶ (20)

WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
 
簡単・多機能・スタイリッシュなビジネステンプレート
簡単・多機能・スタイリッシュなビジネステンプレート簡単・多機能・スタイリッシュなビジネステンプレート
簡単・多機能・スタイリッシュなビジネステンプレート
 
ユニキャストワークショップ2013 はじめてのWebプログラミング#1 ~WordPressからはじめよう~
ユニキャストワークショップ2013 はじめてのWebプログラミング#1 ~WordPressからはじめよう~ユニキャストワークショップ2013 はじめてのWebプログラミング#1 ~WordPressからはじめよう~
ユニキャストワークショップ2013 はじめてのWebプログラミング#1 ~WordPressからはじめよう~
 
第一回スライド
第一回スライド第一回スライド
第一回スライド
 
WordPressってブログじゃないの?
WordPressってブログじゃないの?WordPressってブログじゃないの?
WordPressってブログじゃないの?
 
WordPress ユーザーのための a-blog cms 入門
WordPress ユーザーのための a-blog cms 入門WordPress ユーザーのための a-blog cms 入門
WordPress ユーザーのための a-blog cms 入門
 
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
PHPがわからないデザイナーでもできる、簡単カスタマイズ術PHPがわからないデザイナーでもできる、簡単カスタマイズ術
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
 
Wp hands-on
Wp hands-onWp hands-on
Wp hands-on
 
WordPress
WordPressWordPress
WordPress
 
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
 
カスタムフィールドで作るカンタン投稿システム
カスタムフィールドで作るカンタン投稿システムカスタムフィールドで作るカンタン投稿システム
カスタムフィールドで作るカンタン投稿システム
 
20191204_WordPressの教科書出版記念イベント_パフォーマンスチューニングとセキュリティ_小川
20191204_WordPressの教科書出版記念イベント_パフォーマンスチューニングとセキュリティ_小川20191204_WordPressの教科書出版記念イベント_パフォーマンスチューニングとセキュリティ_小川
20191204_WordPressの教科書出版記念イベント_パフォーマンスチューニングとセキュリティ_小川
 
Webデザイナーが身に付けておきたい定番スキル ー WordPress 初級・導入編 ー
Webデザイナーが身に付けておきたい定番スキル ー WordPress 初級・導入編 ーWebデザイナーが身に付けておきたい定番スキル ー WordPress 初級・導入編 ー
Webデザイナーが身に付けておきたい定番スキル ー WordPress 初級・導入編 ー
 
あらためて baserCMS ってなんだろう?
あらためて baserCMS ってなんだろう?あらためて baserCMS ってなんだろう?
あらためて baserCMS ってなんだろう?
 
180315 ppug
180315 ppug180315 ppug
180315 ppug
 
WordPress.comを使って個人ブログを作ってみよう!
WordPress.comを使って個人ブログを作ってみよう!WordPress.comを使って個人ブログを作ってみよう!
WordPress.comを使って個人ブログを作ってみよう!
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121
 
WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介
 
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズCSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
 

Word press初心者が 基本アーキテクチャを ざっくりと学ぶ