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