Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie WordPress初心者テーマ作成勉強会
Ähnlich wie WordPress初心者テーマ作成勉強会 (20)
WordPress初心者テーマ作成勉強会
- 1. WordPress初心者 テーマ作成勉強会 カスタム投稿タイプとカスタムフィールドを使って Webサイトを作ろう！ Mah (@bcures) nao (@naoyuki003jp) Tsuyoshi. (@andante0727)
- 2. 自己紹介 名前: Tsuyoshi. Twitter: @andante0727 仕事: Web全般をやる人 ブログ: http://webcake.no003.info/ コミュニティ歴: 本日の司会進行を担当させて頂きます！ WordCamp Tokyo 2012 WordCrab Fukui 2012 WordBench 東京 WordBench 静岡
- 3. 名前: まあ Twitter: @bcures 事務所: b-cures.(ビーキュアズ) 仕事: Web制作,ディレクション ブログ: http://wordpress.b-cures.net/ コミュニティ歴: 自己紹介 テーマのデザイン及びスライド作成に協力！ ※実行委員として参加 WordBeach Nagoya 2011※ WordCamp Tokyo 2012 WordCrab Fukui 2012 WordCrab Tokyo 2012※ WordBench 名古屋(地元) / 東京 / 静岡
- 4. 自己紹介 名前: nao Twitter: @naoyuki003jp 仕事: Web全般やプログラム ブログ: http://no003.info/blog/ コミュニティ歴: 巻き込まれ役担当ですorz WordCrab Fukui 2012 WordCrab Tokyo 2012※ WordBench 東京 WordBench 静岡 ※実行委員として参加
- 6. 勉強会開催できました ということで、本日、会場をコワーキングスペース Guild Cafe Costa(ギルド カフェ コスタ)さんにお借りし WordPress初心者テーマ作成勉強会を開催する運びとなりま した。 青木さん、ありがとうございます！ コスタ最高！ お集まりくださった皆さん、 どうぞよろしくお願いします！
- 7. WordPressとは？ ● GPLライセンスにより、商用・個人問わず無料で利用できる オープンソースのブログソフトウェア。 ● CMS（コンテンツマネジメントシステム）としても幅広く使用さ れ、動的コンテンツとしてWebページの配信が可能。 ● PHP+MySQL+Webサーバ(Apache等)で動作。 ● 基本機能を拡張するプラグインや無料でダウンロードして利 用できるテーマが豊富。 (共に管理画面よりインストール可能)
- 8. PHPとは？ ● 正式名称【PHP: Hypertext Preprocessor】 (ピー・エイチ・ピー ハイパーテキスト プリプロセッサー) ● PHP = Personal Home Page (パーソナル・ホーム・ページ) ● 動的にHTMLを生成するプログラム言語 ● WordPressはこのPHPという言語で作られているのでPHP の知識があると尚良い。
- 9. MySQLとは？ ● オープンソースのデータベースソフトウェア ● WordPressの管理画面より投稿された投稿データやユーザ データなど、必要な情報を格納する場所 ● MySQLが利用可能なサーバーでないと、WordPressが使え ません。
- 11. 開発ツール 普通のテキストエディタでも可能。 ただし、UTF-8（BOMなし）を扱えるものにする。 ※作成するファイルの文字エンコーディングはUTF-8推奨 Windowsなら >> NotePad++ Macなら >> Coda Windows & Macなら >> Dreamweaver >> Eclipse などなど。 タグや、コードの補完を行なってくれるので便利。 Codaのプラグイン「WordPress Syntax Mode」 を使うとWordPressのコードの補完も行なってくれる。
- 13. 本日の流れ 1. インストール 2. 初期設定 3. テーマ構成 4. テンプレートの優先順位 5. テンプレートタグ 6. インクルードタグ 7. 条件分岐タグ 8. テンプレートの記述 9. テンプレートの切り分け 10. ループ 11. カスタム投稿タイプ 12. カスタムフィールド
- 14. インストール ■設置箇所(ドキュメントルートのhtdocsフォルダ配下にwordpressフォルダを置く) XAMPP C:/xampp/htdocs/wordpress MAMP /Applications/MAMP/htdocs/wordpress ■サイトアドレス XAMPP http://localhost/wordpress MAMP http://localhost:8888/wordpress ■WorPressアドレス(インストールディレクトリを変えた場合はサイトアドレスと異なる) XAMPP http://localhost/wordpress MAMP http://localhost:8888/wordpress ■管理画面 XAMPP http://localhost/wordpress/wp-admin MAMP http://localhost:8888/wordpress/wp-admin
- 16. 初期設定 ● http://サイトURL/wordpress/wp-admin/にアクセス。 ● ID、PASS、E-mail等の項目を入力し設定。 (ID・PASSは忘れないように控える) ● WordPressの管理画面にログイン。 ● 左サイドバー設定に進み、一般、表示設定、パーマリンク設 定等、必要な項目を設定。 ※パーマリンク設定では注意が必要 管理画面側の初期設定
- 18. テーマ構成 テーマ名:aquarium /css … CSSファイル格納用フォルダ /images … イメージ画像格納用フォルダ /js … JS格納用フォルダ archive-event.php … イベントの一覧 archive-fish.php … 水族館の魚たちの一覧 archive-info.php … インフォメーションの一覧 footer.php … フッター用 functions.php … 関数を定義するファイル header.php … ヘッダー用 index.php … トップページ用 sidebar.php … サイドバー読み込み用 single-event.php … イベントの単一記事用 single-fish.php … 水族館の魚たちの単一記事用 single-info.php … インフォメーションの単一記事用 style.css … WebページのCSSを記述した絶対必須のファイル screenshot.png … 管理画面のテーマ一覧で表示されるサムネイル テーマのフォルダと必要なテンプレートファイルなどを作成
- 19. テーマ構成 style.cssには必ず下記のように記述する。 ※テーマとして認識させるために必要な作業 (同時にindex.phpを作成すると管理画面の[外観]-[テーマ]でテーマが表示されます。) @charset "utf-8"; /* Theme Name: Aquarium Andante // テーマ名 Theme URI: // テーマがDLできるサイトURL Description: // テーマ一覧で表示する紹介文 Version: 1.0 // 環境に合わせて Author: Tsuyoshi. & b-cures // テーマ作者名 Author URI: http://b-cures.jp/ // テーマ作成者のWEBサイトURL */ テーマを認識させるために重要な作業
- 20. テンプレートの優先順位 ホームの場合 home.php index.php 個別投稿ページの場合 single-{post_type}.php - 投稿タイプ がvideos の場合 single-videos.php （バージョン 3.0 以降） single.php index.php カスタム投稿の場合 archive-{post_type}.php 例/投稿タイプ名productの場合 archive-product.php archive.php index.php テンプレートファイルの読み込み優先順位
- 21. テンプレートタグ サイト名 <?php bloginfo( 'name' ); ?> サイトのURL <?php bloginfo( 'url' ); ?> サイトの説明 <?php bloginfo( 'description' ); ?> 使用中のテーマのディレクトリ <?php bloginfo( 'template_directory' ); ?> WordPressの設定情報等を表示
- 22. テンプレートタグ 投稿のタイトル <?php the_title(); ?> 投稿のURL <?php the_permalink(); ?> 投稿の本文 <?php the_content(); ?> 投稿日時 <?php the_time( 'Y/m/d' ); ?> 投稿に関する情報を表示
- 23. インクルードタグ ヘッダーテンプレート（header.php）を読み込み <?php get_header(); ?> フッターテンプレート（footer.php）を読み込み <?php get_footer(); ?> サイドバーテンプレート（sidebar.php）を読み込み <?php get_sidebar(); ?> 指定テンプレート（xxx.php）を読み込み <?php get_temprate_part( 'xxx' ); ?> テーマ内のテンプレートファイルを読み込む
- 24. 条件分岐タグ is_home()・・・メインページが表示されている場合 is_single()・・・個別投稿ページが表示されている場合 is_page()・・・固定ページが表示されている場合 使用例 <?php if ( is_home() ) : ?> メインページです。 <?php else : ?> その他のページです。 <?php endif; ?> 見ているページなど条件によって分岐させる
- 25. テンプレートの記述 <title>Aquarium Andante</title> <title>Aquarium Andante | イベント情報</title> <title><?php bloginfo( 'name' ); ?><?php wp_title( '|' ); ?></title> サイト名、ページタイトルを取得
- 26. テンプレートの記述 <meta name="Description" content="九州福岡県福岡 市にある水族館。ペンギン、アシカ、イルカショーを始め、様々 なイベントを随時開催しています。" /> <meta name="Description" content="<?php bloginfo( 'description' ); ?>" /> サイトの説明を取得 Description(ディスクリプション)
- 27. テンプレートの記述 <link href="css/import.css" rel="stylesheet" type=" text/css" media="all" /> <link href="<?php bloginfo( 'template_directory' ); ?>/css/import.css" rel="stylesheet" type="text/css" media="all" /> WordPress上の出力 http://WordPressアドレス/wp-content/themes/aquarium/css/import.css <?php bloginfo( 'stylesheet_url' ); ?> だとテーマのstyle.cssまでのパスを返す 使用しているテンプレートのディレクトリのURLを取得
- 28. テンプレートの記述 <script type="text/javascript" src="js/Scroll.js" ></script> <script type="text/javascript" src="<?php bloginfo( 'template_directory' ); ?>/js/Scroll.js"></script> WordPress上の出力 http://WordPressアドレス/wp-content/themes/aquarium/js/Scroll.js 使用しているテンプレートのディレクトリのURLを取得
- 29. テンプレートの記述 <img src="images/tel.jpg" /> <img src="<?php bloginfo( 'template_directory' ); ? >/images/tel.jpg" /> WordPress上の出力 http:/WordPressアドレス/wp-content/themes/aquarium/images/tel.jpg 使用しているテンプレートのディレクトリのURLを取得
- 30. テンプレートの記述 <body id="index"> or <body id="common"> 例1 <body id="<?php echo ( is_home() ) ? 'index' : 'common'; ?>" <? php body_class(); ?>> 例2 <?php if ( is_home() ) : ?> <body id="index" <?php body_class(); ?>> <?php else : ?> <body id="common" <?php body_class(); ?>> <?php endif; ?> ※もっと色々知りたい人はis_front_page()も調べてみよう。 bodyにcssのidとclass出力 ついでにWordPressの body_class()でcssのclassも
- 34. テンプレートの切り分け <?php get_header(); ?> <!-- #ContBox --> <div> 〜〜 略 〜〜 <?php get_sidebar(); ?> </div> <!-- /#ContBox --> <?php get_footer(); ?> 各ページで共通の部分を切り分ける header.php sidebar.php footer.php
- 35. ループ 主に一覧ページ等で利用する繰り返しの処理を実行する <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <h2><?php the_title(); ?></h2> <div class="entry"><?php the_content(); ?></div> 〜〜 略 〜〜 <?php endwhile; ?> <?php else : ?> 投稿がない時の処理 <?php endif; ?> ル | プ
- 37. カスタム投稿タイプ 使用プラグイン Custom Post Type UI（バージョン 0.7.1 ） ダウンロード http://wordpress.org/extend/plugins/custom-post-type-ui/ 公式ディレクトリに登録されているプラグインなら、管理画面から検索してインストー ルも可能。 プラグインの活用
- 38. カスタム投稿タイプ 投稿タイプがfishの場合 一覧ページ archive-fish.php 単一記事 single-fish.php 一覧ページへのリンクを表示 <?php echo get_post_type_archive_link( 'fish' ); ?>
- 40. カスタムフィールド 使用プラグイン Custom Field Gui Utility（バージョン3.2.4） ダウンロード・使い方 かたつむりくんのWWW http://www.tinybeans.net/blog/download/wp-plugin/cfg-utility-3.html プラグインの活用
- 41. カスタムフィールド カスタムフィールドの出力 ■例1 <?php echo get_post_meta( get_the_ID(), 'カスタム フィールドのキー', true ); ?> ■例2 <?php echo post_custom( 'カスタムフィールドのキー' ); ?> カスタムフィールドの取得
- 43. カスタムフィールド という訳でget_post_metaを使うか、以下のようにしてみる ※post_customでは配列の場合の考慮も行うとGood 例1 例2 カスタムフィールドの取得 <?php //カスタムフィールドを取得 $field = post_custom( 'カスタムフィールドの キー' ); //$fieldを配列にキャストしてループで出力 foreach ( ( array )$field as $value ) { echo $value; } ?> <?php //カスタムフィールドを取得 $field = post_custom( 'カスタムフィールドのカスタム フィールドのキー' ); //$fieldが配列か if ( is_array( $field ) ) { //ループで出力 foreach ( $field as $value ) { echo $value; } }else { echo $field; } ?>
- 44. カスタムフィールド HTMLタグをエスケープする <?php echo esc_html( get_post_meta( get_the_ID(), 'カスタムフィールドのキー', true ) ); ?> 特に必要性がない限りHTMLタグを無効化しています。 カスタムフィールドの取得
- 45. カスタムフィールド テキストエリアのカスタムフィールドの出力 <?php echo nl2br( esc_html( get_post_meta( get_the_ID(), 'カスタムフィールドのキー', true ) ) ); ?> HTMLタグを無効化して改行コードをbrタグに変換して出力。 カスタムフィールドの取得
- 46. カスタムフィールド イメージフィールドのカスタムフィールドの出力 <?php //イメージフィールドの情報を取得 $imagefield = get_imagefield( 'カスタムフィールドのキー' ); //イメージのidが存在すればimageタグ出力 if ( ! empty( $imagefield['id'] ) ) { echo wp_get_attachment_image( $imagefield['id'], 'full' ); } ?> （※get_imagefieldはCustom Field GUI Utilityプラグインの独自関数なので他プラグイ ンの時は使用できないことに注意） カスタムフィールドの取得