• Like
  • Save
WordPressテーマをつくろう
Upcoming SlideShare
Loading in...5
×

WordPressテーマをつくろう

  • 2,867 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,867
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
11

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テーマをつくろう @mokeco_
  • 2. XAMPPへのインストールWindowsマシンでWordPressを動かしてみる!
  • 3. WordPressのインストール 設置場所 C:¥xampp¥htdocs¥wordpress ローカルURL http://127.0.0.1/wordpress/ または http://localhost/wordpress/ 管理画面 http://127.0.0.1/wordpress/wp-admin/ または http://localhost/wordpress/wp-admin/
  • 4. 初期設定管理画面にログインし、初期設定をします DBの設定を完了後、 http://127.0.0.1/wordpress/wp-admin/ に アクセス ID、パスワード、メールアドレスを入力し、設定 ▶インターネット上のサーバではここで登録通知メールが届きます 管理画面にログインし、必要な項目の設定をする
  • 5. 初期設定wp-config.phpの設定 デバッグモードの設定を true にする define(WP_DEBUG, true); テーマの開発時は、WP_DEBUGを使用するよう推奨されています。 この設定をしないと、開発中にエラーが発生した場合に画面が真っ白に なり、エラーの原因が表示されないことがあります。
  • 6. テーマ構成テーマを作るときに覚えておく基本的なこと
  • 7. テーマ構成テーマを設置するディレクトリ テーマ用フォルダを作成する wp-content/themes …というディレクトリの中に、自作テーマのフォルダを入れる wp-content/themes/wbszok2 (テーマフォルダが wbszok2 の場合)
  • 8. テーマ構成 テーマ作成に必要な部品たち /images ・・・ 画像格納フォルダ footer.php ・・・ フッター用 functions.php ・・・ 様々な設定(関数定義)をするためのファイル header.php ・・・ ヘッダー用 index.php ・・・ トップページ用 sidebar.php ・・・ サイドバー用 style.css ・・・ スタイルシート記述用(必須) screenshot.png ・・・ テーマ一覧で表示されるサムネイル page.php ・・・ 「固定ページ」専用表示用 single.php ・・・ 「単一記事」専用表示用 comments.php ・・・ 「コメント」表示用 search.php ・・・ 「検索結果」専用表示用 など... 今回のセッションではcomments.phpの作成は含め ていませんが、WordPress3.xからcomments.phpの ないテーマは非推奨とされています。青…最低限必要なファイル緑、オレンジ…ページごとに表示を変える場合などに必要なファイル
  • 9. 必須作業style.css に記述する魔法の言葉この記述をすることで、テーマフォルダ全体がWordPressのテーマとして認識される@charset "UTF-8";/*Theme Name: wbszok vol.02 //テーマの名前Theme URI: //テーマを配布しているページのURLなどDescription: 第2回WordBenchしずおか用のテンプレート //テーマの説明Author: mokeco. //テーマの作者Author URI: http://do-one.jp/ //テーマの作者のWeb Site*/
  • 10. テンプレートタグテーマを作るときに必要な、WordPress独自タグをご紹介。
  • 11. テンプレートタグ主にheader.phpで使用するテンプレートタグ【サイト名】 <?php bloginfo(‘name’); ?>【サイトのURL】 <?php bloginfo(‘url’); ?>【サイトの説明】 サブタイトルの表示などに使用 <?php bloginfo(‘description’); ?>【使用中のテーマディレクトリ】 テーマディレクトリ内の画像ファイルなどの呼び出し <?php bloginfo(‘template_directory’); ?>
  • 12. テンプレートタグ主にheader.phpで使用するテンプレートタグ【style.cssを読み込み】 <?php bloginfo(stylesheet_url); ?>【裏ワザ?】 このようにすると、「記事タイトル ¦ サイト名」という表記ができます <title><?php wp_title(|,true,right); ?><?php bloginfo(name); ?></title>
  • 13. テンプレートタグ【</head>の直前に…】 プラグインや管理バーで使われているコードなどを呼び出すために次の記述をします <?php wp_head(); ?></head>【</body>の直前に…】 プラグインや管理バーで使われているコードなどを呼び出すために次の記述をします <?php wp_footer(); ?></body>
  • 14. インクルードタグindex.phpなどでテーマ内のテンプレートファイルを読み込む【header.phpを読み込む】 <?php get_header(); ?>【footer.phpを読み込む】 <?php get_footer(); ?>【sidebar.phpを読み込む】 <?php get_sidebar(); ?>
  • 15. 条件分岐タグページごとに表示を変えたい場合などに使用するもの【メインページが表示されている場合】 is_home()【個別投稿ページが表示されている場合】 is_single()【固定ページが表示されている場合】 is_page()◆使用例<?php if ( is_home() ) : ?>トップページです<?php elseif ( is_single() ) : ?>個別投稿のページ(single.php)です<?php else : ?>固定ページ(page.php)です<?php endif ; ?>
  • 16. ループ投稿の中身などを表示するときに必要な処理<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <article class="clearfix"> <header> <h2><?php the_title(); ?></h2> </header> ∼∼省略∼∼ </article><?php endwhile; /*ループ処理終了*/ ?><nav><span class="nav-previous"><?php previous_posts_link(新しい記事へ) ?></span><span class="nav-next"><?php next_posts_link(古い記事へ) ?></span></nav><?php else : ?> 投稿がないときに行う処理<?php endif ; ?>
  • 17. 静的HTMLをWordPress化する1つのHTMLファイルを複製・分割し、WordPressのテンプレートを作ります。
  • 18. 静的HTMLを各部品に分割基本となるHTMLファイル
  • 19. 静的HTMLを各部品に分割ここから生成するのはこの6つ
  • 20. 静的HTMLを各部品に分割
  • 21. 静的HTMLを動的なファイルに...header.phpを生成index.htmlの1行目∼</header>までをheader.phpにコピーする【header.phpの中身】<!DOCTYPE html><html lang="ja"><head> <meta charset="utf-8"> <title>あああ</title> ∼∼省略∼∼ <link rel="stylesheet" href="style.css"></head>
  • 22. 静的HTMLを動的なファイルに...header.phpを生成index.htmlの1行目∼</header>までをheader.phpにコピーする【header.phpの中身】<header id="toppg-header"> <div> <h1>あああ</h1> <p>サブタイトル</p> <nav> <ul> <li>トップページ</li> <li>このサイトについて</li> </ul> </nav> </div></header><!-- /toppg-header -->
  • 23. 静的HTMLを動的なファイルに...header.phpを生成コピーしたファイルにWordPressのテンプレートタグを埋め込む【header.phpの中身】<!DOCTYPE html><html lang="ja"><head> <meta charset="utf-8"> <title><?php wp_title(|,true,right); ?> <?php bloginfo(name); ?></title> ∼∼省略∼∼ <link rel="stylesheet" href="<?php bloginfo(stylesheet_url); ?>"><?php wp_head(); //忘れないで! ?></head>
  • 24. 静的HTMLを動的なファイルに...header.phpを生成コピーしたファイルにWordPressのテンプレートタグを埋め込む【header.phpの中身】<header id="toppg-header"> <div> <h1><?php bloginfo(name); ?></h1> <p><?php bloginfo(description); ?></p> <nav> <ul> <li><a href=“<?php bloginfo(url);?>”>トップページ</li></a> <li><a href="<?php bloginfo(url); ?>/sample-page/">サンプルページ</a></li> </ul> </nav> </div></header><!-- /toppg-header -->
  • 25. 静的HTMLを動的なファイルに...header.phpを生成コピーしたファイルにWordPressのテンプレートタグを埋め込む【サイトタイトルを画像にする場合】 <h1><?php bloginfo(name); ?></h1> <h1><img src=“<?php bloginfo(‘template_directory’); ?>/images/title.png” alt=“<?php bloginfo(‘name’); ?>”></h1>【出力例】http://127.0.0.1/wordpress/wp-content/themes/wbszok2/images/title.png
  • 26. 静的HTMLを動的なファイルに...sidebar.phpを生成index.htmlの中から、サイドバーに関係する部分をコピーする【sidebar.phpの中身】<aside id="side"> あああああああああああああああああああああああああ</aside>
  • 27. 静的HTMLを動的なファイルに...sidebar.phpを生成コピーしたファイルにWordPressのテンプレートタグを埋め込む【sidebar.phpの中身】<aside id="side"> <?php dynamic_sidebar( side-widget ); ?></aside>これだけで、ウィジェットに指定したものがすべてサイドバーに表示される!
  • 28. 静的HTMLを動的なファイルに...sidebar.phpを生成【サイドバーにウィジェットを指定した場合の注意点】ウィジェットにはfunctions.phpのウィジェットエリアの設定で指定したクラスが入ります(後述) <div class=“widget-container”>∼∼</div>【ウィジェットにスタイルを適用する場合の一例】#side ul li{ list-style-type: none ; }#side .widget-container { list-style-type: none ; margin: 10px 10px ; padding: 10px 0 20px ; border-bottom: 1px #ccc solid ; width: 310px ; }
  • 29. 静的HTMLを動的なファイルに...footer.phpを生成index.htmlの中から、フッターの部分をコピーする【footer.phpの中身】<br class="clear"> </div><!-- / content --></div> <!-- /container --><footer id="footer"> <div class="clearfix"> あああ </div><!--clearfix--><p class=“copy”>&copy; 2012 あああ. All rights reserved.</p></footer></body></html>
  • 30. 静的HTMLを動的なファイルに...footer.phpを生成コピーしたファイルにWordPressのテンプレートタグを埋め込む【footer.phpの中身】<br class="clear"> </div><!-- / content --></div> <!-- /container --><footer id="footer"> <div class="clearfix"> <?php dynamic_sidebar( footer-widget ); ?> </div><!--clearfix--><p class=“copy”>&copy; <?php echo date(Y); ?> <?php bloginfo(name); ?>. Allrights reserved.</p></footer><?php wp_footer(); //忘れないで! ?></body></html>
  • 31. 静的HTMLを動的なファイルに...index.phpを生成index.htmlの中から、コンテンツ部分をコピーする【index.phpの中身】<div id="container"> <div id="content"> <div id="main"> <article class="clearfix"> <header> <h2>タイトル</h2> </header> <div class=“article-body”>あいうえおあいうえおあいうえお… </div><!--article-body--> <footer>あああ</footer> </article> </div><!-- /main -->
  • 32. 静的HTMLを動的なファイルに...index.phpを生成コピーしたファイルにWordPressのテンプレートタグを埋め込む【index.phpの中身】<?php get_header(); ?><div id="container"> <div id="content"> <div id="main"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <article class="clearfix"> <header> <h2><a href="<?php the_permalink() ?>" title="<?phpthe_title_attribute(); ?>"><?php the_title(); ?></a> </h2> </header>
  • 33. 静的HTMLを動的なファイルに...index.phpを生成【index.phpの中身(続き)】<div id=“article-body"> <?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?> <?php the_content ( ‘続きを読む’ ) ; ?></div><!--article-body--> functions.phpでアイキャッチ画像を表示<footer> するように設定した場合に必要(後述) <?php the_time( ‘Y年m月d日’ ) ?> /カテゴリー:<?php the_category(, ) ?> /タグ:<?php the_tags( ,, ); ?></footer> <?php endwhile; //ループ終了 ?> <nav> <span class="nav-previous"><?php previous_posts_link(新しい記事へ) ?></span> <span class="nav-next"><?php next_posts_link(古い記事へ) ?></span> </nav>index.phpとsingle.phpで挙動が入れ替わる
  • 34. 静的HTMLを動的なファイルに...index.phpを生成【index.phpの中身(続き)】 <?php else : ?> <h2>記事が見つかりませんでした...</h2> 記事が1件もない <p><?php get_search_form(); ?></p> 場合に表示する<?php endif; ?></div><!-- /main --><?php get_sidebar(); ?><?php get_footer(); ?>
  • 35. 静的HTMLを動的なファイルに...single.php、page.phpを生成single.php及びpage.phpは、index.phpをカスタマイズすることで作成できす。
  • 36. functions.phpで機能拡張便利なfunctions.phpで機能を拡張する
  • 37. functions.phpfunctions.phpに記述する処理functions.phpがなくてもWordPressの基本的な動作はできますが、サイドバーの記述などを簡単にするため、あったほうが便利です。【ウィジェットエリアの設定】register_sidebar( array ( name => __( Side Widget ), ここで指定したスタイルが ウィジェットエリアに適用される id => side-widget, before_widget => <li class="widget-container">, after_widget => </li>, before_title => <h3>, after_title => </h3>, ) );
  • 38. functions.phpfunctions.phpに記述する処理
  • 39. functions.phpfunctions.phpに記述する処理functions.phpがなくてもWordPressの基本的な動作はできますが、サイドバーの記述などを簡単にするため、あったほうが便利です。【アイキャッチ画像をつける】// アイキャッチ画像add_theme_support( post-thumbnails );set_post_thumbnail_size(150, 150, true ); // 幅 150px、高さ 150px
  • 40. functions.phpfunctions.phpに記述する処理
  • 41. 本日のまとめ
  • 42. 本日のまとめ WordPressのインストール 初期設定をする テーマ構成を学ぶ テンプレートタグを学ぶ HTMLファイルをWordPress化する functions.phpで機能拡張
  • 43. ご清聴ありがとうございました