Your SlideShare is downloading. ×
0
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

4,117

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 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. 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. 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('&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. 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. 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('&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. 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. 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 &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. 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. 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. <?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. ・すべてのコードを理解する必要はない。 ・イメージにあったテーマを見つけてきて、 それをカスタマイズすればよい。
  • 63. default 他のファイルは?
  • 64. ← not foundページ アーカイブページ コメントページ ← 共通関数用 ← 画像一覧ページ default 言語関連ファイル ← リンクページ ← 特定の1ページ ← スクリーンショット ← 検索ページ ← 1投稿分の詳細ページ
  • 65. ← not foundページ アーカイブページ コメントページ ← 共通関数用 ← 画像一覧ページ あとは調べれればなんとかなる! default 言語関連ファイル ← リンクページ ← 特定の1ページ ← スクリーンショット ← 検索ページ ← 1投稿分の詳細ページ
  • 66. 終わり

×