wordpressでの制作説明
TRANSCRIPT
WordPresshttps://ja.wordpress.org/
特徴
● blog オープンソース実装● 豊富なテーマやプラグインによりCMSとしても利用できる
● php & MySQL● 圧倒的なシェア？
● web上にドキュメントが豊富に存在する（公式＆個人blog）
php & MySQL
● 対応しているレンタルサーバが豊富● ドキュメントも豊富
https://secure.php.net/manual/ja/index.phphttp://www.sakura.ne.jp/standard.html
圧倒的シェア
弊社の開発環境
● 昔– Vi & var_dump & subversion
● var_dumpめんどくさい。突然の死（真っ白）
● 今– Vagrant & phpstorm & git
● xdebugとphpstormによるブレークポイントの実現
vi
● ちょっと本番環境に入って修正する分には便利
phpstorm
● 補完機能、リファクタリング機能が強力
● リモートデバッグが便利（他のIDEでもできます・・）
テーマ
● 外観を差し替える機能● 無償でたくさんある（管理者画面から検索できる）● 自分でも作れる● サイトのデザインはテーマに依存する（HTMLで実現できるデザインはテーマとして組み込める）
テーマの検索、選択（差し替え）管理者画面「外観」より
テーマの作り方
● デザイン（photoshop, illustator, firefox等）● html化（html,css,javascript等実装）● テーマ化（wpのルールに従ってテーマ化）
– htmlを複数のphpファイルに分割する– 固定ページ、投稿の内容を表示するためのロジック
(php)を記述する
テーマを構成するファイル
● wp-content/themes/xxx– 管理者画面からテーマを検索、インストール指示することによる当該ディレクトリ下に配置されます。
– 自分でオリジナルのテーマを置くこともできます。
● phpファイル(index.phpその他)– wpのルールにより各phpファイルが呼ばれます。
● cssファイル(style.css)– cssを定義します
● functions.php– ロジックを定義します
テンプレート階層（１）https://wpdocs.osdn.jp/テンプレート構成
テンプレート階層（２）
テンプレート階層（３）
● よく使うテンプレートファイル– style.css
スタイルシート
– home.php
トップページ用テンプレート
– page.php
固定ページ用テンプレート
– single.php, single-xxx.php
投稿、カスタム投稿用テンプレート
– category.php, taxonomy-xxx.php, archive.php
一覧用テンプレート
– index.php
最後に参照されるテンプレート
– header.php, footer.php, sidebar.php
部品化用テンプレート
カスタムフィールド
● 固定的に表示するテーマの内容を入力したいとき● キー（文字列）、値（文字列）で構成される。● テーマ側からキー文字列を指定することにより、値を取得する
カスタムフィールド
カスタム投稿、カスタムタクソノミー
● とてもWordPressに依存するお話● 両方とも分類には違いない● 人間ががんばれば、「投稿」、「カテゴリ」と「テーマ」でも実現できるが・・・
カスタム投稿
● 「固定ページ」、「投稿」ではない記事を作りたいとき
● たとえば「お知らせ」という記事を作成できる（カテゴリより強力に分けたいときに）
● 管理者メニューの左部に「固定ページ」「投稿」と同列に表示される
カスタム投稿
カスタム投稿がない場合 カスタム投稿「ニュース」がある場合
カスタムタクソノミー
● 「カテゴリ」ではない分類を作りたいとき● たとえば「お知らせ」用に分類を作ることができる● カスタム投稿ごとに使用する分類を制限できる
カスタムタクソノミー
カスタムタクソノミー「ニュースカテゴリー」がある場合カスタムタクソノミーがない場合
カスタム投稿、カスタムタクソノミー
アクション、フィルター
● WordPressおよびプラグインによりあらかじめ決められた場所に処理（アクション）、値の加工（フィルタ）を挟むための仕掛け
● たとえば、統合されたときにメールを送信するとか・・・
● たとえば、固定ページや記事の保存時にNG文字列を伏せ字に置換するとか・・・
アクション
● functions.phpへ以下のコードを追加するとfunction sample_save_post($id, $post){ mail('[email protected]', '【テスト】', "投稿($id)されました");}
add_action('save_post', 'sample_save_post');
投稿(35)されました
こんなメールが飛んでくる
フィルター
● functions.phpへ以下のコードを追加すると・・・function sample_the_content($content){ $result = str_replace('ライジングサンコーポレーション株式会社', '弊社', $content); $result = str_replace('ライジングサンコーポレーション', '弊社', $result); return $result;}
add_filter('the_content', 'sample_the_content');
これが こうなる
wordpressのテーマとは
● テーマ(phpファイル)内で以下の内容を読み込む– 固定ページ、投稿、カスタム投稿
– カスタムフィールド
● 最低限– index.php– style.css
管理者画面（固定ページ）（投稿）
（カスタム投稿）（カスタムフィールド）
WEB画面（テーマ）
入力 出力
style.css
/*Theme Name: サンプルテーマ*/
body { width: 800px; margin: 0 auto; background: dimgray;}
.container { background: #ffffff; padding: 20px;}
テーマのタイトル（必須）
index.php
カスタムフィールド表示
投稿のタイトル表示
投稿の内容表示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"/> <title>sample</title> <?php wp_head();?></head><body><div class="container"> <h1>サンプルテーマですよ(｀・ω・´)</h1> <br/>
<?php while( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink()?>"><h2><?php the_title() ?></h2></a> <div class="content"> <?php the_content() ?> </div> <?php $custom = post_custom('カスタム'); if($custom):?> <div class="custom"> <?php echo $custom; ?> </div> <?php endif; ?>
<?php endwhile; ?></div><?php wp_footer();?></body></html>
投稿の内容
投稿の表示
よく使うプラグイン
● Custom Post Type UI– カスタム投稿、カスタムタクソノミーを管理者画面から操作できるようにするもの
● Advanced Custom Fields (Proは有償)– カスタムフィールドを入力フィールドの見栄えをよくするもの
Custom Post Type UI
● 管理者画面からカスタム投稿、カスタムタクソノミーの管理が可能
Advanced Custom FieldsAdvanced Custom fields を使わない場合
Advanced Custom FieldsAdvanced Custom fields を使った場合
分からなくなったとき
● ググる● 公式ドキュメントを見る
– https://wpdocs.osdn.jp/
● ソースコードを見る
（twentyfifteen等の既存のテーマ）● ソースコードを見る
（wordpress本体）● WEB屋に発注する
WordPressの注意点
● データベース内にURLを保持している– 設置場所（URL）を移動する際に書き換える必要がある。
– http://dogmap.jp/2012/09/20/wordpress-replace-siteurl/
● wpに組み込まれているjQueryオブジェクトは$ではなくjQuery– 自前でjQueryを入れるかjQueryで呼び出すようにする必要がある。