Suche senden
Hochladen
静的HTMLファイルをWordPressのテーマにするワークショップ
•
Als PPTX, PDF herunterladen
•
0 gefällt mir
•
698 views
M
masaya yamao
Folgen
静的HTML・CSSファイルをWordPressのテーマにする方法
Weniger lesen
Mehr lesen
Ingenieurwesen
Melden
Teilen
Melden
Teilen
1 von 38
Jetzt herunterladen
Empfohlen
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
Cherry Pie Web
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
Web nist
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
光利 吉田
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
Katsumi Tazuke
20160430co-edo
20160430co-edo
Chieko Aihara
20121117 01 dir-mtgスライド01
20121117 01 dir-mtgスライド01
Kenta Nakamura
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
Mitsuo Kawashima
ディレクターが知るべきプロモーション設計
ディレクターが知るべきプロモーション設計
本間 和城
Empfohlen
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
Cherry Pie Web
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
Web nist
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
光利 吉田
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
Katsumi Tazuke
20160430co-edo
20160430co-edo
Chieko Aihara
20121117 01 dir-mtgスライド01
20121117 01 dir-mtgスライド01
Kenta Nakamura
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
Mitsuo Kawashima
ディレクターが知るべきプロモーション設計
ディレクターが知るべきプロモーション設計
本間 和城
Webサービスを生む実践スタートアップ講座
Webサービスを生む実践スタートアップ講座
本間 和城
フリーランスが出会う“現場のタスク管理法あれこれ”
フリーランスが出会う“現場のタスク管理法あれこれ”
Akiko Kurono
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
Akiko Kurono
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事
masaki sukeda
WordCamp Kansai 2015 - WordPress.org フォーラム参加のススメ
WordCamp Kansai 2015 - WordPress.org フォーラム参加のススメ
Kojiro Fukazawa
【配布用】Web広告の成功法則_広告の設計と運用改善
【配布用】Web広告の成功法則_広告の設計と運用改善
本間 和城
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
本間 和城
20130920 講演資料
20130920 講演資料
masaki sukeda
20130113 01 dir-mtgスライド
20130113 01 dir-mtgスライド
Kenta Nakamura
Director's Night 20130921
Director's Night 20130921
Yasufumi Nishiyama
Word beach2012
Word beach2012
Hidekazu Ishikawa
Slide
Slide
Takuya Yamamoto
【中村】サイト運用編スライドVer.3.0
【中村】サイト運用編スライドVer.3.0
Kenta Nakamura
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
Hidekazu Ishikawa
ウェブ制作者のためのセルフブランディング
ウェブ制作者のためのセルフブランディング
Hidekazu Ishikawa
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
masaaki komori
20130216 講演資料
20130216 講演資料
Kenta Nakamura
Web制作勉強会 #1
Web制作勉強会 #1
Moto Yan
20121125 02 dir-mtgスライド02
20121125 02 dir-mtgスライド02
Kenta Nakamura
クライアントとのより良い関係性を築くためのコミュニケーション手法『ヒアリング編』
クライアントとのより良い関係性を築くためのコミュニケーション手法『ヒアリング編』
Masayuki Taguchi
だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Z
Yasufumi Nishiyama
あるマークアップエンジニアの初期制作時のテンプレ事情
あるマークアップエンジニアの初期制作時のテンプレ事情
Shingo Iwahori
Weitere ähnliche Inhalte
Was ist angesagt?
Webサービスを生む実践スタートアップ講座
Webサービスを生む実践スタートアップ講座
本間 和城
フリーランスが出会う“現場のタスク管理法あれこれ”
フリーランスが出会う“現場のタスク管理法あれこれ”
Akiko Kurono
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
Akiko Kurono
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事
masaki sukeda
WordCamp Kansai 2015 - WordPress.org フォーラム参加のススメ
WordCamp Kansai 2015 - WordPress.org フォーラム参加のススメ
Kojiro Fukazawa
【配布用】Web広告の成功法則_広告の設計と運用改善
【配布用】Web広告の成功法則_広告の設計と運用改善
本間 和城
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
本間 和城
20130920 講演資料
20130920 講演資料
masaki sukeda
20130113 01 dir-mtgスライド
20130113 01 dir-mtgスライド
Kenta Nakamura
Director's Night 20130921
Director's Night 20130921
Yasufumi Nishiyama
Word beach2012
Word beach2012
Hidekazu Ishikawa
Slide
Slide
Takuya Yamamoto
【中村】サイト運用編スライドVer.3.0
【中村】サイト運用編スライドVer.3.0
Kenta Nakamura
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
Hidekazu Ishikawa
ウェブ制作者のためのセルフブランディング
ウェブ制作者のためのセルフブランディング
Hidekazu Ishikawa
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
masaaki komori
20130216 講演資料
20130216 講演資料
Kenta Nakamura
Web制作勉強会 #1
Web制作勉強会 #1
Moto Yan
20121125 02 dir-mtgスライド02
20121125 02 dir-mtgスライド02
Kenta Nakamura
クライアントとのより良い関係性を築くためのコミュニケーション手法『ヒアリング編』
クライアントとのより良い関係性を築くためのコミュニケーション手法『ヒアリング編』
Masayuki Taguchi
Was ist angesagt?
(20)
Webサービスを生む実践スタートアップ講座
Webサービスを生む実践スタートアップ講座
フリーランスが出会う“現場のタスク管理法あれこれ”
フリーランスが出会う“現場のタスク管理法あれこれ”
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事
WordCamp Kansai 2015 - WordPress.org フォーラム参加のススメ
WordCamp Kansai 2015 - WordPress.org フォーラム参加のススメ
【配布用】Web広告の成功法則_広告の設計と運用改善
【配布用】Web広告の成功法則_広告の設計と運用改善
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
20130920 講演資料
20130920 講演資料
20130113 01 dir-mtgスライド
20130113 01 dir-mtgスライド
Director's Night 20130921
Director's Night 20130921
Word beach2012
Word beach2012
Slide
Slide
【中村】サイト運用編スライドVer.3.0
【中村】サイト運用編スライドVer.3.0
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
ウェブ制作者のためのセルフブランディング
ウェブ制作者のためのセルフブランディング
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
20130216 講演資料
20130216 講演資料
Web制作勉強会 #1
Web制作勉強会 #1
20121125 02 dir-mtgスライド02
20121125 02 dir-mtgスライド02
クライアントとのより良い関係性を築くためのコミュニケーション手法『ヒアリング編』
クライアントとのより良い関係性を築くためのコミュニケーション手法『ヒアリング編』
Ähnlich wie 静的HTMLファイルをWordPressのテーマにするワークショップ
だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Z
Yasufumi Nishiyama
あるマークアップエンジニアの初期制作時のテンプレ事情
あるマークアップエンジニアの初期制作時のテンプレ事情
Shingo Iwahori
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
だいすけ ふるかわ
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
ワードプレスとは? 竜胆(りんどう)Webデザイン
ワードプレスとは? 竜胆(りんどう)Webデザイン
古川 恵子
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
Atsushi Ando
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
BizVektorに見る汎用テンプレートの設計思想
BizVektorに見る汎用テンプレートの設計思想
Hidekazu Ishikawa
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
Mignon Style
パネルディスカッション資料(公開版)
パネルディスカッション資料(公開版)
odakeiji
テーマ作成のアプローチ
テーマ作成のアプローチ
Seto Takahiro
Keynote 20120316
Keynote 20120316
Rikimaru Tomohiro
デザインが統一されているShare point サイトを作成しよう
デザインが統一されているShare point サイトを作成しよう
Mayuko Hatanaka
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
FLOW web planning & design
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
Masakazu Muraoka
確認・検討にちょっと役立つプラグイン
確認・検討にちょっと役立つプラグイン
Kawaji Masaki
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?
masaaki komori
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
Yusuke Kawabata
無料から始めるJimdoホームページ作成セミナー "Get started with Jimdo Free!"
無料から始めるJimdoホームページ作成セミナー "Get started with Jimdo Free!"
Logo and Web Co., Ltd.
Ähnlich wie 静的HTMLファイルをWordPressのテーマにするワークショップ
(20)
だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Z
あるマークアップエンジニアの初期制作時のテンプレ事情
あるマークアップエンジニアの初期制作時のテンプレ事情
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
ワードプレスとは? 竜胆(りんどう)Webデザイン
ワードプレスとは? 竜胆(りんどう)Webデザイン
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
Web Design Process for The Future
Web Design Process for The Future
BizVektorに見る汎用テンプレートの設計思想
BizVektorに見る汎用テンプレートの設計思想
Web Design Process for The Future
Web Design Process for The Future
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
パネルディスカッション資料(公開版)
パネルディスカッション資料(公開版)
テーマ作成のアプローチ
テーマ作成のアプローチ
Keynote 20120316
Keynote 20120316
デザインが統一されているShare point サイトを作成しよう
デザインが統一されているShare point サイトを作成しよう
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
確認・検討にちょっと役立つプラグイン
確認・検討にちょっと役立つプラグイン
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
無料から始めるJimdoホームページ作成セミナー "Get started with Jimdo Free!"
無料から始めるJimdoホームページ作成セミナー "Get started with Jimdo Free!"
静的HTMLファイルをWordPressのテーマにするワークショップ
1.
山尾 雅也 静的HTMLファイルを WordPressのテーマにする ワークショップ
2.
自己紹介 山尾 雅也 (38 歳) 〜2007年 2007年〜2008年 2008年〜2011年 2014年〜現在 CAD/CAMでのマシニングオペレーター WEB制作会社・広告代理店でコーダー SEOマーケティング&コーダー マークアップエンジニア&WEBエンジニア 大阪府吹田市生まれ 三重県桑名市育ち
3.
そして初めてのスピーカーです!! どうか優しい目でみていただけると助かります。 そしてテーマ作成の経験者の方 手助けしていただけると すごく喜びます
4.
タイムテーブル •テーマについて説明 •ワークショップ •まとめ •ネクストタイム
5.
テーマとは?
6.
テーマとは 例えば、 デザインの着せ替え (コンテンツの内容はそのままに デザインだけを一瞬にして変える)
7.
テーマの作成方法
8.
テーマの作成方法 親テーマから子テーマ 既存のテーマをベースにカスタマイズする方法 フルスクラッチ ゼロから作成する方法 (静的HTMLから関数を埋め込んだり、 共通部分を切り分けたりする)
9.
子テーマでの作成のメリット・デメリット • メリット 親テーマの必要な部分はそのままに、カスタマイズできる。 ゼロからの作成の必要がないので、少ない時間で完成できる。 • デメリット 親テーマへの依存が大きくなり、学習時間がかかる。 親テーマのアップデートによっては、子テーマの再カスタマ イズが必要になる。
10.
フルスクラッチでのテーマ作成の メリットデメリット • メリット デザイン、機能など細かいところまで自由にカス タマイズできる。 • デメリット ゼロからコードを書くため、制作に時間がかかる。 HTML・CSS・PHPの総合的な知識が必要になる。
11.
今回のワークショップでは 親テーマから子テーマ 既存のテーマをベースにカスタマイズする方法 フルスクラッチ ゼロから作成する方法 (静的HTMLから関数を埋め込んだり、 共通部分を切り分けたりする) こちらで作成していきます
12.
テンプレート階層
13.
14.
index.php 個別投稿ページ=ブログ記事 single-{post_type}.php single.php
15.
index.php フロントページ=トップページ front-page.php
16.
category.php カテゴリーページ category-{slug}.php index.php category-{ID}.php archive.php
17.
index.php アーカイブページ archive-{post_type}.php archive.php
18.
index.php style.css があれば動きます (テーマとしてエラーが出ない)
19.
実際にテーマとして認識されるか操作します
20.
ということで ワークショップを開始します 関数や参考ページはスライド最後にリンクを載せています
21.
まず静的HTMLのファイルを ダウンロードしてください https://wbn1706.mistle.org/wbn.zip 今回の内容が動作しているページは https://wbn1706.mistle.org/ に載せています。
22.
テーマ情報追加 style.css /* Theme Name: テーマの名前 Theme
URI: テーマのサイトのURI Description: テーマの説明 Author: 作者の名前 Author URI: 作者のURI */ 1行目に追加
23.
ファイルパスの変更 index.php <link rel=“stylesheet” href=“style.css”> <link
rel=“stylesheet” href=“<?php echo get_stylesheet_uri(); ?>”> 1行目に追加
24.
ファイルパスの変更 index.php <img src=“./img/main_image.jpg” alt=“ワークショップ…”> <img
src=“ <?php echo get_stylesheet_directory_uri(); ?>/img/ main_image.jpg” alt=“ワークショップ…”> 1行目に追加
25.
サイトのタイトルと説明文の表示 index.php <header> <a href=“#”> <h1><?php bloginfo(‘name’);
?> </a> <p><?php bloginfo(‘description’); ?></p> </header> (例)例えば左上にサイトのタイトルと説明文を表示
26.
TOPページへのリンク index.php <header> <a href=“<?php echo
esc_url( home_url( ‘/’ ) ); ?>”> <h1><?php bloginfo(‘name’); ?> </a> <p><?php bloginfo(‘description’); ?></p> </header> (例)例えば左上にサイトのタイトルと説明文を表示
27.
おまじないの入力 index.php • wp_head()………</head>の直前に記述 • wp_footer()……</body>の直前に記述 <?php
wp_head(); ?> </head> <?php wp_footer(); ?> </body> </html>
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> <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; ?>
29.
投稿記事の抜粋を表示 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; ?>
30.
記事がない時のエラーメッセージを表示 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; ?> ・ ・ ・ ・
31.
ヘッダ・フッタ・サイドバーの分割 index.phpのヘッダ・フッタ・サイドバーの部分を分割し、 別のファイルにして、汎用性を高めましょう。 例として、次の図のように分割します。
32.
ヘッダ コンテンツ サイドバー フッタ
33.
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(); ?>
34.
各種ページの作成 • トップページ…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を参考に、トップページ・個別記事ページ・固定ページを 作成してみましょう
35.
まとめ 今回、index.htmlから関数を付け足していき、表示がどうなるのか、 ソースがどう変化するのかを見ていただきました。 関数を追加する際、真っ白な画面が出てしまう場合がありますが、 その時はHTMLソースを見て、途中まで書かれていれば、その後の関 数の間違いがある。 何も書かれていなければ、ifやwhileの文に間違いがある。 など、判別できることがありますので、落ち着いて見直してみて下 さい。(これは自分自身への言葉でもあるのですが) 本当にお疲れ様でした
36.
参考ページ • 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/
37.
参考ページ • 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/日付と時刻の書式
38.
参考ページ • 条件分岐タグ 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のコアファイルのどこにあるのか載っていますので参考に
Jetzt herunterladen