Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordPressでの制作説明

396 views

Published on

ライジングサン株式会社 坂本様による、WordPressによるサイト制作のご説明

Published in: Internet
  • Be the first to comment

  • Be the first to like this

WordPressでの制作説明

  1. 1. WordPresshttps://ja.wordpress.org/
  2. 2. 特徴 ● blog オープンソース実装 ● 豊富なテーマやプラグインによりCMSとしても利用 できる ● php & MySQL ● 圧倒的なシェア? ● web上にドキュメントが豊富に存在する (公式&個人blog)
  3. 3. php & MySQL ● 対応しているレンタルサーバが豊富 ● ドキュメントも豊富 https://secure.php.net/manual/ja/index.phphttp://www.sakura.ne.jp/standard.html
  4. 4. 圧倒的シェア
  5. 5. 弊社の開発環境 ● 昔 – Vi & var_dump & subversion ● var_dumpめんどくさい。突然の死(真っ白) ● 今 – Vagrant & phpstorm & git ● xdebugとphpstormによるブレークポイントの実現
  6. 6. vi ● ちょっと本番環境に入って修正する分には便利
  7. 7. phpstorm ● 補完機能、リファクタリング機能が強力 ● リモートデバッグが便利(他のIDEでもできます・・)
  8. 8. テーマ ● 外観を差し替える機能 ● 無償でたくさんある(管理者画面から検索できる) ● 自分でも作れる ● サイトのデザインはテーマに依存する (HTMLで実現できるデザインはテーマとして組み 込める)
  9. 9. テーマの検索、選択(差し替え) 管理者画面「外観」より
  10. 10. テーマの作り方 ● デザイン(photoshop, illustator, firefox等) ● html化(html,css,javascript等実装) ● テーマ化(wpのルールに従ってテーマ化) – htmlを複数のphpファイルに分割する – 固定ページ、投稿の内容を表示するためのロジック (php)を記述する
  11. 11. テーマを構成するファイル ● wp-content/themes/xxx – 管理者画面からテーマを検索、インストール指示することによる当該 ディレクトリ下に配置されます。 – 自分でオリジナルのテーマを置くこともできます。 ● phpファイル(index.phpその他) – wpのルールにより各phpファイルが呼ばれます。 ● cssファイル(style.css) – cssを定義します ● functions.php – ロジックを定義します
  12. 12. テンプレート階層(1) https://wpdocs.osdn.jp/テンプレート構成
  13. 13. テンプレート階層(2)
  14. 14. テンプレート階層(3) ● よく使うテンプレートファイル – 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 部品化用テンプレート
  15. 15. カスタムフィールド ● 固定的に表示するテーマの内容を入力したいとき ● キー(文字列)、値(文字列)で構成される。 ● テーマ側からキー文字列を指定することにより、値 を取得する
  16. 16. カスタムフィールド
  17. 17. カスタム投稿、カスタムタクソノミー ● とてもWordPressに依存するお話 ● 両方とも分類には違いない ● 人間ががんばれば、「投稿」、「カテゴリ」と「テーマ」 でも実現できるが・・・
  18. 18. カスタム投稿 ● 「固定ページ」、「投稿」ではない記事を作りたいと き ● たとえば「お知らせ」という記事を作成できる (カテゴリより強力に分けたいときに) ● 管理者メニューの左部に「固定ページ」「投稿」と同 列に表示される
  19. 19. カスタム投稿 カスタム投稿がない場合 カスタム投稿「ニュース」がある場合
  20. 20. カスタムタクソノミー ● 「カテゴリ」ではない分類を作りたいとき ● たとえば「お知らせ」用に分類を作ることができる ● カスタム投稿ごとに使用する分類を制限できる
  21. 21. カスタムタクソノミー カスタムタクソノミー「ニュースカテゴリー」がある場合カスタムタクソノミーがない場合
  22. 22. カスタム投稿、カスタムタクソノミー
  23. 23. アクション、フィルター ● WordPressおよびプラグインによりあらかじめ決め られた場所に処理(アクション)、値の加工(フィル タ)を挟むための仕掛け ● たとえば、統合されたときにメールを送信すると か・・・ ● たとえば、固定ページや記事の保存時にNG文字 列を伏せ字に置換するとか・・・
  24. 24. アクション ● functions.phpへ以下のコードを追加すると function sample_save_post($id, $post){ mail('support@rscsoft.co.jp', '【テスト】', "投稿($id)されました"); } add_action('save_post', 'sample_save_post'); 投稿(35)されました こんなメールが飛んでくる
  25. 25. フィルター ● functions.phpへ以下のコードを追加すると・・・ function sample_the_content($content){ $result = str_replace('ライジングサンコーポレーション株式会社', '弊社', $content); $result = str_replace('ライジングサンコーポレーション', '弊社', $result); return $result; } add_filter('the_content', 'sample_the_content'); これが こうなる
  26. 26. wordpressのテーマとは ● テーマ(phpファイル)内で以下の内容を読み込む – 固定ページ、投稿、カスタム投稿 – カスタムフィールド ● 最低限 – index.php – style.css 管理者画面 (固定ページ) (投稿) (カスタム投稿) (カスタムフィールド) WEB画面 (テーマ) 入力 出力
  27. 27. style.css /* Theme Name: サンプルテーマ */ body { width: 800px; margin: 0 auto; background: dimgray; } .container { background: #ffffff; padding: 20px; } テーマのタイトル(必須)
  28. 28. 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>
  29. 29. 投稿の内容
  30. 30. 投稿の表示
  31. 31. よく使うプラグイン ● Custom Post Type UI – カスタム投稿、カスタムタクソノミーを管理者画面から操 作できるようにするもの ● Advanced Custom Fields (Proは有償) – カスタムフィールドを入力フィールドの見栄えをよくする もの
  32. 32. Custom Post Type UI ● 管理者画面からカスタム投稿、カスタムタクソノミー の管理が可能
  33. 33. Advanced Custom Fields Advanced Custom fields を使わない場合
  34. 34. Advanced Custom Fields Advanced Custom fields を使った場合
  35. 35. 分からなくなったとき ● ググる ● 公式ドキュメントを見る – https://wpdocs.osdn.jp/ ● ソースコードを見る (twentyfifteen等の既存のテーマ) ● ソースコードを見る (wordpress本体) ● WEB屋に発注する
  36. 36. WordPressの注意点 ● データベース内にURLを保持している – 設置場所(URL)を移動する際に書き換える必要があ る。 – http://dogmap.jp/2012/09/20/wordpress-replace-siteu rl/ ● wpに組み込まれているjQueryオブジェクトは$では なくjQuery – 自前でjQueryを入れるかjQueryで呼び出すようにする 必要がある。

×