Enviar búsqueda
Cargar
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
•
2 recomendaciones
•
10,450 vistas
タカシ キタジマ
Seguir
Denunciar
Compartir
Denunciar
Compartir
1 de 27
Descargar ahora
Descargar para leer sin conexión
Recomendados
WP-CLI (WordBench Sendai 20140628)
WP-CLI (WordBench Sendai 20140628)
Kazue Igarashi
ノンプログラマーのためのWordPressプラグイン開発超入門v1.0
ノンプログラマーのためのWordPressプラグイン開発超入門v1.0
Yuki Okamoto
え?まだMAMPで消耗してんの?
え?まだMAMPで消耗してんの?
Takayuki Miyauchi
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
タカシ キタジマ
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
タカシ キタジマ
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
foom_in
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
Shinichi Nishikawa
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
Recomendados
WP-CLI (WordBench Sendai 20140628)
WP-CLI (WordBench Sendai 20140628)
Kazue Igarashi
ノンプログラマーのためのWordPressプラグイン開発超入門v1.0
ノンプログラマーのためのWordPressプラグイン開発超入門v1.0
Yuki Okamoto
え?まだMAMPで消耗してんの?
え?まだMAMPで消耗してんの?
Takayuki Miyauchi
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
タカシ キタジマ
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
タカシ キタジマ
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
foom_in
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
Shinichi Nishikawa
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
VCCW + Wordmove でデプロイが劇的に簡単になった話
VCCW + Wordmove でデプロイが劇的に簡単になった話
タカシ キタジマ
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
Mignon Style
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Hidetaka Okamoto
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
Mignon Style
レスポンシブ・イメージのWordPressへの実装と4.4
レスポンシブ・イメージのWordPressへの実装と4.4
Toru Miki
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
Takashi Uemura
ブログの枠を超える?ためのWordPressカスタマイズ入門
ブログの枠を超える?ためのWordPressカスタマイズ入門
muracchi
子テーマを使ったサイト制作
子テーマを使ったサイト制作
shimoyama kengo
WordPress公式テーマ登録のための5ステップ
WordPress公式テーマ登録のための5ステップ
Mignon Style
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
Cherry Pie Web
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoya
Shinichi Nishikawa
Wordpressスマートフォンテーマ作成
Wordpressスマートフォンテーマ作成
Yoshie Nakayama
ノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon Style
ノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon Style
Mignon Style
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
Mignon Style
WordCamp Tokyo2016itkaasan
WordCamp Tokyo2016itkaasan
松田 千尋
WordPressで行う継続的インテグレーションのススメ
WordPressで行う継続的インテグレーションのススメ
horike37
HTML5 開発環境の紹介
HTML5 開発環境の紹介
tomo_masakura
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
Mignon Style
WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
Takashi Uemura
HTML5とは何か? - 芸大 Webデザイン演習B
HTML5とは何か? - 芸大 Webデザイン演習B
Atsushi Tadokoro
WordPressで企業サイトのテーマを作る
WordPressで企業サイトのテーマを作る
Muyuu Fujita
Más contenido relacionado
La actualidad más candente
VCCW + Wordmove でデプロイが劇的に簡単になった話
VCCW + Wordmove でデプロイが劇的に簡単になった話
タカシ キタジマ
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
Mignon Style
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Hidetaka Okamoto
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
Mignon Style
レスポンシブ・イメージのWordPressへの実装と4.4
レスポンシブ・イメージのWordPressへの実装と4.4
Toru Miki
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
Takashi Uemura
ブログの枠を超える?ためのWordPressカスタマイズ入門
ブログの枠を超える?ためのWordPressカスタマイズ入門
muracchi
子テーマを使ったサイト制作
子テーマを使ったサイト制作
shimoyama kengo
WordPress公式テーマ登録のための5ステップ
WordPress公式テーマ登録のための5ステップ
Mignon Style
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
Cherry Pie Web
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoya
Shinichi Nishikawa
Wordpressスマートフォンテーマ作成
Wordpressスマートフォンテーマ作成
Yoshie Nakayama
ノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon Style
ノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon Style
Mignon Style
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
Mignon Style
WordCamp Tokyo2016itkaasan
WordCamp Tokyo2016itkaasan
松田 千尋
WordPressで行う継続的インテグレーションのススメ
WordPressで行う継続的インテグレーションのススメ
horike37
HTML5 開発環境の紹介
HTML5 開発環境の紹介
tomo_masakura
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
Mignon Style
WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
Takashi Uemura
La actualidad más candente
(20)
VCCW + Wordmove でデプロイが劇的に簡単になった話
VCCW + Wordmove でデプロイが劇的に簡単になった話
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
レスポンシブ・イメージのWordPressへの実装と4.4
レスポンシブ・イメージのWordPressへの実装と4.4
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
ブログの枠を超える?ためのWordPressカスタマイズ入門
ブログの枠を超える?ためのWordPressカスタマイズ入門
子テーマを使ったサイト制作
子テーマを使ったサイト制作
WordPress公式テーマ登録のための5ステップ
WordPress公式テーマ登録のための5ステップ
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoya
Wordpressスマートフォンテーマ作成
Wordpressスマートフォンテーマ作成
ノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon Style
ノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon Style
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
WordCamp Tokyo2016itkaasan
WordCamp Tokyo2016itkaasan
WordPressで行う継続的インテグレーションのススメ
WordPressで行う継続的インテグレーションのススメ
HTML5 開発環境の紹介
HTML5 開発環境の紹介
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
WordPressってブログじゃないの?
WordPressってブログじゃないの?
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
Destacado
HTML5とは何か? - 芸大 Webデザイン演習B
HTML5とは何か? - 芸大 Webデザイン演習B
Atsushi Tadokoro
WordPressで企業サイトのテーマを作る
WordPressで企業サイトのテーマを作る
Muyuu Fujita
WordPress 多言語化プラグインqTranslateの紹介
WordPress 多言語化プラグインqTranslateの紹介
Takashi Uemura
ベジェ再入門
ベジェ再入門
swwwitch inc.
Oasis Interior Construction Profile current March 2016
Oasis Interior Construction Profile current March 2016
David Karim
ライセンスを理解してますか?知っておきたいWordPressとGPLライセンス
ライセンスを理解してますか?知っておきたいWordPressとGPLライセンス
Jun Nogata
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみた
Eigoro Yamamura
押さえておきたいサーバーセキュリティ
押さえておきたいサーバーセキュリティ
Takahisa Iwamoto
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
Tsutomu Sogitani
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
Destacado
(10)
HTML5とは何か? - 芸大 Webデザイン演習B
HTML5とは何か? - 芸大 Webデザイン演習B
WordPressで企業サイトのテーマを作る
WordPressで企業サイトのテーマを作る
WordPress 多言語化プラグインqTranslateの紹介
WordPress 多言語化プラグインqTranslateの紹介
ベジェ再入門
ベジェ再入門
Oasis Interior Construction Profile current March 2016
Oasis Interior Construction Profile current March 2016
ライセンスを理解してますか?知っておきたいWordPressとGPLライセンス
ライセンスを理解してますか?知っておきたいWordPressとGPLライセンス
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみた
押さえておきたいサーバーセキュリティ
押さえておきたいサーバーセキュリティ
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Similar a Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Takashi Uemura
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまで
Takashi Uemura
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
hokori matu
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
Takashi Uemura
WordPress と Bootstrap
WordPress と Bootstrap
株式会社ガリレオ(開発グループ)
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
Takashi Uemura
Wp html5
Wp html5
regret raym
WordBech Osaka No.28
WordBech Osaka No.28
Kite Koga
WordBeach @kurudrive
WordBeach @kurudrive
Hidekazu Ishikawa
WordPressとjQuery
WordPressとjQuery
Seto Takahiro
WordPressで投稿記事情報の取得方法
WordPressで投稿記事情報の取得方法
regret raym
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya
tamotsu toyoda
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
Hitsuji
WordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshop
takashi ono
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Miho Nakano
第2回こけむさズword press部
第2回こけむさズword press部
Yuki Suzuki
CSS Nite in Matsuyama vol.1 - session 4
CSS Nite in Matsuyama vol.1 - session 4
arisu yano
Word press 3.5RC2 - パーフェクト functions.php -
Word press 3.5RC2 - パーフェクト functions.php -
BREN
WordPressをこれから始める人のためのテーマ講座
WordPressをこれから始める人のためのテーマ講座
Takami Kazuya
Css Nite Word Press
Css Nite Word Press
Web nist
Similar a Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
(20)
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまで
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPress と Bootstrap
WordPress と Bootstrap
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
Wp html5
Wp html5
WordBech Osaka No.28
WordBech Osaka No.28
WordBeach @kurudrive
WordBeach @kurudrive
WordPressとjQuery
WordPressとjQuery
WordPressで投稿記事情報の取得方法
WordPressで投稿記事情報の取得方法
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
WordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshop
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
第2回こけむさズword press部
第2回こけむさズword press部
CSS Nite in Matsuyama vol.1 - session 4
CSS Nite in Matsuyama vol.1 - session 4
Word press 3.5RC2 - パーフェクト functions.php -
Word press 3.5RC2 - パーフェクト functions.php -
WordPressをこれから始める人のためのテーマ講座
WordPressをこれから始める人のためのテーマ講座
Css Nite Word Press
Css Nite Word Press
Más de タカシ キタジマ
Habakiri advent calendar 2015 総まとめ!
Habakiri advent calendar 2015 総まとめ!
タカシ キタジマ
WordCamp Kansai 2015 CI ハンズオン
WordCamp Kansai 2015 CI ハンズオン
タカシ キタジマ
2014年の振り返り WordPress関連の動向・コミュニティ活動など - WordBench長崎 08
2014年の振り返り WordPress関連の動向・コミュニティ活動など - WordBench長崎 08
タカシ キタジマ
Advanced Custom Fields が重すぎると感じるあなたへ
Advanced Custom Fields が重すぎると感じるあなたへ
タカシ キタジマ
これが長崎生まれ長崎育ち!スーパーお問い合わせフォーム MW WP Form だ!+ α
これが長崎生まれ長崎育ち!スーパーお問い合わせフォーム MW WP Form だ!+ α
タカシ キタジマ
Mw wp formについてss
Mw wp formについてss
タカシ キタジマ
Más de タカシ キタジマ
(6)
Habakiri advent calendar 2015 総まとめ!
Habakiri advent calendar 2015 総まとめ!
WordCamp Kansai 2015 CI ハンズオン
WordCamp Kansai 2015 CI ハンズオン
2014年の振り返り WordPress関連の動向・コミュニティ活動など - WordBench長崎 08
2014年の振り返り WordPress関連の動向・コミュニティ活動など - WordBench長崎 08
Advanced Custom Fields が重すぎると感じるあなたへ
Advanced Custom Fields が重すぎると感じるあなたへ
これが長崎生まれ長崎育ち!スーパーお問い合わせフォーム MW WP Form だ!+ α
これが長崎生まれ長崎育ち!スーパーお問い合わせフォーム MW WP Form だ!+ α
Mw wp formについてss
Mw wp formについてss
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
1.
オリジナルテーマで学ぶWordPressの基本 2013.9.14 WordBench長崎 勉強会01 Thanks @Studio_Neco 13年9月14日土曜日
2.
北島 卓 @inc2734 浦川 公伸 @uratti5 隈本
中通 @mayoibi@t__kuma 主催 13年9月14日土曜日
3.
テーマの作成に入る前に… 1.ダッシュボード > プラグイン WP
Multibyte Patch を有効化 2.ダッシュボード > 設定 > パーマリンク設定 カスタム構造:/blog/%year%/%monthnum%/%day%/%post_id%/ 3.ダッシュボード > 固定ページ トップページ用ページ作成(タイトル:ホーム、スラッグ:home) ブログトップページ用ページ作成(タイトル:ブログ、スラッグ:blog) 4.ダッシュボード > 設定 > 表示設定 > フロントページの設定 フロントページ:ホーム 投稿ページ:ブログ 5.ダッシュボード > 設定 > メディア設定 中サイズ:幅の上限 300px(任意) 高さの上限 9999px 大サイズ:幅の上限 (ページ幅) 高さの上限 9999px 6.ダッシュボード > プラグイン > 新規追加 PS Disable Auto Formatting をインストール、有効化 13年9月14日土曜日
4.
テーマとは ・ サイトデザインの「着せ替え」を行うもの。 ・ 複数のテンプレートファイルから構成されてる。 ・
自分でオリジナルのテーマを作ることもできるし、 WordPressの管理画面やテーマディレクトリからダウンロードする こともできる。 http://wordpress.org/themes/ ・ /PATH/TO/wp-content/themes/テーマ名 としてディレクトリを作 ることでテーマとして利用できるようになります。 13年9月14日土曜日
5.
テーマの最小構成 ・ WordPressのテンプレートは「階層」をもっている。 (例えばカテゴリーページの場合はcategory.phpが使用されるが、 無い場合はarchive.php、それも無い場合はindex.phpが使われる) ・ 最小構成は下記の2ファイル style.css
- テーマを定義する index.php - メインテンプレート。 各テンプレートが無い場合に最終的に使用される。 13年9月14日土曜日
6.
style.cssによるテーマ定義 ・ style.cssのはじめに下記のコメント形式でコメントを書くとテーマ として認識されるようになる。 /* Theme Name:
Twenty Ten Theme URI: http://wordpress.org/ Description: The 2010 default theme for WordPress. Author: wordpressdotorg Author URI: http://wordpress.org/ Version: 1.0 Tags: black, editor-style License: GPL2 License URI: license.txt General comments (optional). */ 13年9月14日土曜日
7.
テンプレート階層について ・http://codex.wordpress.org/images/1/18/ Template_Hierarchy.png 13年9月14日土曜日
8.
今回のデモサイトのテンプレート構成 ・ 404.php - 404ページ ・
archive-news.php - 新着情報の一覧ページ ・ comments.php - コメントテンプレート ・ editor-style.css - 記事入力欄用スタイルシート ・ footer.php - フッターテンプレート ・ front-page.php - トップページ ・ functions.php - 各種設定や関数定義 ・ header.php - ヘッダーテンプレート ・ index.php - メインテンプレート(今回はブログの一覧ページで使用) ・ license.txt - ライセンス情報 ・ page.php - 固定ページ ・ screenshot.png - 管理画面で表示するスクリーンショット ・ sidebar.php - サイドバーテンプレート ・ single-news.php - 新着情報の詳細ページ ・ single.php - ブログの詳細ページ ・ style.css - テーマ定義(/css/内のcssファイルをimport) 13年9月14日土曜日
9.
今回はこんな感じでファイルを分割 <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" xmlns:og="http://ogp.me/ns#" " xmlns:fb="http://www.facebook.com/2008/fbml"> <head> ... </head> <body class="home"> <div id="container"> " <div id="header"> ... " <!-- end #header --></div> " <div id="contents"> " " <div class="content"> " " " <div id="main"> " " " " ... " " " " ... " " " " ... " " " " ... " " " " ... " " " " ... " " " <!-- end #main --></div> " " " <div id="sub"> " " " " ... " " " <!-- end #sub --></div> " " <!-- end .content --></div> " <!-- end #contents --></div> " <div id="footer"> " " ... " <!-- end #footer --></div> <!-- end #container --></div> </body> </html> header.php sidebar.php footer.php front-page.php とか page.php とか 13年9月14日土曜日
10.
header.php を作ってみよう ・ wp_head(); -
必須。主にプラグイン等が必要なjsや cssを出力するのに利用される ・ wp_title( '»', false, 'right' ); - ページタイトル + 区切り文字を返す ・ bloginfo( 'name' ); - サイト名を出力 ・ body_class(); - ページに応じてclassを出力。bodyタグに 記述する ・ get_stylesheet_uri(); - style.cssのhttpパスを返す ・ get_stylesheet_directory_uri(); - テーマディレクトリのhttpパスを返す ・ home_url(); - サイトURLを返す。引数に、後に続くパスを 指定可能(/news/とか) ・ is_front_page() - トップページの場合に true を返す ・ get_archive_title(); - アーカイブタイトル(ページが属するカテゴ リ、ページ名)を返す( functions.phpに定義) ・ bcn_display(); - パンくずリストを表示 (プラグインBread Crumb NavXT使用) ・ <?php global $template; echo basename( $template, '.php' ); ?>.php - 使用テンプレート名を返す 13年9月14日土曜日
11.
header.php を作ってみよう ◎タイトル <title>新着情報 |
Web Paradice Creative</title> ! <title><?php echo wp_title( '|', false, 'right' ); ?><?php bloginfo( 'name' ); ?></title> ◎JS・CSSへのパス <script type="text/javascript" src="../js/main.js"></script> ! <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/main.js"></ script> ※jQuery は functions.php で WordPress 組み込みの jQuery の読み込み指定がしてあるので、header.php に記述は不 要です。 ◎ロゴ <a href="./index.html”><img src=”./images/common/logo.gif" alt="Web Paradice Creative" /></a> ! <a href="<?php echo home_url(); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/ images/common/logo.gif" alt="Web Paradice Creative" /></a> 13年9月14日土曜日
12.
header.php を作ってみよう ◎メインビジュアル <div id="mainVisual"> "
<?php if ( is_front_page() ) : ?> " <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/home/main.gif" alt="" /> " <?php else : ?> " <h2><?php echo get_archive_title(); ?></h2> " <div id="topicPath"> " " <p> " " " <?php bcn_display(); ?> " " </p> " <!-- end #topicPath --></div> " <div id="introduction"> " " <p> " " " このページの投稿タイプは <?php echo get_post_type(); ?> です。<br /> " " " テンプレートファイルは <?php global $template; echo basename( $template, '.php' ); ?>.php を使用しています。 " " </p> " <!-- end #introduction --></div> " <?php endif; ?> <!-- end #mainVisual --></div> ※1つの header.php でトップページとそれ以外のページの2種類の mainVisual を表示させるため、is_front_page() でト ップページかどうかを判別させる。 13年9月14日土曜日
13.
sidebar.php を作ってみよう ・ ブログ(投稿タイプ
post)のときだけウィジェットを有効にして新 着記事とカテゴリー一覧を表示させる。 ※今回はfunctions.phpで sidebar-widget-area というウィジェットエ リアを定義済みです。 ・ get_post_type() - 現在の投稿タイプ名を返す ・ is_active_sidebar( 'sidebar-widget-area' ) - ウィジェットが有効ならtrue(引数はウィジェットエリア名) ・ dynamic_sidebar( 'sidebar-widget-area' ); - ウィジェットを表示(引数はウィジェットリエア名) 13年9月14日土曜日
14.
sidebar.php を作ってみよう ◎ウィジェット <div class="widget-container"> "
<dl> " " <dt class="widget-title">LATEST ENTRIES</dt> " " <dd class="widget-content"> " " " <ul> " " " " <li><a href="./single.html">ブログ記事のタイトルが入ります。</a></li> " " " " <li><a href="./single.html">ブログ記事のタイトルが入ります。</a></li> " " " " <li><a href="./single.html">ブログ記事のタイトルが入ります。</a></li> " " " " <li><a href="./single.html">ブログ記事のタイトルが入ります。</a></li> " " " " <li><a href="./single.html">ブログ記事のタイトルが入ります。</a></li> " " " </ul> " " </dd> <!-- end .widget-container --></div> ! <?php if ( get_post_type() == 'post' ) { " if ( is_active_sidebar( 'sidebar-widget-area' ) ) " " dynamic_sidebar( 'sidebar-widget-area' ); } ?> ※ブログの LATEST ENTRIES と CATEGORIES はウィジェットで設置する。ブログ以外ではウィジェットは不要なので、 get_post_type() == ‘post’ で 投稿タイプが post ( = ブログ ) のときだけウィジェットを表示させる。 13年9月14日土曜日
15.
footer.php を作ってみよう 13年9月14日土曜日
16.
トップページ(front-page.php) を作ってみよう ・ トップページには
新着情報 と ブログ の新着記事を表示させる。 新着情報は「カスタム投稿タイプ」機能を使って作成する。 ・ とりあえず、これは後回しにしてhtmlを表示できるところまで…。 ・ get_header(); - header.php をインクルード ・ get_sidebar(); - sidebar.php をインクルード ・ get_footer(); - footer.php をインクルード ・ post_class(); - 投稿情報に応じてclassを出力。エントリー全体をz 囲むdivに記述する。 13年9月14日土曜日
17.
page.php(固定ページ) を作ってみよう ・ 「固定ページ」はブログや新着情報などのようにフロー型の コンテンツではない静的なコンテンツのこと。 【例】「会社概要」「お問い合わせ」 ・
post_class() - ページに応じてclassを出力。エントリー全体を囲むタグに記述する。 ・ the_content() - 管理画面で入力した記事本文を出力する。 13年9月14日土曜日
18.
page.php(固定ページ) を作ってみよう <?php get_header();
?> <?php while ( have_posts() ) : the_post(); ?> <div <?php post_class(); ?>> " <div class="entry-content"> " " <?php the_content(); ?> " <!-- end .entry-content --></div> <!-- .hentry --></div> <?php endwhile; ?> <?php get_sidebar(); ?> <?php get_footer(); ?> 投稿情報がある間、ループ ※固定ページの場合、投稿情報は1つだけなので、実際はループさせなくても良いのですが、 archive系のテンプレートと記述を統一させたほうがわかりやすいのでループさせています。 ※投稿情報が1つなので、the_post() で投稿情報を更新する必要も実際は無いです。 投稿情報をグローバル変数にセット 管理画面で入力した本文を出力 13年9月14日土曜日
19.
ブログ(index.php) を作ってみよう ・ has_post_thumbnail() -
アイキャッチ画像が設定されている場合 true を返す。 ・ the_post_thumbnail( 'サイズ名' ); - アイキャッチ画像を出力。引数に サイズ名を指定可能。 サイズは functions.php で追加可能。今回は 「blogThumbnail」というサイズ名を使用。 ・ the_time( ‘フォーマット’ ) - 投稿日時を表示。引数は php の date関数と 同じフォーマット。 ・ the_permalink(); - 記事へのパーマリンクを表示。 ・ the_title(); - 記事タイトルを表示。 ・ the_category( '区切り文字' ); - 記事に設定されたカテゴリーを 区切り文字で区切って表示 ・ comments_link(); - 詳細ページコメントエリアへのURLを表示 (http://hoge.com/xxx/#comments) ・ comments_number( '0', '1', '%' ); - コメント数を表示 (引数は、0のとき、1のとき、2以上のとき) ・ the_excerpt(); - 抜粋を表示 13年9月14日土曜日
20.
ブログ詳細ページ(single.php) を作ってみよう ・ comments_template(
'', true ); - comments.php を読み込む ・ ほとんど一覧ページ(index.php)と同じなので上手く流用して 作成! 13年9月14日土曜日
21.
新着情報を作ってみよう ・ 新着情報はカスタム投稿タイプ「news」を作成して使用。 ・ カスタム投稿タイプはプラグイン「Custom
Post Type UI」で作成 できる。 ・ テンプレートは下記の2つ。 archive-news.php - 一覧ページ single-news.php - 詳細ページ ・ 上記ファイルが無い場合は index.php、single.php が使用されます。 ・ ブログのときとほとんど同じなので上手く流用して作成! 13年9月14日土曜日
22.
トップページに新着情報を表示しよう <?php $posts_news = get_posts(
array( 'post_type' => 'news', 'posts_per_page' => 3 ) ); ?> <div id="news"> " <h2><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/home/news/lbl.gif" alt="News" /></h2> " <?php if ( !empty( $posts_news ) ) : ?> " <ul> " " <?php foreach ( $posts_news as $post ) : setup_postdata( $post ); ?> " " <li> " " " <dl> " " " " <dt><?php the_time( 'Y.m.d' ); ?></dt> " " " " <dd><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></dd> " " " </dl> " " </li> " " <?php endforeach; wp_reset_postdata(); ?> " </ul> " <p class="more"> " " <a href="<?php echo home_url( '/news/' ); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/common/more.gif" alt="more" /></a> " </p> " <?php else : ?> " <p> " " 現在、新着情報はありません。 " </p> " <?php endif; ?> <!-- end #news --></div> 13年9月14日土曜日
23.
トップページにブログを表示しよう <?php $posts_blog = get_posts(
array( " 'post_type' => 'post', " 'posts_per_page' => 5 ) ); ?> <div id="blog"> " <h2><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/home/blog/lbl.gif" alt="Blog" /></h2> " <?php if ( !empty( $posts_blog ) ) : ?> " <ul> " " <?php foreach ( $posts_blog as $post ) : setup_postdata( $post ); ?> " " <li> " " " <a href="<?php the_permalink(); ?>"> " " " " <span class="thumbnail"> " " " " " <?php if ( has_post_thumbnail() ) : ?> " " " " " <?php the_post_thumbnail(); ?> " " " " " <?php else : ?> " " " " " <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/home/blog/no-photo.gif" alt="" /> " " " " " <?php endif; ?> " " " " " <span class="title"><?php the_title(); ?></span> " " " " </span> " " " " <span class="date"><?php the_time( 'Y.m.d' ); ?></span> " " " </a> " " </li> " " <li> " " " <a href="<?php echo home_url( '/blog/' ); ?>"> " " " " <span class="thumbnail"> " " " " " <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/home/blog/more.gif" alt="more" /> " " " " </span> " " " </a> " " </li> " " <?php endforeach; wp_reset_postdata(); ?> " </ul> " <?php else : ?> " <p> " " 現在、表示できるブログ記事はありません。 " </p> " <?php endif; ?> <!-- end #blog --></div> 13年9月14日土曜日
24.
お問い合わせページを作ろう ・ 多機能フォームプラグイン「MW WP
Form」を使います! ✓ ショートコードを使用したフォーム生成 ✓ 確認画面が表示可能 ✓ 同一URL・個別URLでの画面変遷が可能 ✓ 豊富なバリデーションルール ・ マニュアル ⇒ http://2inc.org/manual-mw-wp-form/ ・ 見たほうが早いと思うのでデモります! 13年9月14日土曜日
25.
その他 ・ パンくずリストの表示 ⇒ Bread
Crumb NavXT ・ カスタム投稿タイプのパーマリンク設定 ⇒ Custom Post Type Permalinks ・ JSの読み込みは wp_enqueue_script が便利 ⇒ wp_enqueue_script( ‘名前’, httpパス, array( 必要jsの名前 ), バージョン, フッター出力するか ); 13年9月14日土曜日
26.
今回の使用プラグインまとめ ・ パンくずリストの表示 ⇒ Bread
Crumb NavXT ・ カスタム投稿タイプのパーマリンク設定 ⇒ Custom Post Type Permalinks ・ カスタム投稿タイプを作成 ⇒ Custom Post Type UI ・ フォーム作成 ⇒ MW WP Form ・ HTMLモード利用時のオートフォーマッティング回避 ⇒ PS Disable Auto Formatting ・ 日本語版 WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化 ⇒ WP Multibyte Patch 13年9月14日土曜日
27.
参考リンク ・ まず最初に学ぶべきWordPressの本質 http://hijiriworld.com/web/wp-essence/ ・ query_postsを捨てよ、pre_get_postsを使おう http://notnil-creative.com/blog/archives/1688 ・
テンプレート階層ハイパーリンク http://wpdocs.sourceforge.jp/テンプレート階層 ・ Plugin API/Action Reference http://codex.wordpress.org/Plugin_API/Action_Reference ・ Filter Reference http://codex.wordpress.org/Plugin_API/Filter_Reference 13年9月14日土曜日
Descargar ahora