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