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

1. 自分だけの WordPress テーマを作る 2011/1/8 フリーランスシステムエンジニア上村崇 @uemera

2. 軽く自己紹介

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

4. 軽く自己紹介しがないフリーランスSE 組込みエンジニア(カーナビ)

5. 軽く自己紹介しがないフリーランスSE 組込みエンジニア(カーナビ) 副業で少しWeb

6. このプレゼンは

7. ・去年、別の場所で発表しました。

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

9. ・去年、別の場所で発表しました。・30分ほどのボリュームがあります。・昼にビビンパを食べて舌をヤケドしました。

10. それでは本題

11. WordPressとは

12. ブログツールの一つ

13. PHPで作られています

14. MySQLを使っています

15. ブログツール比較日本全世界

16. CMS比較日本全世界

17. テーマってどんなの?

18. テーマは無数にあります

19. 自分好みのテーマを作れれば素敵ですね!

20. もちろん HTML スタイルシートの知識は必要ですが

21. 必要な知識は3つ

22. WordPress テンプレートディレクトリ構成 PHP テンプレートタグ

23. 1 WordPressディレクトリ構成

24. テーマは2つ ※WordPress 2.x での話 themes

25. WordPress3.xはテーマ1つ

26. 2 PHPの基本

27. まず、普通のHTMLファイルはこんなのです。

28. index.html <html> <head> <title>文書のタイトル</title> </head> <body> 文書の本文 </body> </html>

29. 同じことをPHPでやると、こうなります。

30. index.php <?php echo "<html>"; echo " <head>"; echo " <title>文書のタイトル</title>"; echo " </head>"; echo " <body>"; echo " 文書の本文"; echo " </body>"; echo "</html>"; ?>

31. 別の方法もあります。

32. index.php <?php $title = "文書のタイトル"; $contents = "文書の本文"; ?> <html> <head> <title><?php echo $title ?></title> </head> <body> <?php echo $contents ?> </body> </html>

33. つまり、 PHPを書くときは<?php ?> で囲む

34. 3 テンプレートとテンプレートタグ

35. ブロックに分けて考えてみます

36. header main sidebar contents footer

37. コードで表すとこうなります→

38. index.php <?php get_header(); ?> <?php while (have_posts()) : the_post(); ?> <?php endwhile; ?> <?php get_sidebar(); ?> <?php get_footer(); ?>

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. 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. 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. index.php <?php get_header(); ?> <?php while (have_posts()) : the_post(); ?> <?php endwhile; ?> <?php get_sidebar(); ?> <?php get_footer(); ?> テンプレートタグ WordPress組込の関数

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. default テンプレート

47. Headerについて詳しく見てみます。

48. header

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('«', 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. 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('«', 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. URL タイトルサイトの説明

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('«', 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. 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('«', 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. wordpress codex 検索

55. 次に、WordPressループの説明

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. 繰り返し記事タイトル日付本文カテゴリ、コメント

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 »', '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. 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 »', '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. 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 »', '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. <?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 »', '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. ・すべてのコードを理解する必要はない。・イメージにあったテーマを見つけてきて、それをカスタマイズすればよい。

63. default 他のファイルは？

64. ← not foundページアーカイブページコメントページ ← 共通関数用 ← 画像一覧ページ default 言語関連ファイル ← リンクページ ← 特定の1ページ ← スクリーンショット ← 検索ページ ← 1投稿分の詳細ページ

65. ← not foundページアーカイブページコメントページ ← 共通関数用 ← 画像一覧ページあとは調べれればなんとかなる! default 言語関連ファイル ← リンクページ ← 特定の1ページ ← スクリーンショット ← 検索ページ ← 1投稿分の詳細ページ

66. 終わり

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

You are reading a preview.

Check these out next

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

More Related Content

Slideshows for you (20)

Viewers also liked (12)

Similar to Wordpressで自分好みのテーマを作る (20)

More from Takashi Uemura (13)

Recently uploaded (20)