Wordpressスマートフォンテーマ作成
•
4 likes•4,703 views
第5回Wordbench宮崎で、オリジナルスマートフォンテーマ作成のデモンストレーションを行いました。WordPressのテーマ作成の基本から、jQueryMobileの装飾までの内容です。
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Wordpressスマートフォンテーマ作成
Similar to Wordpressスマートフォンテーマ作成 (20)
Wordpressスマートフォンテーマ作成
- 2. © wordbonch.org 自己紹介 1 Facebook@yoshie.nakayama.33 中山 佳重（なかやま よしえ） 株式会社アラタナ フロントエンドチーム コーディング・JavaScript
- 3. © wordbonch.org 本日の流れ 2 • WordPressテーマを新規作成 • jQueryMobileでページをデザイン • jQueryMobileのデザインパターンをかえる • スマホ用にテーマ設定 • まとめと補足
- 6. © wordbonch.org WordPressテーマとは？ 5 • Wordpressサイトデザインのテンプレートファ イルや、画像がまとめられたセットのこと。 • 世界中で公開されているテーマをダウンロー ドすれば、ボタン１つでデザインや、サイト の構造を変えることもできる。
- 9. © wordbonch.org カスタムメニュー機能の時と同様に、出力リストにjQueryMobileの役割（data-role）を割当てます。 カテゴリ一覧 × jQuery Mobile 8 <ul data-role='listview'> <?php wp_list_categories('depth=1&title_li='); ?> </ul> おしゃれ！ ＼(^o^)／ 第2回 WordPress × jQueryMobile (p.14〜15)参照 http://www.slideshare.net/miiitaka/word-pressjquerymobile
- 14. © wordbonch.org 1-2．index.phpを作成する WordPressテーマを新規作成 13 index.php • WordPressに必要なテンプレートファイル。 • 何も記述しなくてOK。
- 15. © wordbonch.org 1-3．スタイルシートファイルを作成する WordPressテーマを新規作成 14 • 「style.css」というファイル名で作成する。 • テーマでの必須ファイル。 • WordPressが使用している「UTF-8」で作る。 style.css
- 16. © wordbonch.org テーマを作成するには、最低以下の2ファイルがあればOKです。 ・index.php（内容は空でOK） ・style.css WordPressテーマを新規作成 15 /* Theme Name: テーマ名 Description: テーマ説明 Theme URI: テーマURL Author: 作成者 AuthorURI: 作成者URL Version: バージョン License: ライセンス License URI:ライセンスURL */ style.cssの最初に以下を記述 ※以下以外にも設定値は存在します。 /wp-content/themes/sample index.php style.css 第3回 WordPressテーマ作成 (p.9)参照 https://www.slideshare.net/miiitaka/word-press-32692859
- 17. © wordbonch.org WordPressテーマを新規作成 16 • 何も書かなかった場合、テーマフォルダの名前 がテーマ名に自動設定される。 • ここに記載した情報は、管理画面のテーマ詳細 に表示される。 • 全角スペースや、スペルミスなどあると、きち んと読み込まれないので注意。 style.cssについて
- 18. © wordbonch.org 1-4．テーマのサムネイル画像を準備する WordPressテーマを新規作成 17 screenshot.jpg • サイズは「880×660px」 • PNG、JPEG、GIFのいずれかのフォーマットで作成。 • ファイル名は「screenshot」 • なくても良いが、違和感あり。
- 20. © wordbonch.org テーマ新規作成は完了。 WordPressテーマを新規作成 19 • 管理画面の「外観＞テーマ」を確認すると、新しいテー マが追加されている。 • 有効化しても真っ白の画面・・・何も書いていない index.phpが表示されているため。
- 22. © wordbonch.org WordPressテーマを新規作成 21 該当ページ 優先度 TOPページ index.php home.php 月別ページ archive.php date.php カテゴリーページ category.php category-id.php category-slug.php タグページ tag.php tag-id.php tag-slug.php タクソノミーページ taxonomy.php taxonomy-tax.php taxonomy-tax-term.php 投稿タイプページ archive-posttype.php ユーザーページ author.php author-id.php author-nicename.php メディアページ single.php attachment.php MIME_type.php 記事ページ single-posttype.php 固定ページ page.php page-id.php page-slug.php custom.php 検索結果ページ search.php 404ページ 404.php 低 高 第3回 WordPressテーマ作成 (p.17〜18)参照 https://www.slideshare.net/miiitaka/word-press-32692859
- 23. © wordbonch.org WordPressテーマを新規作成 22 該当ページ 優先度 TOPページ index.php home.php 月別ページ archive.php date.php カテゴリーページ category.php category-id.php category-slug.php タグページ tag.php tag-id.php tag-slug.php タクソノミーページ taxonomy.php taxonomy-tax.php taxonomy-tax-term.php 投稿タイプページ archive-posttype.php ユーザーページ author.php author-id.php author-nicename.php メディアページ single.php attachment.php MIME_type.php 記事ページ single-posttype.php 固定ページ page.php page-id.php page-slug.php custom.php 検索結果ページ search.php 404ページ 404.php 低 高 最低限作るべき テンプレート 第3回 WordPressテーマ作成 (p.17〜18)参照 https://www.slideshare.net/miiitaka/word-press-32692859
- 25. © wordbonch.org WordPressテーマを新規作成 24 2-1．トップページを作成（home.php） ヘッダー フッター ロゴ Copyright © xxx 記事タイトル 新着記事一覧 記事タイトル 記事タイトル
- 26. © wordbonch.org <! DOCTYPE html> <html lang="ja”> <head> <meta charset="UTF-8”> <title>サイトタイトル</title> <meta name="viewport" content="width=device- width, initial-scale=1”> <link rel="stylesheet" href="//192.168.33.10/wp- content/themes/wordbonch/html5reset-1.6.1.css" /> </head> <body> <header></header> <footer></footer> </body> </html> WordPressテーマを新規作成 25 2-1．トップページを作成（home.php） ヘッダー DOCTYPE宣言 日本語であると示すlang属性 viewport設定 reset.css bodyタグ（コンテンツ） フッター
- 27. © wordbonch.org WordPressテーマを新規作成 26 2-1．トップページを作成（home.php） サイト名を表示する。 <h1><?php bloginfo( 'name' ); ?></h1> • 管理画面 設定＞一般の「サイト名」に記入したものが表示される。 • 見出しタグ<h1>で囲む。
- 28. © wordbonch.org WordPressテーマを新規作成 27 2-1．トップページを作成（home.php） サイトトップページのURLを出力する。 <a href="<?php echo home_url(); ?>"></a>
- 29. © wordbonch.org WordPressテーマを新規作成 28 サイトの説明を出力する。 <meta name="description" content="<?php bloginfo( 'description' ); ?>" /> • 管理画面 設定＞一般 「キャッチフレーズ」に記入したものが表示される。 2-1．トップページを作成（home.php）
- 30. © wordbonch.org WordPressテーマを新規作成 29 フッターにコピーライトを表示 <small>Copyright © <?php bloginfo( 'name' ); ?></small> • 注釈や細目を表す<small>タグで囲む。 2-1．トップページを作成（home.php）
- 31. © wordbonch.org WordPressテーマを新規作成 30 サイト名をページのタイトルにする <title>サイトタイトル</title> ↓ <title><?php bloginfo( 'name' ); ?></title> 2-1．トップページを作成（home.php）
- 32. © wordbonch.org WordPressテーマを新規作成 31 ページのタイトルに記事のタイトルを入れる <title>サイトタイトル</title> ↓ <title><?php bloginfo( 'name' ); ?><?php wp_title(); ?></title> <?php wp_title(); ?>は、ページに応じて最適なタイトルを 表示してくれるテンプレートタグ 2-1．トップページを作成（home.php）
- 33. © wordbonch.org WordPressテーマを新規作成 32 新着記事一覧を作る。 <h3><?php the_title(); ?></h3> • 記事の概要 <?php the_excerpt(); ?> • 記事のタイトル 2-1．トップページを作成（home.php）
- 34. © wordbonch.org WordPressテーマを新規作成 33 ループの設定をする <?php if(have_posts()): while (have_posts()): the_post(); ?> <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> <?php the_excerpt(); ?> <?php endwhile; endif; ?> このループがないと、きちんとデータベースから 記事に関するデータを読み込むことができません。 2-1．トップページを作成（home.php）
- 35. © wordbonch.org WordPressテーマを新規作成 34 記事の個別ページへのリンクを設定する <a href="<?php the_permalink(); ?>"></a> 2-1．トップページを作成（home.php）
- 40. © wordbonch.org WordPressテーマを新規作成 39 パーツ パーツテンプレート テンプレートタグ ヘッダー header.php <?php get_header(); ?> フッター footer.php <?php get_footer(); ?> サイドバー sidebar.php sidebar-content.php <?php get_sidebar(); ?> <?php get_sidebar(‘content’); ?> コメント comments.php <?php comments_template(); ?> 検索フォーム searchform.php <?php get_search_form(); ?> ※カスタム main.php main-sub.php <?php get_template_part(‘main’); ?> <?php get_template_part(‘main’,’sub’); ?> ※ カスタムパーツテンプレートは、main-sub.phpがなかったら、main.phpを読む優先順位 付けができるのが特徴 第3回 WordPressテーマ作成 (p.16)参照 https://www.slideshare.net/miiitaka/word-press-32692859
- 42. © wordbonch.org WordPressテーマを新規作成 41 該当ページ 優先度 TOPページ index.php home.php 月別ページ archive.php date.php カテゴリーページ category.php category-id.php category-slug.php タグページ tag.php tag-id.php tag-slug.php タクソノミーページ taxonomy.php taxonomy-tax.php taxonomy-tax-term.php 投稿タイプページ archive-posttype.php ユーザーページ author.php author-id.php author-nicename.php メディアページ single.php attachment.php MIME_type.php 記事ページ single-posttype.php 固定ページ page.php page-id.php page-slug.php custom.php 検索結果ページ search.php 404ページ 404.php 低 高 最低限作るべき テンプレート 第3回 WordPressテーマ作成 (p.17〜18)参照 https://www.slideshare.net/miiitaka/word-press-32692859 次はこれを作ります
- 43. © wordbonch.org WordPressテーマを新規作成 42 2-2．記事ページを作成（single.php） ヘッダー フッター ロゴ Copyright © xxx 記事タイトル 投稿日 本文
- 44. © wordbonch.org WordPressテーマを新規作成 43 2-2．記事ページを作成（single.php） • 記事ページのテンプレートSingle.phpを新規作成して、 home.phpと同じテーマフォルダへ入れる。 • home.phpと同じく、ヘッダーとフッターを読み込み、 ループ処理を記述。 （home.phpをコピーしてくると良い。） single.php
- 45. © wordbonch.org WordPressテーマを新規作成 44 記事のタイトルを表示する。 <h2><?php the_title(); ?></h2> 2-2．記事ページを作成（single.php）
- 46. © wordbonch.org WordPressテーマを新規作成 45 記事の本文を表示する。 <?php the_content(); ?> 2-2．記事ページを作成（single.php）
- 47. © wordbonch.org WordPressテーマを新規作成 46 記事の投稿日を表示する。 <time><?php echo get_the_date(); ?></time> 2-2．記事ページを作成（single.php） 表示形式は、管理画面の 設定＞一般「日付のフォーマット」で設定されている表示方 法で出る。
- 48. © wordbonch.org WordPressテーマを新規作成 47 記事の投稿日を表示する。 <time datetime=“<?php echo get_the_date( ‘Y-m-d’ ); ?>”> <?php echo get_the_date(); ?> </time> 2-2．記事ページを作成（single.php） 日付の情報として<time>で囲む。 datetime属性で、 検索エンジンなどが認識できる（年-月-日）で情報を示す。
- 50. © wordbonch.org header.phpに以下のコードを記述。絶対に書いておきたいのがこれ。 WordPressテーマを新規作成 49 省略（通常のヘッダーに記述） ・ <?php wp_head(); ?> </head> <body> wp-includes/general-template.php 内に含まれている関数。 関数自体は、do_action()→add_action()へのフックを担っているもの。 プラグインとかはこれをフックにすることが多いので、記述していないと プラグイン入れたけど動かない！ということがありえる。 第3回 WordPressテーマ作成 (p.21)参照 https://www.slideshare.net/miiitaka/word-press-32692859
- 51. © wordbonch.org footer.phpにもheader.phpと同じように以下のコードを記述。 WordPressテーマを新規作成 50 省略 ・ <?php wp_footer(); ?> </body> </html> こちらもheader.phpと同様にプラグイン導入時などの時のフックポイントとなります。 wp_head()同様、記述するようにしましょう。 第3回 WordPressテーマ作成 (p.22)参照 https://www.slideshare.net/miiitaka/word-press-32692859
- 54. © wordbonch.org jQueryMobileでページをデザイン 53 • jquery.mobile-1.4.3.min.css • jquery.mobile-1.4.3.min.js • imagesフォルダ • min.mapファイル 3-1.jQueryMobileをダウンロードして読み込む
- 56. © wordbonch.org jQueryMobileでページをデザイン 55 jquery-2.1.1.min.js 3-3. jQueryをダウンロードして読み込む jQueryMobileに対応しているjQueryのバージョンが 1.8 ～ 1.11 / 2.1です。今回はjQueryが2.1使います。
- 57. © wordbonch.org jQueryMobileでページをデザイン 56 <div data-role="page"> <div data-role="header">...</div> <div role="main" class="ui-content">...</div> <div data-role="footer">...</div> </div> 3-4. jQueryMobileのページ定義をする bodyの内側を囲む <header>に記述 メインコンテンツを囲む <footer>に記述
- 58. © wordbonch.org jQueryMobileでページをデザイン 57 <ul data-role="listview" data-inset="true"> <li><a href=“個別ページリンク”> <h3>タイトル</h3> <p>記事概要</p></a> </li> </ul> 3-5.新着一覧をデザインする
- 59. © wordbonch.org jQueryMobileでページをデザイン 58 <ul data-role="listview" data-inset="true"> <li><a href=“<?php the_permalink(); ?>”> <h3><?php the_title(); ?></h3> <p><?php the_excerpt(); ?></p></a> </li> </ul> 3-5.新着一覧をデザインする つまり、これでjQueryMobileのデザインが適応されます
- 62. © wordbonch.org jQueryMobileでページをデザイン 61 5.スマホ用にテーマ設定 プラグイン「Multi Device Switcher」を導入。 今回は、PCのテーマとは別に、スマホ専用のテーマを作る設定です。 今回作成したテーマを有効化してしまうと、PCのデザインが見られなくなるため、 その代わりにこのプラグインで、 PCで見た時はPCのテーマを、スマホで見た時には、スマホ用テーマが表示されるよ うにユーザーエージェントで切り分けてくれます。
- 63. © wordbonch.org jQueryMobileでページをデザイン 62 5.スマホ用にテーマ設定 管理画面の、プラグイン＞新規追加 「Multi Device Switcher」で 検索してインストール
- 65. © wordbonch.org jQueryMobileでページをデザイン 64 5.スマホ用にテーマ設定 • プルダウンにテーマ名が表示されます。スマホ用 のテーマを選んで保存をクリックすれば、スマホ でアクセスした際に、スマホ用のテーマでサイト が表示されます。 • タブレット端末でも、スマホ用のテーマを見せた いときはここで設定しましょう。
- 67. © wordbonch.org jQueryMobileでページをデザイン 66 5.スマホ用にテーマ設定 • 「PC Switcher」を見ると、PCに切り替えるボ タンを出すかどうかを選べます。 • チェックをONにすると、PCに切り替えるボタ ンが青く装飾されます。チェックを外して、 CSSで自分で装飾することも可能です。