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

！
初めての WordPress
オリジナルのテーマで
ブログを作る方法

KOBE 2011
初めて！
のWordPress

対象者： html＋css はわかるけど
WordPress は初めて！な方

@parkn_park

！
今日お話しすることオリジナルのテーマで

自己紹介

WEBデザイナーの私がWordPressをおススメする理由

WordPressでオリジナルテーマのブログ制作方法
ブログの構成を考える
デザイン～コーディング
オリジナルのテーマを制作していく方法
ブログでよく使われるプラグインのご紹介

！
自己紹介オリジナルのテーマで

伊藤志歩（いとうしほ）

エースユニオンデザイン所属 WEB デザイナー

WordPress を使ったWebサイト制作
Parkn’Park
（http://parkn-park.com）
というブログで
日々のWeb 制作で思うことやメモをつづってます。

twitter @parkn_park
Facebookページ Parkn' Park

Bデザイナーの私
が
WE 初めての WordPress
！
WordPressをおススメする理由オリジナルのテーマで

PHPもよくわからないまま、
WordPressのブログ制作に挑戦

わからないなりにもなんとか
なりました！

WordPressは今大人気なので、
ちょっと調べると情報がモリモリです！

上級者さん
上級者さんからたくさん情報を得ましう
ょ！初心者

が
！

Codex
http://wpdocs.sourceforge.jp/
公式オンラインマニュアル

上級者さん

http://ja.forums.wordpress.org/ 初心者
初心者
WordPressに関する質問や話題を話し合う場所

初心者
WordPressユーザーと開発者が、
その普及と
情報交換を目的として一堂に会する初心者
お祭り的イベント初心者

初心者
初心者

初心者
初心者

が
！

が
！

PHP知識が浅くても、
WordPressのおかげで
動的なページを制作できるようになり！ます

WordPressに慣れることで逆にPHPがわかるようになる！

まずはWordPressでブログを作ってみるといい練習方法になります！

はじめての WordPressなので
「最低限必要なファイル数だけ」でブログを作る方法をご紹介！

WordPressでオリジナルテーマのブログ制作方法！
ブログの構成を考えるオリジナルのテーマで

内容、目的、ターゲッ　etc…
ト

じゃあ、どんなコンテンツやページが必要なの？？

いろんな既存の WordPressブログを見て、
構成とか参考にさせていただいてます。
みーれーば。

みーせーて。

上級者さん

初心者


「投稿」「ページ」
との違い WordPressでは、
コンテンツを作成する時に、
「投稿」または「ページ」のいずれかの方法でページ作成します。

管理画面：
「投稿」管理画面：
「ページ」

カテゴリーページ属性

タグ


投稿「ブログ」向きの機能ページ半固定的な情報の掲載
向きの機能
カテゴリー A
子カテゴリー a このサイトについて
子カテゴリー b
子カテゴリー c お問い合わせ
カテゴリー B プロフィール
子カテゴリー d
子カテゴリー e
子カテゴリー f

「投稿」「ページ」
と
それぞれどういったページを作るか構成を考える


最近、とても良く見かける、ブログの構成

投稿ページ
トップページこのサイトについて
最新記事5件表示

タイトルとお問い合わせ
カテゴリー個別記事
記事の導入のみ
同一カテゴリー5件表示

タグ
同一タグ5件表示


イメージ画像

タイトル

記事抜粋

続きを読む → 個別記事のページへ

デザイン～コーディングオリジナルのテーマで

実際デザインが必要なのはこれだけ！

必要が
あれば・・
投稿ページ・
1
トップページ 3
最新記事5件表示 2 このサイトについて

カテゴリー個別記事お問い合わせ 4

タグ


最新記事5件表示のデザイン個別記事のデザイン


右カラムにリンク設置。
カテゴリーに絞られた、
最新5件表示ページへリンク


右カラムにリンク設置。
タグで絞られた、
最新5件表示ページへリンク


訪問者が見やすいスタイルを
段落ごとに十分な余白
フォント色、
フォントサイズ、行間
大見出し
小見出し
リンク色
強調文字
画像配置時のイメージ


