中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!

2,659 views

Published on

WordPressのサイトのデザインは、「テーマ」をカスタマイズすることで行います。この講座では、テーマのカスタマイズに必要なWordPressのテンプレートタグと条件分岐タグ、その前提となるPHPプログラムの基礎を学びます

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,659
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
33
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!

  1. 1. さくらWORKS関内(2)第2回 WordPressテーマを カスタマイズしてみよう! 株式会社コミュニティコム 星野 邦敏 〒116-0013 東京都荒川区西日暮里5-37-5 NSO2階 URL: http://www.communitycom.jp/ E-MAIL: mail@communitycom.jp 1
  2. 2. さくらWORKS関内(2) 目次0. 自己紹介1. WordPressのカスタマイズの前提2. WordPressのテーマについて3. テーマのカスタマイズについて4. PHPの基礎知識(決まり事とよく使う事)5. WordPressのテンプレートタグと条件分岐タグ6. PHP、よく使う6つの構文・関数echo(文字列の出力)、if~else(条件分岐)、 array(配列)、while(繰り返し処理)、 foreach(配列用の繰り返し処理)、function(ユーザー定義関数)7. CMSとしてWordPressで企業サイトを作る 2
  3. 3. さくらWORKS関内(2) 自己紹介 星野 邦敏(ほしの くにとし) Twitter : @khoshino Facebook : 星野邦敏(Kunitoshi Hoshino)株式会社コミュニティコムという会社で、自社運営サイトや他企業様のWEBサイトやアプリを作っています。オープンソースの活動をしたり、IT系の勉強会を主催したり、地域の活動をしたり。WordPressをCMSとしてWEBサイトを作ることが増えています。 3
  4. 4. さくらWORKS関内(2) 自己紹介WordPressのイベントである「WordCamp」京都・横浜・名古屋に、スタッフやスピーカーとして関わりました。その他、WordPress地域コミュニティ「WordBench」に参加したり、OSCにWordPressのブース出展する等、関わっています。 4
  5. 5. さくらWORKS関内(2) 自己紹介 WordCamp京都では、 WordPressのコミュニティ活動 についてのライトニングトークを、 WordCamp名古屋では、 「WordPressファーストステップ」 という45分のセッションを、 担当しました。(WordCamp名古屋にて、杉本さん撮影)WordPressを使ってみよう!インストールの仕方、最初の記事投稿、テーマとプラグインの追加、オリジナルテーマの作り方など、初心者向けセッション。 5
  6. 6. さくらWORKS関内(2) 自己紹介WordPress日本語サイトの「イベントカレンダー」を更新する係。もし掲載されていないWP関係のイベントや勉強会があれば、Twitter経由などで、お知らせください! ココ 6
  7. 7. さくらWORKS関内(2) 自己紹介(1)自社サイトの運営 このサイトは、WordPress! 例えば・・・ http://zeirishi-community.com/ http://www.tokyo-hanami.com/ 7
  8. 8. さくらWORKS関内(2) 自己紹介(2)CMSパッケージによるWEB作成受注請負 例えば・・・ これらのサイトも、WordPress! http://www.jctsc.co.jp/ http://www.afl-hoken.com/ 8
  9. 9. さくらWORKS関内(2) 自己紹介(3)その他 WEBやインターネットに関する講師 iPhoneアプリやAndroidアプリの制作 9
  10. 10. さくらWORKS関内(2) 目次 この講座の対象者・既存のテーマや既存のプラグインのインストールは 行っているけれど、 WordPressを自分でカスタマイズしたことが無い人。 10
  11. 11. さくらWORKS関内(2) 目次 この講座のゴール・WordPressの既存のテーマを入れるだけでなく、 自分でオリジナルテーマを作って、 自分だけのWEBデザインで、 WordPressに動かせるようになる。・PHPと、WordPressのテンプレートタグ&条件分岐 タグを組み合わせることで、カスタマイズできること ことを知り、その後に調べやすいようになる。 11
  12. 12. さくらWORKS関内(2) 目次 この講座のゴール・HTMLベースのWEBデザインを既に作られている サイトを、WordPressで活用して、 HTMLベースから CMS(コンテンツ・マネジメント・システム)ベースに 応用する。・WordPressを、企業サイトのようなCMSとして使う。 12
  13. 13. さくらWORKS関内(2) 目次この講座のサンプルサイト キャンプ場コミュニティ http://www.camp-community.com/ 13
  14. 14. さくらWORKS関内(2) 目次この講座のサンプルサイト キャンプ場コミュニティ http://www.camp-community.com/ 14
  15. 15. さくらWORKS関内(2) 目次この講座の事例サイト 日中翻訳館株式会社 http://www.jctsc.co.jp/ 15
  16. 16. さくらWORKS関内(2) 目次0. 自己紹介1. WordPressのカスタマイズの前提2. WordPressのテーマについて3. テーマのカスタマイズについて4. PHPの基礎知識(決まり事とよく使う事)5. WordPressのテンプレートタグと条件分岐タグ6. PHP、よく使う6つの構文・関数echo(文字列の出力)、if~else(条件分岐)、 array(配列)、while(繰り返し処理)、 foreach(配列用の繰り返し処理)、function(ユーザー定義関数)7. CMSとしてWordPressで企業サイトを作る 16
  17. 17. さくらWORKS関内(2) WordPressのカスタマイズの前提 WordPressのカスタマイズの前提・HTML、CSS 汎用的・PHP、MySQL (WordPress以外でも使える)・WordPressテンプレートタグ WordPress独自・WordPress条件分岐タグ WordPress3.2は、 PHPバージョン5.2.4以上 、 MySQLバージョン5.0以上 のサーバーで動きます。 17
  18. 18. さくらWORKS関内(2) 目次0. 自己紹介1. WordPressのカスタマイズの前提2. WordPressのテーマについて3. テーマのカスタマイズについて4. PHPの基礎知識(決まり事とよく使う事)5. WordPressのテンプレートタグと条件分岐タグ6. PHP、よく使う6つの構文・関数echo(文字列の出力)、if~else(条件分岐)、 array(配列)、while(繰り返し処理)、 foreach(配列用の繰り返し処理)、function(ユーザー定義関数)7. CMSとしてWordPressで企業サイトを作る 18
  19. 19. さくらWORKS関内(2) WordPressのテーマについてWordPressの「テーマ」とは?WEBデザインを変えるためのモノ。サイトの「着せ替え」。見た目の調整だけでなく、表示する内容を操ることもできます。テーマは、自分で作ることも出来ます。慣れてきたら、自分でカスタマイズすると、自由度が高まります。 19
  20. 20. さくらWORKS関内(2) WordPressのテーマについて 既存のテーマの場合 http://wordpress.org/extend/themes/既存のテーマは管理画面や公式ディレクトリからインストールできますが、カスタマイズした独自のテーマは、wp-content > themesフォルダにいれましょう。 20
  21. 21. さくらWORKS関内(2) WordPressのテーマについて 自分でカスタマイズしたテーマを入れる場合wp-admin /wp-content / languages /wp-includes / plugins / twentyeleven /index.php themes / twentyten /license.txt upgrade / index.phpreadme-ja.html uploads /readme.html index.php ココにwp-activate.php テーマフォルダをwp-app.phpwp-atom.php FTPで入れる! 21
  22. 22. さくらWORKS関内(2) 目次0. 自己紹介1. WordPressのカスタマイズの前提2. WordPressのテーマについて3. テーマのカスタマイズについて4. PHPの基礎知識(決まり事とよく使う事)5. WordPressのテンプレートタグと条件分岐タグ6. PHP、よく使う6つの構文・関数echo(文字列の出力)、if~else(条件分岐)、 array(配列)、while(繰り返し処理)、 foreach(配列用の繰り返し処理)、function(ユーザー定義関数)7. CMSとしてWordPressで企業サイトを作る 22
  23. 23. さくらWORKS関内(2) テーマのカスタマイズについて デフォルトテーマ「Twenty Ten」のファイル構成images / footer.php page.phplanguages / functions.php rtl.css404.php header.php screenshot.pngarchive.php index.php search.phpattachment.php license.txt sidebar.phpauthor.php loop.php sidebar-footer.phpcategory.php loop-attachment.php single.phpcomments.php loop-page.php style.csseditor-style.css loop-single.php tag.phpeditor-style-rtl.css onecolumn-page.php 23
  24. 24. さくらWORKS関内(2) テーマのカスタマイズについて最低限必要なテーマのファイル構成 index.php style.css 24
  25. 25. さくらWORKS関内(2) テーマのカスタマイズについて style.cssstyle.cssの始めに以下を書くと、テーマとして認識されます。 /* Theme Name: 自分のテーマ名 Theme URI: テーマのホームサイトのURL Description: テーマの説明 Author: 作者である自分の名前 Author URI: 作者である自分のサイトのURL Version: バージョン(任意) Tags: タグ(任意) */ 25
  26. 26. さくらWORKS関内(2) テーマのカスタマイズについてscreenshot.png screenshot.pngを入れておくと、 管理画面のテーマに キャプチャ画像が表示されます。 公式テーマではサイトの キャプチャが一般的ですが、 会社のロゴなど何でも可能です。 画像サイズは、 横300px、縦225pxで作ると ちょうど良くなります。 26
  27. 27. さくらWORKS関内(2) テーマのカスタマイズについて テーマのファイル適用の優先順位ページの種類 第1位 第2位 第3位 第4位 第5位メインページ 静的フロントページ home.php index.php投稿ページ single-投稿タイプ.php single.php index.php固定ページ page-スラッグ名.php page-ID.php page.php index.phpカテゴリーページ category-スラッグ category-ID.php category.php archive.php index.php 名.phpタグページ tag-スラッグ名.php tag-ID.php tag.php archive.php index.phpカスタム分類ページ taxonoy-分類名-スラッ taxonoy-分類名.php taxonomy.php archive.php index.php グ名.phpユーザーページ author-ユーザー名.php author-ユーザーID.php author.php archive.php index.php日付別ページ date.php archive.php index.php検索ページ search.php archive.php index.php404ページ 404.php index.php添付ファイルページ MIME_TYPE.php attachment.php archive.php index.phpMIME_TYPE.phpとは、image.php、video.php、audio.php、application.phpなどファイルに応じたテンプレートページ 27
  28. 28. さくらWORKS関内(2) テーマのカスタマイズについて ページテンプレート固定ページでWEBデザインを切り替えるページテンプレートを作る場合、新規にphpファイルを作り、始めに以下を書くと、ページテンプレートとして認識されます。 <?php /* Template Name: ページテンプレート名 */ ?> 28
  29. 29. さくらWORKS関内(2) テーマのカスタマイズについて ページテンプレート固定ページの「ページ属性」に「テンプレート」が追加されて、切り替えることが可能になります。 29
  30. 30. さくらWORKS関内(2) テーマのカスタマイズについて作業効率を上げるためにファイルを分割するindex.php、style.cssの2ファイルがあれば、テーマとしては動くが、実際のサイトの動きに応じて、ファイルを分割した方が、効率的にWEBデザインをすることができる。→共通部分を、1ファイルづつ切り分ける。 30
  31. 31. さくらWORKS関内(2) テーマのカスタマイズについて「Twenty Ten」による具体例 header.php sidebar.php footer.php 31
  32. 32. さくらWORKS関内(2) テーマのカスタマイズについて 分割したファイルを読み込む (「Twenty Ten」 loop-page.phpで解説)<?php get_header(); ?> <div id="container"> <div id="content" role="main"> <?php get_template_part( ‘loop’, ‘index’ ); ?> </div><!-- #content --> </div><!-- #container --><?php get_sidebar(); ?><?php get_footer(); ?> 32
  33. 33. さくらWORKS関内(2) テーマのカスタマイズについて 完成したテーマはthemesフォルダに入れるwp-admin /wp-content / languages /wp-includes / plugins / twentyeleven /index.php themes / twentyten /license.txt upgrade / index.phpreadme-ja.html uploads /readme.html index.php ココにwp-activate.php テーマフォルダをwp-app.phpwp-atom.php 新規に作って入れる! 33
  34. 34. さくらWORKS関内(2) テーマのカスタマイズについて完成したテーマはthemesフォルダに入れる 管理画面に 新しくテーマが追加されます。 その後、「有効化」すると、 WordPressにWEBデザインが 反映されます。 34
  35. 35. さくらWORKS関内(2) 目次0. 自己紹介1. WordPressのカスタマイズの前提2. WordPressのテーマについて3. テーマのカスタマイズについて4. PHPの基礎知識(決まり事とよく使う事)5. WordPressのテンプレートタグと条件分岐タグ6. PHP、よく使う6つの構文・関数echo(文字列の出力)、if~else(条件分岐)、 array(配列)、while(繰り返し処理)、 foreach(配列用の繰り返し処理)、function(ユーザー定義関数)7. CMSとしてWordPressで企業サイトを作る 35
  36. 36. さくらWORKS関内(2) PHPの基礎知識(決まり事とよく使う事) PHPの決まり事・Dreamweaverのようなソフトだけでなく、 テキストエディアでも大丈夫。・ただし、文字コードは「UTF-8」で保存しましょう。 (Windowsのメモ帳はこの点で非推奨)・拡張子は、原則、「.php」で保存する。 36
  37. 37. さくらWORKS関内(2) PHPの基礎知識(決まり事とよく使う事)PHPの決まり事 <?php で始まり、 ?> で終わる。 37
  38. 38. さくらWORKS関内(2) PHPの基礎知識(決まり事とよく使う事) PHPの変数(可変変数)「変数」とは、1つのデータを入れておくモノ。何回も使われるデータは、変数にすると便利。変数を使わない例 変数を使う例 変数は必ず<?php <?php 「$」から始まるecho “東京都北区”; $tokyo = “東京都”; という決まり事echo “東京都荒川区”; echo $tokyo . “北区”; があります。echo “東京都文京区”; echo $tokyo . “荒川区”;?> echo $tokyo . “文京区”; ?>→変数を使うと、$tokyo = “◯◯”;を変えれば一気に変わる。 38
  39. 39. さくらWORKS関内(2) PHPの基礎知識(決まり事とよく使う事) PHPの配列「配列」とは、複数のデータを入れておくモノ。1つの変数に、複数の異なるデータを保持したい時に便利。 <変数> <配列> $a $a[0] $a[1] $a[2] 東京 東京 埼玉 千葉 39
  40. 40. さくらWORKS関内(2) PHPの基礎知識(決まり事とよく使う事) PHPでよく使う2つ (1)ループ(繰り返し処理)「ループ(繰り返し処理)」とは、特定の条件や回数まで繰り返す処理を行うこと。① while(簡単なタイプの繰り返し処理向き)② for(複雑なタイプの繰り返し処理向き)③ foreach(配列用の繰り返し処理向き) 40
  41. 41. さくらWORKS関内(2) PHPの基礎知識(決まり事とよく使う事) PHPでよく使う2つ (2)条件分岐「条件分岐」とは、その名の通り、特定の条件に、該当する場合と該当しない場合で、処理を変える時に使います。① if(条件1つで、該当する場合のみ処理を実行したい時)② if~else(条件1つで、処理の実行を分けたい時)③ if~elseif~else(複数の条件で、処理の実行を分けたい時) 41
  42. 42. さくらWORKS関内(2) 目次0. 自己紹介1. WordPressのカスタマイズの前提2. WordPressのテーマについて3. テーマのカスタマイズについて4. PHPの基礎知識(決まり事とよく使う事)5. WordPressのテンプレートタグと条件分岐タグ6. PHP、よく使う6つの構文・関数echo(文字列の出力)、if~else(条件分岐)、 array(配列)、while(繰り返し処理)、 foreach(配列用の繰り返し処理)、function(ユーザー定義関数)7. CMSとしてWordPressで企業サイトを作る 42
  43. 43. さくらWORKS関内(2) WordPressのテンプレートタグ WordPressのテンプレートタグ「テンプレートタグ」とは、入力したデータを出力するモノ。 (WordPress独自)テンプレートタグ一覧は、WordPress Codex 日本語版を見てみましょう!http://wpdocs.sourceforge.jp/テンプレートタグ 43
  44. 44. さくらWORKS関内(2) WordPressのテンプレートタグ WordPressテンプレートタグの具体例・ブログサイト名 ・投稿日付を表示 <?php bloginfo(‘name’); ?> <?php the_time("Y年n月j日"); ?>・ブログURL ・投稿のURL <?php bloginfo(‘url); ?> <?php the_permalink(); ?>・記事のタイトルを表示 ・カスタムフィールドの値を表示 <?php the_title(); ?> <?php echo・記事の本文を表示 get_post_meta($post->ID,‘値 ,true); ?> <?php the_content();?> ・コメントを表示・使用中のテーマのCSS <?php wp_list_comments(); ?> <?php bloginfo(‘stylesheet_url ); ?> 44
  45. 45. さくらWORKS関内(2) WordPressのテンプレートタグ 具体例metaタグ内のCSSをWordPressテーマ化<link rel="stylesheet" type="text/css" media="all" href =“style.css" /> ↓<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( stylesheet_url ); ?>" /> 45
  46. 46. さくらWORKS関内(2) WordPressのテンプレートタグ 具体例サイトタイトルをWordPressテーマ化<h1>○○のサイト</h1> ↓<h1><?php bloginfo(‘name’); ?></h1>WordPressの管理画面の「設定 > 一般」の中の「サイトのタイトル」が表示される。 46
  47. 47. さくらWORKS関内(2) WordPressのテンプレートタグ 具体例記事のタイトルと本文をWordPressテーマ化<h2>今日の夕食</h2>今日のご飯は美味しかった! ↓<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?><h2><?php the_title(); ?><h2><?php the_content(); ?><?php endwhile; ?>WordPressの管理画面の投稿を表示。 47
  48. 48. さくらWORKS関内(2) WordPressのテンプレートタグ 具体例画像のHTMLをWordPressテーマ化<img src=“images/logo.jpg” alt=“” /> ↓<img src=“<?php bloginfo(‘template_directory’); ?>/images/logo.jpg” alt=“” /> 48
  49. 49. さくらWORKS関内(2) WordPressの条件分岐タグ WordPressの条件分岐タグ「条件分岐タグ」とは、表示条件を設定するモノ。 (WordPress独自)条件分岐タグ一覧は、WordPress Codex 日本語版を見てみましょう!http://wpdocs.sourceforge.jp/Conditional_Tags 49
  50. 50. さくらWORKS関内(2) WordPressの条件分岐タグ WordPress条件分岐タグの具体例トップページとその他のページで表示させるものを変える。<?php if ( is_home() || is_front_page() ) : ?>トップページに表示させたいコンテンツ(PHPまたはHTML)<?php else : ?>トップページ以外に表示させたいコンテンツ(PHPまたはHTML)<?php endif; ?> 50
  51. 51. さくらWORKS関内(2) 目次0. 自己紹介1. WordPressのカスタマイズの前提2. WordPressのテーマについて3. テーマのカスタマイズについて4. PHPの基礎知識(決まり事とよく使う事)5. WordPressのテンプレートタグと条件分岐タグ6. PHP、よく使う6つの構文・関数echo(文字列の出力)、if~else(条件分岐)、 array(配列)、while(繰り返し処理)、 foreach(配列用の繰り返し処理)、function(ユーザー定義関数)7. CMSとしてWordPressで企業サイトを作る 51
  52. 52. さくらWORKS関内(2) PHPその1 echo(文字列の出力) PHPその1 echo(文字列の出力)「echo」は、文字列を出力します。 <?php <?php echo “東京都北区”; $tokyo = “東京都”; ?> echo $tokyo . “北区”; →東京都北区 ?> →東京都北区「”◯◯”」で囲んだ文字列の中に変数を入れると変数の値が表示される。「’◯◯’」で囲んだ文字列は変数名がそのまま表示される。「 . 」は結合。 52
  53. 53. さくらWORKS関内(2) PHPその1 echo(文字列の出力) PHPその1 echo(文字列の出力) カスタムフィールドを出力する WordPressのテンプレートタグ例:<?php echo get_post_meta($post->ID,address,true); ?> カスタムフィールドに 入力した住所を 表示しています。 53
  54. 54. さくらWORKS関内(2) PHPその2 if~else(条件分岐) PHPその2 if~else(条件分岐)「if」は、条件式が当てはまる場合のみ処理を実行します。「if~else」は、ifで条件式が該当する時に処理を実行して、elseで条件式が該当しない時に処理を実行します。 if ( 条件 ) { 実行内容 } 54
  55. 55. さくらWORKS関内(2) PHPその2 if~else(条件分岐) PHPその2 if~else(条件分岐)例: WordPressの条件分岐タグ<?php if ( in_category(31) ): ?><div id="tenki2">兵庫県の天気</div> 兵庫県カテゴリー<?php echo do_shortcode([tenki area="82"]); ?> の場合は、<?php endif; ?> 兵庫県の天気を 自動表示する。 ショートコード 55
  56. 56. さくらWORKS関内(2) PHPその2 if~else(条件分岐) PHPその2 if~else(条件分岐) WordPressの条件分岐タグ例:<?php if ( is_front_page() ) { ?><h2 class="entry-title"><?php the_title(); ?></h2><?php } else { ?><h1 class="entry-title"><?php the_title(); ?></h1><?php } ?> トップページの時は、h2タグで表示して、 それ以外の時は、h1タグで表示する。 56
  57. 57. さくらWORKS関内(2) PHPその2 if~else(条件分岐) 「Twenty Ten」 loop-page.phpで解説<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php if ( is_front_page() ) { ?> <h2 class="entry-title"><?php the_title(); ?></h2> <?php } else { ?> <h1 class="entry-title"><?php the_title(); ?></h1> <?php } ?> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( before => <div class="page-link"> . __( Pages:, twentyten ), after => </div> ) ); ?> <?php edit_post_link( __( Edit, twentyten ), <span class="edit-link">, </span> ); ?> </div><!-- .entry-content --> </div><!-- #post-## --> <?php comments_template( , true ); ?><?php endwhile; // end of the loop. ?> 57
  58. 58. さくらWORKS関内(2) PHPその3 array(配列) PHPその3 array(配列)「array」は、配列を作成します。例:<?php$my_query = new WP_Query(array( cat => 55, posts_per_page => 10, カテゴリーIDが55の記事の、 orderby => date, 最新10件を、日付を元に、 order => DESC 日付の新しい記事が上に)); 表示されるように、?> 配列を作成しています。 58
  59. 59. さくらWORKS関内(2) PHPその4 while(繰り返し処理) PHPその4 while(繰り返し処理)「while」は、繰り返し処理を実現する処理です。 while ( 条件 ) { 実行内容 } 59
  60. 60. さくらWORKS関内(2) PHPその4 while(繰り返し処理) PHPその4 while(繰り返し処理)例:<ul><?php while($my_query->have_posts()) : $my_query->the_post(); ?><li><b><?php the_time("Y年n月j日"); ?></b> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li><?php endwhile; ?></ul> WordPressのテンプレートタグ 新着情報を日付を入れて 表示しています。 60
  61. 61. さくらWORKS関内(2) PHPその5 foreach(配列用の繰り返し処理) PHPその5 foreach(配列用の繰り返し処理)「foreach」は、配列の時に繰り返し処理を実現します。 foreach ( 配列 as 変数 ) { 実行内容 } 61
  62. 62. さくらWORKS関内(2) PHPその5 foreach(配列用の繰り返し処理) PHPその5 foreach(配列用の繰り返し処理)例:foreach($gazou_api_xml->Result as $gazou_output) {echo <div class="gazou2">;echo <img src=" . $gazou_output->Url /> . ” ;echo </div>; } APIで自動生成した、 キーワードに関連した 画像を、 配列で組み立てて、 上位6件を一覧表示 しています。 62
  63. 63. さくらWORKS関内(2) PHPその6 function(ユーザー定義関数) PHPその6 function(ユーザー定義関数)「function」は、自分で定義する関数を作成します。WordPressでは、プラグインを作成する場合や、テーマのfunctions.phpに記述することが多いです。例:<?phpfunction tenki1 ( $atts ) {ココにlivedoorの天気APIの記述を書く} [tenki area="82"]add_shortcode( tenki, tenki1 ); とショートコードを書くと、 兵庫県の天気が自動表示される。 63
  64. 64. さくらWORKS関内(2) その他のPHPの関数その他のPHPの関数defineincludesimplexml_load_filevar_dumphtmlspecialchars・・・など、使うケースが多いPHPですので、調べてみて、知っておくと便利です。 64
  65. 65. さくらWORKS関内(2) 目次0. 自己紹介1. WordPressのカスタマイズの前提2. WordPressのテーマについて3. テーマのカスタマイズについて4. PHPの基礎知識(決まり事とよく使う事)5. WordPressのテンプレートタグと条件分岐タグ6. PHP、よく使う6つの構文・関数echo(文字列の出力)、if~else(条件分岐)、 array(配列)、while(繰り返し処理)、 foreach(配列用の繰り返し処理)、function(ユーザー定義関数)7. CMSとしてWordPressで企業サイトを作る 65
  66. 66. さくらWORKS関内(2) CMSとして企業サイトを作る 投稿と固定ページ投稿 固定ページ・時系列の記事 ・時系列ではなく、順序でソート・カテゴリー&タグなどで分類 ・カテゴライズは無し・投稿間で親子関係は無し ・階層化(親と子)構造が可能・投稿毎の専用テンプレートの ・投稿毎の専用テンプレートの 選択は不可 選択が可能例: 例:新着情報、制作実績 会社概要、採用情報、 お問い合わせ 66
  67. 67. さくらWORKS関内(2) CMSとして企業サイトを作る 企業サイト構成の具体例 トップページ新着情報 制作実績 会社概要 採用情報 お問い合わせ 個人情報 サイトマップ ニュース1 事例A 企業理念 職種1 ニュース2 事例B 代表挨拶 職種2 固定ページ ニュース3 事例C 沿革 カテゴリー ニュース4 事例D 投稿 67
  68. 68. さくらWORKS関内(2) CMSとして企業サイトを作る カテゴリーの編集を行う(1)最も利用頻度の高いカテゴリーをデフォルトカテゴリーとして設定。例:未分類→新着情報(news)(2)追加のカテゴリーを設定。例:制作実績(case)(3)必要に応じて、子カテゴリーを作成。 68
  69. 69. さくらWORKS関内(2) CMSとして企業サイトを作る 固定ページの作成を行う(1)階層ごとに作ると分かりやすい。(2)順序のナンバリングは、10 or 100 など、間を空けて、後で追加がしやすいように工夫する。(3)必要に応じて、ページごとに、デザインのテンプレートを用意する。 69
  70. 70. さくらWORKS関内(2) CMSとして企業サイトを作る 管理画面の一般設定を行う投稿設定 投稿入力欄の大きさを、20行~30行にすると、編集が便利。ディスカッション 投稿のデフォルト設定 「新しい投稿へのコメントを許可する」のチェックを外す。 コメント表示条件 「管理者の承認を常に必要とする」にチェックを入れる。アバター 「アバターを表示しない」を選択 70
  71. 71. さくらWORKS関内(2) CMSとして企業サイトを作る 管理画面の一般設定を行うパーマリンク設定 非常に重要。URLをどのようにするかを設定する。 サイト運営の始めに決定しておくべき。 71
  72. 72. さくらWORKS関内(2) CMSとして企業サイトを作る ユーザー権限の付与を行う管理画面の「ユーザー」から、企業担当者用に新規ユーザーアカウントを追加する。その際に、「管理者」「編集者」「投稿者」「寄稿者」「購読者」のどの権限を付与するかを、予め考えておく。権限は、左に行くほど強くなるので、どこまでを企業担当者が担当するのかを予め決めておく。 72
  73. 73. さくらWORKS関内(2) CMSとして企業サイトを作る カテゴリ別に新着5件を表示する具体例<div id="topcat1"><?php$my_query = new WP_Query(array( cat => 1, posts_per_page => 5, orderby => date, order => DESC));?><ul><?php while($my_query->have_posts()) : $my_query->the_post(); ?><li><b><?php the_time("Y年n月j日"); ?></b> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li><?php endwhile; ?></ul></div><!-- #topcat1 --><div class="top-right"> <a href="<?php echo home_url( / ); ?>category/news/">今までのNews一覧</a></div> 73
  74. 74. さくらWORKS関内(2) CMSとして企業サイトを作る プラグイン ・Welcart ショッピングサイト構築・Contact Form 7 ・BuddyPress お問い合わせメールフォームを作成 SNS構築・Ktai Style ・Subscribe2 日本の携帯電話対応 メールマガジン構築・PS Auto Sitemap ・Admin SSL サイトマップを自動で作成 SSL対応・Custom Field Template ・WP Super Cache カスタムフィールドのテンプレートを簡単に設定 キャッシュ生成、表示の高速化 その企業ごとのニーズをヒアリングして、 必要に応じたプラグインを入れる! 74
  75. 75. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会 調べ方(インターネットで調べる編)・WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/ (英語版のWordPressのCodexを日本語化している)・WordPressのフォーラムに質問する。 http://ja.forums.wordpress.org/・その他、「WordPress (調べたい事)」で検索する。 75
  76. 76. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会 調べ方(書籍で調べる編)・WordPressに関する本は、十数冊、出版されている。 WordPressのバージョンが2系だった頃の情報は 古い場合があるので、3系以降の本を参考にする。 具体的には、2010年6月以降出版の本を参考にする。 amazonや楽天で、出版日付順などでソートしてみる。・書籍は、初心者向け、技術者向け、テーマカスタマイズ に特化、プラグインに特化、など、色々。 76
  77. 77. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会 調べ方(無料で人に聞いてみる編)・WordPressは、カンファレンスや勉強会が盛んで、 その多くは無料や場所代だけなので、参加してみる。 WEB業界やIT業界の人間も多く参加しているので、 情報交換や交流には、最適な場。・WordPressのカンファレンスや勉強会としては、 (1)WordCamp、(2)WordBench、 (3)OSC(オープンソースカンファレンス)などが あります。 77
  78. 78. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会 調べ方(無料で人に聞いてみる編)・WordPressの日本語公式サイトのイベントカレンダー・IT勉強会カレンダー・ATND・WordBenchなどで、IT関係のカンファレンスや勉強会を探すことが可能です。 78
  79. 79. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会 開発プロジェクト・WordPress 日本語作成チーム http://groups.google.com/group/wp-ja-pkg・日本語版 Codex http://wpdocs.sourceforge.jp/・WordPress Plugins/JSeries http://wppluginsj.sourceforge.jp/ 79
  80. 80. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会WordPressのコミュニティ活動まずは、全国各地で行われているWordPressの集まりのご紹介 80
  81. 81. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会 WordCamp ・ユーザー・開発者が集うイベント ・世界40以上の都市で開催 ・世界中で150回以上の開催実績 ・日本では年に2~3回 ・今までに 東京・京都・福岡・横浜・名古屋http://japan.wordcamp.org/ 81
  82. 82. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会 WordCamp イベント参加者 約400人 WordPressに関する セッションやワークショップも多数。 スタッフもたくさん! 当日だけお手伝いも大歓迎!(WordCamp横浜スタッフの集合写真) 82
  83. 83. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会 WordCampWordCamp名古屋 開催決定!2011年8月27日(土曜日) 公式サイトも現在作成中! 詳細は、WordCamp神戸 http://japan.wordcamp.org/2011年9月11日(日曜日) などから、ご確認ください。 83
  84. 84. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会 WordBench ・各地域のユーザーコミュニティ ・現在、全国各地 約40地域 ・毎月、日本のどこかで勉強会や 交流会を開催 ・BuddyPressプラグインによる オープンSNS ・写真部、英語部、料理部、http://wordbench.org/ もくもく部なども 84
  85. 85. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会WordBench写真部 ・一眼レフカメラ、写真好きが多い ・写真を撮る旅行も 85
  86. 86. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会WordBench料理部 ・料理を作ったり ・料理を食べに行ったり 86
  87. 87. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会 WordBenchもくもく部・WordPress に関するワークショップ・サイトのテーマ改良/プラグイン作成/ WordPressドキュメントの翻訳/写真作品の仕上げ等 87
  88. 88. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会 オープンソースカンファレンス(OSC)(オープンソースカンファレンス2011 Tokyo/Springの出展写真) 全国各地のオープンソースカンファレンス(OSC)に ブース出展&セミナー発表 88
  89. 89. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会 WordPressのイベントの探し方・WordPressの日本語公式サイトのイベントカレンダー・WordBenchのサイト・IT勉強会カレンダー・ATNDなどで、WordPress関連イベントを探すことができます。 89
  90. 90. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会 WordPressのコミュニティ活動WordPressのコミュニティでは、このように、実際に集まるイベントや勉強会も多くて、とても交流が盛んです。もちろん、インターネット上でも、オープンソースを楽しみつつ、貢献! 90
  91. 91. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会 WordPress 日本語作成チームhttp://groups.google.com/group/wp-ja-pkgWordPressのコアファイルを日本語化(moファイル、poファイルの作成)、日本ユーザー向けパッケージの配布やサポートを行う。 91
  92. 92. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会 日本語版 Codexhttp://wpdocs.sourceforge.jp/WordPressの公式オンラインマニュアル(ドキュメント)。英語版の公式オンラインマニュアルの和訳や日本語ユーザ向けのノウハウ・資料などの共有。Wiki作っていて、誰でも加筆編集できます。 92
  93. 93. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会 WordPress Plugins/JSerieshttp://wppluginsj.sourceforge.jp/日本特有の文化(Webサービスや携帯電話等)にそったプラグインや、マルチバイト圏に対応したプラグインの作成・配布。 93
  94. 94. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会WordPressフォーラム http://ja.forums.wordpress.org/ WordPressに関する質問や話題を話し合う場。 94
  95. 95. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会WordPants http://wordpants.org/ WordPressに関する 電子書籍版の雑誌。 1年に数回の出版。 95
  96. 96. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会WeeklyCMS http://www.weeklycms.net/ 色々なCMSについて、 USTREAM放送。 毎週土曜日午前11時~、約1時間。 WordPressをテーマにした回も、 1ヶ月に一度くらいの割合で放送。 96
  97. 97. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会 WordPressで繋がろう!WordPressのコミュニティでは、インターネット上はもちろん、実際の情報交換や交流もあって、楽しい!WordPressのプラグイン開発者やテーマ開発者のお話を生で聞くことができます。IT関係者と知り合うにも、とても良い場です!その後のご縁も広がります。 97
  98. 98. さくらWORKS関内(2) WordPressの情報の調べ方や勉強会 WordPressで繋がろう! WordPressのコミュニティに、ぜひご参加を!まずは、WordPressイベントや勉強会に出てみませんか?インターネット上のコミュニティにも、ぜひご登録ください! http://ja.wordpress.org/ 98
  99. 99. さくらWORKS関内(2) 最後に今後のお問い合わせなど何かありましたら、Twitter: @khoshinoMail: mail@communitycom.jpURL: http://www.communitycom.jp/ http://wp3.jp/などに、ご連絡ください。ありがとうございました! 株式会社コミュニティコム 星野 邦敏 99

×