0
自分だけの
WordPress
テーマを作る




2011/1/8
フリーランスシステムエンジニア
上村 崇 @uemera
軽く自己紹介
軽く自己紹介

     しがないフリーランスSE
軽く自己紹介

     しがないフリーランスSE

     組込みエンジニア(カーナビ)
軽く自己紹介

     しがないフリーランスSE

     組込みエンジニア(カーナビ)

     副業で少しWeb
このプレゼンは
・去年、別の場所で発表しました。
・去年、別の場所で発表しました。

・30分ほどのボリュームがあります。
・去年、別の場所で発表しました。

・30分ほどのボリュームがあります。

・昼にビビンパを食べて舌をヤケドしま
 した。
それでは本題
WordPressとは
ブログツールの一つ
PHPで作られています
MySQLを使っています
ブログツール比較

           日本



           全世界
CMS比較

        日本



        全世界
テーマってどんなの?
テーマは無数にあります
自分好みのテーマを作れれば素敵ですね!
もちろん
HTML
スタイルシート
の知識は必要ですが
必要な知識は3つ
WordPress
                    テンプレート
ディレクトリ構成     PHP   テンプレートタグ
1
WordPressディレクトリ構成
テーマは2つ     ※WordPress 2.x での話




  themes
WordPress3.xはテーマ1つ
2   PHPの基本
まず、普通のHTMLファイルは
こんなのです。
index.html
<html>
   <head>
      <title>文書のタイトル</title>
   </head>
   <body>
      文書の本文
   </body>
</html>
同じことをPHPでやると、
こうなります。
index.php
<?php
echo "<html>";
echo " <head>";
echo "     <title>文書のタイトル</title>";
echo " </head>";
echo " <body>";
echo "...
別の方法もあります。
index.php
<?php
   $title      = "文書のタイトル";
   $contents = "文書の本文";
?>
<html>
   <head>
      <title><?php echo $title ?><...
つまり、
PHPを書くときは<?php ?>
で囲む
3   テンプレートと
    テンプレートタグ
ブロックに分けて考えてみます
header


main       sidebar
contents




footer
コードで表すとこうなります→
index.php
<?php get_header(); ?>


      <?php while (have_posts()) : the_post(); ?>

      <?php endwhile; ?>


<?php get...
index.php
<?php get_header(); ?>


      <?php while (have_posts()) : the_post(); ?>

      <?php endwhile; ?>


<?php get...
index.php
<?php get_header(); ?>


      <?php while (have_posts()) : the_post(); ?>

      <?php endwhile; ?>

          ...
index.php
<?php get_header(); ?>


      <?php while (have_posts()) : the_post(); ?>

      <?php endwhile; ?>

          ...
index.php
<?php get_header(); ?>


      <?php while (have_posts()) : the_post(); ?>

      <?php endwhile; ?>

          ...
index.php
<?php get_header(); ?>


      <?php while (have_posts()) : the_post(); ?>

      <?php endwhile; ?>

          ...
index.php
<?php get_header(); ?>


      <?php while (have_posts()) : the_post(); ?>

      <?php endwhile; ?>


<?php get...
index.php
<?php get_header(); ?>      header.php
      <?php while (have_posts()) : the_post(); ?>

      <?php endwhile; ...
default


          テンプレート
Headerについて詳しく見てみます。
header
header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
<html xmlns="http://w...
header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
<html xmlns="http://w...
URL    タイトル



      サイトの説明
header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
bloginfoの
<html xmlns...
header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
ドキュメントの場所は?
<html xml...
wordpress codex   検索
次に、WordPressループの説明
index.php(or loop.php)
<?php get_header(); ?>             WordPressループ
                                   (Main Contents)
...
繰り返し

       記事タイトル
日付


本文


          カテゴリ、コメント
WordPressループ
<?php while (have_posts()) : the_post(); ?>
  <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
    <...
WordPressループ
<?php while (have_posts()) : the_post(); ?>
  <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
    <...
WordPressループ
<?php while (have_posts()) : the_post(); ?>
  <div <?php post_class(); ?> id="post-<?php the_ID(); ?>"> タイトル
