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テーマ作成

2,720 views

Published on

2014/03/15 WordBench宮崎のプレゼン内容です。

Published in: Technology
  • Be the first to comment

WordPressテーマ作成

  1. 1. © wordbonch.org WordPress テーマ作成 WordBench宮崎 ver.1.0.0【WordBench宮崎勉強会】
  2. 2. © wordbonch.org 自己紹介 1 高見 和也(Takami Kazuya) Twitter@miiitaka Facebook@miiitaka 株式会社アラタナ サービス開発部:フロントエンドチーム PHPやJavaScriptとかスクリプト系言語好き。
  3. 3. © wordbonch.org まずは基本 2 WordPressの基本構造を理解 (説明内容はWordPress3.8ベースです)
  4. 4. © wordbonch.org WordPressの基本階層は以下のとおりです。大きく3つのフォルダがあります。 WordPressの基本構造を理解(主要ディレクトリ) 3 /wp-admin/ 管理画面で使用するファイルあれこれがある。基本触らない。 /wp-content/ 基本、このフォルダの中をさわりましょう。 /wp-include/ WP全体で使用するJSやCSS、コアファイルがある。これも基本触らない。 / ルート直下は、ログイン関連やRSS関連、コメント、トラックバック、メール送受信用の ファイルなどなど
  5. 5. © wordbonch.org wp-contentフォルダのさらに中のお話。 WordPressの基本構造を理解(wp-contentフォルダ) 4 /wp-content/ /wp-content/language/ 言語パック /wp-content/plugin/ インストールしたプラグインが保存されている場所 /wp-content/themes/ 各種テーマのテンプレートが保存されている場所 /wp-content/upgrade/ バージョンアップ時に使用。 /wp-content/upload/ 管理画面からアップロードしたメディアファイルが保存されている場所。 年→月でいい感じに保存されています。
  6. 6. © wordbonch.org 今回は/wp-content/themes/が主役です。 WordPressの基本構造を理解(今回の主役) 5 /wp-content/ /wp-content/language/ 言語パック /wp-content/plugin/ インストールしたプラグインが保存されている場所 /wp-content/themes/ 各種テーマのテンプレートが保存されている場所 /wp-content/upgrade/ バージョンアップ時に使用。 /wp-content/upload/ 管理画面からアップロードしたメディアファイルが保存されている場所。 年→月でいい感じに保存されています。 この中にオリジナルの テーマを作成して保存 していきましょう。
  7. 7. © wordbonch.org 何はともあれテーマを作る 6 管理画面からテーマを選択する
  8. 8. © wordbonch.org 何はともあれテーマを作る(外観→テーマ) 7 ここでオリジナルテー マを選択できるように したい!(・∀・)
  9. 9. © wordbonch.org テーマを作成するには、最低以下の2ファイルがあればOKです。 ・index.php(内容は空でOK) ・style.css 何はともあれテーマを作る(管理画面で選択肢として表示) 8 /* Theme Name: テーマ名 Description: テーマ説明 Theme URI: テーマURL Author: 作成者 AuthorURI: 作成者URL Version: バージョン License: ライセンス License URI:ライセンスURL */ style.cssの最初に以下を記述 ※以下以外にも設定値は存在します。 /wp-content/themes/sample index.php style.css
  10. 10. © wordbonch.org 何はともあれテーマを作る(管理画面で確認) 9 [外観]→[テーマ]で選 択できるように表示さ れます。
  11. 11. © wordbonch.org 何はともあれテーマを作る(スクリーンショット) 10 画像がない! (´・ω・`)
  12. 12. © wordbonch.org スクリーンショットの画像をテーマ直下に置きます。 ・screenshot.png(300×225px) ・screenshot.png(880×660px) WordPress3.8以降はこのサイズ 何はともあれテーマを作る(スクリーンショットの画像をアップロード) 11 /wp-content/themes/sample screenshot.png
  13. 13. © wordbonch.org 何はともあれテーマを作る(スクリーンショット) 12 画像がでた! \(^o^)/
  14. 14. © wordbonch.org テーマの基本構成 13 テーマの基本構成を学ぶ
  15. 15. © wordbonch.org テーマの基本構成(レイアウトを決める) 14 ヘッダー コンテンツ フッター サイドバー よくあるこうい うのを作ろうと 考える
  16. 16. © wordbonch.org テーマの基本構成(パーツテンプレートを理解する) 15 パーツ パーツテンプレート テンプレートタグ ヘッダー header.php <?php get_header(); ?> フッター footer.php <?php get_footer(); ?> サイドバー sidebar.php sidebar-content.php <?php get_sidebar(); ?> <?php get_sidebar(‘content’); ?> コメント comments.php <?php comments_template(); ?> 検索フォーム searchform.php <?php get_search_form(); ?> ※カスタム main.php main-sub.php <?php get_template_part(‘main’); ?> <?php get_template_part(‘main’,’sub’); ?> ※ カスタムパーツテンプレートは、main-sub.phpがなかったら、main.phpを読む優先順位 付けができるのが特徴
  17. 17. © wordbonch.org テーマの基本構成(テンプレートを理解する) 16 該当ページ 優先度 TOPページ index.php home.php 月別ページ archive.php date.php カテゴリーページ category.php category-id.php category-slug.php タグページ tag.php tag-id.php tag-slug.php タクソノミーページ taxonomy.php taxonomy-tax.php taxonomy-tax-term.php 投稿タイプページ archive-posttype.php ユーザーページ author.php author-id.php author-nicename.php メディアページ single.php attachment.php MIME_type.php 記事ページ single-posttype.php 固定ページ page.php page-id.php page-slug.php custom.php 検索結果ページ search.php 404ページ 404.php 低 高
  18. 18. © wordbonch.org テーマの基本構成(テンプレートを理解する) 17 該当ページ 優先度 TOPページ index.php home.php 月別ページ archive.php date.php カテゴリーページ category.php category-id.php category-slug.php タグページ tag.php tag-id.php tag-slug.php タクソノミーページ taxonomy.php taxonomy-tax.php taxonomy-tax-term.php 投稿タイプページ archive-posttype.php ユーザーページ author.php author-id.php author-nicename.php メディアページ single.php attachment.php MIME_type.php 記事ページ single-posttype.php 固定ページ page.php page-id.php page-slug.php custom.php 検索結果ページ search.php 404ページ 404.php 低 高 最低限作るべき テンプレート
  19. 19. © wordbonch.org テーマの基本構成(配置) 18 header.php index.php archive.php single.php page.php search.php 404.php ・ ・ ・ etc… footer.php sidebar.php この部分が良い 感じでかわる \(^o^)/
  20. 20. © wordbonch.org パーツテンプレートの基本 19 パーツテンプレートの基本
  21. 21. © wordbonch.org header.phpに以下のコードを記述。絶対に書いておきたいのがこれ。 パーツテンプレートの基本(header.php) 20 省略(通常のヘッダーに記述) ・ <?php wp_head(); ?> </head> <body> wp-includes/general-template.php 内に含まれている関数。 関数自体は、do_action()→add_action()へのフックを担っているもの。 プラグインとかはこれをフックにすることが多いので、記述していないと プラグイン入れたけど動かない!ということがありえる。
  22. 22. © wordbonch.org footer.phpにもheader.phpと同じように以下のコードを記述。 パーツテンプレートの基本(footer.php) 21 省略 ・ <?php wp_footer(); ?> </body> </html> こちらもheader.phpと同様にプラグイン導入時などの時のフックポイントとなります。 wp_head()同様、記述するようにしましょう。
  23. 23. © wordbonch.org ウィジェットを配置するエリアとしてsidebar.phpを置きます。 パーツテンプレートの基本(sidebar.php) 22 カレンダーやカテゴリー リストなどなど
  24. 24. © wordbonch.org ウィジェットメニューはデフォルトでは出てません。 パーツテンプレートの基本(sidebar.php) 23 ある設定をしないとメニ ューに出てこない。 /wp-content/themes/sample functions.php テーマ直下に配置
  25. 25. © wordbonch.org functions.php にウィジェット使うよと記述。 パーツテンプレートの基本(functions.php) 24 <?php if (function_exists('register_sidebar')){ register_sidebar(); } ?> ※functions.phpの活用法に関しては、 次回以降の勉強会で…。 でた!\(^o^)/ ※メニューもでた!
  26. 26. © wordbonch.org sidebar.php にウィジェット表示用の記述。 パーツテンプレートの基本(sidebar.php) 25 <?php dynamic_sidebar(); ?> これだけ。 レイアウトに沿って、「sidebar.php」に記述しましたけど、基本、どこでも表示できます。 functions.phpに登録する時にサイドバーに名前をつけて、サイドバーエリアを増やすことも可能。 共通パーツを配置したりするのにとても便利です\(^o^)/
  27. 27. © wordbonch.org ご清聴ありがとうございました。 26 ありがとうございました。 次回は2ヶ月後の5月開催です。
  28. 28. © wordbonch.org WordPressテンプレート階層 http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83% BC%E3%83%88%E9%9A%8E%E5%B1%A4 WordPress関数リファレンス http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82% A1%E3%83%AC%E3%83%B3%E3%82%B9/ 参考URL 27

×