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.
山尾 雅也
静的HTMLファイルを
WordPressのテーマにする
ワークショップ
自己紹介
山尾 雅也 (38
歳)
〜2007年
2007年〜2008年
2008年〜2011年
2014年〜現在
CAD/CAMでのマシニングオペレーター
WEB制作会社・広告代理店でコーダー
SEOマーケティング&コーダー
マークアップエン...
そして初めてのスピーカーです!!
どうか優しい目でみていただけると助かります。
そしてテーマ作成の経験者の方
手助けしていただけると
すごく喜びます
タイムテーブル
•テーマについて説明
•ワークショップ
•まとめ
•ネクストタイム
テーマとは?
テーマとは
例えば、
デザインの着せ替え
(コンテンツの内容はそのままに
デザインだけを一瞬にして変える)
テーマの作成方法
テーマの作成方法
親テーマから子テーマ
既存のテーマをベースにカスタマイズする方法
フルスクラッチ
ゼロから作成する方法
(静的HTMLから関数を埋め込んだり、
共通部分を切り分けたりする)
子テーマでの作成のメリット・デメリット
• メリット
親テーマの必要な部分はそのままに、カスタマイズできる。
ゼロからの作成の必要がないので、少ない時間で完成できる。
• デメリット
親テーマへの依存が大きくなり、学習時間がかかる。
親テーマの...
フルスクラッチでのテーマ作成の
メリットデメリット
• メリット
デザイン、機能など細かいところまで自由にカス
タマイズできる。
• デメリット
ゼロからコードを書くため、制作に時間がかかる。
HTML・CSS・PHPの総合的な知識が必要になる。
今回のワークショップでは
親テーマから子テーマ
既存のテーマをベースにカスタマイズする方法
フルスクラッチ
ゼロから作成する方法
(静的HTMLから関数を埋め込んだり、
共通部分を切り分けたりする)
こちらで作成していきます
テンプレート階層
index.php
個別投稿ページ=ブログ記事
single-{post_type}.php single.php
index.php
フロントページ=トップページ
front-page.php
category.php
カテゴリーページ
category-{slug}.php
index.php
category-{ID}.php
archive.php
index.php
アーカイブページ
archive-{post_type}.php archive.php
index.php
style.css
があれば動きます
(テーマとしてエラーが出ない)
実際にテーマとして認識されるか操作します
ということで
ワークショップを開始します
関数や参考ページはスライド最後にリンクを載せています
まず静的HTMLのファイルを
ダウンロードしてください
https://wbn1706.mistle.org/wbn.zip
今回の内容が動作しているページは
https://wbn1706.mistle.org/
に載せています。
テーマ情報追加
style.css
/*
Theme Name: テーマの名前
Theme URI: テーマのサイトのURI
Description: テーマの説明
Author: 作者の名前
Author URI: 作者のURI
*/
1行目...
ファイルパスの変更
index.php
<link rel=“stylesheet” href=“style.css”>
<link rel=“stylesheet”
href=“<?php echo get_stylesheet_uri();...
ファイルパスの変更
index.php
<img src=“./img/main_image.jpg” alt=“ワークショップ…”>
<img src=“
<?php echo get_stylesheet_directory_uri(); ...
サイトのタイトルと説明文の表示
index.php
<header>
<a href=“#”>
<h1><?php bloginfo(‘name’); ?>
</a>
<p><?php bloginfo(‘description’); ?></...
TOPページへのリンク
index.php
<header>
<a href=“<?php echo esc_url( home_url( ‘/’ ) ); ?>”>
<h1><?php bloginfo(‘name’); ?>
</a>
<p...
おまじないの入力
index.php
• wp_head()………</head>の直前に記述
• wp_footer()……</body>の直前に記述
<?php wp_head(); ?>
</head>
<?php wp_footer();...
投稿記事を表示
index.php
<?php if (have_posts() ): ?>
<?php while ( have_posts() ) : the_post(); ?>
<article class=“blog-top”>
<h...
投稿記事の抜粋を表示
index.php
<?php if (have_posts() ): ?>
<?php while ( have_posts() ) : the_post(); ?>
<article class=“blog-top”>...
記事がない時のエラーメッセージを表示
index.php
<?php if (have_posts() ): ?>
<?php while ( have_posts() ) : the_post(); ?>
<article class=“bl...
ヘッダ・フッタ・サイドバーの分割
index.phpのヘッダ・フッタ・サイドバーの部分を分割し、
別のファイルにして、汎用性を高めましょう。
例として、次の図のように分割します。
ヘッダ
コンテンツ サイドバー
フッタ
header.php(新規作成)→index.phpからヘッダ部分を持ってくる
footer.php(新規作成)→index.phpからフッタ部分を持ってくる
sidebar.php(新規作成)→index.phpからサイドバーの部分を
持って...
各種ページの作成
• トップページ…front-page.php
• 個別記事ページ…single.php
• 固定ページ…page.php
【参考】
・テンプレート階層について
http://wpdocs.osdn.jp/テンプレート階層
(...
まとめ
今回、index.htmlから関数を付け足していき、表示がどうなるのか、
ソースがどう変化するのかを見ていただきました。
関数を追加する際、真っ白な画面が出てしまう場合がありますが、
その時はHTMLソースを見て、途中まで書かれていれば...
参考ページ
• style.cssのヘッダ名
http://wpdocs.osdn.jp/ファイルヘッダー
• get_stylesheet_uri()
http://wpdocs.osdn.jp/関数リファレンス/get_stylesheet...
参考ページ
• wp_head()
http://wpdocs.osdn.jp/関数リファレンス/wp_head
• wp_footer()
http://wpdocs.osdn.jp/テンプレートタグ/wp_footer
• スライド28ペー...
参考ページ
• 条件分岐タグ
http://wpdocs.osdn.jp/条件分岐タグ
• is_front_page()
http://wpdocs.osdn.jp/関数リファレンス/is_front_page
• get_header()
...
静的HTMLファイルをWordPressのテーマにするワークショップ
Upcoming SlideShare
Loading in …5
×

静的HTMLファイルをWordPressのテーマにするワークショップ

278 views

Published on

静的HTML・CSSファイルをWordPressのテーマにする方法

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

静的HTMLファイルをWordPressのテーマにするワークショップ

  1. 1. 山尾 雅也 静的HTMLファイルを WordPressのテーマにする ワークショップ
  2. 2. 自己紹介 山尾 雅也 (38 歳) 〜2007年 2007年〜2008年 2008年〜2011年 2014年〜現在 CAD/CAMでのマシニングオペレーター WEB制作会社・広告代理店でコーダー SEOマーケティング&コーダー マークアップエンジニア&WEBエンジニア 大阪府吹田市生まれ 三重県桑名市育ち
  3. 3. そして初めてのスピーカーです!! どうか優しい目でみていただけると助かります。 そしてテーマ作成の経験者の方 手助けしていただけると すごく喜びます
  4. 4. タイムテーブル •テーマについて説明 •ワークショップ •まとめ •ネクストタイム
  5. 5. テーマとは?
  6. 6. テーマとは 例えば、 デザインの着せ替え (コンテンツの内容はそのままに デザインだけを一瞬にして変える)
  7. 7. テーマの作成方法
  8. 8. テーマの作成方法 親テーマから子テーマ 既存のテーマをベースにカスタマイズする方法 フルスクラッチ ゼロから作成する方法 (静的HTMLから関数を埋め込んだり、 共通部分を切り分けたりする)
  9. 9. 子テーマでの作成のメリット・デメリット • メリット 親テーマの必要な部分はそのままに、カスタマイズできる。 ゼロからの作成の必要がないので、少ない時間で完成できる。 • デメリット 親テーマへの依存が大きくなり、学習時間がかかる。 親テーマのアップデートによっては、子テーマの再カスタマ イズが必要になる。
  10. 10. フルスクラッチでのテーマ作成の メリットデメリット • メリット デザイン、機能など細かいところまで自由にカス タマイズできる。 • デメリット ゼロからコードを書くため、制作に時間がかかる。 HTML・CSS・PHPの総合的な知識が必要になる。
  11. 11. 今回のワークショップでは 親テーマから子テーマ 既存のテーマをベースにカスタマイズする方法 フルスクラッチ ゼロから作成する方法 (静的HTMLから関数を埋め込んだり、 共通部分を切り分けたりする) こちらで作成していきます
  12. 12. テンプレート階層
  13. 13. index.php 個別投稿ページ=ブログ記事 single-{post_type}.php single.php
  14. 14. index.php フロントページ=トップページ front-page.php
  15. 15. category.php カテゴリーページ category-{slug}.php index.php category-{ID}.php archive.php
  16. 16. index.php アーカイブページ archive-{post_type}.php archive.php
  17. 17. index.php style.css があれば動きます (テーマとしてエラーが出ない)
  18. 18. 実際にテーマとして認識されるか操作します
  19. 19. ということで ワークショップを開始します 関数や参考ページはスライド最後にリンクを載せています
  20. 20. まず静的HTMLのファイルを ダウンロードしてください https://wbn1706.mistle.org/wbn.zip 今回の内容が動作しているページは https://wbn1706.mistle.org/ に載せています。
  21. 21. テーマ情報追加 style.css /* Theme Name: テーマの名前 Theme URI: テーマのサイトのURI Description: テーマの説明 Author: 作者の名前 Author URI: 作者のURI */ 1行目に追加
  22. 22. ファイルパスの変更 index.php <link rel=“stylesheet” href=“style.css”> <link rel=“stylesheet” href=“<?php echo get_stylesheet_uri(); ?>”> 1行目に追加
  23. 23. ファイルパスの変更 index.php <img src=“./img/main_image.jpg” alt=“ワークショップ…”> <img src=“ <?php echo get_stylesheet_directory_uri(); ?>/img/ main_image.jpg” alt=“ワークショップ…”> 1行目に追加
  24. 24. サイトのタイトルと説明文の表示 index.php <header> <a href=“#”> <h1><?php bloginfo(‘name’); ?> </a> <p><?php bloginfo(‘description’); ?></p> </header> (例)例えば左上にサイトのタイトルと説明文を表示
  25. 25. TOPページへのリンク index.php <header> <a href=“<?php echo esc_url( home_url( ‘/’ ) ); ?>”> <h1><?php bloginfo(‘name’); ?> </a> <p><?php bloginfo(‘description’); ?></p> </header> (例)例えば左上にサイトのタイトルと説明文を表示
  26. 26. おまじないの入力 index.php • wp_head()………</head>の直前に記述 • wp_footer()……</body>の直前に記述 <?php wp_head(); ?> </head> <?php wp_footer(); ?> </body> </html>
  27. 27. 投稿記事を表示 index.php <?php if (have_posts() ): ?> <?php while ( have_posts() ) : the_post(); ?> <article class=“blog-top”> <h3><a href=“<?php the_permalink(); ?>”><?php the_title(); ?></a></h3> <div class=“entry-meta”><?php the_time(Y年n月j日); ?></div> <?php the_content(); ?> <div class=“more-link”><a href=“<?php the_permalink();>”>続きを読む</a></div> </article> <?php endwhile; ?> <?php endif; ?>
  28. 28. 投稿記事の抜粋を表示 index.php <?php if (have_posts() ): ?> <?php while ( have_posts() ) : the_post(); ?> <article class=“blog-top”> <h3><a href=“<?php the_permalink(); ?>”><?php the_title(); ?></a></h3> <?php if ( is_front_page() ) : ?> <?php the_excerpt(); ?> <div class=“more-link”><a href=“<?php the_permalink();>”>続きを読む</a></div> <?php else : ?> <?php the_content(); ?> <?php endif; ?> </article> <?php endwhile; ?> <?php endif; ?>
  29. 29. 記事がない時のエラーメッセージを表示 index.php <?php if (have_posts() ): ?> <?php while ( have_posts() ) : the_post(); ?> <article class=“blog-top”> </article> <php endwhile; ?> <?php else : ?> <p>ページが見つかりませんでした。</p> <?php endif; ?> ・ ・ ・ ・
  30. 30. ヘッダ・フッタ・サイドバーの分割 index.phpのヘッダ・フッタ・サイドバーの部分を分割し、 別のファイルにして、汎用性を高めましょう。 例として、次の図のように分割します。
  31. 31. ヘッダ コンテンツ サイドバー フッタ
  32. 32. header.php(新規作成)→index.phpからヘッダ部分を持ってくる footer.php(新規作成)→index.phpからフッタ部分を持ってくる sidebar.php(新規作成)→index.phpからサイドバーの部分を 持ってくる 『header.php』『footer.php』『sidebar.php』の作成 index.php header.php・footer.php・sidebar.phpから持って行った部分に以下の内容を記述 <?php get_header(); ?> <?php get_footer(); ?> <?php get_sidebar(); ?>
  33. 33. 各種ページの作成 • トップページ…front-page.php • 個別記事ページ…single.php • 固定ページ…page.php 【参考】 ・テンプレート階層について http://wpdocs.osdn.jp/テンプレート階層 (このスライドの12〜17ページ) ・テンプレート階層の図 http://wpdocs.osdn.jp/wiki/images/wp-template-hierarchy.jpg index.phpを参考に、トップページ・個別記事ページ・固定ページを 作成してみましょう
  34. 34. まとめ 今回、index.htmlから関数を付け足していき、表示がどうなるのか、 ソースがどう変化するのかを見ていただきました。 関数を追加する際、真っ白な画面が出てしまう場合がありますが、 その時はHTMLソースを見て、途中まで書かれていれば、その後の関 数の間違いがある。 何も書かれていなければ、ifやwhileの文に間違いがある。 など、判別できることがありますので、落ち着いて見直してみて下 さい。(これは自分自身への言葉でもあるのですが) 本当にお疲れ様でした
  35. 35. 参考ページ • style.cssのヘッダ名 http://wpdocs.osdn.jp/ファイルヘッダー • get_stylesheet_uri() http://wpdocs.osdn.jp/関数リファレンス/get_stylesheet_uri • get_stylesheet_directory_uri() http://wpdocs.osdn.jp/関数リファレンス/get_stylesheet_directory_uri • bloginfo() http://wpdocs.osdn.jp/テンプレートタグ/bloginfo • home_url() http://wpdocs.osdn.jp/テンプレートタグ/home_url • esc_url() http://wpdocs.osdn.jp/関数リファレンス/esc_url • トップページへのリンクでhome_urlをesc_urlでエスケープしてるのかについて https://www.l2tp.org/archives/5661 http://morilog.com/wordpress/tips/wp_escape/
  36. 36. 参考ページ • wp_head() http://wpdocs.osdn.jp/関数リファレンス/wp_head • wp_footer() http://wpdocs.osdn.jp/テンプレートタグ/wp_footer • スライド28ページの投稿記事のループについて http://wpdocs.osdn.jp/ループ • the_title() http://wpdocs.osdn.jp/テンプレートタグ/the_title • the_content() http://wpdocs.osdn.jp/テンプレートタグ/the_content • the_permalink() http://wpdocs.osdn.jp/テンプレートタグ/the_permalink • the_time(Y年n月j日) http://wpdocs.osdn.jp/テンプレートタグ/the_time http://wpdocs.osdn.jp/日付と時刻の書式
  37. 37. 参考ページ • 条件分岐タグ http://wpdocs.osdn.jp/条件分岐タグ • is_front_page() http://wpdocs.osdn.jp/関数リファレンス/is_front_page • get_header() http://wpdocs.osdn.jp/関数リファレンス/get_header • get_footer() http://wpdocs.osdn.jp/関数リファレンス/get_footer • get_sidebar() http://wpdocs.osdn.jp/関数リファレンス/get_sidebar 各関数やタグのページ終盤に【ソースファイル】とあります。 WordPressのコアファイルのどこにあるのか載っていますので参考に

×