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.

Wb_kyoto_haruna1221

1,008 views

Published on

WordBench京都
実例で紹介!子テーマを使ったデザインTips

Published in: Design
  • Login to see the comments

  • Be the first to like this

Wb_kyoto_haruna1221

  1. 1. 実例で紹介!子テーマを使ったデザインTips 12012.7 .22 WordBench京都 @haruna122
  2. 2. @haruna1221京都でWEB/DTPデザイナー。ぴんくな人。iPhoneとかPinkが好き。趣味はカメラとダーツ。PENTAXピンクのK-rDiana F+/mini
  3. 3. goryugo.com
  4. 4. #wbkyoto
  5. 5. 平凡なWordPressテーマでオリジナリティがなく #wbkyoto背景やヘッダーが無彩色で地味
  6. 6. #wbkyoto
  7. 7. テーマのデザイン1.参考サイトデザインをクライアントと共有2.クライアントの希望をもとに Photoshopでデザイン3.psdデータから必要なパーツを書き出し4.WordPress Twenty Elevenをベースに 子テーマを作成
  8. 8. クライアントとのデザイン共有FirefoxのアドオンPearl Crescent Page Saver でデザインを保存して、Evernoteのノート作成→共有
  9. 9. 子テーマって?WordPressの子テーマとは親テーマを元に機能やデザインの調整がとても簡単にできるテーマのこと。親テーマにはまったく手を加えないので、親テーマがアップデートされた場合も子テーマは変更されない。
  10. 10. 子テーマの作り方wp-content > themes にフォルダ作成style.css @charset "utf-8"; /* Theme Name: goryugocom 子テーマの名前※必須 Theme URI: http: //example.com/ 子テーマのWEBページ Description: Twenty Eleven の子テーマ テーマの説明 Author: goryugo テーマの作者名 Author URI: http: //goryugo.com/ 作者のWEBページ Template: twentyeleven 親テーマのディレクトリ名 ※必須 Version: 0.1.0 バージョン */ @import url(../twentyeleven/style.css);
  11. 11. 子テーマの作り方WordPressのダッシュボード内でテーマが選択できるようになる
  12. 12. テンプレートファイル1. content-page.php (content-page.php)2. content-single.php (content-single.php)3. コメント (comments.php)4. サイドバー (sidebar.php)5. フッター (footer.php)6. ヘッダー (header.php)7. メインインデックスのテンプレート (index.php)8. 単一記事の投稿 (single.php)9. 固定ページテンプレート (page.php)
  13. 13. 本日のまとめPearl Crescent Page Saver おすすめ! クリップデータを自動でEvernoteへEvernoteで共有するととても便利! 複数人との共有も可能子テーマを使って実装すると簡単!
  14. 14. @haruna1221 おしまい ご静聴ありがとうございました。 本日のスライドや参考URLなどは後日 http://inbox.sow-zow.comにて公開予定です。

×