Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
© wordbonch.org
WordPressスマートフォンテーマ作成
WordBench宮崎
ver.1.0.0【WordBench宮崎第5回勉強会】
© wordbonch.org
自己紹介
1
Facebook@yoshie.nakayama.33
中山 佳重(なかやま よしえ)
株式会社アラタナ
フロントエンドチーム
コーディング・JavaScript
© wordbonch.org
本日の流れ
2
• WordPressテーマを新規作成
• jQueryMobileでページをデザイン
• jQueryMobileのデザインパターンをかえる
• スマホ用にテーマ設定
• まとめと補足
© wordbonch.org
WordPressテーマとは?
3
WordPressテーマとは?
© wordbonch.org
WordPressテーマとは?
4
© wordbonch.org
WordPressテーマとは?
5
• Wordpressサイトデザインのテンプレートファ
イルや、画像がまとめられたセットのこと。
• 世界中で公開されているテーマをダウンロー
ドすれば、ボタン1つでデザインや...
© wordbonch.org
jQueryMobileとは?
6
jQueryMobileとは?
© wordbonch.org
jQueryMobileとは?
7
• 少しのHTMLの記述だけで、スマートフォンに
適したパーツや動作を実装してくれるもの。
© wordbonch.org
カスタムメニュー機能の時と同様に、出力リストにjQueryMobileの役割(data-role)を割当てます。
カテゴリ一覧 × jQuery Mobile
8
<ul data-role='listview'...
© wordbonch.org
jQueryMobileとは?
9
jQueryMobileのメリット
•パーツや機能がたくさん用意されている
http://demos.jquerymobile.com/1.4.2
•iPhone、Androi...
© wordbonch.org
jQueryMobileとは?
10
© wordbonch.org
WordPressテーマを新規作成
11
WordPressテーマを新規作成
© wordbonch.org
1-1.テーマ用フォルダを新規作成する
WordPressテーマを新規作成
12
themename
フォルダ名はテーマの名前を付ける。
© wordbonch.org
1-2.index.phpを作成する
WordPressテーマを新規作成
13
index.php
• WordPressに必要なテンプレートファイル。
• 何も記述しなくてOK。
© wordbonch.org
1-3.スタイルシートファイルを作成する
WordPressテーマを新規作成
14
• 「style.css」というファイル名で作成する。
• テーマでの必須ファイル。
• WordPressが使用している「UT...
© wordbonch.org
テーマを作成するには、最低以下の2ファイルがあればOKです。
・index.php(内容は空でOK)
・style.css
WordPressテーマを新規作成
15
/*
Theme Name: テーマ名
Des...
© wordbonch.org
WordPressテーマを新規作成
16
• 何も書かなかった場合、テーマフォルダの名前
がテーマ名に自動設定される。
• ここに記載した情報は、管理画面のテーマ詳細
に表示される。
• 全角スペースや、スペルミ...
© wordbonch.org
1-4.テーマのサムネイル画像を準備する
WordPressテーマを新規作成
17
screenshot.jpg
• サイズは「880×660px」
• PNG、JPEG、GIFのいずれかのフォーマットで作成。
...
© wordbonch.org
サーバー上
themes
wp-content
1-5.テーマフォルダをアップロードする
WordPressテーマを新規作成
18
themename
index.php style.cssscreenshot....
© wordbonch.org
テーマ新規作成は完了。
WordPressテーマを新規作成
19
• 管理画面の「外観>テーマ」を確認すると、新しいテー
マが追加されている。
• 有効化しても真っ白の画面・・・何も書いていない
index.ph...
© wordbonch.org
WordPressテーマを新規作成
20
テーマの中身を作っていきます
© wordbonch.org
WordPressテーマを新規作成
21
該当ページ 優先度
TOPページ
index.php
home.php
月別ページ
archive.php
date.php
カテゴリーページ category.php ...
© wordbonch.org
WordPressテーマを新規作成
22
該当ページ 優先度
TOPページ
index.php
home.php
月別ページ
archive.php
date.php
カテゴリーページ category.php ...
© wordbonch.org
WordPressテーマを新規作成
23
2-1.トップページを作成(home.php)
ヘッダー
コンテンツ
フッター
© wordbonch.org
WordPressテーマを新規作成
24
2-1.トップページを作成(home.php)
ヘッダー
フッター
ロゴ
Copyright © xxx
記事タイトル
新着記事一覧
記事タイトル
記事タイトル
© wordbonch.org
<! DOCTYPE html>
<html lang="ja”>
<head>
<meta charset="UTF-8”>
<title>サイトタイトル</title>
<meta name="viewpor...
© wordbonch.org
WordPressテーマを新規作成
26
2-1.トップページを作成(home.php)
サイト名を表示する。
<h1><?php bloginfo( 'name' ); ?></h1>
• 管理画面
設定>一般...
© wordbonch.org
WordPressテーマを新規作成
27
2-1.トップページを作成(home.php)
サイトトップページのURLを出力する。
<a href="<?php echo home_url(); ?>"></a>
© wordbonch.org
WordPressテーマを新規作成
28
サイトの説明を出力する。
<meta name="description" content="<?php bloginfo( 'description' ); ?>" /...
© wordbonch.org
WordPressテーマを新規作成
29
フッターにコピーライトを表示
<small>Copyright &copy; <?php bloginfo( 'name' ); ?></small>
• 注釈や細目を表...
© wordbonch.org
WordPressテーマを新規作成
30
サイト名をページのタイトルにする
<title>サイトタイトル</title>
↓
<title><?php bloginfo( 'name' ); ?></title>...
© wordbonch.org
WordPressテーマを新規作成
31
ページのタイトルに記事のタイトルを入れる
<title>サイトタイトル</title>
↓
<title><?php bloginfo( 'name' ); ?><?ph...
© wordbonch.org
WordPressテーマを新規作成
32
新着記事一覧を作る。
<h3><?php the_title(); ?></h3>
• 記事の概要
<?php the_excerpt(); ?>
• 記事のタイトル
2...
© wordbonch.org
WordPressテーマを新規作成
33
ループの設定をする
<?php if(have_posts()): while (have_posts()): the_post(); ?>
<h3><a href="<...
© wordbonch.org
WordPressテーマを新規作成
34
記事の個別ページへのリンクを設定する
<a href="<?php the_permalink(); ?>"></a>
2-1.トップページを作成(home.php)
© wordbonch.org
WordPressテーマを新規作成
35
ヘッダーとフッターをパーツ化する
2-1.トップページを作成(home.php)
© wordbonch.org
WordPressテーマを新規作成
36
header.php footer.php
2-1.トップページを作成(home.php)
header.phpと、footer.php
を新規作成し、テーマフォルダへア...
© wordbonch.org
WordPressテーマを新規作成
37
header.php
footer.php
2-1.トップページを作成(home.php)
home.phpから、
ヘッダーとフッターの記述をコピーする。
<! DOCT...
© wordbonch.org
WordPressテーマを新規作成
38
2-1.トップページを作成(home.php)
home.phpにパーツテンプレートを読み込む
© wordbonch.org
WordPressテーマを新規作成
39
パーツ パーツテンプレート テンプレートタグ
ヘッダー header.php <?php get_header(); ?>
フッター footer.php <?php g...
© wordbonch.org
WordPressテーマを新規作成
40
2-2.記事ページを作成(single.php)
© wordbonch.org
WordPressテーマを新規作成
41
該当ページ 優先度
TOPページ
index.php
home.php
月別ページ
archive.php
date.php
カテゴリーページ category.php ...
© wordbonch.org
WordPressテーマを新規作成
42
2-2.記事ページを作成(single.php)
ヘッダー
フッター
ロゴ
Copyright © xxx
記事タイトル
投稿日
本文
© wordbonch.org
WordPressテーマを新規作成
43
2-2.記事ページを作成(single.php)
• 記事ページのテンプレートSingle.phpを新規作成して、
home.phpと同じテーマフォルダへ入れる。
• h...
© wordbonch.org
WordPressテーマを新規作成
44
記事のタイトルを表示する。
<h2><?php the_title(); ?></h2>
2-2.記事ページを作成(single.php)
© wordbonch.org
WordPressテーマを新規作成
45
記事の本文を表示する。
<?php the_content(); ?>
2-2.記事ページを作成(single.php)
© wordbonch.org
WordPressテーマを新規作成
46
記事の投稿日を表示する。
<time><?php echo get_the_date(); ?></time>
2-2.記事ページを作成(single.php)
表示形式...
© wordbonch.org
WordPressテーマを新規作成
47
記事の投稿日を表示する。
<time datetime=“<?php echo get_the_date( ‘Y-m-d’ ); ?>”>
<?php echo get_...
© wordbonch.org
WordPressテーマを新規作成
48
2-3.Wp_headと、wp_footerを追加する
© wordbonch.org
header.phpに以下のコードを記述。絶対に書いておきたいのがこれ。
WordPressテーマを新規作成
49
省略(通常のヘッダーに記述)
・
<?php wp_head(); ?>
</head>
<bo...
© wordbonch.org
footer.phpにもheader.phpと同じように以下のコードを記述。
WordPressテーマを新規作成
50
省略
・
<?php wp_footer(); ?>
</body>
</html>
こちら...
© wordbonch.org
jQueryMobileでページをデザイン
51
jQueryMobileでページをデザイン
© wordbonch.org
jQueryMobileでページをデザイン
52
http://jquerymobile.com/
3-1.jQueryMobileをダウンロードして読み込む
© wordbonch.org
jQueryMobileでページをデザイン
53
• jquery.mobile-1.4.3.min.css
• jquery.mobile-1.4.3.min.js
• imagesフォルダ
• min.map...
© wordbonch.org
jQueryMobileでページをデザイン
54
3-2. jQueryをダウンロードして読み込む
http://jquery.com/
© wordbonch.org
jQueryMobileでページをデザイン
55
jquery-2.1.1.min.js
3-3. jQueryをダウンロードして読み込む
jQueryMobileに対応しているjQueryのバージョンが
1.8...
© wordbonch.org
jQueryMobileでページをデザイン
56
<div data-role="page">
<div data-role="header">...</div>
<div role="main" class="...
© wordbonch.org
jQueryMobileでページをデザイン
57
<ul data-role="listview" data-inset="true">
<li><a href=“個別ページリンク”>
<h3>タイトル</h3>...
© wordbonch.org
jQueryMobileでページをデザイン
58
<ul data-role="listview" data-inset="true">
<li><a href=“<?php the_permalink(); ?...
© wordbonch.org
jQueryMobileでページをデザイン
59
4. jQueryMobileのパターンを変える
http://themeroller.jquerymobile.com/
テーマローラー
jQueryMobil...
© wordbonch.org
jQueryMobileでページをデザイン
60
© wordbonch.org
jQueryMobileでページをデザイン
61
5.スマホ用にテーマ設定
プラグイン「Multi Device Switcher」を導入。
今回は、PCのテーマとは別に、スマホ専用のテーマを作る設定です。
今回...
© wordbonch.org
jQueryMobileでページをデザイン
62
5.スマホ用にテーマ設定
管理画面の、プラグイン>新規追加
「Multi Device Switcher」で
検索してインストール
© wordbonch.org
jQueryMobileでページをデザイン
63
5.スマホ用にテーマ設定
有効化して設定画面へ
© wordbonch.org
jQueryMobileでページをデザイン
64
5.スマホ用にテーマ設定
• プルダウンにテーマ名が表示されます。スマホ用
のテーマを選んで保存をクリックすれば、スマホ
でアクセスした際に、スマホ用のテーマでサ...
© wordbonch.org
jQueryMobileでページをデザイン
65
5.スマホ用にテーマ設定
「ユーザーエージェント」設定を見ると、
最初から、それぞれのデバイスのユーザーエージェントが
設定してあります。
© wordbonch.org
jQueryMobileでページをデザイン
66
5.スマホ用にテーマ設定
• 「PC Switcher」を見ると、PCに切り替えるボ
タンを出すかどうかを選べます。
• チェックをONにすると、PCに切り替える...
© wordbonch.org
jQueryMobileでページをデザイン
67
5.まとめと補足
■WordPressに最低限必要なファイル
・テーマフォルダ
・index.php
・style.css
・screenshot.jpg
■必要...
© wordbonch.org
jQueryMobileでページをデザイン
68
5.まとめと補足
■jQuryMobileの役割はスマートフォンサイトの装飾です。
装飾以外も、JavaScriptのカスタマイズが出来るんです。
© wordbonch.org
jQueryMobileでページをデザイン
69
例)候補絞込機能
http://demos.jquerymobile.com/1.4.2/listview-autocomplete/
(一番下にデモがあります。)
© wordbonch.org
jQueryMobileでページをデザイン
70
ご清聴ありがとうございました。
Upcoming SlideShare
Loading in …5
×

Wordpressスマートフォンテーマ作成

4,357 views

Published on

第5回Wordbench宮崎で、オリジナルスマートフォンテーマ作成のデモンストレーションを行いました。WordPressのテーマ作成の基本から、jQueryMobileの装飾までの内容です。

Published in: Internet
  • Be the first to comment

Wordpressスマートフォンテーマ作成

  1. 1. © wordbonch.org WordPressスマートフォンテーマ作成 WordBench宮崎 ver.1.0.0【WordBench宮崎第5回勉強会】
  2. 2. © wordbonch.org 自己紹介 1 Facebook@yoshie.nakayama.33 中山 佳重(なかやま よしえ) 株式会社アラタナ フロントエンドチーム コーディング・JavaScript
  3. 3. © wordbonch.org 本日の流れ 2 • WordPressテーマを新規作成 • jQueryMobileでページをデザイン • jQueryMobileのデザインパターンをかえる • スマホ用にテーマ設定 • まとめと補足
  4. 4. © wordbonch.org WordPressテーマとは? 3 WordPressテーマとは?
  5. 5. © wordbonch.org WordPressテーマとは? 4
  6. 6. © wordbonch.org WordPressテーマとは? 5 • Wordpressサイトデザインのテンプレートファ イルや、画像がまとめられたセットのこと。 • 世界中で公開されているテーマをダウンロー ドすれば、ボタン1つでデザインや、サイト の構造を変えることもできる。
  7. 7. © wordbonch.org jQueryMobileとは? 6 jQueryMobileとは?
  8. 8. © wordbonch.org jQueryMobileとは? 7 • 少しのHTMLの記述だけで、スマートフォンに 適したパーツや動作を実装してくれるもの。
  9. 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
  10. 10. © wordbonch.org jQueryMobileとは? 9 jQueryMobileのメリット •パーツや機能がたくさん用意されている http://demos.jquerymobile.com/1.4.2 •iPhone、Android、Windows Phone、BlackBerryなど、 豊富な種類のデバイスに対応してくれる
  11. 11. © wordbonch.org jQueryMobileとは? 10
  12. 12. © wordbonch.org WordPressテーマを新規作成 11 WordPressテーマを新規作成
  13. 13. © wordbonch.org 1-1.テーマ用フォルダを新規作成する WordPressテーマを新規作成 12 themename フォルダ名はテーマの名前を付ける。
  14. 14. © wordbonch.org 1-2.index.phpを作成する WordPressテーマを新規作成 13 index.php • WordPressに必要なテンプレートファイル。 • 何も記述しなくてOK。
  15. 15. © wordbonch.org 1-3.スタイルシートファイルを作成する WordPressテーマを新規作成 14 • 「style.css」というファイル名で作成する。 • テーマでの必須ファイル。 • WordPressが使用している「UTF-8」で作る。 style.css
  16. 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. 17. © wordbonch.org WordPressテーマを新規作成 16 • 何も書かなかった場合、テーマフォルダの名前 がテーマ名に自動設定される。 • ここに記載した情報は、管理画面のテーマ詳細 に表示される。 • 全角スペースや、スペルミスなどあると、きち んと読み込まれないので注意。 style.cssについて
  18. 18. © wordbonch.org 1-4.テーマのサムネイル画像を準備する WordPressテーマを新規作成 17 screenshot.jpg • サイズは「880×660px」 • PNG、JPEG、GIFのいずれかのフォーマットで作成。 • ファイル名は「screenshot」 • なくても良いが、違和感あり。
  19. 19. © wordbonch.org サーバー上 themes wp-content 1-5.テーマフォルダをアップロードする WordPressテーマを新規作成 18 themename index.php style.cssscreenshot.jpg
  20. 20. © wordbonch.org テーマ新規作成は完了。 WordPressテーマを新規作成 19 • 管理画面の「外観>テーマ」を確認すると、新しいテー マが追加されている。 • 有効化しても真っ白の画面・・・何も書いていない index.phpが表示されているため。
  21. 21. © wordbonch.org WordPressテーマを新規作成 20 テーマの中身を作っていきます
  22. 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. 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
  24. 24. © wordbonch.org WordPressテーマを新規作成 23 2-1.トップページを作成(home.php) ヘッダー コンテンツ フッター
  25. 25. © wordbonch.org WordPressテーマを新規作成 24 2-1.トップページを作成(home.php) ヘッダー フッター ロゴ Copyright © xxx 記事タイトル 新着記事一覧 記事タイトル 記事タイトル
  26. 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. 27. © wordbonch.org WordPressテーマを新規作成 26 2-1.トップページを作成(home.php) サイト名を表示する。 <h1><?php bloginfo( 'name' ); ?></h1> • 管理画面 設定>一般の「サイト名」に記入したものが表示される。 • 見出しタグ<h1>で囲む。
  28. 28. © wordbonch.org WordPressテーマを新規作成 27 2-1.トップページを作成(home.php) サイトトップページのURLを出力する。 <a href="<?php echo home_url(); ?>"></a>
  29. 29. © wordbonch.org WordPressテーマを新規作成 28 サイトの説明を出力する。 <meta name="description" content="<?php bloginfo( 'description' ); ?>" /> • 管理画面 設定>一般 「キャッチフレーズ」に記入したものが表示される。 2-1.トップページを作成(home.php)
  30. 30. © wordbonch.org WordPressテーマを新規作成 29 フッターにコピーライトを表示 <small>Copyright &copy; <?php bloginfo( 'name' ); ?></small> • 注釈や細目を表す<small>タグで囲む。 2-1.トップページを作成(home.php)
  31. 31. © wordbonch.org WordPressテーマを新規作成 30 サイト名をページのタイトルにする <title>サイトタイトル</title> ↓ <title><?php bloginfo( 'name' ); ?></title> 2-1.トップページを作成(home.php)
  32. 32. © wordbonch.org WordPressテーマを新規作成 31 ページのタイトルに記事のタイトルを入れる <title>サイトタイトル</title> ↓ <title><?php bloginfo( 'name' ); ?><?php wp_title(); ?></title> <?php wp_title(); ?>は、ページに応じて最適なタイトルを 表示してくれるテンプレートタグ 2-1.トップページを作成(home.php)
  33. 33. © wordbonch.org WordPressテーマを新規作成 32 新着記事一覧を作る。 <h3><?php the_title(); ?></h3> • 記事の概要 <?php the_excerpt(); ?> • 記事のタイトル 2-1.トップページを作成(home.php)
  34. 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. 35. © wordbonch.org WordPressテーマを新規作成 34 記事の個別ページへのリンクを設定する <a href="<?php the_permalink(); ?>"></a> 2-1.トップページを作成(home.php)
  36. 36. © wordbonch.org WordPressテーマを新規作成 35 ヘッダーとフッターをパーツ化する 2-1.トップページを作成(home.php)
  37. 37. © wordbonch.org WordPressテーマを新規作成 36 header.php footer.php 2-1.トップページを作成(home.php) header.phpと、footer.php を新規作成し、テーマフォルダへアップロードする。 サーバー上 themes wp-content themename
  38. 38. © wordbonch.org WordPressテーマを新規作成 37 header.php footer.php 2-1.トップページを作成(home.php) home.phpから、 ヘッダーとフッターの記述をコピーする。 <! DOCTYPE>~</header>の間 <footer>~</html>の間
  39. 39. © wordbonch.org WordPressテーマを新規作成 38 2-1.トップページを作成(home.php) home.phpにパーツテンプレートを読み込む
  40. 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
  41. 41. © wordbonch.org WordPressテーマを新規作成 40 2-2.記事ページを作成(single.php)
  42. 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. 43. © wordbonch.org WordPressテーマを新規作成 42 2-2.記事ページを作成(single.php) ヘッダー フッター ロゴ Copyright © xxx 記事タイトル 投稿日 本文
  44. 44. © wordbonch.org WordPressテーマを新規作成 43 2-2.記事ページを作成(single.php) • 記事ページのテンプレートSingle.phpを新規作成して、 home.phpと同じテーマフォルダへ入れる。 • home.phpと同じく、ヘッダーとフッターを読み込み、 ループ処理を記述。 (home.phpをコピーしてくると良い。) single.php
  45. 45. © wordbonch.org WordPressテーマを新規作成 44 記事のタイトルを表示する。 <h2><?php the_title(); ?></h2> 2-2.記事ページを作成(single.php)
  46. 46. © wordbonch.org WordPressテーマを新規作成 45 記事の本文を表示する。 <?php the_content(); ?> 2-2.記事ページを作成(single.php)
  47. 47. © wordbonch.org WordPressテーマを新規作成 46 記事の投稿日を表示する。 <time><?php echo get_the_date(); ?></time> 2-2.記事ページを作成(single.php) 表示形式は、管理画面の 設定>一般「日付のフォーマット」で設定されている表示方 法で出る。
  48. 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属性で、 検索エンジンなどが認識できる(年-月-日)で情報を示す。
  49. 49. © wordbonch.org WordPressテーマを新規作成 48 2-3.Wp_headと、wp_footerを追加する
  50. 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. 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
  52. 52. © wordbonch.org jQueryMobileでページをデザイン 51 jQueryMobileでページをデザイン
  53. 53. © wordbonch.org jQueryMobileでページをデザイン 52 http://jquerymobile.com/ 3-1.jQueryMobileをダウンロードして読み込む
  54. 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をダウンロードして読み込む
  55. 55. © wordbonch.org jQueryMobileでページをデザイン 54 3-2. jQueryをダウンロードして読み込む http://jquery.com/
  56. 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. 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. 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. 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のデザインが適応されます
  60. 60. © wordbonch.org jQueryMobileでページをデザイン 59 4. jQueryMobileのパターンを変える http://themeroller.jquerymobile.com/ テーマローラー jQueryMobileのカラーテーマのパターンを作れる。 赤いサイトでも、黄色いサイトでもカラーリングが可能。
  61. 61. © wordbonch.org jQueryMobileでページをデザイン 60
  62. 62. © wordbonch.org jQueryMobileでページをデザイン 61 5.スマホ用にテーマ設定 プラグイン「Multi Device Switcher」を導入。 今回は、PCのテーマとは別に、スマホ専用のテーマを作る設定です。 今回作成したテーマを有効化してしまうと、PCのデザインが見られなくなるため、 その代わりにこのプラグインで、 PCで見た時はPCのテーマを、スマホで見た時には、スマホ用テーマが表示されるよ うにユーザーエージェントで切り分けてくれます。
  63. 63. © wordbonch.org jQueryMobileでページをデザイン 62 5.スマホ用にテーマ設定 管理画面の、プラグイン>新規追加 「Multi Device Switcher」で 検索してインストール
  64. 64. © wordbonch.org jQueryMobileでページをデザイン 63 5.スマホ用にテーマ設定 有効化して設定画面へ
  65. 65. © wordbonch.org jQueryMobileでページをデザイン 64 5.スマホ用にテーマ設定 • プルダウンにテーマ名が表示されます。スマホ用 のテーマを選んで保存をクリックすれば、スマホ でアクセスした際に、スマホ用のテーマでサイト が表示されます。 • タブレット端末でも、スマホ用のテーマを見せた いときはここで設定しましょう。
  66. 66. © wordbonch.org jQueryMobileでページをデザイン 65 5.スマホ用にテーマ設定 「ユーザーエージェント」設定を見ると、 最初から、それぞれのデバイスのユーザーエージェントが 設定してあります。
  67. 67. © wordbonch.org jQueryMobileでページをデザイン 66 5.スマホ用にテーマ設定 • 「PC Switcher」を見ると、PCに切り替えるボ タンを出すかどうかを選べます。 • チェックをONにすると、PCに切り替えるボタ ンが青く装飾されます。チェックを外して、 CSSで自分で装飾することも可能です。
  68. 68. © wordbonch.org jQueryMobileでページをデザイン 67 5.まとめと補足 ■WordPressに最低限必要なファイル ・テーマフォルダ ・index.php ・style.css ・screenshot.jpg ■必要に応じて、 適したテンプレートファイルを増やしていきましょう。 (今回はhome.phpとsingle.php)
  69. 69. © wordbonch.org jQueryMobileでページをデザイン 68 5.まとめと補足 ■jQuryMobileの役割はスマートフォンサイトの装飾です。 装飾以外も、JavaScriptのカスタマイズが出来るんです。
  70. 70. © wordbonch.org jQueryMobileでページをデザイン 69 例)候補絞込機能 http://demos.jquerymobile.com/1.4.2/listview-autocomplete/ (一番下にデモがあります。)
  71. 71. © wordbonch.org jQueryMobileでページをデザイン 70 ご清聴ありがとうございました。

×