訪問者に長時間見てもらうために
1つの記事の最後には、
関連する記事
（カテゴリーやタグなどで設定）へのリンク
人気のある記事をランキングを表示

訪問者に再び訪れてもらうために
RSSやtwitterアイコンを設置

アフィリエイトを考えているなら
効果的な広告の位置


あとからWordPressの機能を加えていきます。
まずはWordPressのことは考えずにモリモリくんでください。

同階層に

php php css
index.php single.php style.css images

WordPress をインストールオリジナルのテーマで

サーバー選びについて
WordPress を設置するには PHP・MySQL が使えるサーバスペースが必要ですが、
レンタルサーバによって特徴・制約などがあります。

スメ
初心者さんにおス
WordPress を自動インストールできるサーバー
初心者
参考サイ http://wpdocs.sourceforge.jp/レンタルサーバ情報
ト

WordPress をインストールオリジナルのテーマで

WordPress 管理画面サイト側

オリジナルのテーマフォルダを編集オリジナルのテーマで

twentyeleven
WordPress wp-admin languages

wp-content plugins twentyten

php
・・
・ wp-includes themes index.php
がいっぱい
ファイルおえーーっっ
php
index.php

初心者・
・
・
WordPress→wp-content→themes


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フォルダの中に自分の作ったオリジナルテーマの
フォルダを入れます。


ダッシュボード→外観→テーマ twentyten の style.css

/*
Theme Name: テーマの名前
Theme URI: テーマの URL
Description: テーマの説明
Author: テーマの制作者
Version: テーマのバージョン
・
・
・
*/

を参考に style.css の編集
twentyten
自分のオリジナルテーマの style.css にペロッとコピペして内容を修正します。


オリジナルテーマのstyle.cssの編集後、ファイルをアップして
管理画面からテーマを有効化すると・・・

がーんっっ
・・
なんか変・これからパスの修正すると
ちゃんと表示されるよ

初心者上級者さん


テーマを編集していく流れ

1　パスを書き換える

2　ページを分解する

3　ループを理解する

4　テンプレートタグを埋め込む

5　必要ファイルを作成・複製する

こんな感じです。


パスを書き換える
WordPressの変数を使って画像やcssのパスを絶対パスに書き換えます。

※head内の、style.cssの読み込みだけちょっと書き方違う…
の中に、
twentyten
たくさん記載があるので、
コピペするといいですよ。


ページを分解する

php

php
php

php


ページを分解する

は、
「header.php よみこめー」
っていってるだけ。

ずらーっと長かったソースがあー、すっきり！


ループを理解する


テンプレートタグを埋め込む

日付やらタイトルやら、
どうやって登録内容を表示させるのーー？？

初心者


テンプレートタグを埋め込む

ちゃんと答えが載ってます！

書、
WordPress の教科
Codexで確認！！

Codex


必要ファイルを作成・複製する

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


投稿ページ
トップページこのサイトについて

タイトルとお問い合わせ
カテゴリー個別記事

タグ


投稿ページ


タイトルと

同一タグ5件表示他にも色んな
す！
ファイルがありま
これも Codexに
のってます！！

Codex



php
php
php
php php
php php
php
php
php

nails-park


こんな感じで、作っていきました。

初心者

ブログで便利なプラグインのご紹介オリジナルのテーマで

最後にブログで使うと便利なプラグインをご紹介します。
プラグインは管理画面から簡単にインストール可能です。


Contact Form 7
プラグインを使うことで簡単にお問い合わせフォームを設置できます。


WPtouch
スマートフォンに最適化させるプラグイン。

Softbank 12:34 PM


SexyBookmarks
ぴょこっとでてくるデザインがかわいい。

WP Social Bookmarking Light
国内 SNS に多く対応しています。


WP-PageNavi
ページ番号を並べたナビゲーションリンクを表示させる。

オリジナルの状態

カスタマイズ可能

！

以上です！
下手くそでごめんなさい。。
。

聞いて下さった方々、
ありがとうございました。
@parkn_park

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (17)

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

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

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