...
<?php while (have_posts()) : the_post(); ?>


            全部理解
  <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">...
・すべてのコードを理解する必要はない。
・イメージにあったテーマを見つけてきて、
 それをカスタマイズすればよい。
default




          他のファイルは?
← not foundページ
           アーカイブページ
           コメントページ

          ← 共通関数用

          ← 画像一覧ページ
default
           言語関連ファイル
...
← not foundページ
            アーカイブページ
            コメントページ

           ← 共通関数用

           ← 画像一覧ページ
あとは調べれればなんとかなる!
 default...
終わり
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Upcoming SlideShare
Loading in...5
×

Wordpressで自分好みのテーマを作る

4,141

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,141
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
20
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Wordpressで自分好みのテーマを作る"

  1. 1. 自分だけの WordPress テーマを作る 2011/1/8 フリーランスシステムエンジニア 上村 崇 @uemera
  2. 2. 軽く自己紹介
  3. 3. 軽く自己紹介 しがないフリーランスSE
  4. 4. 軽く自己紹介 しがないフリーランスSE 組込みエンジニア(カーナビ)
  5. 5. 軽く自己紹介 しがないフリーランスSE 組込みエンジニア(カーナビ) 副業で少しWeb
  6. 6. このプレゼンは
  7. 7. ・去年、別の場所で発表しました。
  8. 8. ・去年、別の場所で発表しました。 ・30分ほどのボリュームがあります。
  9. 9. ・去年、別の場所で発表しました。 ・30分ほどのボリュームがあります。 ・昼にビビンパを食べて舌をヤケドしま した。
  10. 10. それでは本題
  11. 11. WordPressとは
  12. 12. ブログツールの一つ
  13. 13. PHPで作られています
  14. 14. MySQLを使っています
  15. 15. ブログツール比較 日本 全世界
  16. 16. CMS比較 日本 全世界
  17. 17. テーマってどんなの?
  18. 18. テーマは無数にあります
  19. 19. 自分好みのテーマを作れれば素敵ですね!
  20. 20. もちろん HTML スタイルシート の知識は必要ですが
  21. 21. 必要な知識は3つ
  22. 22. WordPress テンプレート ディレクトリ構成 PHP テンプレートタグ
  23. 23. 1 WordPressディレクトリ構成
  24. 24. テーマは2つ ※WordPress 2.x での話 themes
  25. 25. WordPress3.xはテーマ1つ
  26. 26. 2 PHPの基本
  27. 27. まず、普通のHTMLファイルは こんなのです。
  28. 28. index.html <html> <head> <title>文書のタイトル</title> </head> <body> 文書の本文 </body> </html>
  29. 29. 同じことをPHPでやると、 こうなります。
  30. 30. index.php <?php echo "<html>"; echo " <head>"; echo " <title>文書のタイトル</title>"; echo " </head>"; echo " <body>"; echo " 文書の本文"; echo " </body>"; echo "</html>"; ?>
  31. 31. 別の方法もあります。
  32. 32. index.php <?php $title = "文書のタイトル"; $contents = "文書の本文"; ?> <html> <head> <title><?php echo $title ?></title> </head> <body> <?php echo $contents ?> </body> </html>
  33. 33. つまり、 PHPを書くときは<?php ?> で囲む
  34. 34. 3 テンプレートと テンプレートタグ
  35. 35. ブロックに分けて考えてみます
  36. 36. header main sidebar contents footer
  37. 37. コードで表すとこうなります→
  38. 38. index.php <?php get_header(); ?> <?php while (have_posts()) : the_post(); ?> <?php endwhile; ?> <?php get_sidebar(); ?> <?php get_footer(); ?>
  39. 39. index.php <?php get_header(); ?> <?php while (have_posts()) : the_post(); ?> <?php endwhile; ?> <?php get_sidebar(); ?> WordPressループ <?php get_footer(); ?> (Main Contents) ※WordPress3ではloop.php内にあり
  40. 40. index.php <?php get_header(); ?> <?php while (have_posts()) : the_post(); ?> <?php endwhile; ?> header <?php get_sidebar(); ?> <?php get_footer(); ?> main side contents bar footer
  41. 41. index.php <?php get_header(); ?> <?php while (have_posts()) : the_post(); ?> <?php endwhile; ?> header <?php get_sidebar(); ?> <?php get_footer(); ?> main side contents bar footer
  42. 42. index.php <?php get_header(); ?> <?php while (have_posts()) : the_post(); ?> <?php endwhile; ?> header <?php get_sidebar(); ?> <?php get_footer(); ?> main Side contents bar footer
  43. 43. index.php <?php get_header(); ?> <?php while (have_posts()) : the_post(); ?> <?php endwhile; ?> header <?php get_sidebar(); ?> <?php get_footer(); ?> main side contents bar footer
  44. 44. index.php <?php get_header(); ?> <?php while (have_posts()) : the_post(); ?> <?php endwhile; ?> <?php get_sidebar(); ?> <?php get_footer(); ?> テンプレートタグ WordPress組込の関数
  45. 45. index.php <?php get_header(); ?> header.php <?php while (have_posts()) : the_post(); ?> <?php endwhile; ?> <?php get_sidebar(); ?> sidebar.php <?php get_footer(); ?> footer.php
  46. 46. default テンプレート
  47. 47. Headerについて詳しく見てみます。
  48. 48. header
  49. 49. header.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginf <title> <?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?> </title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css” /> <style type="text/css”> #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-ltr.jpg“) } </style> <?php wp_head(); ?> </head> <body> <div id="page"> <div id="header" role="banner"> <div id="headerimg"> <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a> <div class="description"><?php bloginfo('description'); ?></div> </div> </div>
  50. 50. header.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginf <title> <?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?> </title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css” /> <style type="text/css”> #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-ltr.jpg“) } </style> <?php wp_head(); ?> </head> <body> URL タイトル <div id="page"> <div id="header" role="banner"> <div id="headerimg"> <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a> <div class="description"><?php bloginfo('description'); ?></div> </div> </div> サイトの説明
  51. 51. URL タイトル サイトの説明
  52. 52. header.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm bloginfoの <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head> マニュアルを見てみる bloginfo('html_type'); ?>; charset=<?php bloginf <meta http-equiv="Content-Type" content="<?php <title> <?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?> </title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css” /> <style type="text/css”> #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-ltr.jpg“) } </style> <?php wp_head(); ?> </head> <body> <div id="page"> <div id="header" role="banner"> <div id="headerimg"> <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a> <div class="description"><?php bloginfo('description'); ?></div> </div> </div>
  53. 53. header.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm ドキュメントの場所は? <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginf <title> <?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?> </title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css” /> <style type="text/css”> #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-ltr.jpg“) } </style> <?php wp_head(); ?> </head> <body> <div id="page"> <div id="header" role="banner"> <div id="headerimg"> <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a> <div class="description"><?php bloginfo('description'); ?></div> </div> </div>
  54. 54. wordpress codex 検索
  55. 55. 次に、WordPressループの説明
  56. 56. index.php(or loop.php) <?php get_header(); ?> WordPressループ (Main Contents) <?php while (have_posts()) : the_post(); ?> <?php endwhile; ?> header <?php get_sidebar(); ?> <?php get_footer(); ?> main side contents bar footer
  57. 57. 繰り返し 記事タイトル 日付 本文 カテゴリ、コメント
  58. 58. WordPressループ <?php while (have_posts()) : the_post(); ?> <div <?php post_class(); ?> id="post-<?php the_ID(); ?>"> <h2><a href="<?php the_permalink() ?>“ ><?php the_title(); ?></a></h2> <small><?php the_time(__('F jS, Y', 'kubrick')) ?></small> <div class="entry"> <?php the_content(__('Read the rest of this entry &raquo;', 'kubrick')); ?> </div> <p class="postmetadata"> <?php printf(__('Posted in %s', 'kubrick'), get_the_category_list(', ')); ?> | <?php edit_post_link(__('Edit', 'kubrick'), '', ' | '); ?> <?php comments_popup_link (__('No Comments »', 'kubrick'), __('1 Comment »', 'kubrick'), __('% Comments »', 'kubrick'), '', __('Comments Closed', 'kubrick') ); ?> </p> </div> <?php endwhile; ?>
  59. 59. WordPressループ <?php while (have_posts()) : the_post(); ?> <div <?php post_class(); ?> id="post-<?php the_ID(); ?>"> <h2><a href="<?php the_permalink() ?>“ ><?php the_title(); ?></a></h2> 投稿がある間Loopする <small><?php the_time(__('F jS, Y', 投稿1つ分の準備 'kubrick')) ?></small> <div class="entry"> <?php the_content(__('Read the rest of this entry &raquo;', 'kubrick')); ?> </div> 投稿の数だけループ <p class="postmetadata"> <?php printf(__('Posted in %s', 'kubrick'), get_the_category_list(', ')); ?> | <?php edit_post_link(__('Edit', 'kubrick'), '', ' | '); ?> <?php comments_popup_link (__('No Comments »', 'kubrick'), __('1 Comment »', 'kubrick'), __('% Comments »', 'kubrick'), '', __('Comments Closed', 'kubrick') ); ?> </p> </div> <?php endwhile; ?>
  60. 60. WordPressループ <?php while (have_posts()) : the_post(); ?> <div <?php post_class(); ?> id="post-<?php the_ID(); ?>"> タイトル <h2><a href="<?php the_permalink() ?>“ ><?php the_title(); ?></a></h2> <small><?php the_time(__('F jS, Y', 'kubrick')) ?></small> <div class="entry"> <?php the_content(__('Read the rest of this entry &raquo;', 'kubrick')); ?> </div> <p class="postmetadata"> 本文 <?php printf(__('Posted in %s', 'kubrick'), get_the_category_list(', ')); ?> | <?php edit_post_link(__('Edit', 'kubrick'), '', ' | '); ?> <?php comments_popup_link (__('No Comments »', 'kubrick'), __('1 Comment »', 'kubrick'), __('% Comments »', 'kubrick'), '', __('Comments Closed', 'kubrick') ); ?> </p> </div> <?php endwhile; ?>
  61. 61. <?php while (have_posts()) : the_post(); ?> 全部理解 <div <?php post_class(); ?> id="post-<?php the_ID(); ?>"> タイトル <h2><a href="<?php the_permalink() ?>“ ><?php the_title(); ?></a></h2> the_time しないと <small><?php (__('F jS, Y', 'kubrick')) ?></small> <div class="entry"> the_content <?php (__('Read the rest of this entry &raquo;', 'kubrick')); ?> いけないの? </div> 本文 <p class="postmetadata"> get_the_category_list <?php printf(__('Posted in %s', 'kubrick'), (', ')); ?> | <?php edit_post_link(__('Edit', 'kubrick'), '', ' | '); ?> <?php comments_popup_link (__('No Comments »', 'kubrick'), __('1 Comment »', 'kubrick'), __('% Comments »', 'kubrick'), '', __('Comments Closed', 'kubrick') ); ?> </p> </div> <?php endwhile; ?>
  62. 62. ・すべてのコードを理解する必要はない。 ・イメージにあったテーマを見つけてきて、 それをカスタマイズすればよい。
  63. 63. default 他のファイルは?
  64. 64. ← not foundページ アーカイブページ コメントページ ← 共通関数用 ← 画像一覧ページ default 言語関連ファイル ← リンクページ ← 特定の1ページ ← スクリーンショット ← 検索ページ ← 1投稿分の詳細ページ
  65. 65. ← not foundページ アーカイブページ コメントページ ← 共通関数用 ← 画像一覧ページ あとは調べれればなんとかなる! default 言語関連ファイル ← リンクページ ← 特定の1ページ ← スクリーンショット ← 検索ページ ← 1投稿分の詳細ページ
  66. 66. 終わり
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×