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.

WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park

28,723 views

Published on

WordCamp KOBE2011でお話させていただいた、「初めてのWordPress!オリジナルのテーマでブログを作る方法」についてのスライドです

  • かわいらしくわかりやすい内容でした。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park

  1. 1. ! 初めての WordPress オリジナルのテーマで ブログを作る方法 KOBE 2011初めて ! のWordPress オリジナルのテーマで ブログを作る方法 対象者: html+css はわかるけど WordPress は初めて!な方 @parkn_park
  2. 2. ! 初めての WordPress 今日お話しすること オリジナルのテーマで ブログを作る方法自己紹介WEBデザイナーの私がWordPressをおススメする理由WordPressでオリジナルテーマのブログ制作方法 ブログの構成を考える デザイン~コーディング オリジナルのテーマを制作していく方法 ブログでよく使われるプラグインのご紹介
  3. 3. ! 初めての WordPress 自己紹介 オリジナルのテーマで ブログを作る方法伊藤 志歩( いとう しほ)エースユニオンデザイン所属 WEB デザイナーWordPress を使ったWebサイト制作Parkn’Park (http://parkn-park.com) というブログで日々のWeb 制作で思うことやメモをつづってます。twitter @parkn_parkFacebookページ Parkn Park
  4. 4. Bデザイナーの私 が WE 初めての WordPress ! WordPressをおススメする理由 オリジナルのテーマで ブログを作る方法 PHPもよくわからないまま、 WordPressのブログ制作に挑戦 わからないなりにもなんとか なりました! WordPressは今大人気なので、ちょっと調べると情報がモリモリです ! 上 級者さん上級者さん からたくさん情報を得まし う ょ! 初心者
  5. 5. Bデザイナーの私 が WE 初めての WordPress ! WordPressをおススメする理由 オリジナルのテーマで ブログを作る方法 Codex http://wpdocs.sourceforge.jp/ 公式オンラインマニュアル上級者さん http://ja.forums.wordpress.org/ 初心者 初心者 WordPressに関する質問や話題を話し合う場所 初心者 WordPressユーザーと開発者が、 その普及と 情報交換を目的として一堂に会する 初心者 お祭り的イベント 初心者 初心者 初心者 初心者 初心者
  6. 6. Bデザイナーの私 が WE 初めての WordPress !WordPressをおススメする理由 オリジナルのテーマで ブログを作る方法
  7. 7. Bデザイナーの私 が WE 初めての WordPress ! WordPressをおススメする理由 オリジナルのテーマで ブログを作る方法PHP知識が浅くても、 WordPressのおかげで動的なページを制作できるようになり !ますWordPressに慣れることで逆にPHPがわかるようになる!まずはWordPressでブログを作ってみるといい練習方法になります! はじめての WordPressなので「最低限必要なファイ ル数だけ」 でブログを作る方法をご紹介!
  8. 8. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress ブログの構成を考える オリジナルのテーマで ブログを作る方法内容、目的、ターゲッ  etc… トじゃあ、どんなコンテンツやページが必要なの??いろんな既存の WordPressブログを見て、構成とか参考にさせていただいてます。 みーれーば。 みーせーて。 上級者さん 初心者
  9. 9. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress ブログの構成を考える オリジナルのテーマで ブログを作る方法「投稿」「ページ」 と の違い WordPressでは、 コンテンツを作成する時に、 「投稿」 または 「ページ」のいずれかの方法でページ作成します。 管理画面: 「投稿」 管理画面: 「ページ」 カテゴリー ページ属性 タグ
  10. 10. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress ブログの構成を考える オリジナルのテーマで ブログを作る方法投 稿 「ブログ」向きの機能 ページ 半固定的な情報の掲載 向きの機能 カテゴリー A 子カテゴリー a このサイトについて 子カテゴリー b 子カテゴリー c お問い合わせ カテゴリー B プロフィール 子カテゴリー d 子カテゴリー e 子カテゴリー f「投稿」「ページ」 と それぞれどういったページを作るか構成を考える
  11. 11. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress ブログの構成を考える オリジナルのテーマで ブログを作る方法 最近、とても良く見かける、ブログの構成投 稿 ページトップページ このサイトについて最新記事5件表示 タイトルと お問い合わせ カテゴリー 個別記事 記事の導入のみ同一カテゴリー5件表示 タ グ同一タグ5件表示
  12. 12. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPressブログの構成を考える オリジナルのテーマで ブログを作る方法 イメージ画像タイトル記事抜粋 続きを読む → 個別記事のページへ
  13. 13. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress デザイン~コーディング オリジナルのテーマで ブログを作る方法 実際デザインが必要なのはこれだけ! 必要が あれば・・投 稿 ページ ・ 1トップページ 3最新記事5件表示 2 このサイトについて カテゴリー 個別記事 お問い合わせ 4同一カテゴリー5件表示 タ グ同一タグ5件表示
  14. 14. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress デザイン~コーディング オリジナルのテーマで ブログを作る方法最新記事5件表示のデザイン 個別記事のデザイン
  15. 15. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPressデザイン~コーディング オリジナルのテーマで ブログを作る方法 右カラムにリンク設置。 カテゴリーに絞られた、 最新5件表示ページへリンク
  16. 16. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPressデザイン~コーディング オリジナルのテーマで ブログを作る方法 右カラムにリンク設置。 タグで絞られた、 最新5件表示ページへリンク
  17. 17. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPressデザイン~コーディング オリジナルのテーマで ブログを作る方法 訪問者が見やすいスタイルを 段落ごとに十分な余白 フォント色、 フォントサイズ、行間 大見出し 小見出し リンク色 強調文字 画像配置時のイメージ
  18. 18. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress デザイン~コーディング オリジナルのテーマで ブログを作る方法訪問者に長時間見てもらうために 1つの記事の最後には、 関連する記事(カテゴリーやタグなどで設定)へのリンク 人気のある記事をランキングを表示訪問者に再び訪れてもらうために RSSやtwitterアイコンを設置アフィリエイトを考えているなら 効果的な広告の位置
  19. 19. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress デザイン~コーディング オリジナルのテーマで ブログを作る方法あとからWordPressの機能を加えていきます。まずはWordPressのことは考えずにモリモリくんでください。同階層に php php css index.php single.php style.css images
  20. 20. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress WordPress をインストール オリジナルのテーマで ブログを作る方法サーバー選びについてWordPress を設置するには PHP・MySQL が使えるサーバスペースが必要ですが、レンタルサーバによって特徴・制約などがあります。 スメ初心者さんにおス WordPress を自動インストールできるサーバー 初心者 参考サイ http://wpdocs.sourceforge.jp/レンタルサーバ情報 ト
  21. 21. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress WordPress をインストール オリジナルのテーマで ブログを作る方法WordPress 管理画面 サイト側
  22. 22. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress オリジナルのテーマフォルダを編集 オリジナルのテーマで ブログを作る方法 twentyeleven WordPress wp-admin languages wp-content plugins twentyten php ・・ ・ wp-includes themes index.php がいっぱいファイル おえーーっっ php index.php 初心者 ・ ・ ・ WordPress→wp-content→themes
  23. 23. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress オリジナルのテーマフォルダを編集 オリジナルのテーマで ブログを作る方法 twentyeleven WordPress wp-admin languages wp-content plugins twentyten するとりあえず編集 mes のファイルは the php イジョウブ中だけなのでダ wp-includes themes index.php php index.php nails-park 上級者さん ・ ・ twentyeleven と twentyten は参考になる、先輩」 ・ 「 テーマです。 themesフォルダの中に自分の作ったオリジナルテーマの フォルダを入れます。
  24. 24. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress オリジナルのテーマフォルダを編集 オリジナルのテーマで ブログを作る方法ダッシュボード→外観→テーマ twentyten の style.css /* Theme Name: テーマの名前 Theme URI: テーマの URL Description: テーマの説明 Author: テーマの制作者 Version: テーマのバージョン ・ ・ ・ */ を参考に style.css の編集twentyten 自分のオリジナルテーマの style.css にペロッとコピペして内容を修正します。
  25. 25. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress オリジナルのテーマフォルダを編集 オリジナルのテーマで ブログを作る方法 オリジナルテーマのstyle.cssの編集後、ファイルをアップして 管理画面からテーマを有効化すると ・ ・・ がーんっっ ・・なん か変・ これからパスの修正すると ちゃんと表示されるよ 初心者 上級者さん
  26. 26. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress オリジナルのテーマフォルダを編集 オリジナルのテーマで ブログを作る方法テーマを編集していく流れ 1 パスを書き換える 2 ページを分解する 3 ループを理解する 4 テンプレートタグを埋め込む 5 必要ファイルを作成・複製するこんな感じです。
  27. 27. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress オリジナルのテーマフォルダを編集 オリジナルのテーマで ブログを作る方法パスを書き換えるWordPressの変数を使って画像やcssのパスを絶対パスに書き換えます。※head内の、style.cssの読み込みだけちょっと書き方違う… の中に、 twentyten たくさん記載があるので、 コピペするといいですよ。
  28. 28. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress オリジナルのテーマフォルダを編集 オリジナルのテーマで ブログを作る方法ページを分解する php php php php
  29. 29. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress オリジナルのテーマフォルダを編集 オリジナルのテーマで ブログを作る方法ページを分解する は、 「header.php よみこめー」 っていってるだけ。ずらーっと長かったソースが あー、すっきり!
  30. 30. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress オリジナルのテーマフォルダを編集 オリジナルのテーマで ブログを作る方法ループを理解する
  31. 31. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress オリジナルのテーマフォルダを編集 オリジナルのテーマで ブログを作る方法 テンプレートタグを埋め込む 日付やらタイトルやら、 どうやって登録内容を表示させるのーー??初心者
  32. 32. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress オリジナルのテーマフォルダを編集 オリジナルのテーマで ブログを作る方法テンプレートタグを埋め込む ちゃんと答えが載ってます! 書、 WordPress の教科 Codexで確認! ! Codex
  33. 33. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress オリジナルのテーマフォルダを編集 オリジナルのテーマで ブログを作る方法 必要ファイルを作成・複製する twentyten の中は テンプレートファイルがたくさん入ってます。 php php php php php php php php php php php php php php php php ・・ ・ がいっぱいファイル おえーーっっ php php php php css css css css もっともっと。。 。 初心者 twentyten
  34. 34. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress オリジナルのテーマフォルダを編集 オリジナルのテーマで ブログを作る方法 必要ファイルを作成・複製する投 稿 ページトップページ このサイトについて最新記事5件表示 タイトルと お問い合わせ カテゴリー 個別記事 記事の導入のみ同一カテゴリー5件表示 タ グ同一タグ5件表示
  35. 35. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress オリジナルのテーマフォルダを編集 オリジナルのテーマで ブログを作る方法 必要ファイルを作成・複製する投 稿 ページ最新記事5件表示 タイトルと 記事の導入のみ同一カテゴリー5件表示同一タグ5件表示 他にも色んな す! ファイルがありま これも Codexに のってます! ! Codex
  36. 36. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress オリジナルのテーマフォルダを編集 オリジナルのテーマで ブログを作る方法必要ファイルを作成・複製する php php php php php php php php php php nails-park
  37. 37. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPressオリジナルのテーマフォルダを編集 オリジナルのテーマで ブログを作る方法 こんな感じで、作っていきました。 初心者
  38. 38. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress ブログで便利なプラグインのご紹介 オリジナルのテーマで ブログを作る方法最後にブログで使うと便利なプラグインをご紹介します。プラグインは管理画面から簡単にインストール可能です。
  39. 39. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress ブログで便利なプラグインのご紹介 オリジナルのテーマで ブログを作る方法Contact Form 7プラグインを使うことで簡単にお問い合わせフォームを設置できます。
  40. 40. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress ブログで便利なプラグインのご紹介 オリジナルのテーマで ブログを作る方法WPtouchスマートフォンに最適化させるプラグイン。 Softbank 12:34 PM
  41. 41. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress ブログで便利なプラグインのご紹介 オリジナルのテーマで ブログを作る方法SexyBookmarksぴょこっとでてくるデザインがかわいい。WP Social Bookmarking Light国内 SNS に多く対応しています。
  42. 42. WordPressでオリジナルテーマのブログ制作方法 ! 初めての WordPress ブログで便利なプラグインのご紹介 オリジナルのテーマで ブログを作る方法WP-PageNaviページ番号を並べたナビゲーションリンクを表示させる。オリジナルの状態カスタマイズ可能
  43. 43. ! 初めての WordPress オリジナルのテーマで ブログを作る方法以上です!下手くそでごめんなさい。。 。聞いて下さった方々、ありがとうございました。 @parkn_park

×