Submit Search
Upload
静的HTMLファイルをWordPressのテーマにするワークショップ
•
Download as PPTX, PDF
•
0 likes
•
698 views
M
masaya yamao
Follow
静的HTML・CSSファイルをWordPressのテーマにする方法
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 38
Download now
Recommended
WordBench京都 2013年3月17日
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
Cherry Pie Web
テーマ制作時に何向けに制作するかで、テーマ作りのポイントなどが変わってくることがあります。今回は、その場合のテーマの作り込みの考え方をご紹介します。
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
Web nist
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
光利 吉田
Webサイトの構築に際して、デザイナーの領域とされていたデザインのトーン&マナーの方向性を導き出すため、簡便な手法をまとめた資料です。
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
Katsumi Tazuke
2016年4月日30日 WordPress もくもく勉強会 at Co-edo
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について考えていたら…」
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
Mitsuo Kawashima
Webディレクターや企業のWeb担当者の方へ。プロモーションは広告会社にまかせっきりになってませんか?明日から使えるプロモーション設計講座。
ディレクターが知るべきプロモーション設計
ディレクターが知るべきプロモーション設計
本間 和城
Recommended
WordBench京都 2013年3月17日
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
Cherry Pie Web
テーマ制作時に何向けに制作するかで、テーマ作りのポイントなどが変わってくることがあります。今回は、その場合のテーマの作り込みの考え方をご紹介します。
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
Web nist
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
光利 吉田
Webサイトの構築に際して、デザイナーの領域とされていたデザインのトーン&マナーの方向性を導き出すため、簡便な手法をまとめた資料です。
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
Katsumi Tazuke
2016年4月日30日 WordPress もくもく勉強会 at Co-edo
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について考えていたら…」
第9回HTML5ビギナーズ CSSとCSS設計について学ぼう!「reset.cssとnormalize.cssについて考えていたら…」
Mitsuo Kawashima
Webディレクターや企業のWeb担当者の方へ。プロモーションは広告会社にまかせっきりになってませんか?明日から使えるプロモーション設計講座。
ディレクターが知るべきプロモーション設計
ディレクターが知るべきプロモーション設計
本間 和城
2016年9月に実施したセミナーの資料です。 http://peatix.com/event/190033?lang=ja ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 毎日のように、新たなサービスが生まれてくるWeb業界。将来、自分でWebサービスを創りたい!と、くすぶっているあなたへ。 Web業界で働く人の中には「将来、自分のサービスを創ってみたいな」と考えたことがある人が少なくないと思います。しかし、「自分のサービスを創る」という実行の段階まで進まない人も同じようにいるのではないでしょうか? ●新規事業やWebサービスを創りたい。でも、実行できなかったこんな悩みがあったのでは? ・いつか、将来創りたいと漠然としていて、実行まで移らない… ・事業、サービスを創る流れ、環境をどう作ればいいのかわからない… ・アイデアはあるけど、実際にサービスを創って運営していく現実的なイメージがつかない… その悩みを解決できるイベントとして、今回「Webサービスを創り、育てる。」をコンセプトにツアー型イベントを開催します。ツアー型イベントとすることで、スタートアップからグロースまでを一気通貫して学べる。実践に近い所まで経験できる。というイベントです。 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞
Webサービスを生む実践スタートアップ講座
Webサービスを生む実践スタートアップ講座
本間 和城
組織の中で体系化されたタスク管理を行うデザイナー/エンジニアとは違い、フリーランスは、案件ごとに異なるタスク管理方法にチャンネルを切り替える必要があります。特に顧客が非IT系業種の場合、「タスク管理という概念」そのものから教育したり、場合によってはタスク管理システムの導入を諦めたり……。黒野が出会った様々な現場でのタスク管理法について、いくつかのケースに分けてご紹介します。
フリーランスが出会う“現場のタスク管理法あれこれ”
フリーランスが出会う“現場のタスク管理法あれこれ”
Akiko Kurono
このスライドは、2018年11月20日にパシフィコ横浜にて開催されたAdobe MAX Japanにおける黒野明子のセッション「組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう」のスライドです。 デモ部分が多いので、動画が公開されたらこのコメントにURLを書き添えます。 以下、セッション概要です。 アドビクリエイティブ製品の魅力は、なんといっても「データを連携させて制作可能な点」にあります。写真編集はお任せのPhotoshop、繊細なベジェアートワークを制作できるIllustrator、軽さとプロトタイピングが魅力のXD。この3つにモバイルアプリも組み合わせ、最適なワークフローを探しましょう。Photoshop寄り、Illustrator寄り、XD寄り、色々なパターンをご紹介しますので、あなたの仕事現場にぴったりの手法を見つけてください。
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
Akiko Kurono
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事
masaki sukeda
2015年7月25日・26日に開催されたWordCamp Kansai 2015にて行われた「WordPressなんでもフォーラム」前説として、WordPress.orgのフォーラムの紹介をしました。
WordCamp Kansai 2015 - WordPress.org フォーラム参加のススメ
WordCamp Kansai 2015 - WordPress.org フォーラム参加のススメ
Kojiro Fukazawa
【LIG’s Direction School 2016】 ディレクターが知るべきWebプロモーションとは?サイトで売れる仕組みを作る プロモーションは広告会社にまかせっきりになってませんか? 明日から使えるプロモーション設計の講座を通して、サイトでモノが売れる仕組みをみんなで考えていきましょう。 ==講師の紹介== 本間和城(株式会社インタースペース Resspress株式会社STORYS.JP) 株式会社インタースペースでWeb広告の新規営業を経験後、現在は新規事業の企画運用を行っている。また、STORYS.JPではプロデューサーとして、企業タイアップの企画などを担当。 日本ディレクション協会副会長。
【配布用】Web広告の成功法則_広告の設計と運用改善
【配布用】Web広告の成功法則_広告の設計と運用改善
本間 和城
https://career.levtech.jp/hikalab/event/detail/55/ プロモーションは代理店任せ・・。 マーケティングって言葉なんとくなく使っているけれど、 「マーケティングって何?」って聞かれると答えに困る・・。 そんな経験ありませんか? 難しい事は専門家に任せればいいけれど、 「本質」が分からなければ いまやっている事が正しいかわかりません。 それでは、正しい判断はできませんよね。 マーケティング・プロモーションの本質を ワークショップ形式で自分の頭で考えながら学んできましょう!
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
本間 和城
20130920 講演資料
20130920 講演資料
masaki sukeda
2013年1月12日(土)に行ったディレクターズワークショップ~クライアントサイドを巻き込んだディレクションとRFPの重要性~の配布資料
20130113 01 dir-mtgスライド
20130113 01 dir-mtgスライド
Kenta Nakamura
2013年9月21日に札幌で開催された「Director's Night」に登壇した際に使用したスライドです。 ここに記載されていることが全てではないですし、今現在、西山が全て出来ているかと問われるとおそらくNOですが、ご参考ください。
Director's Night 20130921
Director's Night 20130921
Yasufumi Nishiyama
Word beach2012
Word beach2012
Hidekazu Ishikawa
its sample
Slide
Slide
Takuya Yamamoto
【中村】サイト運用編スライドVer.3.0
【中村】サイト運用編スライドVer.3.0
Kenta Nakamura
contents.nagoya
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
Hidekazu Ishikawa
価格競争に飲まれずに楽しく生き残るために
ウェブ制作者のためのセルフブランディング
ウェブ制作者のためのセルフブランディング
Hidekazu Ishikawa
第14回リクリセミナー「Web制作の未来、あなたの未来」最終版
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制作勉強会第一回の資料 配布資料(PDF) http://goo.gl/FJPaX
Web制作勉強会 #1
Web制作勉強会 #1
Moto Yan
20121125 02 dir-mtgスライド02
20121125 02 dir-mtgスライド02
Kenta Nakamura
これまで数々の企業サイトを手がけ、全国各地で1000回以上の講演活動を通じて「Webディレクション」を追求してきた、現役19年目のWebディレクター 田口 真行による『ヒアリング術』のスライド資料です。 ■プロフィール 田口 真行(たぐち・まさゆき) 株式会社デスクトップワークス 代表取締役/Webディレクター Webディレクタースクール 主宰 1999年、フリーのWebディレクターとして独立後、株式会社デスクトップワークスを設立。企業サイトの企画~設計~制作〜運用を手掛ける傍ら、独自のディレクション手法を題材とした実践型の研修講師として、全国各地で19年間に渡り1000回以上のセミナー登壇や企業研修を展開。「Webディレクション」をテーマにした講演活動としては、日本で最も長く継続し、最も数多くを経験している。 また、Webディレクター向けライブ配信番組『ザ・ディレクション(https://webdirection.jp/live/)』や、セミナーイベント『エンタミナ(https://webdirection.jp/event/) 』の主宰など幅広く活動。 2017年、世界初となるWebディレクター向け支援ツール『Webディレクター手帳(https://webdirection.jp/tools/)』を開発。2018年、書籍『ディレクション思考(https://webdirection.jp/book/)』を執筆、あわせてWebディレクションを学び身につけるオンラインサロン『4LDK(https://webdirection.jp/4LDK/)』を開設。そして2019年、「セミナーの再定義」をコンセプトに立ち上げたライブ配信セミナー『現場学校(https://gbgk.jp)』をスタート。 株式会社スクー「2014年度最優秀公認団体賞」受賞。CSS Nite「ベストスピーカー」を2年連続受賞(2015年、2016年殿堂入り、2017年ベストセッション選出)。 Webディレクタースクール https://webdirection.jp/ Facebook@TaguchiMasayuki https://www.facebook.com/TaguchiMasayuki twitter@webdirection https://twitter.com/webdirection
クライアントとのより良い関係性を築くためのコミュニケーション手法『ヒアリング編』
クライアントとのより良い関係性を築くためのコミュニケーション手法『ヒアリング編』
Masayuki Taguchi
2014年9月27日に札幌市民ホール会議室で開催されたSaCSS Vol.58でお話させていただいた際のスライド資料です。 これは2013年9月に開催されたDirector's Nightでお話した内容の改訂版となります。(→ http://www.slideshare.net/yasufuminishiyama/directors-night-20130921 ) ここに記載されていることが全てではないですし、今現在、西山が全て出来ているかと問われるとおそらくNOですが、ご参考ください。
だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Z
Yasufumi Nishiyama
DIST.17 「Webデザインの現場のための効率化術」2017/08/25
あるマークアップエンジニアの初期制作時のテンプレ事情
あるマークアップエンジニアの初期制作時のテンプレ事情
Shingo Iwahori
More Related Content
What's hot
2016年9月に実施したセミナーの資料です。 http://peatix.com/event/190033?lang=ja ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ 毎日のように、新たなサービスが生まれてくるWeb業界。将来、自分でWebサービスを創りたい!と、くすぶっているあなたへ。 Web業界で働く人の中には「将来、自分のサービスを創ってみたいな」と考えたことがある人が少なくないと思います。しかし、「自分のサービスを創る」という実行の段階まで進まない人も同じようにいるのではないでしょうか? ●新規事業やWebサービスを創りたい。でも、実行できなかったこんな悩みがあったのでは? ・いつか、将来創りたいと漠然としていて、実行まで移らない… ・事業、サービスを創る流れ、環境をどう作ればいいのかわからない… ・アイデアはあるけど、実際にサービスを創って運営していく現実的なイメージがつかない… その悩みを解決できるイベントとして、今回「Webサービスを創り、育てる。」をコンセプトにツアー型イベントを開催します。ツアー型イベントとすることで、スタートアップからグロースまでを一気通貫して学べる。実践に近い所まで経験できる。というイベントです。 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞
Webサービスを生む実践スタートアップ講座
Webサービスを生む実践スタートアップ講座
本間 和城
組織の中で体系化されたタスク管理を行うデザイナー/エンジニアとは違い、フリーランスは、案件ごとに異なるタスク管理方法にチャンネルを切り替える必要があります。特に顧客が非IT系業種の場合、「タスク管理という概念」そのものから教育したり、場合によってはタスク管理システムの導入を諦めたり……。黒野が出会った様々な現場でのタスク管理法について、いくつかのケースに分けてご紹介します。
フリーランスが出会う“現場のタスク管理法あれこれ”
フリーランスが出会う“現場のタスク管理法あれこれ”
Akiko Kurono
このスライドは、2018年11月20日にパシフィコ横浜にて開催されたAdobe MAX Japanにおける黒野明子のセッション「組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう」のスライドです。 デモ部分が多いので、動画が公開されたらこのコメントにURLを書き添えます。 以下、セッション概要です。 アドビクリエイティブ製品の魅力は、なんといっても「データを連携させて制作可能な点」にあります。写真編集はお任せのPhotoshop、繊細なベジェアートワークを制作できるIllustrator、軽さとプロトタイピングが魅力のXD。この3つにモバイルアプリも組み合わせ、最適なワークフローを探しましょう。Photoshop寄り、Illustrator寄り、XD寄り、色々なパターンをご紹介しますので、あなたの仕事現場にぴったりの手法を見つけてください。
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
Akiko Kurono
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事
masaki sukeda
2015年7月25日・26日に開催されたWordCamp Kansai 2015にて行われた「WordPressなんでもフォーラム」前説として、WordPress.orgのフォーラムの紹介をしました。
WordCamp Kansai 2015 - WordPress.org フォーラム参加のススメ
WordCamp Kansai 2015 - WordPress.org フォーラム参加のススメ
Kojiro Fukazawa
【LIG’s Direction School 2016】 ディレクターが知るべきWebプロモーションとは?サイトで売れる仕組みを作る プロモーションは広告会社にまかせっきりになってませんか? 明日から使えるプロモーション設計の講座を通して、サイトでモノが売れる仕組みをみんなで考えていきましょう。 ==講師の紹介== 本間和城(株式会社インタースペース Resspress株式会社STORYS.JP) 株式会社インタースペースでWeb広告の新規営業を経験後、現在は新規事業の企画運用を行っている。また、STORYS.JPではプロデューサーとして、企業タイアップの企画などを担当。 日本ディレクション協会副会長。
【配布用】Web広告の成功法則_広告の設計と運用改善
【配布用】Web広告の成功法則_広告の設計と運用改善
本間 和城
https://career.levtech.jp/hikalab/event/detail/55/ プロモーションは代理店任せ・・。 マーケティングって言葉なんとくなく使っているけれど、 「マーケティングって何?」って聞かれると答えに困る・・。 そんな経験ありませんか? 難しい事は専門家に任せればいいけれど、 「本質」が分からなければ いまやっている事が正しいかわかりません。 それでは、正しい判断はできませんよね。 マーケティング・プロモーションの本質を ワークショップ形式で自分の頭で考えながら学んできましょう!
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
本間 和城
20130920 講演資料
20130920 講演資料
masaki sukeda
2013年1月12日(土)に行ったディレクターズワークショップ~クライアントサイドを巻き込んだディレクションとRFPの重要性~の配布資料
20130113 01 dir-mtgスライド
20130113 01 dir-mtgスライド
Kenta Nakamura
2013年9月21日に札幌で開催された「Director's Night」に登壇した際に使用したスライドです。 ここに記載されていることが全てではないですし、今現在、西山が全て出来ているかと問われるとおそらくNOですが、ご参考ください。
Director's Night 20130921
Director's Night 20130921
Yasufumi Nishiyama
Word beach2012
Word beach2012
Hidekazu Ishikawa
its sample
Slide
Slide
Takuya Yamamoto
【中村】サイト運用編スライドVer.3.0
【中村】サイト運用編スライドVer.3.0
Kenta Nakamura
contents.nagoya
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
実録 情熱と苦悩のWordPressテーマ・プラグイン 販売ビジネス
Hidekazu Ishikawa
価格競争に飲まれずに楽しく生き残るために
ウェブ制作者のためのセルフブランディング
ウェブ制作者のためのセルフブランディング
Hidekazu Ishikawa
第14回リクリセミナー「Web制作の未来、あなたの未来」最終版
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制作勉強会第一回の資料 配布資料(PDF) http://goo.gl/FJPaX
Web制作勉強会 #1
Web制作勉強会 #1
Moto Yan
20121125 02 dir-mtgスライド02
20121125 02 dir-mtgスライド02
Kenta Nakamura
これまで数々の企業サイトを手がけ、全国各地で1000回以上の講演活動を通じて「Webディレクション」を追求してきた、現役19年目のWebディレクター 田口 真行による『ヒアリング術』のスライド資料です。 ■プロフィール 田口 真行(たぐち・まさゆき) 株式会社デスクトップワークス 代表取締役/Webディレクター Webディレクタースクール 主宰 1999年、フリーのWebディレクターとして独立後、株式会社デスクトップワークスを設立。企業サイトの企画~設計~制作〜運用を手掛ける傍ら、独自のディレクション手法を題材とした実践型の研修講師として、全国各地で19年間に渡り1000回以上のセミナー登壇や企業研修を展開。「Webディレクション」をテーマにした講演活動としては、日本で最も長く継続し、最も数多くを経験している。 また、Webディレクター向けライブ配信番組『ザ・ディレクション(https://webdirection.jp/live/)』や、セミナーイベント『エンタミナ(https://webdirection.jp/event/) 』の主宰など幅広く活動。 2017年、世界初となるWebディレクター向け支援ツール『Webディレクター手帳(https://webdirection.jp/tools/)』を開発。2018年、書籍『ディレクション思考(https://webdirection.jp/book/)』を執筆、あわせてWebディレクションを学び身につけるオンラインサロン『4LDK(https://webdirection.jp/4LDK/)』を開設。そして2019年、「セミナーの再定義」をコンセプトに立ち上げたライブ配信セミナー『現場学校(https://gbgk.jp)』をスタート。 株式会社スクー「2014年度最優秀公認団体賞」受賞。CSS Nite「ベストスピーカー」を2年連続受賞(2015年、2016年殿堂入り、2017年ベストセッション選出)。 Webディレクタースクール https://webdirection.jp/ Facebook@TaguchiMasayuki https://www.facebook.com/TaguchiMasayuki twitter@webdirection https://twitter.com/webdirection
クライアントとのより良い関係性を築くためのコミュニケーション手法『ヒアリング編』
クライアントとのより良い関係性を築くためのコミュニケーション手法『ヒアリング編』
Masayuki Taguchi
What's hot
(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
クライアントとのより良い関係性を築くためのコミュニケーション手法『ヒアリング編』
クライアントとのより良い関係性を築くためのコミュニケーション手法『ヒアリング編』
Similar to 静的HTMLファイルをWordPressのテーマにするワークショップ
2014年9月27日に札幌市民ホール会議室で開催されたSaCSS Vol.58でお話させていただいた際のスライド資料です。 これは2013年9月に開催されたDirector's Nightでお話した内容の改訂版となります。(→ http://www.slideshare.net/yasufuminishiyama/directors-night-20130921 ) ここに記載されていることが全てではないですし、今現在、西山が全て出来ているかと問われるとおそらくNOですが、ご参考ください。
だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Z
Yasufumi Nishiyama
DIST.17 「Webデザインの現場のための効率化術」2017/08/25
あるマークアップエンジニアの初期制作時のテンプレ事情
あるマークアップエンジニアの初期制作時のテンプレ事情
Shingo Iwahori
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
だいすけ ふるかわ
WordCamp Tokyo2015ハンズオンスライド(配布版)
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
【5月25日、26日 会津若松市開催】ワードプレスを使って、自分でホームページを作りませんか?
ワードプレスとは? 竜胆(りんどう)Webデザイン
ワードプレスとは? 竜胆(りんどう)Webデザイン
古川 恵子
Firefox,Safari,Chromeのインスペクタの違いを紹介& ブラウザのインスペクタを使っての簡単なCSS編集方法
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
Atsushi Ando
WCAF vol.10 こもり資料
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
BizVektorに見る汎用テンプレートの設計思想
BizVektorに見る汎用テンプレートの設計思想
Hidekazu Ishikawa
WCAN mini Design vol.9 資料
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
2015年10月31日に開催されたWordCamp Tokyo 2015でのセッションスライドです。
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
Mignon Style
パネルディスカッション資料(公開版)
パネルディスカッション資料(公開版)
odakeiji
テーマ作成のアプローチ
テーマ作成のアプローチ
Seto Takahiro
この資料を使って、1時間強の講演をしました。 参加者は基金訓練受講生・約30名。 現物には、いろいろエフェクトをかけていますが、ネタにするための過剰なものも含まれています。
Keynote 20120316
Keynote 20120316
Rikimaru Tomohiro
2013/10/12 Japan SharePoint Group 勉強会 11# 福岡 発表資料です。
デザインが統一されているShare point サイトを作成しよう
デザインが統一されているShare point サイトを作成しよう
Mayuko Hatanaka
WordVolcano(2012.7.14@マルヤガーデンズ/鹿児島) ---------------------- HTML,CSS,PHPなどのコードをさわらずに、既存テーマとプラグインでビジネサイトを作ってみよう、というセッションを行いました。
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
FLOW web planning & design
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
Masakazu Muraoka
確認・検討にちょっと役立つプラグインで『WP Theme Test』と『Password Protected』をご紹介しました。 WordPressもくもく勉強会@日本橋 #12(2017.12.09)で発表したスライドです
確認・検討にちょっと役立つプラグイン
確認・検討にちょっと役立つプラグイン
Kawaji Masaki
WebSig 24/7 Vol. 31 こもり資料
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?
masaaki komori
PHP Conference kansai 2015 発表資料(公開用)です。
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
Yusuke Kawabata
渋谷区区民会館での「無料から始めるホームページ Jimdoホームページ作成セミナー」のスライドです。
無料から始めるJimdoホームページ作成セミナー "Get started with Jimdo Free!"
無料から始めるJimdoホームページ作成セミナー "Get started with Jimdo Free!"
Logo and Web Co., Ltd.
Similar to 静的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!"
Recently uploaded
人的資本経営[1]を実現するには,生産性とQoW(Quality of Work,働き方の質)を同時に改善し続けていくことが有効である.そのための課題は多岐に渡るため,DX(Digital Transformation)的発想が求められる。一方、情報の約60~80%が位置情報に関連していることが報告されている.本稿では,地理空間情報と他の情報とを連携させて課題解決を支援する地理空間インテリジェンス(GSI)でDXを促進し,製造現場やサービス現場で人的資本経営を支援することに資する筆者らの一連の取り組みについて紹介する.
人的資本経営のための地理情報インテリジェンス 作業パターン分析と心身状態把握に関する実証事例
人的資本経営のための地理情報インテリジェンス 作業パターン分析と心身状態把握に関する実証事例
Kurata Takeshi
今さら聞けない人のためのDevOps超入門 OSC2024名古屋 セミナー資料
今さら聞けない人のためのDevOps超入門 OSC2024名古屋 セミナー資料
今さら聞けない人のためのDevOps超入門 OSC2024名古屋 セミナー資料
Toru Miyahara
エンジニアのセルフブランディングと技術情報発信の重要性 テクニカルライターになろう 講演資料
エンジニアのセルフブランディングと技術情報発信の重要性 テクニカルライターになろう 講演資料
エンジニアのセルフブランディングと技術情報発信の重要性 テクニカルライターになろう 講演資料
Toru Miyahara
Solana Developer Hub Online #6 https://lu.ma/evx8jtpi
Compute Units/Budget最適化 - Solana Developer Hub Online 6 #SolDevHub
Compute Units/Budget最適化 - Solana Developer Hub Online 6 #SolDevHub
K Kinzal
下記の会の感想 https://kichijojipm.connpass.com/event/315276/presentation/
本の感想共有会「データモデリングでドメインを駆動する」本が突きつける我々の課題について
本の感想共有会「データモデリングでドメインを駆動する」本が突きつける我々の課題について
Masatsugu Matsushita
スタートアップCTO経験から キャリアについて再考する DIGGLE 株式会社 取締役CTO 水上駿 こちらのイベントでの登壇資料です。 https://rosca.connpass.com/event/319175/
【登壇資料】スタートアップCTO経験からキャリアについて再考する CTO・VPoEに聞く by DIGGLE CTO 水上
【登壇資料】スタートアップCTO経験からキャリアについて再考する CTO・VPoEに聞く by DIGGLE CTO 水上
mizukami4
ビジュアルプログラミングIoTLT17資料です。
ビジュアルプログラミングIotLT17-オープンソース化されたビジュアルプログラミング環境Noodlの紹介
ビジュアルプログラミングIotLT17-オープンソース化されたビジュアルプログラミング環境Noodlの紹介
miyp
Linuxサーバー構築 学習のポイントと環境構築 OSC2024名古屋 セミナー資料
Linuxサーバー構築 学習のポイントと環境構築 OSC2024名古屋 セミナー資料
Linuxサーバー構築 学習のポイントと環境構築 OSC2024名古屋 セミナー資料
Toru Miyahara
Recently uploaded
(8)
人的資本経営のための地理情報インテリジェンス 作業パターン分析と心身状態把握に関する実証事例
人的資本経営のための地理情報インテリジェンス 作業パターン分析と心身状態把握に関する実証事例
今さら聞けない人のためのDevOps超入門 OSC2024名古屋 セミナー資料
今さら聞けない人のためのDevOps超入門 OSC2024名古屋 セミナー資料
エンジニアのセルフブランディングと技術情報発信の重要性 テクニカルライターになろう 講演資料
エンジニアのセルフブランディングと技術情報発信の重要性 テクニカルライターになろう 講演資料
Compute Units/Budget最適化 - Solana Developer Hub Online 6 #SolDevHub
Compute Units/Budget最適化 - Solana Developer Hub Online 6 #SolDevHub
本の感想共有会「データモデリングでドメインを駆動する」本が突きつける我々の課題について
本の感想共有会「データモデリングでドメインを駆動する」本が突きつける我々の課題について
【登壇資料】スタートアップCTO経験からキャリアについて再考する CTO・VPoEに聞く by DIGGLE CTO 水上
【登壇資料】スタートアップCTO経験からキャリアについて再考する CTO・VPoEに聞く by DIGGLE CTO 水上
ビジュアルプログラミングIotLT17-オープンソース化されたビジュアルプログラミング環境Noodlの紹介
ビジュアルプログラミングIotLT17-オープンソース化されたビジュアルプログラミング環境Noodlの紹介
Linuxサーバー構築 学習のポイントと環境構築 OSC2024名古屋 セミナー資料
Linuxサーバー構築 学習のポイントと環境構築 OSC2024名古屋 セミナー資料
静的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のコアファイルのどこにあるのか載っていますので参考に
Download now